Bumped version to 20220523.0

.github/ISSUE_TEMPLATE.md

@@ -51,7 +51,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 <!--
   Provide details about the versions you are using, which helps us reproducing
   and finding the issue quicker. Version information is found in the
-  Home Assistant frontend: Settings -> About.
+  Home Assistant frontend: Configuration -> Info.
 
   Browser version and operating system is important! Please try to replicate
   your issue in a different browser and be sure to include your findings.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -64,7 +64,7 @@ body:
       label: What version of Home Assistant Core has the issue?
       placeholder: core-
       description: >
-        Can be found in: [Settings -> About](https://my.home-assistant.io/redirect/info/).
+        Can be found in the Configuration panel -> Info.
   - type: input
     attributes:
       label: What was the last working version of Home Assistant Core?

.github/workflows/release.yaml

@@ -74,11 +74,33 @@ jobs:
           version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
-      - name: Build wheels
-        uses: home-assistant/wheels@2022.06.7
+      - name: Upload requirements.txt
+        uses: actions/upload-artifact@v2
         with:
-          abi: cp310
-          tag: musllinux_1_2
-          arch: amd64
+          name: requirements
+          path: ./requirements.txt
+
+  build-wheels:
+    name: Build wheels for ${{ matrix.arch }}
+    needs: wheels-init
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        arch: ["aarch64", "armhf", "armv7", "amd64", "i386"]
+        tag:
+          - "3.9-alpine3.14"
+    steps:
+      - name: Download requirements.txt
+        uses: actions/download-artifact@v2
+        with:
+          name: requirements
+
+      - name: Build wheels
+        uses: home-assistant/wheels@master
+        with:
+          tag: ${{ matrix.tag }}
+          arch: ${{ matrix.arch }}
+          wheels-host: ${{ secrets.WHEELS_HOST }}
           wheels-key: ${{ secrets.WHEELS_KEY }}
+          wheels-user: wheels
           requirements: "requirements.txt"

.vscode/tasks.json

@@ -181,7 +181,7 @@
     {
       "label": "Run HA Core for Supervisor in devcontainer",
       "type": "shell",
-      "command": "SUPERVISOR=${input:supervisorHost} SUPERVISOR_TOKEN=${input:supervisorToken} script/core",
+      "command": "HASSIO=${input:supervisorHost} HASSIO_TOKEN=${input:supervisorToken} script/core",
       "isBackground": true,
       "group": {
         "kind": "build",

build-scripts/env.js

@@ -26,8 +26,8 @@ module.exports = {
   },
   version() {
     const version = fs
-      .readFileSync(path.resolve(paths.polymer_dir, "pyproject.toml"), "utf8")
-      .match(/version\W+=\W"(\d{8}\.\d)"/);
+      .readFileSync(path.resolve(paths.polymer_dir, "setup.cfg"), "utf8")
+      .match(/version\W+=\W(\d{8}\.\d)/);
     if (!version) {
       throw Error("Version not found");
     }

build-scripts/gulp/gen-icons-json.js

@@ -156,12 +156,3 @@ gulp.task("gen-icons-json", (done) => {
 
   done();
 });
-
-gulp.task("gen-dummy-icons-json", (done) => {
-  if (!fs.existsSync(OUTPUT_DIR)) {
-    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
-  }
-
-  fs.writeFileSync(path.resolve(OUTPUT_DIR, "iconList.json"), "[]");
-  done();
-});

build-scripts/gulp/hassio.js

@@ -9,7 +9,6 @@ require("./compress.js");
 require("./rollup.js");
 require("./gather-static.js");
 require("./translations.js");
-require("./gen-icons-json.js");
 
 gulp.task(
   "develop-hassio",
@@ -18,7 +17,6 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-hassio",
-    "gen-dummy-icons-json",
     "gen-index-hassio-dev",
     "build-supervisor-translations",
     "copy-translations-supervisor",
@@ -35,7 +33,6 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-hassio",
-    "gen-dummy-icons-json",
     "build-supervisor-translations",
     "copy-translations-supervisor",
     "build-locale-data",

cast/public/_redirects

@@ -1,9 +0,0 @@
-# These redirects are handled by Netlify
-#
-
-# Some custom cards are not prefixing the instance URL when fetching data
-# and can end up fetching the data from the Cast domain instead of HA.
-# This will make sure that some common ones are replaced with a placeholder.
-/api/camera_proxy/* /images/google-nest-hub.png
-/api/camera_proxy_stream/* /images/google-nest-hub.png
-/api/media_player_proxy/* /images/google-nest-hub.png

demo/src/configs/jimpower/lovelace.ts

@@ -194,7 +194,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                     type: "state-icon",
                     tap_action: {
                       action: "call-service",
-                      data: {
+                      service_data: {
                         entity_id: "group.downstairs_lights",
                       },
                       service: "homeassistant.toggle",

demo/src/configs/kernehed/entities.ts

@@ -59,7 +59,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       attributes: {
         hidden: true,
         radius: 50,
-        friendly_name: "School",
+        friendly_name: "Skolan",
         icon: "mdi:school",
       },
     },
@@ -137,7 +137,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       state: "73",
       attributes: {
         unit_of_measurement: "%",
-        friendly_name: "Oskar battery",
+        friendly_name: "oskar batteri",
         device_class: "battery",
       },
     },
@@ -146,7 +146,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       state: "88",
       attributes: {
         unit_of_measurement: "%",
-        friendly_name: "Bella battery",
+        friendly_name: "bella batteri",
         device_class: "battery",
       },
     },
@@ -154,7 +154,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       entity_id: "binary_sensor.unifi_camera",
       state: "off",
       attributes: {
-        friendly_name: "Motion sensor camera",
+        friendly_name: "R\u00f6relsesensor kamera",
         icon: "mdi:walk",
       },
     },
@@ -707,7 +707,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
           },
         ],
         cloudiness: 25,
-        friendly_name: "Weather",
+        friendly_name: "V\u00e4der",
       },
     },
     "binary_sensor.ubiquiti_switch": {
@@ -731,7 +731,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
         round_trip_time_max: "0.626",
         round_trip_time_mdev: "",
         round_trip_time_min: "0.358",
-        friendly_name: "Entrance camera",
+        friendly_name: "Entr\u00e9 kamera",
         device_class: "connectivity",
         icon: "mdi:cctv",
       },
@@ -807,7 +807,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       attributes: {
         battery_level: 88,
         on: true,
-        friendly_name: "Back door sensor",
+        friendly_name: "Altand\u00f6rren sensor",
         device_class: "opening",
         icon: "mdi:door",
       },
@@ -841,7 +841,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
         battery_level: 60,
         on: true,
         dark: true,
-        friendly_name: "Laundy room motion sensor",
+        friendly_name: "R\u00f6relsesensor tv\u00e4ttstugan",
         device_class: "motion",
         icon: "mdi:walk",
       },

demo/src/configs/teachingbirds/lovelace.ts

@@ -377,7 +377,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.air_cleaner_quiet",
                 },
                 service: "script.turn_on",
@@ -390,7 +390,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.air_cleaner_auto",
                 },
                 service: "script.turn_on",
@@ -403,7 +403,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.air_cleaner_turbo",
                 },
                 service: "script.turn_on",
@@ -416,7 +416,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.ac_off",
                 },
                 service: "script.turn_on",
@@ -429,7 +429,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.ac_on",
                 },
                 service: "script.turn_on",
@@ -629,7 +629,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "scene.morning_lights",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "scene.morning_lights",
                     },
                     service: "scene.turn_on",
@@ -641,7 +641,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "scene.movie_time",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "scene.movie_time",
                     },
                     service: "scene.turn_on",
@@ -702,7 +702,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "light.downstairs_lights",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "light.downstairs_lights",
                     },
                     service: "light.toggle",
@@ -714,7 +714,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "light.upstairs_lights",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "light.upstairs_lights",
                     },
                     service: "light.toggle",

demo/src/stubs/config.ts

@@ -1,7 +1,7 @@
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockConfig = (hass: MockHomeAssistant) => {
-  hass.mockAPI("config/config_entries/entry?domain=co2signal", () => [
+  hass.mockAPI("config/config_entries/entry", () => [
     {
       entry_id: "co2signal",
       domain: "co2signal",

demo/src/stubs/history.ts

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

gallery/src/data/traces/basic_trace.ts

@@ -119,7 +119,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              data: {},
+              service_data: {},
               target: {
                 entity_id: ["input_boolean.toggle_4"],
               },
@@ -164,7 +164,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              data: {},
+              service_data: {},
               target: {
                 entity_id: ["input_boolean.toggle_2"],
               },
@@ -182,7 +182,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              data: {},
+              service_data: {},
               target: {
                 entity_id: ["input_boolean.toggle_3"],
               },
@@ -200,7 +200,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              data: {},
+              service_data: {},
               target: {
                 entity_id: ["input_boolean.toggle_4"],
               },

gallery/src/pages/lovelace/entities-card.ts

@@ -249,7 +249,7 @@ const CONFIGS = [
       name: Bed light
       action_name: Toggle light
       service: light.toggle
-      data:
+      service_data:
         entity_id: light.bed_light
     - type: section
       label: Links

gallery/src/pages/lovelace/glance-card.ts

@@ -199,7 +199,7 @@ const CONFIGS = [
       tap_action:
         action: call-service
         service: light.turn_on
-        data:
+        service_data:
           entity_id: light.ceiling_lights
     - entity: sun.sun
       name: Regular

gallery/src/pages/lovelace/picture-elements-card.ts

@@ -40,7 +40,7 @@ const CONFIGS = [
         left: 90%
         padding: 0px
       service: light.turn_off
-      data:
+      service_data:
         entity_id: group.all_lights
     - type: icon
       icon: mdi:cctv
@@ -88,7 +88,7 @@ const CONFIGS = [
         left: 90%
         padding: 0px
       service: light.turn_off
-      data:
+      service_data:
         entity_id: group.all_lights
     - type: icon
       icon: mdi:cctv

hassio/src/addon-store/hassio-addon-repository.ts

@@ -6,8 +6,10 @@ import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
 import { caseInsensitiveStringCompare } from "../../../src/common/string/compare";
 import "../../../src/components/ha-card";
-import { HassioAddonRepository } from "../../../src/data/hassio/addon";
-import { StoreAddon } from "../../../src/data/supervisor/store";
+import {
+  HassioAddonInfo,
+  HassioAddonRepository,
+} from "../../../src/data/hassio/addon";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { HomeAssistant } from "../../../src/types";
 import "../components/hassio-card-content";
@@ -21,16 +23,20 @@ class HassioAddonRepositoryEl extends LitElement {
 
   @property({ attribute: false }) public repo!: HassioAddonRepository;
 
-  @property({ attribute: false }) public addons!: StoreAddon[];
+  @property({ attribute: false }) public addons!: HassioAddonInfo[];
 
   @property() public filter!: string;
 
-  private _getAddons = memoizeOne((addons: StoreAddon[], filter?: string) => {
-    if (filter) {
-      return filterAndSort(addons, filter);
+  private _getAddons = memoizeOne(
+    (addons: HassioAddonInfo[], filter?: string) => {
+      if (filter) {
+        return filterAndSort(addons, filter);
+      }
+      return addons.sort((a, b) =>
+        caseInsensitiveStringCompare(a.name, b.name)
+      );
     }
-    return addons.sort((a, b) => caseInsensitiveStringCompare(a.name, b.name));
-  });
+  );
 
   protected render(): TemplateResult {
     const repo = this.repo;

hassio/src/addon-store/hassio-addon-store.ts

@@ -14,15 +14,15 @@ import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";
+import "../../../src/components/search-input";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-icon-button";
-import "../../../src/components/search-input";
 import {
+  HassioAddonInfo,
   HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
-import { StoreAddon } from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-subpage";
@@ -66,10 +66,10 @@ class HassioAddonStore extends LitElement {
   protected render(): TemplateResult {
     let repos: TemplateResult[] = [];
 
-    if (this.supervisor.store.repositories) {
+    if (this.supervisor.addon.repositories) {
       repos = this.addonRepositories(
-        this.supervisor.store.repositories,
-        this.supervisor.store.addons,
+        this.supervisor.addon.repositories,
+        this.supervisor.addon.addons,
         this._filter
       );
     }
@@ -145,7 +145,7 @@ class HassioAddonStore extends LitElement {
   private addonRepositories = memoizeOne(
     (
       repositories: HassioAddonRepository[],
-      addons: StoreAddon[],
+      addons: HassioAddonInfo[],
       filter?: string
     ) =>
       repositories.sort(sortRepos).map((repo) => {

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

@@ -12,17 +12,15 @@ import { navigate } from "../../../src/common/navigate";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-circular-progress";
 import {
-  fetchAddonInfo,
   fetchHassioAddonInfo,
   fetchHassioAddonsInfo,
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import {
-  addStoreRepository,
-  fetchSupervisorStore,
-  StoreAddonDetails,
-} from "../../../src/data/supervisor/store";
+  fetchHassioSupervisorInfo,
+  setSupervisorOption,
+} from "../../../src/data/hassio/supervisor";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-error-screen";
@@ -47,9 +45,7 @@ class HassioAddonDashboard extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ attribute: false }) public addon?:
-    | HassioAddonDetails
-    | StoreAddonDetails;
+  @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   @property({ type: Boolean }) public narrow!: boolean;
 
@@ -177,10 +173,10 @@ class HassioAddonDashboard extends LitElement {
       const requestedAddon = extractSearchParam("addon");
       const requestedAddonRepository = extractSearchParam("repository_url");
       if (requestedAddonRepository) {
-        const storeInfo = await fetchSupervisorStore(this.hass);
+        const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
         if (
-          !storeInfo.repositories.find(
-            (repo) => repo.source === requestedAddonRepository
+          !supervisorInfo.addons_repositories.find(
+            (repo) => repo === requestedAddonRepository
           )
         ) {
           if (
@@ -201,7 +197,12 @@ class HassioAddonDashboard extends LitElement {
           }
 
           try {
-            await addStoreRepository(this.hass, requestedAddonRepository);
+            await setSupervisorOption(this.hass, {
+              addons_repositories: [
+                ...supervisorInfo.addons_repositories,
+                requestedAddonRepository,
+              ],
+            });
           } catch (err: any) {
             this._error = extractApiErrorMessage(err);
           }
@@ -244,8 +245,6 @@ class HassioAddonDashboard extends LitElement {
 
     if (path === "uninstall") {
       window.history.back();
-    } else if (path === "install") {
-      this.addon = await fetchHassioAddonInfo(this.hass, this.addon!.slug);
     } else {
       await this._routeDataChanged();
     }
@@ -263,7 +262,8 @@ class HassioAddonDashboard extends LitElement {
       return;
     }
     try {
-      this.addon = await fetchAddonInfo(this.hass, this.supervisor, addon);
+      const addoninfo = await fetchHassioAddonInfo(this.hass, addon);
+      this.addon = addoninfo;
     } catch (err: any) {
       this._error = `Error fetching addon info: ${extractApiErrorMessage(err)}`;
       this.addon = undefined;

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

@@ -1,6 +1,5 @@
 import { customElement, property } from "lit/decorators";
 import { HassioAddonDetails } from "../../../src/data/hassio/addon";
-import { StoreAddonDetails } from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   HassRouterPage,
@@ -21,9 +20,7 @@ class HassioAddonRouter extends HassRouterPage {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @property({ attribute: false }) public addon!:
-    | HassioAddonDetails
-    | StoreAddonDetails;
+  @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   protected routerOptions: RouterOptions = {
     defaultPage: "info",

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

@@ -59,10 +59,7 @@ import {
   fetchHassioStats,
   HassioStats,
 } from "../../../../src/data/hassio/common";
-import {
-  StoreAddon,
-  StoreAddonDetails,
-} from "../../../../src/data/supervisor/store";
+import { StoreAddon } from "../../../../src/data/supervisor/store";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
@@ -103,9 +100,7 @@ class HassioAddonInfo extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public addon!:
-    | HassioAddonDetails
-    | StoreAddonDetails;
+  @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
@@ -148,7 +143,7 @@ class HassioAddonInfo extends LitElement {
             ></update-available-card>
           `
         : ""}
-      ${"protected" in this.addon && !this.addon.protected
+      ${!this.addon.protected
         ? html`
             <ha-alert
               alert-type="error"
@@ -523,7 +518,7 @@ class HassioAddonInfo extends LitElement {
                 : ""}
             </div>
             <div>
-              ${this.addon.version && this.addon.state === "started"
+              ${this.addon.state === "started"
                 ? html`<ha-settings-row ?three-line=${this.narrow}>
                       <span slot="heading">
                         ${this.supervisor.localize("addon.dashboard.hostname")}
@@ -674,7 +669,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private async _loadData(): Promise<void> {
-    if ("state" in this.addon && this.addon.state === "started") {
+    if (this.addon.state === "started") {
       this._metrics = await fetchHassioStats(
         this.hass,
         `addons/${this.addon.slug}`
@@ -722,22 +717,18 @@ class HassioAddonInfo extends LitElement {
   }
 
   private get _computeIsRunning(): boolean {
-    return (this.addon as HassioAddonDetails)?.state === "started";
+    return this.addon?.state === "started";
   }
 
   private get _pathWebui(): string | null {
-    return (this.addon as HassioAddonDetails).webui!.replace(
-      "[HOST]",
-      document.location.hostname
+    return (
+      this.addon.webui &&
+      this.addon.webui.replace("[HOST]", document.location.hostname)
     );
   }
 
   private get _computeShowWebUI(): boolean | "" | null {
-    return (
-      !this.addon.ingress &&
-      (this.addon as HassioAddonDetails).webui &&
-      this._computeIsRunning
-    );
+    return !this.addon.ingress && this.addon.webui && this._computeIsRunning;
   }
 
   private _openIngress(): void {
@@ -763,8 +754,7 @@ class HassioAddonInfo extends LitElement {
   private async _startOnBootToggled(): Promise<void> {
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {
-      boot:
-        (this.addon as HassioAddonDetails).boot === "auto" ? "manual" : "auto",
+      boot: this.addon.boot === "auto" ? "manual" : "auto",
     };
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
@@ -786,7 +776,7 @@ class HassioAddonInfo extends LitElement {
   private async _watchdogToggled(): Promise<void> {
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {
-      watchdog: !(this.addon as HassioAddonDetails).watchdog,
+      watchdog: !this.addon.watchdog,
     };
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
@@ -808,7 +798,7 @@ class HassioAddonInfo extends LitElement {
   private async _autoUpdateToggled(): Promise<void> {
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {
-      auto_update: !(this.addon as HassioAddonDetails).auto_update,
+      auto_update: !this.addon.auto_update,
     };
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
@@ -830,7 +820,7 @@ class HassioAddonInfo extends LitElement {
   private async _protectionToggled(): Promise<void> {
     this._error = undefined;
     const data: HassioAddonSetSecurityParams = {
-      protected: !(this.addon as HassioAddonDetails).protected,
+      protected: !this.addon.protected,
     };
     try {
       await setHassioAddonSecurity(this.hass, this.addon.slug, data);
@@ -852,7 +842,7 @@ class HassioAddonInfo extends LitElement {
   private async _panelToggled(): Promise<void> {
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {
-      ingress_panel: !(this.addon as HassioAddonDetails).ingress_panel,
+      ingress_panel: !this.addon.ingress_panel,
     };
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
@@ -880,7 +870,7 @@ class HassioAddonInfo extends LitElement {
 
       showHassioMarkdownDialog(this, {
         title: this.supervisor.localize("addon.dashboard.changelog"),
-        content: extractChangelog(this.addon as HassioAddonDetails, content),
+        content: extractChangelog(this.addon, content),
       });
     } catch (err: any) {
       showAlertDialog(this, {

hassio/src/backups/hassio-backups.ts

@@ -98,8 +98,9 @@ export class HassioBackups extends LitElement {
     if (backup.content.addons.length !== 0) {
       for (const addon of backup.content.addons) {
         content.push(
-          this.supervisor.addon.addons.find((entry) => entry.slug === addon)
-            ?.name || addon
+          this.supervisor.supervisor.addons.find(
+            (entry) => entry.slug === addon
+          )?.name || addon
         );
       }
     }

hassio/src/components/hassio-filter-addons.ts

@@ -1,8 +1,8 @@
 import Fuse from "fuse.js";
-import { StoreAddon } from "../../../src/data/supervisor/store";
+import { HassioAddonInfo } from "../../../src/data/hassio/addon";
 
-export function filterAndSort(addons: StoreAddon[], filter: string) {
-  const options: Fuse.IFuseOptions<StoreAddon> = {
+export function filterAndSort(addons: HassioAddonInfo[], filter: string) {
+  const options: Fuse.IFuseOptions<HassioAddonInfo> = {
     keys: ["name", "description", "slug"],
     isCaseSensitive: false,
     minMatchCharLength: 2,

hassio/src/components/supervisor-backup-content.ts

@@ -96,7 +96,7 @@ export class SupervisorBackupContent extends LitElement {
           : ["ssl", "share", "media", "addons/local"]
       );
       this.addons = _computeAddons(
-        this.backup ? this.backup.addons : this.supervisor?.addon.addons
+        this.backup ? this.backup.addons : this.supervisor?.supervisor.addons
       );
       this.backupType = this.backup?.type || "full";
       this.backupName = this.backup?.name || "";

hassio/src/dashboard/hassio-addons.ts

@@ -24,7 +24,7 @@ class HassioAddons extends LitElement {
           ? html` <h1>${this.supervisor.localize("dashboard.addons")}</h1> `
           : ""}
         <div class="card-group">
-          ${!this.supervisor.addon.addons.length
+          ${!this.supervisor.supervisor.addons?.length
             ? html`
                 <ha-card outlined>
                   <div class="card-content">
@@ -34,7 +34,7 @@ class HassioAddons extends LitElement {
                   </div>
                 </ha-card>
               `
-            : this.supervisor.addon.addons
+            : this.supervisor.supervisor.addons
                 .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
                 .map(
                   (addon) => html`

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -15,18 +15,15 @@ import "../../../../src/components/ha-circular-progress";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-icon-button";
 import {
+  fetchHassioAddonsInfo,
   HassioAddonInfo,
   HassioAddonRepository,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import { setSupervisorOption } from "../../../../src/data/hassio/supervisor";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
-import {
-  addStoreRepository,
-  fetchStoreRepositories,
-  removeStoreRepository,
-} from "../../../../src/data/supervisor/store";
 
 @customElement("dialog-hassio-repositories")
 class HassioRepositoriesDialog extends LitElement {
@@ -61,13 +58,7 @@ class HassioRepositoriesDialog extends LitElement {
 
   private _filteredRepositories = memoizeOne((repos: HassioAddonRepository[]) =>
     repos
-      .filter(
-        (repo) =>
-          repo.slug !== "core" && // The core add-ons repository
-          repo.slug !== "local" && // Locally managed add-ons
-          repo.slug !== "a0d7b954" && // Home Assistant Community Add-ons
-          repo.slug !== "5c53de3b" // The ESPHome repository
-      )
+      .filter((repo) => repo.slug !== "core" && repo.slug !== "local")
       .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
   );
 
@@ -87,7 +78,7 @@ class HassioRepositoriesDialog extends LitElement {
     const repositories = this._filteredRepositories(this._repositories);
     const usedRepositories = this._filteredUsedRepositories(
       repositories,
-      this._dialogParams.supervisor.addon.addons
+      this._dialogParams.supervisor.supervisor.addons
     );
     return html`
       <ha-dialog
@@ -224,7 +215,9 @@ class HassioRepositoriesDialog extends LitElement {
 
   private async _loadData(): Promise<void> {
     try {
-      this._repositories = await fetchStoreRepositories(this.hass);
+      const addonsinfo = await fetchHassioAddonsInfo(this.hass);
+
+      this._repositories = addonsinfo.repositories;
 
       fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
     } catch (err: any) {
@@ -238,9 +231,14 @@ class HassioRepositoriesDialog extends LitElement {
       return;
     }
     this._processing = true;
+    const repositories = this._filteredRepositories(this._repositories!);
+    const newRepositories = repositories.map((repo) => repo.source);
+    newRepositories.push(input.value);
 
     try {
-      await addStoreRepository(this.hass, input.value);
+      await setSupervisorOption(this.hass, {
+        addons_repositories: newRepositories,
+      });
       await this._loadData();
 
       input.value = "";
@@ -252,8 +250,19 @@ class HassioRepositoriesDialog extends LitElement {
 
   private async _removeRepository(ev: Event) {
     const slug = (ev.currentTarget as any).slug;
+    const repositories = this._filteredRepositories(this._repositories!);
+    const repository = repositories.find((repo) => repo.slug === slug);
+    if (!repository) {
+      return;
+    }
+    const newRepositories = repositories
+      .map((repo) => repo.source)
+      .filter((repo) => repo !== repository.source);
+
     try {
-      await removeStoreRepository(this.hass, slug);
+      await setSupervisorOption(this.hass, {
+        addons_repositories: newRepositories,
+      });
       await this._loadData();
     } catch (err: any) {
       this._error = extractApiErrorMessage(err);

package.json

@@ -89,8 +89,8 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.5.4",
-    "@vaadin/combo-box": "^23.0.10",
-    "@vaadin/vaadin-themable-mixin": "^23.0.10",
+    "@vaadin/combo-box": "^22.0.4",
+    "@vaadin/vaadin-themable-mixin": "^22.0.4",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
@@ -108,7 +108,7 @@
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^1.1.5",
-    "home-assistant-js-websocket": "^7.1.0",
+    "home-assistant-js-websocket": "^7.0.3",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
     "js-yaml": "^4.1.0",

pyproject.toml

@@ -1,30 +1,3 @@
 [build-system]
-requires = ["setuptools~=62.3", "wheel~=0.37.1"]
+requires = ["setuptools~=60.5", "wheel~=0.37.1"]
 build-backend = "setuptools.build_meta"
-
-[project]
-name         = "home-assistant-frontend"
-version      = "20220629.0"
-license      = {text = "Apache-2.0"}
-description  = "The Home Assistant frontend"
-readme       = "README.md"
-authors      = [
-    {name = "The Home Assistant Authors", email = "hello@home-assistant.io"}
-]
-requires-python = ">=3.4.0"
-
-[project.urls]
-"Homepage" = "https://github.com/home-assistant/frontend"
-
-[tool.setuptools]
-platforms = ["any"]
-zip-safe  = false
-include-package-data = true
-
-[tool.setuptools.packages.find]
-include = ["hass_frontend*"]
-
-[tool.mypy]
-python_version = 3.4
-show_error_codes = true
-strict = true

script/version_bump.js

@@ -50,14 +50,14 @@ async function main(args) {
     return;
   }
 
-  const setup = fs.readFileSync("pyproject.toml", "utf8");
-  const version = setup.match(/version\W+=\W"(\d{8}\.\d)"/)[1];
+  const setup = fs.readFileSync("setup.cfg", "utf8");
+  const version = setup.match(/\d{8}\.\d+/)[0];
   const newVersion = method(version);
 
   console.log("Current version:", version);
   console.log("New version:", newVersion);
 
-  fs.writeFileSync("pyproject.toml", setup.replace(version, newVersion), "utf-8");
+  fs.writeFileSync("setup.cfg", setup.replace(version, newVersion), "utf-8");
 
   if (!commit) {
     return;

setup.cfg

@@ -1,2 +1,26 @@
-# Setuptools v62.3 doesn't support editable installs with just 'pyproject.toml' (PEP 660).
-# Keep this file until it does!
+[metadata]
+name         = home-assistant-frontend
+version      = 20220523.0
+author       = The Home Assistant Authors
+author_email = hello@home-assistant.io
+license      = Apache-2.0
+platforms    = any
+description  = The Home Assistant frontend
+long_description = file: README.md
+long_description_content_type = text/markdown
+url          = https://github.com/home-assistant/frontend
+
+[options]
+packages = find:
+zip_safe = False
+include_package_data = True
+python_requires = >= 3.4.0
+
+[options.packages.find]
+include =
+    hass_frontend*
+
+[mypy]
+python_version = 3.4
+show_error_codes = True
+strict = True

src/common/entity/compute_active_state.ts

@@ -1,11 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { UNAVAILABLE_STATES } from "../../data/entity";
 
 export const computeActiveState = (stateObj: HassEntity): string => {
-  if (UNAVAILABLE_STATES.includes(stateObj.state)) {
-    return stateObj.state;
-  }
-
   const domain = stateObj.entity_id.split(".")[0];
   let state = stateObj.state;
 

src/common/entity/domain_icon.ts

@@ -8,7 +8,6 @@ import {
   mdiCalendar,
   mdiCast,
   mdiCastConnected,
-  mdiChartSankey,
   mdiCheckCircleOutline,
   mdiClock,
   mdiCloseCircleOutline,
@@ -25,14 +24,12 @@ import {
   mdiPowerPlug,
   mdiPowerPlugOff,
   mdiRestart,
-  mdiSwapHorizontal,
   mdiToggleSwitchVariant,
   mdiToggleSwitchVariantOff,
   mdiWeatherNight,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { UpdateEntity, updateIsInstalling } from "../../data/update";
-import { weatherIcon } from "../../data/weather";
+import { updateIsInstalling, UpdateEntity } from "../../data/update";
 /**
  * Return the icon to be used for a domain.
  *
@@ -104,15 +101,6 @@ export const domainIconWithoutDefault = (
         ? mdiCheckCircleOutline
         : mdiCloseCircleOutline;
 
-    case "input_datetime":
-      if (!stateObj?.attributes.has_date) {
-        return mdiClock;
-      }
-      if (!stateObj.attributes.has_time) {
-        return mdiCalendar;
-      }
-      break;
-
     case "lock":
       switch (compareState) {
         case "unlocked":
@@ -150,26 +138,26 @@ export const domainIconWithoutDefault = (
       break;
     }
 
+    case "input_datetime":
+      if (!stateObj?.attributes.has_date) {
+        return mdiClock;
+      }
+      if (!stateObj.attributes.has_time) {
+        return mdiCalendar;
+      }
+      break;
+
     case "sun":
       return stateObj?.state === "above_horizon"
         ? FIXED_DOMAIN_ICONS[domain]
         : mdiWeatherNight;
 
-    case "switch_as_x":
-      return mdiSwapHorizontal;
-
-    case "threshold":
-      return mdiChartSankey;
-
     case "update":
       return compareState === "on"
         ? updateIsInstalling(stateObj as UpdateEntity)
           ? mdiPackageDown
           : mdiPackageUp
         : mdiPackage;
-
-    case "weather":
-      return weatherIcon(stateObj?.state);
   }
 
   if (domain in FIXED_DOMAIN_ICONS) {

src/common/number/clamp.ts

@@ -5,6 +5,6 @@ export const clamp = (value: number, min: number, max: number) =>
 export const conditionalClamp = (value: number, min?: number, max?: number) => {
   let result: number;
   result = min ? Math.max(value, min) : value;
-  result = max ? Math.min(result, max) : result;
+  result = max ? Math.min(value, max) : value;
   return result;
 };

src/common/style/icon_color_css.ts

@@ -70,9 +70,7 @@ export const iconColorCSS = css`
     }
   }
 
-  ha-state-icon[data-domain="plant"][data-state="problem"] {
-    color: var(--state-icon-error-color);
-  }
+  ha-state-icon[data-domain="plant"][data-state="problem"],
 
   /* Color the icon if unavailable */
   ha-state-icon[data-state="unavailable"] {

src/common/util/compute_rtl.ts

@@ -1,4 +1,3 @@
-import { LitElement } from "lit";
 import { HomeAssistant } from "../../types";
 
 export function computeRTL(hass: HomeAssistant) {
@@ -16,21 +15,3 @@ export function computeRTLDirection(hass: HomeAssistant) {
 export function emitRTLDirection(rtl: boolean) {
   return rtl ? "rtl" : "ltr";
 }
-
-export function computeDirectionStyles(isRTL: boolean, element: LitElement) {
-  const direction: string = emitRTLDirection(isRTL);
-  setDirectionStyles(direction, element);
-}
-
-export function setDirectionStyles(direction: string, element: LitElement) {
-  element.style.direction = direction;
-  element.style.setProperty("--direction", direction);
-  element.style.setProperty(
-    "--float-start",
-    direction === "ltr" ? "left" : "right"
-  );
-  element.style.setProperty(
-    "--float-end",
-    direction === "ltr" ? "right" : "left"
-  );
-}

src/components/chart/ha-chart-base.ts

@@ -11,8 +11,6 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { clamp } from "../../common/number/clamp";
 
-export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
-
 interface Tooltip extends TooltipModel<any> {
   top: string;
   left: string;
@@ -39,26 +37,6 @@ export default class HaChartBase extends LitElement {
 
   @state() private _hiddenDatasets: Set<number> = new Set();
 
-  private _releaseCanvas() {
-    // release the canvas memory to prevent
-    // safari from running out of memory.
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  public disconnectedCallback() {
-    this._releaseCanvas();
-    super.disconnectedCallback();
-  }
-
-  public connectedCallback() {
-    super.connectedCallback();
-    if (this.hasUpdated) {
-      this._setupChart();
-    }
-  }
-
   protected firstUpdated() {
     this._setupChart();
     this.data.datasets.forEach((dataset, index) => {
@@ -326,9 +304,6 @@ export default class HaChartBase extends LitElement {
         width: 16px;
         flex-shrink: 0;
         box-sizing: border-box;
-        margin-inline-end: 6px;
-        margin-inline-start: initial;
-        direction: var(--direction);
       }
       .chartTooltip .bullet {
         align-self: baseline;
@@ -337,9 +312,6 @@ export default class HaChartBase extends LitElement {
       :host([rtl]) .chartTooltip .bullet {
         margin-right: inherit;
         margin-left: 6px;
-        margin-inline-end: inherit;
-        margin-inline-start: 6px;
-        direction: var(--direction);
       }
       .chartTooltip {
         padding: 8px;

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

@@ -8,7 +8,7 @@ import {
 } from "../../common/number/format_number";
 import { LineChartEntity, LineChartState } from "../../data/history";
 import { HomeAssistant } from "../../types";
-import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
+import "./ha-chart-base";
 
 const safeParseFloat = (value) => {
   const parsed = parseFloat(value);
@@ -28,13 +28,11 @@ class StateHistoryChartLine extends LitElement {
 
   @property({ type: Boolean }) public isSingleDevice = false;
 
-  @property({ attribute: false }) public endTime!: Date;
+  @property({ attribute: false }) public endTime?: Date;
 
   @state() private _chartData?: ChartData<"line">;
 
-  @state() private _chartOptions?: ChartOptions;
-
-  private _chartTime: Date = new Date();
+  @state() private _chartOptions?: ChartOptions<"line">;
 
   protected render() {
     return html`
@@ -59,7 +57,6 @@ class StateHistoryChartLine extends LitElement {
                 locale: this.hass.locale,
               },
             },
-            suggestedMax: this.endTime,
             ticks: {
               maxRotation: 0,
               sampleSize: 5,
@@ -123,13 +120,7 @@ class StateHistoryChartLine extends LitElement {
         locale: numberFormatToLocale(this.hass.locale),
       };
     }
-    if (
-      changedProps.has("data") ||
-      this._chartTime <
-        new Date(this.endTime.getTime() - MIN_TIME_BETWEEN_UPDATES)
-    ) {
-      // If the line is more than 5 minutes old, re-gen it
-      // so the X axis grows even if there is no new data
+    if (changedProps.has("data")) {
       this._generateData();
     }
   }
@@ -139,12 +130,28 @@ class StateHistoryChartLine extends LitElement {
     const computedStyles = getComputedStyle(this);
     const entityStates = this.data;
     const datasets: ChartDataset<"line">[] = [];
+    let endTime: Date;
+
     if (entityStates.length === 0) {
       return;
     }
 
-    this._chartTime = new Date();
-    const endTime = this.endTime;
+    endTime =
+      this.endTime ||
+      // Get the highest date from the last date of each device
+      new Date(
+        Math.max(
+          ...entityStates.map((devSts) =>
+            new Date(
+              devSts.states[devSts.states.length - 1].last_changed
+            ).getTime()
+          )
+        )
+      );
+    if (endTime > new Date()) {
+      endTime = new Date();
+    }
+
     const names = this.names || {};
     entityStates.forEach((states) => {
       const domain = states.domain;

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

@@ -9,7 +9,7 @@ import { numberFormatToLocale } from "../../common/number/format_number";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { TimelineEntity } from "../../data/history";
 import { HomeAssistant } from "../../types";
-import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
+import "./ha-chart-base";
 import type { TimeLineData } from "./timeline-chart/const";
 
 /** Binary sensor device classes for which the static colors for on/off are NOT inverted.
@@ -83,8 +83,6 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ attribute: false }) public data: TimelineEntity[] = [];
 
-  @property() public narrow!: boolean;
-
   @property() public names: boolean | Record<string, string> = false;
 
   @property() public unit?: string;
@@ -93,18 +91,12 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ type: Boolean }) public isSingleDevice = false;
 
-  @property({ type: Boolean }) public chunked = false;
-
-  @property({ attribute: false }) public startTime!: Date;
-
-  @property({ attribute: false }) public endTime!: Date;
+  @property({ attribute: false }) public endTime?: Date;
 
   @state() private _chartData?: ChartData<"timeline">;
 
   @state() private _chartOptions?: ChartOptions<"timeline">;
 
-  private _chartTime: Date = new Date();
-
   protected render() {
     return html`
       <ha-chart-base
@@ -118,7 +110,6 @@ export class StateHistoryChartTimeline extends LitElement {
 
   public willUpdate(changedProps: PropertyValues) {
     if (!this.hasUpdated) {
-      const narrow = this.narrow;
       this._chartOptions = {
         maintainAspectRatio: false,
         parsing: false,
@@ -132,8 +123,6 @@ export class StateHistoryChartTimeline extends LitElement {
                 locale: this.hass.locale,
               },
             },
-            suggestedMin: this.startTime,
-            suggestedMax: this.endTime,
             ticks: {
               autoSkip: true,
               maxRotation: 0,
@@ -164,18 +153,11 @@ export class StateHistoryChartTimeline extends LitElement {
               drawTicks: false,
             },
             ticks: {
-              display:
-                this.chunked || !this.isSingleDevice || this.data.length !== 1,
+              display: 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",
           },
         },
@@ -213,13 +195,7 @@ export class StateHistoryChartTimeline extends LitElement {
         locale: numberFormatToLocale(this.hass.locale),
       };
     }
-    if (
-      changedProps.has("data") ||
-      this._chartTime <
-        new Date(this.endTime.getTime() - MIN_TIME_BETWEEN_UPDATES)
-    ) {
-      // If the line is more than 5 minutes old, re-gen it
-      // so the X axis grows even if there is no new data
+    if (changedProps.has("data")) {
       this._generateData();
     }
   }
@@ -232,9 +208,34 @@ export class StateHistoryChartTimeline extends LitElement {
       stateHistory = [];
     }
 
-    this._chartTime = new Date();
-    const startTime = this.startTime;
-    const endTime = this.endTime;
+    const startTime = new Date(
+      stateHistory.reduce(
+        (minTime, stateInfo) =>
+          Math.min(minTime, new Date(stateInfo.data[0].last_changed).getTime()),
+        new Date().getTime()
+      )
+    );
+
+    // end time is Math.max(startTime, last_event)
+    let endTime =
+      this.endTime ||
+      new Date(
+        stateHistory.reduce(
+          (maxTime, stateInfo) =>
+            Math.max(
+              maxTime,
+              new Date(
+                stateInfo.data[stateInfo.data.length - 1].last_changed
+              ).getTime()
+            ),
+          startTime.getTime()
+        )
+      );
+
+    if (endTime > new Date()) {
+      endTime = new Date();
+    }
+
     const labels: string[] = [];
     const datasets: ChartDataset<"timeline">[] = [];
     const names = this.names || {};

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

@@ -1,4 +1,3 @@
-import "@lit-labs/virtualizer";
 import {
   css,
   CSSResultGroup,
@@ -7,29 +6,12 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state, eventOptions } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
-import {
-  HistoryResult,
-  LineChartUnit,
-  TimelineEntity,
-} from "../../data/history";
+import { HistoryResult } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import "./state-history-chart-line";
 import "./state-history-chart-timeline";
-import { restoreScroll } from "../../common/decorators/restore-scroll";
-
-const CANVAS_TIMELINE_ROWS_CHUNK = 10; // Split up the canvases to avoid hitting the render limit
-
-const chunkData = (inputArray: any[], chunks: number) =>
-  inputArray.reduce((results, item, idx) => {
-    const chunkIdx = Math.floor(idx / chunks);
-    if (!results[chunkIdx]) {
-      results[chunkIdx] = [];
-    }
-    results[chunkIdx].push(item);
-    return results;
-  }, []);
 
 @customElement("state-history-charts")
 class StateHistoryCharts extends LitElement {
@@ -37,13 +19,8 @@ class StateHistoryCharts extends LitElement {
 
   @property({ attribute: false }) public historyData!: HistoryResult;
 
-  @property() public narrow!: boolean;
-
   @property({ type: Boolean }) public names = false;
 
-  @property({ type: Boolean, attribute: "virtualize", reflect: true })
-  public virtualize = false;
-
   @property({ attribute: false }) public endTime?: Date;
 
   @property({ type: Boolean, attribute: "up-to-now" }) public upToNow = false;
@@ -52,104 +29,59 @@ class StateHistoryCharts extends LitElement {
 
   @property({ type: Boolean }) public isLoadingData = false;
 
-  @state() private _computedStartTime!: Date;
-
-  @state() private _computedEndTime!: Date;
-
-  // @ts-ignore
-  @restoreScroll(".container") private _savedScrollPos?: number;
-
-  @eventOptions({ passive: true })
   protected render(): TemplateResult {
     if (!isComponentLoaded(this.hass, "history")) {
-      return html`<div class="info">
+      return html` <div class="info">
         ${this.hass.localize("ui.components.history_charts.history_disabled")}
       </div>`;
     }
 
     if (this.isLoadingData && !this.historyData) {
-      return html`<div class="info">
+      return html` <div class="info">
         ${this.hass.localize("ui.components.history_charts.loading_history")}
       </div>`;
     }
 
     if (this._isHistoryEmpty()) {
-      return html`<div class="info">
+      return html` <div class="info">
         ${this.hass.localize("ui.components.history_charts.no_history_found")}
       </div>`;
     }
 
-    const now = new Date();
+    const computedEndTime = this.upToNow
+      ? new Date()
+      : this.endTime || new Date();
 
-    this._computedEndTime =
-      this.upToNow || !this.endTime || this.endTime > now ? now : this.endTime;
-
-    this._computedStartTime = new Date(
-      this.historyData.timeline.reduce(
-        (minTime, stateInfo) =>
-          Math.min(minTime, new Date(stateInfo.data[0].last_changed).getTime()),
-        new Date().getTime()
-      )
-    );
-
-    const combinedItems = this.historyData.timeline.length
-      ? (this.virtualize
-          ? chunkData(this.historyData.timeline, CANVAS_TIMELINE_ROWS_CHUNK)
-          : [this.historyData.timeline]
-        ).concat(this.historyData.line)
-      : this.historyData.line;
-
-    return this.virtualize
-      ? html`<div class="container ha-scrollbar" @scroll=${this._saveScrollPos}>
-          <lit-virtualizer
-            scroller
-            class="ha-scrollbar"
-            .items=${combinedItems}
-            .renderItem=${this._renderHistoryItem}
-          >
-          </lit-virtualizer>
-        </div>`
-      : html`${combinedItems.map((item, index) =>
-          this._renderHistoryItem(item, index)
-        )}`;
+    return html`
+      ${this.historyData.timeline.length
+        ? html`
+            <state-history-chart-timeline
+              .hass=${this.hass}
+              .data=${this.historyData.timeline}
+              .endTime=${computedEndTime}
+              .noSingle=${this.noSingle}
+              .names=${this.names}
+            ></state-history-chart-timeline>
+          `
+        : html``}
+      ${this.historyData.line.map(
+        (line) => html`
+          <state-history-chart-line
+            .hass=${this.hass}
+            .unit=${line.unit}
+            .data=${line.data}
+            .identifier=${line.identifier}
+            .isSingleDevice=${!this.noSingle &&
+            line.data &&
+            line.data.length === 1}
+            .endTime=${computedEndTime}
+            .names=${this.names}
+          ></state-history-chart-line>
+        `
+      )}
+    `;
   }
 
-  private _renderHistoryItem = (
-    item: TimelineEntity[] | LineChartUnit,
-    index: number
-  ): TemplateResult => {
-    if (!item || index === undefined) {
-      return html``;
-    }
-    if (!Array.isArray(item)) {
-      return html`<div class="entry-container">
-        <state-history-chart-line
-          .hass=${this.hass}
-          .unit=${item.unit}
-          .data=${item.data}
-          .identifier=${item.identifier}
-          .isSingleDevice=${!this.noSingle &&
-          this.historyData.line?.length === 1}
-          .endTime=${this._computedEndTime}
-          .names=${this.names}
-        ></state-history-chart-line>
-      </div> `;
-    }
-    return html`<div class="entry-container">
-      <state-history-chart-timeline
-        .hass=${this.hass}
-        .data=${item}
-        .startTime=${this._computedStartTime}
-        .endTime=${this._computedEndTime}
-        .isSingleDevice=${!this.noSingle &&
-        this.historyData.timeline?.length === 1}
-        .names=${this.names}
-        .narrow=${this.narrow}
-        .chunked=${this.virtualize}
-      ></state-history-chart-timeline>
-    </div> `;
-  };
-
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     return !(changedProps.size === 1 && changedProps.has("hass"));
   }
@@ -164,11 +96,6 @@ class StateHistoryCharts extends LitElement {
     return !this.isLoadingData && historyDataEmpty;
   }
 
-  @eventOptions({ passive: true })
-  private _saveScrollPos(e: Event) {
-    this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       :host {
@@ -176,47 +103,11 @@ class StateHistoryCharts extends LitElement {
         /* height of single timeline chart = 60px */
         min-height: 60px;
       }
-
-      :host([virtualize]) {
-        height: 100%;
-      }
-
       .info {
         text-align: center;
         line-height: 60px;
         color: var(--secondary-text-color);
       }
-      .container {
-        max-height: var(--history-max-height);
-      }
-
-      .entry-container {
-        width: 100%;
-      }
-
-      .entry-container:hover {
-        z-index: 1;
-      }
-
-      :host([virtualize]) .entry-container {
-        padding-left: 1px;
-        padding-right: 1px;
-      }
-
-      .container,
-      lit-virtualizer {
-        height: 100%;
-        width: 100%;
-      }
-
-      lit-virtualizer {
-        contain: size layout !important;
-      }
-
-      state-history-chart-timeline,
-      state-history-chart-line {
-        width: 100%;
-      }
     `;
   }
 }

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

@@ -31,7 +31,6 @@ const rowRenderer: ComboBoxLitRenderer<HassEntityWithCachedName> = (item) =>
     <span>${item.friendly_name}</span>
     <span slot="secondary">${item.entity_id}</span>
   </mwc-list-item>`;
-
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;

src/components/entity/state-badge.ts

@@ -12,10 +12,8 @@ import { property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { computeActiveState } from "../../common/entity/compute_active_state";
-import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { iconColorCSS } from "../../common/style/icon_color_css";
-import { cameraUrlWithWidthHeight } from "../../data/camera";
 import type { HomeAssistant } from "../../types";
 import "../ha-state-icon";
 
@@ -95,9 +93,6 @@ export class StateBadge extends LitElement {
         if (this.hass) {
           imageUrl = this.hass.hassUrl(imageUrl);
         }
-        if (computeDomain(stateObj.entity_id) === "camera") {
-          imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
-        }
         hostStyle.backgroundImage = `url(${imageUrl})`;
         this._showIcon = false;
       } else if (stateObj.state === "on") {

src/components/ha-addon-picker.ts

@@ -4,7 +4,8 @@ import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
-import { fetchHassioAddonsInfo, HassioAddonInfo } from "../data/hassio/addon";
+import { HassioAddonInfo } from "../data/hassio/addon";
+import { fetchHassioSupervisorInfo } from "../data/hassio/supervisor";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
@@ -77,10 +78,10 @@ class HaAddonPicker extends LitElement {
   private async _getAddons() {
     try {
       if (isComponentLoaded(this.hass, "hassio")) {
-        const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-        this._addons = addonsInfo.addons
-          .filter((addon) => addon.version)
-          .sort((a, b) => stringCompare(a.name, b.name));
+        const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
+        this._addons = supervisorInfo.addons.sort((a, b) =>
+          stringCompare(a.name, b.name)
+        );
       } else {
         showAlertDialog(this, {
           title: this.hass.localize(

src/components/ha-button-menu.ts

@@ -2,7 +2,12 @@ import type { Button } from "@material/mwc-button";
 import "@material/mwc-menu";
 import type { Corner, Menu, MenuCorner } from "@material/mwc-menu";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import {
+  customElement,
+  property,
+  query,
+  queryAssignedElements,
+} from "lit/decorators";
 import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
 import type { HaIconButton } from "./ha-icon-button";
 
@@ -28,6 +33,12 @@ export class HaButtonMenu extends LitElement {
 
   @query("mwc-menu", true) private _menu?: Menu;
 
+  @queryAssignedElements({
+    slot: "trigger",
+    selector: "ha-icon-button, mwc-button",
+  })
+  private _triggerButton!: Array<HaIconButton | Button>;
+
   public get items() {
     return this._menu?.items;
   }
@@ -40,14 +51,14 @@ export class HaButtonMenu extends LitElement {
     if (this._menu?.open) {
       this._menu.focusItemAtIndex(0);
     } else {
-      this._triggerButton?.focus();
+      this._triggerButton[0]?.focus();
     }
   }
 
   protected render(): TemplateResult {
     return html`
       <div @click=${this._handleClick}>
-        <slot name="trigger" @slotchange=${this._setTriggerAria}></slot>
+        <slot name="trigger"></slot>
       </div>
       <mwc-menu
         .corner=${this.corner}
@@ -86,18 +97,6 @@ export class HaButtonMenu extends LitElement {
     this._menu!.show();
   }
 
-  private get _triggerButton() {
-    return this.querySelector(
-      'ha-icon-button[slot="trigger"], mwc-button[slot="trigger"]'
-    ) as HaIconButton | Button | null;
-  }
-
-  private _setTriggerAria() {
-    if (this._triggerButton) {
-      this._triggerButton.ariaHasPopup = "menu";
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       :host {

src/components/ha-chip.ts

@@ -66,12 +66,9 @@ export class HaChip extends LitElement {
         line-height: 14px;
         color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
       }
-      .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,
-      .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
+      .mdc-chip.no-text
+        .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
         margin-right: -4px;
-        margin-inline-start: -4px;
-        margin-inline-end: 4px;
-        direction: var(--direction);
       }
 
       span[role="gridcell"] {

src/components/ha-clickable-list-item.ts

@@ -1,13 +1,17 @@
-import { css, CSSResultGroup, html } from "lit";
+import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
+import { styles } from "@material/mwc-list/mwc-list-item.css";
+import { css, CSSResult, html } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import { HaListItem } from "./ha-list-item";
 
 @customElement("ha-clickable-list-item")
-export class HaClickableListItem extends HaListItem {
+export class HaClickableListItem extends ListItemBase {
   @property() public href?: string;
 
   @property({ type: Boolean }) public disableHref = false;
 
+  // property used only in css
+  @property({ type: Boolean, reflect: true }) public rtl = false;
+
   @property({ type: Boolean, reflect: true }) public openNewTab = false;
 
   @query("a") private _anchor!: HTMLAnchorElement;
@@ -35,10 +39,18 @@ export class HaClickableListItem extends HaListItem {
     });
   }
 
-  static get styles(): CSSResultGroup {
+  static get styles(): CSSResult[] {
     return [
-      super.styles,
+      styles,
       css`
+        :host {
+          padding-left: 0px;
+          padding-right: 0px;
+        }
+        :host([graphic="avatar"]:not([twoLine])),
+        :host([graphic="icon"]:not([twoLine])) {
+          height: 48px;
+        }
         a {
           width: 100%;
           height: 100%;
@@ -48,6 +60,19 @@ export class HaClickableListItem extends HaListItem {
           padding-right: var(--mdc-list-side-padding, 20px);
           overflow: hidden;
         }
+        span.material-icons:first-of-type {
+          margin-inline-start: 0px !important;
+          margin-inline-end: var(
+            --mdc-list-item-graphic-margin,
+            16px
+          ) !important;
+          direction: var(--direction);
+        }
+        span.material-icons:last-of-type {
+          margin-inline-start: auto !important;
+          margin-inline-end: 0px !important;
+          direction: var(--direction);
+        }
       `,
     ];
   }

src/components/ha-climate-state.ts

@@ -3,7 +3,6 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { formatNumber } from "../common/number/format_number";
 import { CLIMATE_PRESET_NONE } from "../data/climate";
-import { UNAVAILABLE_STATES } from "../data/entity";
 import type { HomeAssistant } from "../types";
 
 @customElement("ha-climate-state")
@@ -16,22 +15,22 @@ class HaClimateState extends LitElement {
     const currentStatus = this._computeCurrentStatus();
 
     return html`<div class="target">
-        ${!UNAVAILABLE_STATES.includes(this.stateObj.state)
+        ${this.stateObj.state !== "unknown"
           ? html`<span class="state-label">
-                ${this._localizeState()}
-                ${this.stateObj.attributes.preset_mode &&
-                this.stateObj.attributes.preset_mode !== CLIMATE_PRESET_NONE
-                  ? html`-
-                    ${this.hass.localize(
-                      `state_attributes.climate.preset_mode.${this.stateObj.attributes.preset_mode}`
-                    ) || this.stateObj.attributes.preset_mode}`
-                  : ""}
-              </span>
-              <div class="unit">${this._computeTarget()}</div>`
-          : this._localizeState()}
+              ${this._localizeState()}
+              ${this.stateObj.attributes.preset_mode &&
+              this.stateObj.attributes.preset_mode !== CLIMATE_PRESET_NONE
+                ? html`-
+                  ${this.hass.localize(
+                    `state_attributes.climate.preset_mode.${this.stateObj.attributes.preset_mode}`
+                  ) || this.stateObj.attributes.preset_mode}`
+                : ""}
+            </span>`
+          : ""}
+        <div class="unit">${this._computeTarget()}</div>
       </div>
 
-      ${currentStatus && !UNAVAILABLE_STATES.includes(this.stateObj.state)
+      ${currentStatus
         ? html`<div class="current">
             ${this.hass.localize("ui.card.climate.currently")}:
             <div class="unit">${currentStatus}</div>
@@ -109,10 +108,6 @@ class HaClimateState extends LitElement {
   }
 
   private _localizeState(): string {
-    if (UNAVAILABLE_STATES.includes(this.stateObj.state)) {
-      return this.hass.localize(`state.default.${this.stateObj.state}`);
-    }
-
     const stateString = this.hass.localize(
       `component.climate.state._.${this.stateObj.state}`
     );

src/components/ha-code-editor.ts

@@ -11,7 +11,6 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { loadCodeMirror } from "../resources/codemirror.ondemand";
 import { HomeAssistant } from "../types";
-import "./ha-icon";
 
 declare global {
   interface HASSDomEvents {
@@ -27,12 +26,6 @@ const saveKeyBinding: KeyBinding = {
   },
 };
 
-const renderIcon = (completion: Completion) => {
-  const icon = document.createElement("ha-icon");
-  icon.icon = completion.label;
-  return icon;
-};
-
 @customElement("ha-code-editor")
 export class HaCodeEditor extends ReactiveElement {
   public codemirror?: EditorView;
@@ -54,8 +47,6 @@ export class HaCodeEditor extends ReactiveElement {
 
   private _loadedCodeMirror?: typeof import("../resources/codemirror");
 
-  private _iconList?: Completion[];
-
   public set value(value: string) {
     this._value = value;
   }
@@ -163,10 +154,7 @@ export class HaCodeEditor extends ReactiveElement {
     if (!this.readOnly && this.autocompleteEntities && this.hass) {
       extensions.push(
         this._loadedCodeMirror.autocompletion({
-          override: [
-            this._entityCompletions.bind(this),
-            this._mdiCompletions.bind(this),
-          ],
+          override: [this._entityCompletions.bind(this)],
           maxRenderedOptions: 10,
         })
       );
@@ -221,47 +209,6 @@ export class HaCodeEditor extends ReactiveElement {
     };
   }
 
-  private _getIconItems = async (): Promise<Completion[]> => {
-    if (!this._iconList) {
-      let iconList: {
-        name: string;
-        keywords: string[];
-      }[];
-      if (__SUPERVISOR__) {
-        iconList = [];
-      } else {
-        iconList = (await import("../../build/mdi/iconList.json")).default;
-      }
-
-      this._iconList = iconList.map((icon) => ({
-        type: "variable",
-        label: `mdi:${icon.name}`,
-        detail: icon.keywords.join(", "),
-        info: renderIcon,
-      }));
-    }
-
-    return this._iconList;
-  };
-
-  private async _mdiCompletions(
-    context: CompletionContext
-  ): Promise<CompletionResult | null> {
-    const match = context.matchBefore(/mdi:/);
-
-    if (!match || (match.from === match.to && !context.explicit)) {
-      return null;
-    }
-
-    const iconItems = await this._getIconItems();
-
-    return {
-      from: Number(match.from),
-      options: iconItems,
-      span: /^\w*.\w*$/,
-    };
-  }
-
   private _blockKeyboardShortcuts() {
     this.addEventListener("keydown", (ev) => ev.stopPropagation());
   }

src/components/ha-combo-box.ts

@@ -1,17 +1,13 @@
 import "@material/mwc-list/mwc-list-item";
 import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
-import type {
-  ComboBoxLight,
-  ComboBoxLightFilterChangedEvent,
-  ComboBoxLightOpenedChangedEvent,
-  ComboBoxLightValueChangedEvent,
-} from "@vaadin/combo-box/vaadin-combo-box-light";
+import type { ComboBoxLight } 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 "lit-vaadin-helpers";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
 import "./ha-textfield";
@@ -100,8 +96,6 @@ export class HaComboBox extends LitElement {
 
   @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
 
-  private _overlayMutationObserver?: MutationObserver;
-
   public open() {
     this.updateComplete.then(() => {
       this._comboBox?.open();
@@ -114,14 +108,6 @@ export class HaComboBox extends LitElement {
     });
   }
 
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._overlayMutationObserver) {
-      this._overlayMutationObserver.disconnect();
-      this._overlayMutationObserver = undefined;
-    }
-  }
-
   public get selectedItem() {
     return this._comboBox.selectedItem;
   }
@@ -207,64 +193,21 @@ export class HaComboBox extends LitElement {
     }
   }
 
-  private _openedChanged(ev: ComboBoxLightOpenedChangedEvent) {
-    const opened = ev.detail.value;
+  private _openedChanged(ev: PolymerChangedEvent<boolean>) {
     // delay this so we can handle click event before setting _opened
     setTimeout(() => {
-      this._opened = opened;
+      this._opened = ev.detail.value;
     }, 0);
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail);
-
-    if (
-      opened &&
-      "MutationObserver" in window &&
-      !this._overlayMutationObserver
-    ) {
-      const overlay = document.querySelector<HTMLElement>(
-        "vaadin-combo-box-overlay"
-      );
-
-      if (!overlay) {
-        return;
-      }
-
-      this._overlayMutationObserver = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (
-            mutation.type === "attributes" &&
-            mutation.attributeName === "inert"
-          ) {
-            this._overlayMutationObserver?.disconnect();
-            this._overlayMutationObserver = undefined;
-            // @ts-expect-error
-            overlay.inert = false;
-          } else if (mutation.type === "childList") {
-            mutation.removedNodes.forEach((node) => {
-              if (node.nodeName === "VAADIN-COMBO-BOX-OVERLAY") {
-                this._overlayMutationObserver?.disconnect();
-                this._overlayMutationObserver = undefined;
-              }
-            });
-          }
-        });
-      });
-
-      this._overlayMutationObserver.observe(overlay, {
-        attributes: true,
-      });
-      this._overlayMutationObserver.observe(document.body, {
-        childList: true,
-      });
-    }
   }
 
-  private _filterChanged(ev: ComboBoxLightFilterChangedEvent) {
+  private _filterChanged(ev: PolymerChangedEvent<string>) {
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail, { composed: false });
   }
 
-  private _valueChanged(ev: ComboBoxLightValueChangedEvent) {
+  private _valueChanged(ev: PolymerChangedEvent<string>) {
     ev.stopPropagation();
     const newValue = ev.detail.value;
 

src/components/ha-dialog.ts

@@ -91,7 +91,6 @@ export class HaDialog extends DialogBase {
       .header_title {
         margin-right: 40px;
         margin-inline-end: 40px;
-        margin-inline-start: initial;
         direction: var(--direction);
       }
       .header_button {

src/components/ha-fab.ts

@@ -19,14 +19,6 @@ export class HaFab extends FabBase {
         direction: var(--direction);
       }
     `,
-    // safari workaround - must be explicit
-    document.dir === "rtl"
-      ? css`
-          :host .mdc-fab--extended .mdc-fab__icon {
-            direction: rtl;
-          }
-        `
-      : css``,
   ];
 }
 

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

@@ -205,9 +205,6 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
       ha-formfield {
         display: block;
         padding-right: 16px;
-        padding-inline-end: 16px;
-        padding-inline-start: initial;
-        direction: var(--direction);
       }
       ha-textfield {
         display: block;
@@ -219,9 +216,6 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
         right: 1em;
         top: 1em;
         cursor: pointer;
-        inset-inline-end: 1em;
-        inset-inline-start: initial;
-        direction: var(--direction);
       }
       :host([opened]) ha-svg-icon {
         color: var(--primary-color);

src/components/ha-formfield.ts

@@ -28,15 +28,10 @@ export class HaFormfield extends FormfieldBase {
     css`
       :host(:not([alignEnd])) ::slotted(ha-switch) {
         margin-right: 10px;
-        margin-inline-end: 10px;
-        margin-inline-start: inline;
       }
-      .mdc-form-field > label {
-        direction: var(--direction);
-        margin-inline-start: 0;
-        margin-inline-end: auto;
-        padding-inline-start: 4px;
-        padding-inline-end: 0;
+      :host([dir="rtl"]:not([alignEnd])) ::slotted(ha-switch) {
+        margin-left: 10px;
+        margin-right: auto;
       }
     `,
   ];

src/components/ha-gauge.ts

@@ -14,7 +14,6 @@ const getAngle = (value: number, min: number, max: number) => {
 export interface LevelDefinition {
   level: number;
   stroke: string;
-  label?: string;
 }
 
 @customElement("ha-gauge")
@@ -39,31 +38,22 @@ export class Gauge extends LitElement {
 
   @state() private _updated = false;
 
-  @state() private _segment_label? = "";
-
   protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     // Wait for the first render for the initial animation to work
     afterNextRender(() => {
       this._updated = true;
       this._angle = getAngle(this.value, this.min, this.max);
-      this._segment_label = this.getSegmentLabel();
       this._rescale_svg();
     });
   }
 
   protected updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
-    if (
-      !this._updated ||
-      (!changedProperties.has("value") &&
-        !changedProperties.has("label") &&
-        !changedProperties.has("_segment_label"))
-    ) {
+    if (!this._updated || !changedProperties.has("value")) {
       return;
     }
     this._angle = getAngle(this.value, this.min, this.max);
-    this._segment_label = this.getSegmentLabel();
     this._rescale_svg();
   }
 
@@ -128,11 +118,9 @@ export class Gauge extends LitElement {
       </svg>
       <svg class="text">
         <text class="value-text">
-          ${
-            this._segment_label
-              ? this._segment_label
-              : this.valueText || formatNumber(this.value, this.locale)
-          } ${this._segment_label ? "" : this.label}
+          ${this.valueText || formatNumber(this.value, this.locale)} ${
+      this.label
+    }
         </text>
       </svg>`;
   }
@@ -149,18 +137,6 @@ export class Gauge extends LitElement {
     );
   }
 
-  private getSegmentLabel() {
-    if (this.levels) {
-      this.levels.sort((a, b) => a.level - b.level);
-      for (let i = this.levels.length - 1; i >= 0; i--) {
-        if (this.value >= this.levels[i].level) {
-          return this.levels[i].label;
-        }
-      }
-    }
-    return "";
-  }
-
   static get styles() {
     return css`
       :host {

src/components/ha-icon-button.ts

@@ -2,7 +2,6 @@ import "@material/mwc-icon-button";
 import type { IconButton } from "@material/mwc-icon-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
 import "./ha-svg-icon";
 
 @customElement("ha-icon-button")
@@ -13,12 +12,7 @@ export class HaIconButton extends LitElement {
   @property({ type: String }) path?: string;
 
   // Label that is used for ARIA support and as tooltip
-  @property({ type: String }) label?: string;
-
-  // These should always be set as properties, not attributes,
-  // so that only the <button> element gets the attribute
-  @property({ type: String, attribute: "aria-haspopup" })
-  override ariaHasPopup!: IconButton["ariaHasPopup"];
+  @property({ type: String }) label = "";
 
   @property({ type: Boolean }) hideTitle = false;
 
@@ -34,11 +28,11 @@ export class HaIconButton extends LitElement {
   };
 
   protected render(): TemplateResult {
+    // Note: `ariaLabel` required despite the `mwc-icon-button` docs saying `label` should be enough
     return html`
       <mwc-icon-button
-        aria-label=${ifDefined(this.label)}
-        title=${ifDefined(this.hideTitle ? undefined : this.label)}
-        aria-haspopup=${ifDefined(this.ariaHasPopup)}
+        .ariaLabel=${this.label}
+        .title=${this.hideTitle ? "" : this.label}
         .disabled=${this.disabled}
       >
         ${this.path

src/components/ha-list-item.ts

@@ -1,42 +0,0 @@
-import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
-import { styles } from "@material/mwc-list/mwc-list-item.css";
-import { css, CSSResultGroup } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-list-item")
-export class HaListItem extends ListItemBase {
-  static get styles(): CSSResultGroup {
-    return [
-      styles,
-      css`
-        :host {
-          padding-left: var(--mdc-list-side-padding, 20px);
-          padding-right: var(--mdc-list-side-padding, 20px);
-        }
-        :host([graphic="avatar"]:not([twoLine])),
-        :host([graphic="icon"]:not([twoLine])) {
-          height: 48px;
-        }
-        span.material-icons:first-of-type {
-          margin-inline-start: 0px !important;
-          margin-inline-end: var(
-            --mdc-list-item-graphic-margin,
-            16px
-          ) !important;
-          direction: var(--direction);
-        }
-        span.material-icons:last-of-type {
-          margin-inline-start: auto !important;
-          margin-inline-end: 0px !important;
-          direction: var(--direction);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-list-item": HaListItem;
-  }
-}

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

@@ -1,24 +1,15 @@
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
+import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import { DeviceRegistryEntry } from "../../data/device_registry";
-import {
-  EntityRegistryEntry,
-  subscribeEntityRegistry,
-} from "../../data/entity_registry";
-import {
-  EntitySources,
-  fetchEntitySourcesWithCache,
-} from "../../data/entity_sources";
+import { EntityRegistryEntry } from "../../data/entity_registry";
 import { AreaSelector } from "../../data/selector";
-import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../types";
 import "../ha-area-picker";
 import "../ha-areas-picker";
 
 @customElement("ha-selector-area")
-export class HaAreaSelector extends SubscribeMixin(LitElement) {
+export class HaAreaSelector extends LitElement {
   @property() public hass!: HomeAssistant;
 
   @property() public selector!: AreaSelector;
@@ -29,44 +20,29 @@ export class HaAreaSelector extends SubscribeMixin(LitElement) {
 
   @property() public helper?: string;
 
-  @state() private _entitySources?: EntitySources;
-
-  @state() private _entities?: EntityRegistryEntry[];
+  @state() public _configEntries?: ConfigEntry[];
 
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
 
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        this._entities = entities.filter((entity) => entity.device_id !== null);
-      }),
-    ];
-  }
-
   protected updated(changedProperties) {
-    if (
-      changedProperties.has("selector") &&
-      (this.selector.area.device?.integration ||
-        this.selector.area.entity?.integration) &&
-      !this._entitySources
-    ) {
-      fetchEntitySourcesWithCache(this.hass).then((sources) => {
-        this._entitySources = sources;
-      });
+    if (changedProperties.has("selector")) {
+      const oldSelector = changedProperties.get("selector");
+      if (
+        oldSelector !== this.selector &&
+        this.selector.area.device?.integration
+      ) {
+        getConfigEntries(this.hass, {
+          domain: this.selector.area.device.integration,
+        }).then((entries) => {
+          this._configEntries = entries;
+        });
+      }
     }
   }
 
   protected render() {
-    if (
-      (this.selector.area.device?.integration ||
-        this.selector.area.entity?.integration) &&
-      !this._entitySources
-    ) {
-      return html``;
-    }
-
     if (!this.selector.area.multiple) {
       return html`
         <ha-area-picker
@@ -111,62 +87,39 @@ export class HaAreaSelector extends SubscribeMixin(LitElement) {
   }
 
   private _filterEntities = (entity: EntityRegistryEntry): boolean => {
-    const filterIntegration = this.selector.area.entity?.integration;
-    if (
-      filterIntegration &&
-      this._entitySources?.[entity.entity_id]?.domain !== filterIntegration
-    ) {
-      return false;
-    }
-    return true;
-  };
-
-  private _filterDevices = (device: DeviceRegistryEntry): boolean => {
-    if (!this.selector.area.device) {
-      return true;
-    }
-
-    const {
-      manufacturer: filterManufacturer,
-      model: filterModel,
-      integration: filterIntegration,
-    } = this.selector.area.device;
-
-    if (filterManufacturer && device.manufacturer !== filterManufacturer) {
-      return false;
-    }
-    if (filterModel && device.model !== filterModel) {
-      return false;
-    }
-    if (filterIntegration && this._entitySources && this._entities) {
-      const deviceIntegrations = this._deviceIntegrations(
-        this._entitySources,
-        this._entities
-      );
-      if (!deviceIntegrations?.[device.id]?.includes(filterIntegration)) {
+    if (this.selector.area.entity?.integration) {
+      if (entity.platform !== this.selector.area.entity.integration) {
         return false;
       }
     }
     return true;
   };
 
-  private _deviceIntegrations = memoizeOne(
-    (entitySources: EntitySources, entities: EntityRegistryEntry[]) => {
-      const deviceIntegrations: Record<string, string[]> = {};
-
-      for (const entity of entities) {
-        const source = entitySources[entity.entity_id];
-        if (!source?.domain) {
-          continue;
-        }
-        if (!deviceIntegrations[entity.device_id!]) {
-          deviceIntegrations[entity.device_id!] = [];
-        }
-        deviceIntegrations[entity.device_id!].push(source.domain);
-      }
-      return deviceIntegrations;
+  private _filterDevices = (device: DeviceRegistryEntry): boolean => {
+    if (
+      this.selector.area.device?.manufacturer &&
+      device.manufacturer !== this.selector.area.device.manufacturer
+    ) {
+      return false;
     }
-  );
+    if (
+      this.selector.area.device?.model &&
+      device.model !== this.selector.area.device.model
+    ) {
+      return false;
+    }
+    if (this.selector.area.device?.integration) {
+      if (
+        this._configEntries &&
+        !this._configEntries.some((entry) =>
+          device.config_entries.includes(entry.entry_id)
+        )
+      ) {
+        return false;
+      }
+    }
+    return true;
+  };
 }
 
 declare global {

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

@@ -1,33 +1,18 @@
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { ConfigEntry } from "../../data/config_entries";
+import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import type { DeviceRegistryEntry } from "../../data/device_registry";
-import {
-  EntityRegistryEntry,
-  subscribeEntityRegistry,
-} from "../../data/entity_registry";
-import {
-  EntitySources,
-  fetchEntitySourcesWithCache,
-} from "../../data/entity_sources";
 import type { DeviceSelector } from "../../data/selector";
-import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../types";
 import "../device/ha-device-picker";
 import "../device/ha-devices-picker";
 
 @customElement("ha-selector-device")
-export class HaDeviceSelector extends SubscribeMixin(LitElement) {
+export class HaDeviceSelector extends LitElement {
   @property() public hass!: HomeAssistant;
 
   @property() public selector!: DeviceSelector;
 
-  @state() private _entitySources?: EntitySources;
-
-  @state() private _entities?: EntityRegistryEntry[];
-
   @property() public value?: any;
 
   @property() public label?: string;
@@ -40,32 +25,20 @@ export class HaDeviceSelector extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public required = true;
 
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        this._entities = entities.filter((entity) => entity.device_id !== null);
-      }),
-    ];
-  }
-
-  protected updated(changedProperties): void {
-    super.updated(changedProperties);
-    if (
-      changedProperties.has("selector") &&
-      this.selector.device.integration &&
-      !this._entitySources
-    ) {
-      fetchEntitySourcesWithCache(this.hass).then((sources) => {
-        this._entitySources = sources;
-      });
+  protected updated(changedProperties) {
+    if (changedProperties.has("selector")) {
+      const oldSelector = changedProperties.get("selector");
+      if (oldSelector !== this.selector && this.selector.device?.integration) {
+        getConfigEntries(this.hass, {
+          domain: this.selector.device.integration,
+        }).then((entries) => {
+          this._configEntries = entries;
+        });
+      }
     }
   }
 
   protected render() {
-    if (this.selector.device.integration && !this._entitySources) {
-      return html``;
-    }
-
     if (!this.selector.device.multiple) {
       return html`
         <ha-device-picker
@@ -107,48 +80,30 @@ export class HaDeviceSelector extends SubscribeMixin(LitElement) {
   }
 
   private _filterDevices = (device: DeviceRegistryEntry): boolean => {
-    const {
-      manufacturer: filterManufacturer,
-      model: filterModel,
-      integration: filterIntegration,
-    } = this.selector.device;
-
-    if (filterManufacturer && device.manufacturer !== filterManufacturer) {
+    if (
+      this.selector.device?.manufacturer &&
+      device.manufacturer !== this.selector.device.manufacturer
+    ) {
       return false;
     }
-    if (filterModel && device.model !== filterModel) {
+    if (
+      this.selector.device?.model &&
+      device.model !== this.selector.device.model
+    ) {
       return false;
     }
-    if (filterIntegration && this._entitySources && this._entities) {
-      const deviceIntegrations = this._deviceIntegrations(
-        this._entitySources,
-        this._entities
-      );
-      if (!deviceIntegrations?.[device.id]?.includes(filterIntegration)) {
+    if (this.selector.device?.integration) {
+      if (
+        this._configEntries &&
+        !this._configEntries.some((entry) =>
+          device.config_entries.includes(entry.entry_id)
+        )
+      ) {
         return false;
       }
     }
     return true;
   };
-
-  private _deviceIntegrations = memoizeOne(
-    (entitySources: EntitySources, entities: EntityRegistryEntry[]) => {
-      const deviceIntegrations: Record<string, string[]> = {};
-
-      for (const entity of entities) {
-        const source = entitySources[entity.entity_id];
-        if (!source?.domain) {
-          continue;
-        }
-
-        if (!deviceIntegrations[entity.device_id!]) {
-          deviceIntegrations[entity.device_id!] = [];
-        }
-        deviceIntegrations[entity.device_id!].push(source.domain);
-      }
-      return deviceIntegrations;
-    }
-  );
 }
 
 declare global {

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

@@ -1,3 +1,4 @@
+import "@material/mwc-formfield/mwc-formfield";
 import "@material/mwc-list/mwc-list-item";
 import { mdiClose } from "@mdi/js";
 import { css, html, LitElement } from "lit";
@@ -46,14 +47,14 @@ export class HaSelectSelector extends LitElement {
             ${this.label}
             ${options.map(
               (item: SelectOption) => html`
-                <ha-formfield .label=${item.label}>
+                <mwc-formfield .label=${item.label}>
                   <ha-radio
                     .checked=${item.value === this.value}
                     .value=${item.value}
                     .disabled=${this.disabled}
                     @change=${this._valueChanged}
                   ></ha-radio>
-                </ha-formfield>
+                </mwc-formfield>
               `
             )}
           </div>

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

@@ -103,9 +103,6 @@ export class HaTextSelector extends LitElement {
         --mdc-icon-button-size: 24px;
         --mdc-icon-size: 20px;
         color: var(--secondary-text-color);
-        inset-inline-start: initial;
-        inset-inline-end: 16px;
-        direction: var(--direction);
       }
     `;
   }

src/components/ha-service-control.ts

@@ -287,7 +287,9 @@ export class HaServiceControl extends LitElement {
       ${shouldRenderServiceDataYaml
         ? html`<ha-yaml-editor
             .hass=${this.hass}
-            .label=${this.hass.localize("ui.components.service-control.data")}
+            .label=${this.hass.localize(
+              "ui.components.service-control.service_data"
+            )}
             .name=${"data"}
             .defaultValue=${this._value?.data}
             @value-changed=${this._dataChanged}

src/components/ha-target-picker.ts

@@ -79,8 +79,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
-  @property({ type: Boolean }) public horizontal = false;
-
   @state() private _areas?: { [areaId: string]: AreaRegistryEntry };
 
   @state() private _devices?: {
@@ -119,55 +117,45 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     if (!this._areas || !this._devices || !this._entities) {
       return html``;
     }
-    return html`<div class=${this.horizontal ? "horizontal-container" : ""}>
-      ${this.horizontal ? this._renderChips() : this._renderItems()}
-      ${this._renderPicker()}
-      ${this.horizontal ? this._renderItems() : this._renderChips()}
-    </div>`;
-  }
-
-  private _renderItems() {
     return html`<div class="mdc-chip-set items">
-      ${this.value?.area_id
-        ? ensureArray(this.value.area_id).map((area_id) => {
-            const area = this._areas![area_id];
-            return this._renderChip(
-              "area_id",
-              area_id,
-              area?.name || area_id,
-              undefined,
-              mdiSofa
-            );
-          })
-        : ""}
-      ${this.value?.device_id
-        ? ensureArray(this.value.device_id).map((device_id) => {
-            const device = this._devices![device_id];
-            return this._renderChip(
-              "device_id",
-              device_id,
-              device ? computeDeviceName(device, this.hass) : device_id,
-              undefined,
-              mdiDevices
-            );
-          })
-        : ""}
-      ${this.value?.entity_id
-        ? ensureArray(this.value.entity_id).map((entity_id) => {
-            const entity = this.hass.states[entity_id];
-            return this._renderChip(
-              "entity_id",
-              entity_id,
-              entity ? computeStateName(entity) : entity_id,
-              entity
-            );
-          })
-        : ""}
-    </div>`;
-  }
-
-  private _renderChips() {
-    return html`<div class="mdc-chip-set">
+        ${this.value?.area_id
+          ? ensureArray(this.value.area_id).map((area_id) => {
+              const area = this._areas![area_id];
+              return this._renderChip(
+                "area_id",
+                area_id,
+                area?.name || area_id,
+                undefined,
+                mdiSofa
+              );
+            })
+          : ""}
+        ${this.value?.device_id
+          ? ensureArray(this.value.device_id).map((device_id) => {
+              const device = this._devices![device_id];
+              return this._renderChip(
+                "device_id",
+                device_id,
+                device ? computeDeviceName(device, this.hass) : device_id,
+                undefined,
+                mdiDevices
+              );
+            })
+          : ""}
+        ${this.value?.entity_id
+          ? ensureArray(this.value.entity_id).map((entity_id) => {
+              const entity = this.hass.states[entity_id];
+              return this._renderChip(
+                "entity_id",
+                entity_id,
+                entity ? computeStateName(entity) : entity_id,
+                entity
+              );
+            })
+          : ""}
+      </div>
+      ${this._renderPicker()}
+      <div class="mdc-chip-set">
         <div
           class="mdc-chip area_id add"
           .type=${"area_id"}
@@ -229,6 +217,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           </span>
         </div>
       </div>
+
       ${this.helper
         ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
         : ""} `;
@@ -332,7 +321,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           .entityFilter=${this.entityRegFilter}
           .includeDeviceClasses=${this.includeDeviceClasses}
           .includeDomains=${this.includeDomains}
-          class=${this.horizontal ? "hidden-picker" : ""}
           @value-changed=${this._targetPicked}
         ></ha-area-picker>`;
       case "device_id":
@@ -347,7 +335,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           .entityFilter=${this.entityRegFilter}
           .includeDeviceClasses=${this.includeDeviceClasses}
           .includeDomains=${this.includeDomains}
-          class=${this.horizontal ? "hidden-picker" : ""}
           @value-changed=${this._targetPicked}
         ></ha-device-picker>`;
       case "entity_id":
@@ -361,7 +348,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           .entityFilter=${this.entityFilter}
           .includeDeviceClasses=${this.includeDeviceClasses}
           .includeDomains=${this.includeDomains}
-          class=${this.horizontal ? "hidden-picker" : ""}
           @value-changed=${this._targetPicked}
           allow-custom-entity
         ></ha-entity-picker>`;
@@ -553,16 +539,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}
-      .hidden-picker {
-        height: 0px;
-        display: inline-block;
-        overflow: hidden;
-        position: absolute;
-      }
-      .horizontal-container {
-        display: flex;
-        flex-wrap: wrap;
-      }
       .mdc-chip {
         color: var(--primary-text-color);
       }

src/components/ha-textfield.ts

@@ -57,14 +57,6 @@ export class HaTextField extends TextFieldBase {
       .mdc-text-field__affix--suffix {
         padding-left: var(--text-field-suffix-padding-left, 12px);
         padding-right: var(--text-field-suffix-padding-right, 0px);
-        padding-inline-start: var(--text-field-suffix-padding-left, 12px);
-        padding-inline-end: var(--text-field-suffix-padding-right, 0px);
-        direction: var(--direction);
-      }
-      .mdc-text-field--with-leading-icon {
-        padding-inline-start: var(--text-field-suffix-padding-left, 0px);
-        padding-inline-end: var(--text-field-suffix-padding-right, 16px);
-        direction: var(--direction);
       }
 
       .mdc-text-field:not(.mdc-text-field--disabled)
@@ -76,12 +68,6 @@ export class HaTextField extends TextFieldBase {
         color: var(--secondary-text-color);
       }
 
-      .mdc-text-field__icon--leading {
-        margin-inline-start: 16px;
-        margin-inline-end: 8px;
-        direction: var(--direction);
-      }
-
       input {
         text-align: var(--text-field-text-align);
       }
@@ -109,9 +95,7 @@ export class HaTextField extends TextFieldBase {
       .mdc-floating-label {
         inset-inline-start: 16px !important;
         inset-inline-end: initial !important;
-        transform-origin: var(--float-start);
         direction: var(--direction);
-        transform-origin: var(--float-start);
       }
 
       .mdc-text-field--with-leading-icon.mdc-text-field--filled
@@ -121,25 +105,7 @@ export class HaTextField extends TextFieldBase {
         inset-inline-end: initial !important;
         direction: var(--direction);
       }
-
-      .mdc-text-field__input[type="number"] {
-        direction: var(--direction);
-      }
     `,
-    // safari workaround - must be explicit
-    document.dir === "rtl"
-      ? css`
-          .mdc-text-field__affix--suffix,
-          .mdc-text-field--with-leading-icon,
-          .mdc-text-field__icon--leading,
-          .mdc-floating-label,
-          .mdc-text-field--with-leading-icon.mdc-text-field--filled
-            .mdc-floating-label,
-          .mdc-text-field__input[type="number"] {
-            direction: rtl;
-          }
-        `
-      : css``,
   ];
 }
 

src/components/media-player/ha-browse-media-tts.ts

@@ -36,7 +36,7 @@ declare global {
 class BrowseMediaTTS extends LitElement {
   @property() public hass!: HomeAssistant;
 
-  @property() public item!: MediaPlayerItem;
+  @property() public item;
 
   @property() public action!: MediaPlayerBrowseAction;
 

src/components/media-player/ha-media-player-browse.ts

@@ -28,7 +28,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
 import { getSignedPath } from "../../data/auth";
-import { UNAVAILABLE_STATES } from "../../data/entity";
 import type { MediaPlayerItem } from "../../data/media-player";
 import {
   browseMediaPlayer,
@@ -43,14 +42,9 @@ import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import {
-  brandsUrl,
-  extractDomainFromBrandUrl,
-  isBrandUrl,
-} from "../../util/brands-url";
+import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
 import "../entity/ha-entity-picker";
-import "../ha-alert";
 import "../ha-button-menu";
 import "../ha-card";
 import "../ha-circular-progress";
@@ -116,6 +110,9 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   private _resizeObserver?: ResizeObserver;
 
+  // @ts-ignore
+  private _intersectionObserver?: IntersectionObserver;
+
   public connectedCallback(): void {
     super.connectedCallback();
     this.updateComplete.then(() => this._attachResizeObserver());
@@ -125,6 +122,9 @@ export class HaMediaPlayerBrowse extends LitElement {
     if (this._resizeObserver) {
       this._resizeObserver.disconnect();
     }
+    if (this._intersectionObserver) {
+      this._intersectionObserver.disconnect();
+    }
   }
 
   public async refresh() {
@@ -246,16 +246,6 @@ export class HaMediaPlayerBrowse extends LitElement {
             ],
             replace: true,
           });
-        } else if (
-          err.code === "entity_not_found" &&
-          UNAVAILABLE_STATES.includes(this.hass.states[this.entityId]?.state)
-        ) {
-          this._setError({
-            message: this.hass.localize(
-              `ui.components.media-browser.media_player_unavailable`
-            ),
-            code: "entity_not_found",
-          });
         } else {
           this._setError(err);
         }
@@ -315,11 +305,7 @@ export class HaMediaPlayerBrowse extends LitElement {
   protected render(): TemplateResult {
     if (this._error) {
       return html`
-        <div class="container">
-          <ha-alert alert-type="error">
-            ${this._renderError(this._error)}
-          </ha-alert>
-        </div>
+        <div class="container">${this._renderError(this._error)}</div>
       `;
     }
 
@@ -434,9 +420,7 @@ export class HaMediaPlayerBrowse extends LitElement {
               this._error
                 ? html`
                     <div class="container">
-                      <ha-alert alert-type="error">
-                        ${this._renderError(this._error)}
-                      </ha-alert>
+                      ${this._renderError(this._error)}
                     </div>
                   `
                 : isTTSMediaSource(currentItem.media_content_id)
@@ -479,10 +463,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                       .layout=${grid({
                         itemSize: {
                           width: "175px",
-                          height:
-                            childrenMediaClass.thumbnail_ratio === "portrait"
-                              ? "312px"
-                              : "225px",
+                          height: "225px",
                         },
                         gap: "16px",
                         flex: { preserve: "aspect-ratio" },
@@ -564,8 +545,6 @@ export class HaMediaPlayerBrowse extends LitElement {
                   <div
                     class="${["app", "directory"].includes(child.media_class)
                       ? "centered-image"
-                      : ""} ${isBrandUrl(child.thumbnail)
-                      ? "brand-image"
                       : ""} image"
                     style="background-image: ${until(backgroundImage, "")}"
                   ></div>
@@ -664,7 +643,7 @@ export class HaMediaPlayerBrowse extends LitElement {
       return (await getSignedPath(this.hass, thumbnailUrl)).path;
     }
 
-    if (isBrandUrl(thumbnailUrl)) {
+    if (thumbnailUrl.startsWith("https://brands.home-assistant.io")) {
       // The backend is not aware of the theme used by the users,
       // so we rewrite the URL to show a proper icon
       thumbnailUrl = brandsUrl({
@@ -1053,10 +1032,6 @@ export class HaMediaPlayerBrowse extends LitElement {
           background-size: contain;
         }
 
-        .brand-image {
-          background-size: 40%;
-        }
-
         .children ha-card .icon-holder {
           display: flex;
           justify-content: center;

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

@@ -8,7 +8,6 @@ import { fetchUsers, User } from "../../data/user";
 import { HomeAssistant } from "../../types";
 import "../ha-select";
 import "./ha-user-badge";
-import "../ha-list-item";
 
 class HaUserPicker extends LitElement {
   public hass?: HomeAssistant;
@@ -49,14 +48,14 @@ class HaUserPicker extends LitElement {
           : ""}
         ${this._sortedUsers(this.users).map(
           (user) => html`
-            <ha-list-item graphic="avatar" .value=${user.id}>
+            <mwc-list-item graphic="avatar" .value=${user.id}>
               <ha-user-badge
                 .hass=${this.hass}
                 .user=${user}
                 slot="graphic"
               ></ha-user-badge>
               ${user.name}
-            </ha-list-item>
+            </mwc-list-item>
           `
         )}
       </ha-select>

src/data/application_credential.ts

@@ -1,11 +1,7 @@
 import { HomeAssistant } from "../types";
 
-export interface ApplicationCredentialsDomainConfig {
-  description_placeholders: string;
-}
-
 export interface ApplicationCredentialsConfig {
-  integrations: Record<string, ApplicationCredentialsDomainConfig>;
+  domains: string[];
 }
 
 export interface ApplicationCredential {

src/data/cached-history.ts

@@ -34,7 +34,7 @@ const RECENT_THRESHOLD = 60000; // 1 minute
 const RECENT_CACHE: { [cacheKey: string]: RecentCacheResults } = {};
 const stateHistoryCache: { [cacheKey: string]: CachedResults } = {};
 
-// Cached type 1 function. Without cache config.
+// Cached type 1 unction. Without cache config.
 export const getRecent = (
   hass: HomeAssistant,
   entityId: string,
@@ -103,14 +103,13 @@ export const getRecentWithCache = (
   language: string
 ) => {
   const cacheKey = cacheConfig.cacheKey;
-  const fullCacheKey = cacheKey + `_${cacheConfig.hoursToShow}`;
   const endTime = new Date();
   const startTime = new Date(endTime);
   startTime.setHours(startTime.getHours() - cacheConfig.hoursToShow);
   let toFetchStartTime = startTime;
   let appendingToCache = false;
 
-  let cache = stateHistoryCache[fullCacheKey];
+  let cache = stateHistoryCache[cacheKey + `_${cacheConfig.hoursToShow}`];
   if (
     cache &&
     toFetchStartTime >= cache.startTime &&
@@ -124,7 +123,7 @@ export const getRecentWithCache = (
       return cache.prom;
     }
   } else {
-    cache = stateHistoryCache[fullCacheKey] = getEmptyCache(
+    cache = stateHistoryCache[cacheKey] = getEmptyCache(
       language,
       startTime,
       endTime
@@ -153,19 +152,13 @@ export const getRecentWithCache = (
       ]);
       fetchedHistory = results[1];
     } catch (err: any) {
-      delete stateHistoryCache[fullCacheKey];
+      delete stateHistoryCache[cacheKey];
       throw err;
     }
     const stateHistory = computeHistory(hass, fetchedHistory, localize);
     if (appendingToCache) {
-      if (stateHistory.line.length) {
-        mergeLine(stateHistory.line, cache.data.line);
-      }
-      if (stateHistory.timeline.length) {
-        mergeTimeline(stateHistory.timeline, cache.data.timeline);
-        // Replace the timeline array to force an update
-        cache.data.timeline = [...cache.data.timeline];
-      }
+      mergeLine(stateHistory.line, cache.data.line);
+      mergeTimeline(stateHistory.timeline, cache.data.timeline);
       pruneStartTime(startTime, cache.data);
     } else {
       cache.data = stateHistory;
@@ -197,8 +190,6 @@ const mergeLine = (
           oldLine.data.push(entity);
         }
       });
-      // Replace the cached line data to force an update
-      oldLine.data = [...oldLine.data];
     } else {
       cacheLines.push(line);
     }

src/data/camera.ts

@@ -41,12 +41,6 @@ export interface WebRtcAnswer {
   answer: string;
 }
 
-export const cameraUrlWithWidthHeight = (
-  base_url: string,
-  width: number,
-  height: number
-) => `${base_url}&width=${width}&height=${height}`;
-
 export const computeMJPEGStreamUrl = (entity: CameraEntity) =>
   `/api/camera_proxy_stream/${entity.entity_id}?token=${entity.attributes.access_token}`;
 
@@ -63,7 +57,7 @@ export const fetchThumbnailUrlWithCache = async (
     hass,
     entityId
   );
-  return cameraUrlWithWidthHeight(base_url, width, height);
+  return `${base_url}&width=${width}&height=${height}`;
 };
 
 export const fetchThumbnailUrl = async (

src/data/config_entries.ts

@@ -38,19 +38,19 @@ export const getConfigEntries = (
   hass: HomeAssistant,
   filters?: { type?: "helper" | "integration"; domain?: string }
 ): Promise<ConfigEntry[]> => {
-  const params: any = {};
+  const params = new URLSearchParams();
   if (filters) {
     if (filters.type) {
-      params.type_filter = filters.type;
+      params.append("type", filters.type);
     }
     if (filters.domain) {
-      params.domain = filters.domain;
+      params.append("domain", filters.domain);
     }
   }
-  return hass.callWS<ConfigEntry[]>({
-    type: "config_entries/get",
-    ...params,
-  });
+  return hass.callApi<ConfigEntry[]>(
+    "GET",
+    `config/config_entries/entry?${params.toString()}`
+  );
 };
 
 export const updateConfigEntry = (

src/data/energy.ts

@@ -240,7 +240,6 @@ export interface EnergyData {
   prefs: EnergyPreferences;
   info: EnergyInfo;
   stats: Statistics;
-  statsMetadata: Record<string, StatisticsMetaData>;
   statsCompare: Statistics;
   co2SignalConfigEntry?: ConfigEntry;
   co2SignalEntity?: string;
@@ -286,6 +285,15 @@ const getEnergyData = async (
 
   const consumptionStatIDs: string[] = [];
   const statIDs: string[] = [];
+  const gasSources: GasSourceTypeEnergyPreference[] =
+    prefs.energy_sources.filter(
+      (source) => source.type === "gas"
+    ) as GasSourceTypeEnergyPreference[];
+  const gasStatisticIdsWithMeta: StatisticsMetaData[] =
+    await getStatisticMetadata(
+      hass,
+      gasSources.map((source) => source.stat_energy_from)
+    );
 
   for (const source of prefs.energy_sources) {
     if (source.type === "solar") {
@@ -295,6 +303,20 @@ const getEnergyData = async (
 
     if (source.type === "gas") {
       statIDs.push(source.stat_energy_from);
+      const entity = hass.states[source.stat_energy_from];
+      if (!entity) {
+        for (const statisticIdWithMeta of gasStatisticIdsWithMeta) {
+          if (
+            statisticIdWithMeta?.statistic_id === source.stat_energy_from &&
+            statisticIdWithMeta?.unit_of_measurement
+          ) {
+            source.unit_of_measurement =
+              statisticIdWithMeta?.unit_of_measurement === "Wh"
+                ? "kWh"
+                : statisticIdWithMeta?.unit_of_measurement;
+          }
+        }
+      }
       if (source.stat_cost) {
         statIDs.push(source.stat_cost);
       }
@@ -410,12 +432,6 @@ const getEnergyData = async (
     }
   });
 
-  const statsMetadataArray = await getStatisticMetadata(hass, statIDs);
-  const statsMetadata: Record<string, StatisticsMetaData> = {};
-  statsMetadataArray.forEach((x) => {
-    statsMetadata[x.statistic_id] = x;
-  });
-
   const data: EnergyData = {
     start,
     end,
@@ -424,7 +440,6 @@ const getEnergyData = async (
     info,
     prefs,
     stats,
-    statsMetadata,
     statsCompare,
     co2SignalConfigEntry,
     co2SignalEntity,
@@ -613,13 +628,13 @@ export const getEnergyGasUnitCategory = (
 
 export const getEnergyGasUnit = (
   hass: HomeAssistant,
-  prefs: EnergyPreferences,
-  statisticsMetaData: Record<string, StatisticsMetaData> = {}
+  prefs: EnergyPreferences
 ): string | undefined => {
   for (const source of prefs.energy_sources) {
     if (source.type !== "gas") {
       continue;
     }
+
     const entity = hass.states[source.stat_energy_from];
     if (entity?.attributes.unit_of_measurement) {
       // Wh is normalized to kWh by stats generation
@@ -627,11 +642,8 @@ export const getEnergyGasUnit = (
         ? "kWh"
         : entity.attributes.unit_of_measurement;
     }
-    const statisticIdWithMeta = statisticsMetaData[source.stat_energy_from];
-    if (statisticIdWithMeta?.unit_of_measurement) {
-      return statisticIdWithMeta.unit_of_measurement === "Wh"
-        ? "kWh"
-        : statisticIdWithMeta.unit_of_measurement;
+    if (source.unit_of_measurement) {
+      return source.unit_of_measurement;
     }
   }
   return undefined;

src/data/entity_registry.ts

@@ -33,18 +33,6 @@ export interface UpdateEntityRegistryEntryResult {
   require_restart?: boolean;
 }
 
-export interface SensorEntityOptions {
-  unit_of_measurement?: string | null;
-}
-
-export interface WeatherEntityOptions {
-  precipitation_unit?: string | null;
-  pressure_unit?: string | null;
-  temperature_unit?: string | null;
-  visibility_unit?: string | null;
-  wind_speed_unit?: string | null;
-}
-
 export interface EntityRegistryEntryUpdateParams {
   name?: string | null;
   icon?: string | null;
@@ -54,7 +42,9 @@ export interface EntityRegistryEntryUpdateParams {
   hidden_by: string | null;
   new_entity_id?: string;
   options_domain?: string;
-  options?: SensorEntityOptions | WeatherEntityOptions;
+  options?: {
+    unit_of_measurement?: string | null;
+  };
 }
 
 export const findBatteryEntity = (

src/data/hardware.ts

@@ -20,20 +20,3 @@ export const BOARD_NAMES: Record<string, string> = {
   "intel-nuc": "Intel NUC",
   yellow: "Home Assistant Yellow",
 };
-
-export interface HardwareInfo {
-  hardware: HardwareInfoEntry[];
-}
-
-export interface HardwareInfoEntry {
-  board: HardwareInfoBoardInfo;
-  name: string;
-  url?: string;
-}
-
-export interface HardwareInfoBoardInfo {
-  manufacturer: string;
-  model?: string;
-  revision?: string;
-  hassio_board_id?: string;
-}

src/data/hassio/addon.ts

@@ -1,9 +1,7 @@
 import { atLeastVersion } from "../../common/config/version";
 import type { HaFormSchema } from "../../components/ha-form/types";
 import { HomeAssistant } from "../../types";
-import { supervisorApiCall } from "../supervisor/common";
-import { StoreAddonDetails } from "../supervisor/store";
-import { Supervisor, SupervisorArch } from "../supervisor/supervisor";
+import { SupervisorArch } from "../supervisor/supervisor";
 import {
   extractApiErrorMessage,
   hassioApiResultExtractor,
@@ -365,15 +363,3 @@ export const uninstallHassioAddon = async (
     `hassio/addons/${slug}/uninstall`
   );
 };
-
-export const fetchAddonInfo = (
-  hass: HomeAssistant,
-  supervisor: Supervisor,
-  addonSlug: string
-): Promise<HassioAddonDetails | StoreAddonDetails> =>
-  supervisorApiCall(
-    hass,
-    !supervisor.addon?.addons.find((addon) => addon.slug === addonSlug)
-      ? `/store/addons/${addonSlug}` // Use /store/addons when add-on is not installed
-      : `/addons/${addonSlug}/info` // Use /addons when add-on is installed
-  );

src/data/hassio/supervisor.ts

@@ -1,6 +1,7 @@
 import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant, PanelInfo } from "../../types";
 import { SupervisorArch } from "../supervisor/supervisor";
+import { HassioAddonInfo } from "./addon";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
 export type HassioHomeAssistantInfo = {
@@ -21,7 +22,7 @@ export type HassioHomeAssistantInfo = {
 };
 
 export type HassioSupervisorInfo = {
-  addons: string[];
+  addons: HassioAddonInfo[];
   addons_repositories: string[];
   arch: SupervisorArch;
   channel: string;

src/data/history.ts

@@ -1,10 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDisplayFromEntityAttributes } from "../common/entity/compute_state_display";
-import {
-  computeStateName,
-  computeStateNameFromEntityAttributes,
-} from "../common/entity/compute_state_name";
+import { computeStateNameFromEntityAttributes } from "../common/entity/compute_state_name";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
 import { FrontendLocaleData } from "./translation";
@@ -200,7 +197,7 @@ export const fetchRecent = (
 
 export const fetchRecentWS = (
   hass: HomeAssistant,
-  entityId: string, // This may be CSV
+  entityId: string,
   startTime: Date,
   endTime: Date,
   skipInitialState = false,
@@ -216,19 +213,23 @@ export const fetchRecentWS = (
     include_start_time_state: !skipInitialState,
     minimal_response: minimalResponse,
     no_attributes: noAttributes || false,
-    entity_ids: entityId.split(","),
+    entity_ids: [entityId],
   });
 
 export const fetchDate = (
   hass: HomeAssistant,
   startTime: Date,
   endTime: Date,
-  entityIds: string[]
+  entityId?: string
 ): Promise<HassEntity[][]> =>
   hass.callApi(
     "GET",
     `history/period/${startTime.toISOString()}?end_time=${endTime.toISOString()}&minimal_response${
-      entityIds ? `&filter_entity_id=${entityIds.join(",")}` : ``
+      entityId ? `&filter_entity_id=${entityId}` : ``
+    }${
+      entityId && !entityIdHistoryNeedsAttributes(hass, entityId)
+        ? `&no_attributes`
+        : ``
     }`
   );
 
@@ -236,19 +237,19 @@ export const fetchDateWS = (
   hass: HomeAssistant,
   startTime: Date,
   endTime: Date,
-  entityIds: string[]
+  entityId?: string
 ) => {
   const params = {
     type: "history/history_during_period",
     start_time: startTime.toISOString(),
     end_time: endTime.toISOString(),
     minimal_response: true,
-    no_attributes: !entityIds
-      .map((entityId) => entityIdHistoryNeedsAttributes(hass, entityId))
-      .reduce((cur, next) => cur || next, false),
+    no_attributes: !!(
+      entityId && !entityIdHistoryNeedsAttributes(hass, entityId)
+    ),
   };
-  if (entityIds.length !== 0) {
-    return hass.callWS<HistoryStates>({ ...params, entity_ids: entityIds });
+  if (entityId) {
+    return hass.callWS<HistoryStates>({ ...params, entity_ids: [entityId] });
   }
   return hass.callWS<HistoryStates>(params);
 };
@@ -546,16 +547,3 @@ export const adjustStatisticsSum = (
     start_time,
     adjustment,
   });
-
-export const getStatisticLabel = (
-  hass: HomeAssistant,
-  statisticsId: string,
-  statisticsMetaData: Record<string, StatisticsMetaData>
-): string => {
-  const entity = hass.states[statisticsId];
-  if (entity) {
-    return computeStateName(entity);
-  }
-  const statisticMetaData = statisticsMetaData[statisticsId];
-  return statisticMetaData?.name || statisticsId;
-};

src/data/logbook.ts

@@ -1,4 +1,4 @@
-import { HassEntity } from "home-assistant-js-websocket";
+import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   BINARY_STATE_OFF,
   BINARY_STATE_ON,
@@ -6,21 +6,12 @@ import {
 } from "../common/const";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDisplay } from "../common/entity/compute_state_display";
-import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { LocalizeFunc } from "../common/translations/localize";
-import { HaEntityPickerEntityFilterFunc } from "../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../types";
 import { UNAVAILABLE_STATES } from "./entity";
 
 const LOGBOOK_LOCALIZE_PATH = "ui.components.logbook.messages";
-export const CONTINUOUS_DOMAINS = ["counter", "proximity", "sensor"];
-
-export interface LogbookStreamMessage {
-  events: LogbookEntry[];
-  start_time?: number; // Start time of this historical chunk
-  end_time?: number; // End time of this historical chunk
-  partial?: boolean; // Indiciates more historical chunks are coming
-}
+export const CONTINUOUS_DOMAINS = ["proximity", "sensor"];
 
 export interface LogbookEntry {
   // Base data
@@ -172,12 +163,12 @@ const getLogbookDataFromServer = (
 
 export const subscribeLogbook = (
   hass: HomeAssistant,
-  callbackFunction: (message: LogbookStreamMessage) => void,
+  callbackFunction: (message: LogbookEntry[]) => void,
   startDate: string,
   endDate: string,
   entityIds?: string[],
   deviceIds?: string[]
-): Promise<() => Promise<void>> => {
+): Promise<UnsubscribeFunc> => {
   // If all specified filters are empty lists, we can return an empty list.
   if (
     (entityIds || deviceIds) &&
@@ -197,8 +188,8 @@ export const subscribeLogbook = (
   if (deviceIds?.length) {
     params.device_ids = deviceIds;
   }
-  return hass.connection.subscribeMessage<LogbookStreamMessage>(
-    (message) => callbackFunction(message),
+  return hass.connection.subscribeMessage<LogbookEntry[]>(
+    (message?) => callbackFunction(message),
     params
   );
 };
@@ -427,10 +418,3 @@ export const localizeStateMessage = (
       : state
   );
 };
-
-export const filterLogbookCompatibleEntities: HaEntityPickerEntityFilterFunc = (
-  entity
-) =>
-  computeStateDomain(entity) !== "sensor" ||
-  (entity.attributes.unit_of_measurement === undefined &&
-    entity.attributes.state_class === undefined);

src/data/lovelace.ts

@@ -131,9 +131,9 @@ export interface CallServiceActionConfig extends BaseActionConfig {
   action: "call-service";
   service: string;
   target?: HassServiceTarget;
-  // "service_data" is kept for backwards compatibility. Replaced by "data".
-  service_data?: Record<string, unknown>;
-  data?: Record<string, unknown>;
+  service_data?: {
+    [key: string]: any;
+  };
 }
 
 export interface NavigateActionConfig extends BaseActionConfig {
@@ -159,7 +159,6 @@ export interface CustomActionConfig extends BaseActionConfig {
 }
 
 export interface BaseActionConfig {
-  action: string;
   confirmation?: ConfirmationRestrictionConfig;
 }
 

src/data/media-player.ts

@@ -36,7 +36,6 @@ import { supportsFeature } from "../common/entity/supports-feature";
 import { MediaPlayerItemId } from "../components/media-player/ha-media-player-browse";
 import type { HomeAssistant } from "../types";
 import { UNAVAILABLE_STATES } from "./entity";
-import { isTTSMediaSource } from "./tts";
 
 interface MediaPlayerEntityAttributes extends HassEntityAttributeBase {
   media_content_id?: string;
@@ -442,29 +441,3 @@ export const handleMediaControlClick = (
           entity_id: stateObj!.entity_id,
         }
   );
-
-export const mediaPlayerPlayMedia = (
-  hass: HomeAssistant,
-  entity_id: string,
-  media_content_id: string,
-  media_content_type: string,
-  extra: {
-    enqueue?: "play" | "next" | "add" | "replace";
-    announce?: boolean;
-  } = {}
-) => {
-  // We set text-to-speech to announce.
-  if (
-    !extra.enqueue &&
-    extra.announce === undefined &&
-    isTTSMediaSource(media_content_id)
-  ) {
-    extra.announce = true;
-  }
-  return hass.callService("media_player", "play_media", {
-    entity_id,
-    media_content_id,
-    media_content_type,
-    ...extra,
-  });
-};

src/data/supervisor/common.ts

@@ -1,34 +0,0 @@
-import { atLeastVersion } from "../../common/config/version";
-import { HomeAssistant } from "../../types";
-import { hassioApiResultExtractor, HassioResponse } from "../hassio/common";
-
-export interface SupervisorApiCallOptions {
-  method?: "get" | "post" | "delete";
-  data?: Record<string, any>;
-  timeout?: number;
-}
-
-export const supervisorApiCall = async <T>(
-  hass: HomeAssistant,
-  endpoint: string,
-  options?: SupervisorApiCallOptions
-): Promise<T> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    // Websockets was added in 2021.2.4
-    return hass.callWS<T>({
-      type: "supervisor/api",
-      endpoint,
-      method: options?.method || "get",
-      timeout: options?.timeout ?? null,
-      data: options?.data,
-    });
-  }
-  return hassioApiResultExtractor(
-    await hass.callApi<HassioResponse<T>>(
-      // @ts-ignore
-      (options.method || "get").toUpperCase(),
-      `hassio${endpoint}`,
-      options?.data
-    )
-  );
-};

src/data/supervisor/store.ts

@@ -1,7 +1,7 @@
+import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant } from "../../types";
-import { AddonStage } from "../hassio/addon";
-import { supervisorApiCall } from "./common";
-import { SupervisorArch } from "./supervisor";
+import { AddonRepository, AddonStage } from "../hassio/addon";
+import { hassioApiResultExtractor, HassioResponse } from "../hassio/common";
 
 export interface StoreAddon {
   advanced: boolean;
@@ -13,34 +13,14 @@ export interface StoreAddon {
   installed: boolean;
   logo: boolean;
   name: string;
-  repository: string;
+  repository: AddonRepository;
   slug: string;
   stage: AddonStage;
   update_available: boolean;
   url: string;
+  version: string | null;
   version_latest: string;
-  version: null;
 }
-
-export interface StoreAddonDetails extends StoreAddon {
-  apparmor: boolean;
-  arch: SupervisorArch[];
-  auth_api: boolean;
-  detached: boolean;
-  docker_api: boolean;
-  documentation: boolean;
-  full_access: boolean;
-  hassio_api: boolean;
-  hassio_role: string;
-  homeassistant_api: boolean;
-  host_network: boolean;
-  host_pid: boolean;
-  ingress: boolean;
-  long_description: string;
-  rating: number;
-  signed: boolean;
-}
-
 interface StoreRepository {
   maintainer: string;
   name: string;
@@ -56,25 +36,16 @@ export interface SupervisorStore {
 
 export const fetchSupervisorStore = async (
   hass: HomeAssistant
-): Promise<SupervisorStore> => supervisorApiCall(hass, "/store");
+): Promise<SupervisorStore> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/store",
+      method: "get",
+    });
+  }
 
-export const fetchStoreRepositories = async (
-  hass: HomeAssistant
-): Promise<StoreRepository[]> => supervisorApiCall(hass, "/store/repositories");
-
-export const addStoreRepository = async (
-  hass: HomeAssistant,
-  repository: string
-): Promise<void> =>
-  supervisorApiCall(hass, "/store/repositories", {
-    method: "post",
-    data: { repository },
-  });
-
-export const removeStoreRepository = async (
-  hass: HomeAssistant,
-  repository: string
-): Promise<void> =>
-  supervisorApiCall(hass, `/store/repositories/${repository}`, {
-    method: "delete",
-  });
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<SupervisorStore>>("GET", `hassio/store`)
+  );
+};

src/data/translation.ts

@@ -38,8 +38,7 @@ export type TranslationCategory =
   | "device_automation"
   | "mfa_setup"
   | "system_health"
-  | "device_class"
-  | "application_credentials";
+  | "device_class";
 
 export const fetchTranslationPreferences = (hass: HomeAssistant) =>
   fetchFrontendUserData(hass.connection, "language");

src/data/weather.ts

@@ -2,21 +2,9 @@ import {
   mdiAlertCircleOutline,
   mdiGauge,
   mdiWaterPercent,
-  mdiWeatherCloudy,
   mdiWeatherFog,
-  mdiWeatherHail,
-  mdiWeatherLightning,
-  mdiWeatherLightningRainy,
-  mdiWeatherNight,
-  mdiWeatherNightPartlyCloudy,
-  mdiWeatherPartlyCloudy,
-  mdiWeatherPouring,
   mdiWeatherRainy,
-  mdiWeatherSnowy,
-  mdiWeatherSnowyRainy,
-  mdiWeatherSunny,
   mdiWeatherWindy,
-  mdiWeatherWindyVariant,
 } from "@mdi/js";
 import {
   HassEntityAttributeBase,
@@ -37,24 +25,14 @@ interface ForecastAttribute {
   humidity?: number;
   condition?: string;
   daytime?: boolean;
-  pressure?: number;
-  wind_speed?: string;
 }
 
 interface WeatherEntityAttributes extends HassEntityAttributeBase {
-  attribution?: string;
+  temperature: number;
   humidity?: number;
   forecast?: ForecastAttribute[];
-  pressure?: number;
-  temperature?: number;
-  visibility?: number;
-  wind_bearing?: number | string;
-  wind_speed?: number;
-  precipitation_unit: string;
-  pressure_unit: string;
-  temperature_unit: string;
-  visibility_unit: string;
-  wind_speed_unit: string;
+  wind_speed: string;
+  wind_bearing: string;
 }
 
 export interface WeatherEntity extends HassEntityBase {
@@ -79,21 +57,7 @@ export const weatherSVGs = new Set<string>([
 ]);
 
 export const weatherIcons = {
-  "clear-night": mdiWeatherNight,
-  cloudy: mdiWeatherCloudy,
   exceptional: mdiAlertCircleOutline,
-  fog: mdiWeatherFog,
-  hail: mdiWeatherHail,
-  lightning: mdiWeatherLightning,
-  "lightning-rainy": mdiWeatherLightningRainy,
-  partlycloudy: mdiWeatherPartlyCloudy,
-  pouring: mdiWeatherPouring,
-  rainy: mdiWeatherRainy,
-  snowy: mdiWeatherSnowy,
-  "snowy-rainy": mdiWeatherSnowyRainy,
-  sunny: mdiWeatherSunny,
-  windy: mdiWeatherWindy,
-  "windy-variant": mdiWeatherWindyVariant,
 };
 
 export const weatherAttrIcons = {
@@ -148,16 +112,16 @@ const cardinalDirections = [
   "N",
 ];
 
-const getWindBearingText = (degree: number | string): string => {
-  const degreenum = typeof degree === "number" ? degree : parseInt(degree, 10);
+const getWindBearingText = (degree: string): string => {
+  const degreenum = parseInt(degree, 10);
   if (isFinite(degreenum)) {
     // eslint-disable-next-line no-bitwise
     return cardinalDirections[(((degreenum + 11.25) / 22.5) | 0) % 16];
   }
-  return typeof degree === "number" ? degree.toString() : degree;
+  return degree;
 };
 
-const getWindBearing = (bearing: number | string): string => {
+const getWindBearing = (bearing: string): string => {
   if (bearing != null) {
     return getWindBearingText(bearing);
   }
@@ -166,19 +130,14 @@ const getWindBearing = (bearing: number | string): string => {
 
 export const getWind = (
   hass: HomeAssistant,
-  stateObj: WeatherEntity,
-  speed?: number,
-  bearing?: number | string
+  speed: string,
+  bearing: string
 ): string => {
-  const speedText =
-    speed !== undefined && speed !== null
-      ? `${formatNumber(speed, hass.locale)} ${getWeatherUnit(
-          hass!,
-          stateObj,
-          "wind_speed"
-        )}`
-      : "-";
-  if (bearing !== undefined && bearing !== null) {
+  const speedText = `${formatNumber(speed, hass.locale)} ${getWeatherUnit(
+    hass!,
+    "wind_speed"
+  )}`;
+  if (bearing !== null) {
     const cardinalDirection = getWindBearing(bearing);
     return `${speedText} (${
       hass.localize(
@@ -191,28 +150,13 @@ export const getWind = (
 
 export const getWeatherUnit = (
   hass: HomeAssistant,
-  stateObj: WeatherEntity,
   measure: string
 ): string => {
-  const lengthUnit = hass.config.unit_system.length || "";
   switch (measure) {
     case "visibility":
-      return stateObj.attributes.visibility_unit || lengthUnit;
+      return hass.config.unit_system.length || "";
     case "precipitation":
-      return stateObj.attributes.precipitation_unit || lengthUnit === "km"
-        ? "mm"
-        : "in";
-    case "pressure":
-      return stateObj.attributes.pressure_unit || lengthUnit === "km"
-        ? "hPa"
-        : "inHg";
-    case "temperature":
-      return (
-        stateObj.attributes.temperature_unit ||
-        hass.config.unit_system.temperature
-      );
-    case "wind_speed":
-      return stateObj.attributes.wind_speed_unit || `${lengthUnit}/h`;
+      return hass.config.unit_system.accumulated_precipitation || "";
     case "humidity":
     case "precipitation_probability":
       return "%";
@@ -257,7 +201,7 @@ export const getSecondaryWeatherAttribute = (
         `
       : hass!.localize(`ui.card.weather.attributes.${attribute}`)}
     ${formatNumber(value, hass.locale, { maximumFractionDigits: 1 })}
-    ${getWeatherUnit(hass!, stateObj, attribute)}
+    ${getWeatherUnit(hass!, attribute)}
   `;
 };
 
@@ -292,7 +236,7 @@ const getWeatherExtrema = (
     return undefined;
   }
 
-  const unit = getWeatherUnit(hass!, stateObj, "temperature");
+  const unit = getWeatherUnit(hass!, "temperature");
 
   return html`
     ${tempHigh ? `${formatNumber(tempHigh, hass.locale)} ${unit}` : ""}
@@ -493,13 +437,6 @@ export const getWeatherStateIcon = (
   return undefined;
 };
 
-export const weatherIcon = (state?: string, nightTime?: boolean): string =>
-  !state
-    ? undefined
-    : nightTime && state === "partlycloudy"
-    ? mdiWeatherNightPartlyCloudy
-    : weatherIcons[state];
-
 const DAY_IN_MILLISECONDS = 86400000;
 
 export const isForecastHourly = (

src/data/zwave_js.ts

@@ -1,5 +1,6 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
+import { DeviceRegistryEntry } from "./device_registry";
 
 export enum InclusionState {
   /** The controller isn't doing anything regarding inclusion. */
@@ -84,23 +85,6 @@ enum Protocols {
   ZWave = 0,
   ZWaveLongRange = 1,
 }
-
-export enum FirmwareUpdateStatus {
-  Error_Timeout = -1,
-  Error_Checksum = 0,
-  Error_TransmissionFailed = 1,
-  Error_InvalidManufacturerID = 2,
-  Error_InvalidFirmwareID = 3,
-  Error_InvalidFirmwareTarget = 4,
-  Error_InvalidHeaderInformation = 5,
-  Error_InvalidHeaderFormat = 6,
-  Error_InsufficientMemory = 7,
-  Error_InvalidHardwareVersion = 8,
-  OK_WaitingForActivation = 0xfd,
-  OK_NoRestart = 0xfe,
-  OK_RestartPending = 0xff,
-}
-
 export interface QRProvisioningInformation {
   version: QRCodeVersion;
   securityClasses: SecurityClass[];
@@ -125,6 +109,10 @@ export interface PlannedProvisioningEntry {
 
 export const MINIMUM_QR_STRING_LENGTH = 52;
 
+export interface ZWaveJSNodeIdentifiers {
+  home_id: string;
+  node_id: number;
+}
 export interface ZWaveJSNetwork {
   client: ZWaveJSClient;
   controller: ZWaveJSController;
@@ -163,7 +151,7 @@ export interface ZWaveJSController {
 export interface ZWaveJSNodeStatus {
   node_id: number;
   ready: boolean;
-  status: NodeStatus;
+  status: number;
   is_secure: boolean | string;
   is_routing: boolean | null;
   zwave_plus_version: number | null;
@@ -179,9 +167,6 @@ export interface ZwaveJSNodeMetadata {
   wakeup: string;
   reset: string;
   device_database_url: string;
-}
-
-export interface ZwaveJSNodeComments {
   comments: ZWaveJSNodeComment[];
 }
 
@@ -242,82 +227,6 @@ export interface ZWaveJSHealNetworkStatusMessage {
   heal_node_status: { [key: number]: string };
 }
 
-export interface ZWaveJSControllerStatisticsUpdatedMessage {
-  event: "statistics updated";
-  source: "controller";
-  messages_tx: number;
-  messages_rx: number;
-  messages_dropped_tx: number;
-  messages_dropped_rx: number;
-  nak: number;
-  can: number;
-  timeout_ack: number;
-  timeout_response: number;
-  timeout_callback: number;
-}
-
-export enum RssiError {
-  NotAvailable = 127,
-  ReceiverSaturated = 126,
-  NoSignalDetected = 125,
-}
-
-export enum ProtocolDataRate {
-  ZWave_9k6 = 0x01,
-  ZWave_40k = 0x02,
-  ZWave_100k = 0x03,
-  LongRange_100k = 0x04,
-}
-
-export interface ZWaveJSNodeStatisticsUpdatedMessage {
-  event: "statistics updated";
-  source: "node";
-  commands_tx: number;
-  commands_rx: number;
-  commands_dropped_tx: number;
-  commands_dropped_rx: number;
-  timeout_response: number;
-  rtt: number | null;
-  rssi: RssiError | number | null;
-  lwr: ZWaveJSRouteStatistics | null;
-  nlwr: ZWaveJSRouteStatistics | null;
-}
-
-export interface ZWaveJSRouteStatistics {
-  protocol_data_rate: number;
-  repeaters: string[];
-  rssi: RssiError | number | null;
-  repeater_rssi: (RssiError | number)[];
-  route_failed_between: [string, string] | null;
-}
-
-export interface ZWaveJSNodeStatusUpdatedMessage {
-  event: "ready" | "wake up" | "sleep" | "dead" | "alive";
-  ready: boolean;
-  status: NodeStatus;
-}
-
-export interface ZWaveJSNodeFirmwareUpdateProgressMessage {
-  event: "firmware update progress";
-  sent_fragments: number;
-  total_fragments: number;
-}
-
-export interface ZWaveJSNodeFirmwareUpdateFinishedMessage {
-  event: "firmware update finished";
-  status: FirmwareUpdateStatus;
-  wait_time: number;
-}
-
-export type ZWaveJSNodeFirmwareUpdateCapabilities =
-  | { firmware_upgradable: false }
-  | {
-      firmware_upgradable: true;
-      firmware_targets: number[];
-      continues_to_function: boolean | null;
-      supports_activation: boolean | null;
-    };
-
 export interface ZWaveJSRemovedNode {
   node_id: number;
   manufacturer: string;
@@ -354,25 +263,33 @@ export interface RequestedGrant {
 
 export const nodeStatus = ["unknown", "asleep", "awake", "dead", "alive"];
 
+export interface ZWaveJsMigrationData {
+  migration_device_map: Record<string, string>;
+  zwave_entity_ids: string[];
+  zwave_js_entity_ids: string[];
+  migration_entity_map: Record<string, string>;
+  migrated: boolean;
+}
+
+export const migrateZwave = (
+  hass: HomeAssistant,
+  entry_id: string,
+  dry_run = true
+): Promise<ZWaveJsMigrationData> =>
+  hass.callWS({
+    type: "zwave_js/migrate_zwave",
+    entry_id,
+    dry_run,
+  });
+
 export const fetchZwaveNetworkStatus = (
   hass: HomeAssistant,
-  device_or_entry_id: {
-    device_id?: string;
-    entry_id?: string;
-  }
-): Promise<ZWaveJSNetwork> => {
-  if (device_or_entry_id.device_id && device_or_entry_id.entry_id) {
-    throw new Error("Only one of device or entry ID should be supplied.");
-  }
-  if (!device_or_entry_id.device_id && !device_or_entry_id.entry_id) {
-    throw new Error("Either device or entry ID should be supplied.");
-  }
-  return hass.callWS({
+  entry_id: string
+): Promise<ZWaveJSNetwork> =>
+  hass.callWS({
     type: "zwave_js/network_status",
-    device_id: device_or_entry_id.device_id,
-    entry_id: device_or_entry_id.entry_id,
+    entry_id,
   });
-};
 
 export const fetchZwaveDataCollectionStatus = (
   hass: HomeAssistant,
@@ -516,19 +433,6 @@ export const fetchZwaveNodeStatus = (
     device_id,
   });
 
-export const subscribeZwaveNodeStatus = (
-  hass: HomeAssistant,
-  device_id: string,
-  callbackFunction: (message: ZWaveJSNodeStatusUpdatedMessage) => void
-): Promise<UnsubscribeFunc> =>
-  hass.connection.subscribeMessage(
-    (message: any) => callbackFunction(message),
-    {
-      type: "zwave_js/subscribe_node_status",
-      device_id,
-    }
-  );
-
 export const fetchZwaveNodeMetadata = (
   hass: HomeAssistant,
   device_id: string
@@ -538,15 +442,6 @@ export const fetchZwaveNodeMetadata = (
     device_id,
   });
 
-export const fetchZwaveNodeComments = (
-  hass: HomeAssistant,
-  device_id: string
-): Promise<ZwaveJSNodeComments> =>
-  hass.callWS({
-    type: "zwave_js/node_comments",
-    device_id,
-  });
-
 export const fetchZwaveNodeConfigParameters = (
   hass: HomeAssistant,
   device_id: string
@@ -626,6 +521,19 @@ export const stopHealZwaveNetwork = (
     entry_id,
   });
 
+export const subscribeZwaveNodeReady = (
+  hass: HomeAssistant,
+  device_id: string,
+  callbackFunction: (message) => void
+): Promise<UnsubscribeFunc> =>
+  hass.connection.subscribeMessage(
+    (message: any) => callbackFunction(message),
+    {
+      type: "zwave_js/node_ready",
+      device_id,
+    }
+  );
+
 export const subscribeHealZwaveNetworkProgress = (
   hass: HomeAssistant,
   entry_id: string,
@@ -639,109 +547,27 @@ export const subscribeHealZwaveNetworkProgress = (
     }
   );
 
-export const subscribeZwaveControllerStatistics = (
-  hass: HomeAssistant,
-  entry_id: string,
-  callbackFunction: (message: ZWaveJSControllerStatisticsUpdatedMessage) => void
-): Promise<UnsubscribeFunc> =>
-  hass.connection.subscribeMessage(
-    (message: any) => callbackFunction(message),
-    {
-      type: "zwave_js/subscribe_controller_statistics",
-      entry_id,
-    }
-  );
-
-export const subscribeZwaveNodeStatistics = (
-  hass: HomeAssistant,
-  device_id: string,
-  callbackFunction: (message: ZWaveJSNodeStatisticsUpdatedMessage) => void
-): Promise<UnsubscribeFunc> =>
-  hass.connection.subscribeMessage(
-    (message: any) => callbackFunction(message),
-    {
-      type: "zwave_js/subscribe_node_statistics",
-      device_id,
-    }
-  );
-
-export const fetchZwaveNodeIsFirmwareUpdateInProgress = (
-  hass: HomeAssistant,
-  device_id: string
-): Promise<boolean> =>
-  hass.callWS({
-    type: "zwave_js/get_firmware_update_progress",
-    device_id,
-  });
-
-export const fetchZwaveIsAnyFirmwareUpdateInProgress = (
-  hass: HomeAssistant,
-  entry_id: string
-): Promise<boolean> =>
-  hass.callWS({
-    type: "zwave_js/get_any_firmware_update_progress",
-    entry_id,
-  });
-
-export const fetchZwaveNodeFirmwareUpdateCapabilities = (
-  hass: HomeAssistant,
-  device_id: string
-): Promise<ZWaveJSNodeFirmwareUpdateCapabilities> =>
-  hass.callWS({
-    type: "zwave_js/get_firmware_update_capabilities",
-    device_id,
-  });
-
-export const uploadFirmwareAndBeginUpdate = async (
-  hass: HomeAssistant,
-  device_id: string,
-  file: File,
-  target?: number
-) => {
-  const fd = new FormData();
-  fd.append("file", file);
-  if (target !== undefined) {
-    fd.append("target", target.toString());
+export const getZwaveJsIdentifiersFromDevice = (
+  device: DeviceRegistryEntry
+): ZWaveJSNodeIdentifiers | undefined => {
+  if (!device) {
+    return undefined;
   }
-  const resp = await hass.fetchWithAuth(
-    `/api/zwave_js/firmware/upload/${device_id}`,
-    {
-      method: "POST",
-      body: fd,
-    }
-  );
 
-  if (resp.status !== 200) {
-    throw new Error(resp.statusText);
+  const zwaveJSIdentifier = device.identifiers.find(
+    (identifier) => identifier[0] === "zwave_js"
+  );
+  if (!zwaveJSIdentifier) {
+    return undefined;
   }
+
+  const identifiers = zwaveJSIdentifier[1].split("-");
+  return {
+    node_id: parseInt(identifiers[1]),
+    home_id: identifiers[0],
+  };
 };
 
-export const subscribeZwaveNodeFirmwareUpdate = (
-  hass: HomeAssistant,
-  device_id: string,
-  callbackFunction: (
-    message:
-      | ZWaveJSNodeFirmwareUpdateFinishedMessage
-      | ZWaveJSNodeFirmwareUpdateProgressMessage
-  ) => void
-): Promise<UnsubscribeFunc> =>
-  hass.connection.subscribeMessage(
-    (message: any) => callbackFunction(message),
-    {
-      type: "zwave_js/subscribe_firmware_update_status",
-      device_id,
-    }
-  );
-
-export const abortZwaveNodeFirmwareUpdate = (
-  hass: HomeAssistant,
-  device_id: string
-): Promise<UnsubscribeFunc> =>
-  hass.callWS({
-    type: "zwave_js/abort_firmware_update",
-    device_id,
-  });
-
 export type ZWaveJSLogUpdate = ZWaveJSLogMessageUpdate | ZWaveJSLogConfigUpdate;
 
 interface ZWaveJSLogMessageUpdate {

src/dialogs/domain-toggler/dialog-domain-toggler.ts

@@ -47,14 +47,10 @@ class DomainTogglerDialog
         hideActions
         .heading=${createCloseHeading(
           this.hass,
-          this._params.title ||
-            this.hass.localize("ui.dialogs.domain_toggler.title")
+          this.hass.localize("ui.dialogs.domain_toggler.title")
         )}
       >
-        ${this._params.description
-          ? html`<div class="description">${this._params.description}</div>`
-          : ""}
-        <div class="domains">
+        <div>
           ${domains.map(
             (domain) =>
               html`
@@ -96,10 +92,7 @@ class DomainTogglerDialog
         ha-dialog {
           --mdc-dialog-max-width: 500px;
         }
-        .description {
-          margin-bottom: 8px;
-        }
-        .domains {
+        div {
           display: grid;
           grid-template-columns: auto auto;
           grid-row-gap: 8px;

src/dialogs/domain-toggler/show-dialog-domain-toggler.ts

@@ -1,8 +1,6 @@
 import { fireEvent } from "../../common/dom/fire_event";
 
 export interface HaDomainTogglerDialogParams {
-  title?: string;
-  description?: string;
   domains: string[];
   exposedDomains: string[] | null;
   toggleDomain: (domain: string, turnOn: boolean) => void;

src/dialogs/generic/dialog-box.ts

@@ -8,6 +8,7 @@ import "../../components/ha-dialog";
 import "../../components/ha-svg-icon";
 import "../../components/ha-switch";
 import { HaTextField } from "../../components/ha-textfield";
+import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { DialogBoxParams } from "./show-dialog-box";
 
@@ -134,34 +135,34 @@ class DialogBox extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
-      :host([inert]) {
-        pointer-events: initial !important;
-        cursor: initial !important;
-      }
-      a {
-        color: var(--primary-color);
-      }
-      p {
-        margin: 0;
-        padding-top: 6px;
-        padding-bottom: 24px;
-        color: var(--primary-text-color);
-      }
-      .no-bottom-padding {
-        padding-bottom: 0;
-      }
-      .secondary {
-        color: var(--secondary-text-color);
-      }
-      ha-dialog {
-        --mdc-dialog-heading-ink-color: var(--primary-text-color);
-        --mdc-dialog-content-ink-color: var(--primary-text-color);
-        --justify-action-buttons: space-between;
-        /* Place above other dialogs */
-        --dialog-z-index: 104;
-      }
-    `;
+    return [
+      haStyleDialog,
+      css`
+        :host([inert]) {
+          pointer-events: initial !important;
+          cursor: initial !important;
+        }
+        a {
+          color: var(--primary-color);
+        }
+        p {
+          margin: 0;
+          padding-top: 6px;
+          padding-bottom: 24px;
+          color: var(--primary-text-color);
+        }
+        .no-bottom-padding {
+          padding-bottom: 0;
+        }
+        .secondary {
+          color: var(--secondary-text-color);
+        }
+        ha-dialog {
+          /* Place above other dialogs */
+          --dialog-z-index: 104;
+        }
+      `,
+    ];
   }
 }
 

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

@@ -37,7 +37,7 @@ export class MoreInfoAlarmControlPanel extends LitElement {
                 id="alarmCode"
                 .label=${this.hass.localize("ui.card.alarm_control_panel.code")}
                 type="password"
-                .inputMode=${this.stateObj.attributes.code_format ===
+                .inputmode=${this.stateObj.attributes.code_format ===
                 FORMAT_NUMBER
                   ? "numeric"
                   : "text"}

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

@@ -11,6 +11,7 @@ import {
 } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
@@ -25,8 +26,8 @@ import {
   handleMediaControlClick,
   MediaPickedEvent,
   MediaPlayerEntity,
-  mediaPlayerPlayMedia,
   SUPPORT_BROWSE_MEDIA,
+  SUPPORT_PLAY_MEDIA,
   SUPPORT_SELECT_SOUND_MODE,
   SUPPORT_SELECT_SOURCE,
   SUPPORT_VOLUME_BUTTONS,
@@ -77,7 +78,6 @@ class MoreInfoMediaPlayer extends LitElement {
                 @click=${this._showBrowseMedia}
               >
                 <ha-svg-icon
-                  class="browse-media-icon"
                   .path=${mdiPlayBoxMultiple}
                   slot="icon"
                 ></ha-svg-icon>
@@ -190,6 +190,14 @@ class MoreInfoMediaPlayer extends LitElement {
             </div>
           `
         : ""}
+      ${isComponentLoaded(this.hass, "tts") &&
+      supportsFeature(stateObj, SUPPORT_PLAY_MEDIA)
+        ? html`
+            <div class="tts">
+              Text to speech has moved to the media browser.
+            </div>
+          `
+        : ""}
     `;
   }
 
@@ -203,7 +211,6 @@ class MoreInfoMediaPlayer extends LitElement {
 
       .controls {
         display: flex;
-        flex-wrap: wrap;
         align-items: center;
         --mdc-theme-primary: currentColor;
       }
@@ -235,10 +242,6 @@ class MoreInfoMediaPlayer extends LitElement {
       mwc-button > ha-svg-icon {
         vertical-align: text-bottom;
       }
-
-      .browse-media-icon {
-        margin-left: 8px;
-      }
     `;
   }
 
@@ -296,14 +299,20 @@ class MoreInfoMediaPlayer extends LitElement {
       action: "play",
       entityId: this.stateObj!.entity_id,
       mediaPickedCallback: (pickedMedia: MediaPickedEvent) =>
-        mediaPlayerPlayMedia(
-          this.hass,
-          this.stateObj!.entity_id,
+        this._playMedia(
           pickedMedia.item.media_content_id,
           pickedMedia.item.media_content_type
         ),
     });
   }
+
+  private _playMedia(media_content_id: string, media_content_type: string) {
+    this.hass!.callService("media_player", "play_media", {
+      entity_id: this.stateObj!.entity_id,
+      media_content_id,
+      media_content_type,
+    });
+  }
 }
 
 declare global {

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

@@ -1,10 +1,25 @@
 import {
+  mdiAlertCircleOutline,
   mdiEye,
   mdiGauge,
   mdiThermometer,
   mdiWaterPercent,
+  mdiWeatherCloudy,
+  mdiWeatherFog,
+  mdiWeatherHail,
+  mdiWeatherLightning,
+  mdiWeatherLightningRainy,
+  mdiWeatherNight,
+  mdiWeatherPartlyCloudy,
+  mdiWeatherPouring,
+  mdiWeatherRainy,
+  mdiWeatherSnowy,
+  mdiWeatherSnowyRainy,
+  mdiWeatherSunny,
   mdiWeatherWindy,
+  mdiWeatherWindyVariant,
 } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
@@ -22,16 +37,32 @@ import {
   getWeatherUnit,
   getWind,
   isForecastHourly,
-  WeatherEntity,
-  weatherIcons,
 } from "../../../data/weather";
 import { HomeAssistant } from "../../../types";
 
+const weatherIcons = {
+  "clear-night": mdiWeatherNight,
+  cloudy: mdiWeatherCloudy,
+  exceptional: mdiAlertCircleOutline,
+  fog: mdiWeatherFog,
+  hail: mdiWeatherHail,
+  lightning: mdiWeatherLightning,
+  "lightning-rainy": mdiWeatherLightningRainy,
+  partlycloudy: mdiWeatherPartlyCloudy,
+  pouring: mdiWeatherPouring,
+  rainy: mdiWeatherRainy,
+  snowy: mdiWeatherSnowy,
+  "snowy-rainy": mdiWeatherSnowyRainy,
+  sunny: mdiWeatherSunny,
+  windy: mdiWeatherWindy,
+  "windy-variant": mdiWeatherWindyVariant,
+};
+
 @customElement("more-info-weather")
 class MoreInfoWeather extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public stateObj?: WeatherEntity;
+  @property() public stateObj?: HassEntity;
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     if (changedProps.has("stateObj")) {
@@ -58,23 +89,19 @@ class MoreInfoWeather extends LitElement {
     const hourly = isForecastHourly(this.stateObj.attributes.forecast);
 
     return html`
-      ${this._showValue(this.stateObj.attributes.temperature)
-        ? html`
-            <div class="flex">
-              <ha-svg-icon .path=${mdiThermometer}></ha-svg-icon>
-              <div class="main">
-                ${this.hass.localize("ui.card.weather.attributes.temperature")}
-              </div>
-              <div>
-                ${formatNumber(
-                  this.stateObj.attributes.temperature!,
-                  this.hass.locale
-                )}
-                ${getWeatherUnit(this.hass, this.stateObj, "temperature")}
-              </div>
-            </div>
-          `
-        : ""}
+      <div class="flex">
+        <ha-svg-icon .path=${mdiThermometer}></ha-svg-icon>
+        <div class="main">
+          ${this.hass.localize("ui.card.weather.attributes.temperature")}
+        </div>
+        <div>
+          ${formatNumber(
+            this.stateObj.attributes.temperature,
+            this.hass.locale
+          )}
+          ${getWeatherUnit(this.hass, "temperature")}
+        </div>
+      </div>
       ${this._showValue(this.stateObj.attributes.pressure)
         ? html`
             <div class="flex">
@@ -84,10 +111,10 @@ class MoreInfoWeather extends LitElement {
               </div>
               <div>
                 ${formatNumber(
-                  this.stateObj.attributes.pressure!,
+                  this.stateObj.attributes.pressure,
                   this.hass.locale
                 )}
-                ${getWeatherUnit(this.hass, this.stateObj, "pressure")}
+                ${getWeatherUnit(this.hass, "pressure")}
               </div>
             </div>
           `
@@ -101,7 +128,7 @@ class MoreInfoWeather extends LitElement {
               </div>
               <div>
                 ${formatNumber(
-                  this.stateObj.attributes.humidity!,
+                  this.stateObj.attributes.humidity,
                   this.hass.locale
                 )}
                 %
@@ -119,8 +146,7 @@ class MoreInfoWeather extends LitElement {
               <div>
                 ${getWind(
                   this.hass,
-                  this.stateObj,
-                  this.stateObj.attributes.wind_speed!,
+                  this.stateObj.attributes.wind_speed,
                   this.stateObj.attributes.wind_bearing
                 )}
               </div>
@@ -136,10 +162,10 @@ class MoreInfoWeather extends LitElement {
               </div>
               <div>
                 ${formatNumber(
-                  this.stateObj.attributes.visibility!,
+                  this.stateObj.attributes.visibility,
                   this.hass.locale
                 )}
-                ${getWeatherUnit(this.hass, this.stateObj, "visibility")}
+                ${getWeatherUnit(this.hass, "length")}
               </div>
             </div>
           `
@@ -178,24 +204,16 @@ class MoreInfoWeather extends LitElement {
                         `}
                     <div class="templow">
                       ${this._showValue(item.templow)
-                        ? `${formatNumber(item.templow!, this.hass.locale)}
-                          ${getWeatherUnit(
-                            this.hass,
-                            this.stateObj!,
-                            "temperature"
-                          )}`
+                        ? `${formatNumber(item.templow, this.hass.locale)}
+                          ${getWeatherUnit(this.hass, "temperature")}`
                         : hourly
                         ? ""
                         : "—"}
                     </div>
                     <div class="temp">
                       ${this._showValue(item.temperature)
-                        ? `${formatNumber(item.temperature!, this.hass.locale)}
-                        ${getWeatherUnit(
-                          this.hass,
-                          this.stateObj!,
-                          "temperature"
-                        )}`
+                        ? `${formatNumber(item.temperature, this.hass.locale)}
+                        ${getWeatherUnit(this.hass, "temperature")}`
                         : "—"}
                     </div>
                   </div>`
@@ -217,7 +235,6 @@ class MoreInfoWeather extends LitElement {
     return css`
       ha-svg-icon {
         color: var(--paper-item-icon-color);
-        margin-left: 8px;
       }
       .section {
         margin: 16px 0 8px 0;
@@ -253,7 +270,7 @@ class MoreInfoWeather extends LitElement {
     `;
   }
 
-  private _showValue(item: number | string | undefined): boolean {
+  private _showValue(item: string): boolean {
     return typeof item !== "undefined" && item !== null;
   }
 }

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -34,7 +34,7 @@ import "../../components/ha-circular-progress";
 import "../../components/ha-header-bar";
 import "../../components/ha-icon-button";
 import "../../components/ha-textfield";
-import { fetchHassioAddonsInfo } from "../../data/hassio/addon";
+import { fetchHassioSupervisorInfo } from "../../data/hassio/supervisor";
 import { domainToName } from "../../data/integration";
 import { getPanelNameTranslationKey } from "../../data/panel";
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
@@ -586,7 +586,7 @@ export class QuickBar extends LitElement {
     const sectionItems = this._generateNavigationConfigSectionCommands();
     const supervisorItems: BaseNavigationCommand[] = [];
     if (isComponentLoaded(this.hass, "hassio")) {
-      const addonsInfo = await fetchHassioAddonsInfo(this.hass);
+      const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
       supervisorItems.push({
         path: "/hassio/store",
         primaryText: this.hass.localize(
@@ -599,7 +599,7 @@ export class QuickBar extends LitElement {
           "ui.dialogs.quick-bar.commands.navigation.addon_dashboard"
         ),
       });
-      for (const addon of addonsInfo.addons.filter((a) => a.version)) {
+      for (const addon of supervisorInfo.addons) {
         supervisorItems.push({
           path: `/hassio/addon/${addon.slug}`,
           primaryText: this.hass.localize(
@@ -803,9 +803,6 @@ export class QuickBar extends LitElement {
 
         span.command-text {
           margin-left: 8px;
-          margin-inline-start: 8px;
-          margin-inline-end: initial;
-          direction: var(--direction);
         }
 
         mwc-list-item {

src/entrypoints/custom-panel.ts

@@ -51,15 +51,11 @@ function initialize(
   const style = document.createElement("style");
 
   style.innerHTML = `
-  body {
-    margin:0;
-    background-color: var(--primary-background-color, #fafafa);
-    color: var(--primary-text-color, #212121);
-  }
+  body { margin:0; }
   @media (prefers-color-scheme: dark) {
     body {
-      background-color: var(--primary-background-color, #111111);
-      color: var(--primary-text-color, #e1e1e1);
+      background-color: #111111;
+      color: #e1e1e1;
     }
   }`;
   document.head.appendChild(style);

src/fake_data/provide_hass.ts

@@ -194,7 +194,6 @@ export const provideHass = (
       socket: {
         readyState: WebSocket.OPEN,
       },
-      haVersion: "DEMO",
     } as any,
     connected: true,
     states: {},

src/mixins/lit-localize-lite-mixin.ts

@@ -3,8 +3,6 @@ import { property } from "lit/decorators";
 import { computeLocalize, LocalizeFunc } from "../common/translations/localize";
 import { Constructor, Resources } from "../types";
 import { getLocalLanguage, getTranslation } from "../util/common-translation";
-import { translationMetadata } from "../resources/translations-metadata";
-import { computeDirectionStyles } from "../common/util/compute_rtl";
 
 const empty = () => "";
 
@@ -27,14 +25,6 @@ export const litLocalizeLiteMixin = <T extends Constructor<LitElement>>(
       this._initializeLocalizeLite();
     }
 
-    protected firstUpdated(changedProps: PropertyValues) {
-      super.firstUpdated(changedProps);
-      computeDirectionStyles(
-        translationMetadata.translations[this.language!].isRTL,
-        this
-      );
-    }
-
     protected updated(changedProperties: PropertyValues) {
       super.updated(changedProperties);
       if (changedProperties.get("translationFragment")) {