comit

.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

@@ -1,4 +1,4 @@
-name: Report a bug with the UI / Dashboards
+name: Report a bug with the UI, Frontend or Lovelace
 description: Report an issue related to the Home Assistant frontend.
 labels: bug
 body:
@@ -9,7 +9,7 @@ body:
 
         If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.
 
-        **Please not not report issues for custom cards.**
+        **Please not not report issues for custom Lovelace cards.**
 
         [fr]: https://github.com/home-assistant/frontend/discussions
         [releases]: https://github.com/home-assistant/home-assistant/releases
@@ -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/ISSUE_TEMPLATE/config.yml

@@ -1,17 +1,17 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Request a feature for the UI / Dashboards
+  - name: Request a feature for the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/frontend/discussions/category_choices
     about: Request an new feature for the Home Assistant frontend.
-  - name: Report a bug that is NOT related to the UI / Dashboards
+  - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/core/issues
-    about: This is the issue tracker for our frontend. Please report other issues in the backend ("core") repository.
+    about: This is the issue tracker for our frontend. Please report other issues with the backend repository.
   - name: Report incorrect or missing information on our website
     url: https://github.com/home-assistant/home-assistant.io/issues
     about: Our documentation has its own issue tracker. Please report issues with the website there.
   - name: I have a question or need support
     url: https://www.home-assistant.io/help
-    about: We use GitHub for tracking bugs. Check our website for resources on getting help.
+    about: We use GitHub for tracking bugs, check our website for resources on getting help.
   - name: I'm unsure where to go
     url: https://www.home-assistant.io/join-chat
     about: If you are unsure where to go, then joining our chat is recommended; Just ask!

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

build-scripts/webpack.js

@@ -3,10 +3,10 @@ const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
-const log = require("fancy-log");
-const WebpackBar = require("webpackbar");
 const paths = require("./paths.js");
 const bundle = require("./bundle.js");
+const log = require("fancy-log");
+const WebpackBar = require("webpackbar");
 
 class LogStartCompilePlugin {
   ignoredFirst = false;
@@ -138,8 +138,6 @@ const createWebpackConfig = ({
         "lit/directives/cache$": "lit/directives/cache.js",
         "lit/directives/repeat$": "lit/directives/repeat.js",
         "lit/polyfill-support$": "lit/polyfill-support.js",
-        "@lit-labs/virtualizer/layouts/grid":
-          "@lit-labs/virtualizer/layouts/grid.js",
       },
     },
     output: {

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/energy.ts

@@ -1,4 +1,4 @@
-import { format, startOfToday, startOfTomorrow } from "date-fns/esm";
+import { format, startOfToday, startOfTomorrow } from "date-fns";
 import { EnergySolarForecasts } from "../../../src/data/energy";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 

demo/src/stubs/history.ts

@@ -4,7 +4,7 @@ import {
   addMonths,
   differenceInHours,
   endOfDay,
-} from "date-fns/esm";
+} from "date-fns";
 import { HassEntity } from "home-assistant-js-websocket";
 import { StatisticValue } from "../../../src/data/history";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
@@ -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"],
               },
@@ -298,11 +298,11 @@ export const basicTrace: DemoTrace = {
       source: "state of input_boolean.toggle_1",
       entity_id: "automation.toggle_toggles",
       context_id: "6cfcae368e7b3686fad6c59e83ae76c9",
-      when: 1616647011.240832,
+      when: "2021-03-25T04:36:51.240832+00:00",
       domain: "automation",
     },
     {
-      when: 1616647011.249828,
+      when: "2021-03-25T04:36:51.249828+00:00",
       name: "Toggle 4",
       state: "on",
       entity_id: "input_boolean.toggle_4",
@@ -313,7 +313,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: 1616647011.258947,
+      when: "2021-03-25T04:36:51.258947+00:00",
       name: "Toggle 2",
       state: "on",
       entity_id: "input_boolean.toggle_2",
@@ -324,7 +324,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: 1616647011.261806,
+      when: "2021-03-25T04:36:51.261806+00:00",
       name: "Toggle 3",
       state: "off",
       entity_id: "input_boolean.toggle_3",
@@ -335,7 +335,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: 1616647011.265246,
+      when: "2021-03-25T04:36:51.265246+00:00",
       name: "Toggle 4",
       state: "off",
       entity_id: "input_boolean.toggle_4",

gallery/src/data/traces/motion-light-trace.ts

@@ -185,11 +185,11 @@ export const motionLightTrace: DemoTrace = {
         "has been triggered by state of binary_sensor.pauluss_macbook_pro_camera_in_use",
       source: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
       entity_id: "automation.auto_elgato",
-      when: 1615702021.768492,
+      when: "2021-03-14T06:07:01.768492+00:00",
       domain: "automation",
     },
     {
-      when: 1615702021.872187,
+      when: "2021-03-14T06:07:01.872187+00:00",
       name: "Elgato Key Light Air",
       state: "on",
       entity_id: "light.elgato_key_light_air",
@@ -200,7 +200,7 @@ export const motionLightTrace: DemoTrace = {
       context_name: "Auto Elgato",
     },
     {
-      when: 1615702073.284505,
+      when: "2021-03-14T06:07:53.284505+00:00",
       name: "Elgato Key Light Air",
       state: "off",
       entity_id: "light.elgato_key_light_air",

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

@@ -62,45 +62,6 @@ const ACTIONS = [
       entity_id: "input_boolean.toggle_4",
     },
   },
-  {
-    parallel: [
-      { scene: "scene.kitchen_morning" },
-      {
-        service: "media_player.play_media",
-        target: { entity_id: "media_player.living_room" },
-        data: { media_content_id: "", media_content_type: "" },
-        metadata: { title: "Happy Song" },
-      },
-    ],
-  },
-  {
-    stop: "No one is home!",
-  },
-  { repeat: { count: 3, sequence: [{ delay: "00:00:01" }] } },
-  {
-    repeat: {
-      for_each: ["bread", "butter", "cheese"],
-      sequence: [{ delay: "00:00:01" }],
-    },
-  },
-  {
-    if: [{ condition: "state" }],
-    then: [{ delay: "00:00:01" }],
-    else: [{ delay: "00:00:05" }],
-  },
-  {
-    choose: [
-      {
-        conditions: [{ condition: "state" }],
-        sequence: [{ delay: "00:00:01" }],
-      },
-      {
-        conditions: [{ condition: "sun" }],
-        sequence: [{ delay: "00:00:05" }],
-      },
-    ],
-    default: [{ delay: "00:00:03" }],
-  },
 ];
 
 @customElement("demo-automation-describe-action")

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

@@ -20,10 +20,6 @@ import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation
 import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
 import { Action } from "../../../../src/data/script";
 import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition";
-import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
-import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
-import { HaStopAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-stop";
-import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media";
 
 const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "Event", actions: [HaEventAction.defaultConfig] },
@@ -32,15 +28,11 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "Condition", actions: [HaConditionAction.defaultConfig] },
   { name: "Delay", actions: [HaDelayAction.defaultConfig] },
   { name: "Scene", actions: [HaSceneAction.defaultConfig] },
-  { name: "Play media", actions: [HaPlayMediaAction.defaultConfig] },
   { name: "Wait", actions: [HaWaitAction.defaultConfig] },
   { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
   { name: "Repeat", actions: [HaRepeatAction.defaultConfig] },
-  { name: "If-Then", actions: [HaIfAction.defaultConfig] },
   { name: "Choose", actions: [HaChooseAction.defaultConfig] },
   { name: "Variables", actions: [{ variables: { hello: "1" } }] },
-  { name: "Parallel", actions: [HaParallelAction.defaultConfig] },
-  { name: "Stop", actions: [HaStopAction.defaultConfig] },
 ];
 
 @customElement("demo-automation-editor-action")
@@ -94,6 +86,6 @@ class DemoHaAutomationEditorAction extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-automation-editor-action": DemoHaAutomationEditorAction;
+    "demo-ha-automation-editor-action": DemoHaAutomationEditorAction;
   }
 }

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

@@ -8,7 +8,7 @@ import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import type { ConditionWithShorthand } from "../../../../src/data/automation";
+import type { Condition } from "../../../../src/data/automation";
 import "../../../../src/panels/config/automation/condition/ha-automation-condition";
 import { HaDeviceCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-device";
 import { HaLogicalCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-logical";
@@ -20,7 +20,7 @@ import { HaTimeCondition } from "../../../../src/panels/config/automation/condit
 import { HaTriggerCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger";
 import { HaZoneCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";
 
-const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
+const SCHEMAS: { name: string; conditions: Condition[] }[] = [
   {
     name: "State",
     conditions: [{ condition: "state", ...HaStateCondition.defaultConfig }],
@@ -69,14 +69,6 @@ const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
     name: "Trigger",
     conditions: [{ condition: "trigger", ...HaTriggerCondition.defaultConfig }],
   },
-  {
-    name: "Shorthand",
-    conditions: [
-      { and: HaLogicalCondition.defaultConfig.conditions },
-      { or: HaLogicalCondition.defaultConfig.conditions },
-      { not: HaLogicalCondition.defaultConfig.conditions },
-    ],
-  },
 ];
 
 @customElement("demo-automation-editor-condition")

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

@@ -159,19 +159,13 @@ export class DemoHaAlert extends LitElement {
 
   firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
+    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
+      default_theme: "default",
+      default_dark_theme: "default",
+      themes: {},
+      darkMode: true,
+      theme: "default",
+    });
   }
 
   static get styles() {

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

@@ -170,7 +170,6 @@ const SCHEMAS: {
           select: { options: ["Option 1", "Option 2"], mode: "list" },
         },
       },
-      template: { name: "Template", selector: { template: {} } },
       select: {
         name: "Select",
         selector: {

gallery/src/pages/components/ha-tip.markdown

@@ -1,3 +0,0 @@
----
-title: Tips
----

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

@@ -1,73 +0,0 @@
-import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-tip";
-import "../../../../src/components/ha-card";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-
-const tips: (string | TemplateResult)[] = [
-  "Test tip",
-  "Bigger test tip, with some random text just to fill up as much space as possible without it looking like I'm really trying to to that",
-  html`<i>Tip</i> <b>with</b> <sub>HTML</sub>`,
-];
-
-@customElement("demo-components-ha-tip")
-export class DemoHaTip extends LitElement {
-  protected render(): TemplateResult {
-    return html` ${["light", "dark"].map(
-      (mode) => html`
-        <div class=${mode}>
-          <ha-card header="ha-tip ${mode} demo">
-            <div class="card-content">
-              ${tips.map((tip) => html`<ha-tip>${tip}</ha-tip>`)}
-            </div>
-          </ha-card>
-        </div>
-      `
-    )}`;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-      .dark,
-      .light {
-        display: block;
-        background-color: var(--primary-background-color);
-        padding: 0 50px;
-      }
-      ha-tip {
-        margin-bottom: 14px;
-      }
-      ha-card {
-        margin: 24px auto;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-tip": DemoHaTip;
-  }
-}

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;
@@ -62,7 +68,6 @@ class HassioAddonRepositoryEl extends LitElement {
           ${addons.map(
             (addon) => html`
               <ha-card
-                outlined
                 .addon=${addon}
                 class=${addon.available ? "" : "not_available"}
                 @click=${this._addonTapped}

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/config/hassio-addon-audio.ts

@@ -50,7 +50,6 @@ class HassioAddonAudio extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card
-        outlined
         .header=${this.supervisor.localize("addon.configuration.audio.header")}
       >
         <div class="card-content">

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

@@ -162,7 +162,7 @@ class HassioAddonConfig extends LitElement {
         );
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card outlined>
+      <ha-card>
         <div class="header">
           <h2>
             ${this.supervisor.localize("addon.configuration.options.header")}

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -58,7 +58,6 @@ class HassioAddonNetwork extends LitElement {
 
     return html`
       <ha-card
-        outlined
         .header=${this.supervisor.localize(
           "addon.configuration.network.header"
         )}

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -38,7 +38,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
     }
     return html`
       <div class="content">
-        <ha-card outlined>
+        <ha-card>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}

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

@@ -12,19 +12,12 @@ 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";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-error-screen";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
@@ -47,9 +40,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;
 
@@ -175,39 +166,6 @@ class HassioAddonDashboard extends LitElement {
   protected async firstUpdated(): Promise<void> {
     if (this.route.path === "") {
       const requestedAddon = extractSearchParam("addon");
-      const requestedAddonRepository = extractSearchParam("repository_url");
-      if (requestedAddonRepository) {
-        const storeInfo = await fetchSupervisorStore(this.hass);
-        if (
-          !storeInfo.repositories.find(
-            (repo) => repo.source === requestedAddonRepository
-          )
-        ) {
-          if (
-            !(await showConfirmationDialog(this, {
-              title: this.supervisor.localize("my.add_addon_repository_title"),
-              text: this.supervisor.localize(
-                "my.add_addon_repository_description",
-                { addon: requestedAddon, repository: requestedAddonRepository }
-              ),
-              confirmText: this.supervisor.localize("common.add"),
-              dismissText: this.supervisor.localize("common.cancel"),
-            }))
-          ) {
-            this._error = this.supervisor.localize(
-              "my.error_repository_not_found"
-            );
-            return;
-          }
-
-          try {
-            await addStoreRepository(this.hass, requestedAddonRepository);
-          } catch (err: any) {
-            this._error = extractApiErrorMessage(err);
-          }
-        }
-      }
-
       if (requestedAddon) {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
         const validAddon = addonsInfo.addons.some(
@@ -244,8 +202,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 +219,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"
@@ -171,7 +166,7 @@ class HassioAddonInfo extends LitElement {
           `
         : ""}
 
-      <ha-card outlined>
+      <ha-card>
         <div class="card-content">
           <div class="addon-header">
             ${!this.narrow ? this.addon.name : ""}
@@ -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")}
@@ -654,7 +649,7 @@ class HassioAddonInfo extends LitElement {
 
       ${this.addon.long_description
         ? html`
-            <ha-card outlined>
+            <ha-card>
               <div class="card-content">
                 <ha-markdown
                   .content=${this.addon.long_description}
@@ -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/addon-view/log/hassio-addon-logs.ts

@@ -2,7 +2,6 @@ import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-ansi-to-html";
 import "../../../../src/components/ha-card";
 import {
   fetchHassioAddonLogs,
@@ -12,6 +11,7 @@ import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
+import "../../components/hassio-ansi-to-html";
 import { hassioStyle } from "../../resources/hassio-style";
 
 @customElement("hassio-addon-logs")
@@ -34,15 +34,15 @@ class HassioAddonLogs extends LitElement {
   protected render(): TemplateResult {
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card outlined>
+      <ha-card>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
         <div class="card-content">
           ${this._content
-            ? html`<ha-ansi-to-html
+            ? html`<hassio-ansi-to-html
                 .content=${this._content}
-              ></ha-ansi-to-html>`
+              ></hassio-ansi-to-html>`
             : ""}
         </div>
         <div class="card-actions">

hassio/src/backups/hassio-backups.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiBackupRestore, mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
+import { mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -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
         );
       }
     }
@@ -165,15 +166,7 @@ export class HassioBackups extends LitElement {
     }
     return html`
       <hass-tabs-subpage-data-table
-        .tabs=${atLeastVersion(this.hass.config.version, 2022, 5)
-          ? [
-              {
-                translationKey: "panel.backups",
-                path: `/hassio/backups`,
-                iconPath: mdiBackupRestore,
-              },
-            ]
-          : supervisorTabs(this.hass)}
+        .tabs=${supervisorTabs(this.hass)}
         .hass=${this.hass}
         .localizeFunc=${this.supervisor.localize}
         .searchLabel=${this.supervisor.localize("search")}
@@ -189,9 +182,7 @@ export class HassioBackups extends LitElement {
         selectable
         hasFab
         .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
-        back-path=${atLeastVersion(this.hass.config.version, 2022, 5)
-          ? "/config/system"
-          : "/config"}
+        back-path="/config"
         supervisor
       >
         <ha-button-menu

hassio/src/components/hassio-ansi-to-html.ts

@@ -10,8 +10,8 @@ interface State {
   backgroundColor: null | string;
 }
 
-@customElement("ha-ansi-to-html")
-class HaAnsiToHtml extends LitElement {
+@customElement("hassio-ansi-to-html")
+class HassioAnsiToHtml extends LitElement {
   @property() public content!: string;
 
   protected render(): TemplateResult | void {
@@ -241,6 +241,6 @@ class HaAnsiToHtml extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-ansi-to-html": HaAnsiToHtml;
+    "hassio-ansi-to-html": HassioAnsiToHtml;
   }
 }

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,9 +24,9 @@ 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>
+                <ha-card>
                   <div class="card-content">
                     <button class="link" @click=${this._openStore}>
                       ${this.supervisor.localize("dashboard.no_addons")}
@@ -34,15 +34,11 @@ 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`
-                    <ha-card
-                      outlined
-                      .addon=${addon}
-                      @click=${this._addonTapped}
-                    >
+                    <ha-card .addon=${addon} @click=${this._addonTapped}>
                       <div class="card-content">
                         <hassio-card-content
                           .hass=${this.hass}

hassio/src/dashboard/hassio-dashboard.ts

@@ -10,7 +10,6 @@ import { HomeAssistant, Route } from "../../../src/types";
 import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addons";
 import "./hassio-update";
-import "../../../src/layouts/hass-subpage";
 
 @customElement("hassio-dashboard")
 class HassioDashboard extends LitElement {
@@ -23,31 +22,6 @@ class HassioDashboard extends LitElement {
   @property({ attribute: false }) public route!: Route;
 
   protected render(): TemplateResult {
-    if (atLeastVersion(this.hass.config.version, 2022, 5)) {
-      return html`<hass-subpage
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .route=${this.route}
-        .header=${this.supervisor.localize("panel.addons")}
-      >
-        <hassio-addons
-          .hass=${this.hass}
-          .supervisor=${this.supervisor}
-        ></hassio-addons>
-        <a href="/hassio/store">
-          <ha-fab
-            .label=${this.supervisor.localize("panel.store")}
-            extended
-            class="non-tabs"
-          >
-            <ha-svg-icon
-              slot="icon"
-              .path=${mdiStorePlus}
-            ></ha-svg-icon> </ha-fab
-        ></a>
-      </hass-subpage>`;
-    }
-
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
@@ -100,12 +74,6 @@ class HassioDashboard extends LitElement {
         .content {
           margin: 0 auto;
         }
-        ha-fab.non-tabs {
-          position: fixed;
-          right: calc(16px + env(safe-area-inset-right));
-          bottom: calc(16px + env(safe-area-inset-bottom));
-          z-index: 1;
-        }
       `,
     ];
   }

hassio/src/dashboard/hassio-update.ts

@@ -85,7 +85,7 @@ export class HassioUpdate extends LitElement {
       return html``;
     }
     return html`
-      <ha-card outlined>
+      <ha-card>
         <div class="card-content">
           <div class="icon">
             <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>

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);

hassio/src/hassio-main.ts

@@ -3,8 +3,8 @@ import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../src/common/config/version";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";
-import { mainWindow } from "../../src/common/dom/get_main_window";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
+import { mainWindow } from "../../src/common/dom/get_main_window";
 import { navigate } from "../../src/common/navigate";
 import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
@@ -73,18 +73,6 @@ export class HassioMain extends SupervisorBaseElement {
       });
     });
 
-    // Forward keydown events to the main window for quickbar access
-    document.body.addEventListener("keydown", (ev: KeyboardEvent) => {
-      if (ev.altKey || ev.ctrlKey || ev.shiftKey || ev.metaKey) {
-        // Ignore if modifier keys are pressed
-        return;
-      }
-      // @ts-ignore
-      fireEvent(mainWindow, "hass-quick-bar-trigger", ev, {
-        bubbles: false,
-      });
-    });
-
     makeDialogManager(this, this.shadowRoot!);
   }
 

hassio/src/hassio-my-redirect.ts

@@ -15,7 +15,7 @@ import {
 } from "../../src/panels/my/ha-panel-my";
 import { HomeAssistant, Route } from "../../src/types";
 
-export const REDIRECTS: Redirects = {
+const REDIRECTS: Redirects = {
   supervisor: {
     redirect: "/hassio/dashboard",
   },
@@ -42,9 +42,6 @@ export const REDIRECTS: Redirects = {
     params: {
       addon: "string",
     },
-    optional_params: {
-      repository_url: "url",
-    },
   },
   supervisor_ingress: {
     redirect: "/hassio/ingress",
@@ -127,14 +124,6 @@ class HassioMyRedirect extends LitElement {
       }
       resultParams[key] = params[key];
     });
-    Object.entries(redirect.optional_params || {}).forEach(([key, type]) => {
-      if (params[key]) {
-        if (!this._checkParamType(type, params[key])) {
-          throw Error();
-        }
-        resultParams[key] = params[key];
-      }
-    });
     return `?${createSearchParam(resultParams)}`;
   }
 

hassio/src/hassio-tabs.ts

@@ -8,27 +8,24 @@ import { atLeastVersion } from "../../src/common/config/version";
 import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant } from "../../src/types";
 
-export const supervisorTabs = (hass: HomeAssistant): PageNavigation[] =>
-  atLeastVersion(hass.config.version, 2022, 5)
-    ? []
-    : [
-        {
-          translationKey: atLeastVersion(hass.config.version, 2021, 12)
-            ? "panel.addons"
-            : "panel.dashboard",
-          path: `/hassio/dashboard`,
-          iconPath: atLeastVersion(hass.config.version, 2021, 12)
-            ? mdiPuzzle
-            : mdiViewDashboard,
-        },
-        {
-          translationKey: "panel.backups",
-          path: `/hassio/backups`,
-          iconPath: mdiBackupRestore,
-        },
-        {
-          translationKey: "panel.system",
-          path: `/hassio/system`,
-          iconPath: mdiCogs,
-        },
-      ];
+export const supervisorTabs = (hass: HomeAssistant): PageNavigation[] => [
+  {
+    translationKey: atLeastVersion(hass.config.version, 2021, 12)
+      ? "panel.addons"
+      : "panel.dashboard",
+    path: `/hassio/dashboard`,
+    iconPath: atLeastVersion(hass.config.version, 2021, 12)
+      ? mdiPuzzle
+      : mdiViewDashboard,
+  },
+  {
+    translationKey: "panel.backups",
+    path: `/hassio/backups`,
+    iconPath: mdiBackupRestore,
+  },
+  {
+    translationKey: "panel.system",
+    path: `/hassio/system`,
+    iconPath: mdiCogs,
+  },
+];

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

@@ -48,7 +48,7 @@ class HassioCoreInfo extends LitElement {
     ];
 
     return html`
-      <ha-card header="Core" outlined>
+      <ha-card header="Core">
         <div class="card-content">
           <div>
             <ha-settings-row>

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

@@ -66,7 +66,7 @@ class HassioHostInfo extends LitElement {
       },
     ];
     return html`
-      <ha-card header="Host" outlined>
+      <ha-card header="Host">
         <div class="card-content">
           <div>
             ${this.supervisor.host.features.includes("hostname")

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

@@ -23,10 +23,6 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../src/dialogs/generic/show-dialog-box";
-import {
-  UNHEALTHY_REASON_URL,
-  UNSUPPORTED_REASON_URL,
-} from "../../../src/panels/config/system-health/ha-config-system-health";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { bytesToString } from "../../../src/util/bytes-to-string";
@@ -34,6 +30,11 @@ import { documentationUrl } from "../../../src/util/documentation-url";
 import "../components/supervisor-metric";
 import { hassioStyle } from "../resources/hassio-style";
 
+const UNSUPPORTED_REASON_URL = {};
+const UNHEALTHY_REASON_URL = {
+  privileged: "/more-info/unsupported/privileged",
+};
+
 @customElement("hassio-supervisor-info")
 class HassioSupervisorInfo extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -57,7 +58,7 @@ class HassioSupervisorInfo extends LitElement {
       },
     ];
     return html`
-      <ha-card header="Supervisor" outlined>
+      <ha-card header="Supervisor">
         <div class="card-content">
           <div>
             <ha-settings-row>

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

@@ -1,4 +1,3 @@
-import "../../../src/components/ha-ansi-to-html";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -12,6 +11,7 @@ import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-loading-screen";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
+import "../components/hassio-ansi-to-html";
 import { hassioStyle } from "../resources/hassio-style";
 
 interface LogProvider {
@@ -65,7 +65,7 @@ class HassioSupervisorLog extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      <ha-card outlined>
+      <ha-card>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
@@ -89,8 +89,8 @@ class HassioSupervisorLog extends LitElement {
 
         <div class="card-content" id="content">
           ${this._content
-            ? html`<ha-ansi-to-html .content=${this._content}>
-              </ha-ansi-to-html>`
+            ? html`<hassio-ansi-to-html .content=${this._content}>
+              </hassio-ansi-to-html>`
             : html`<hass-loading-screen no-toolbar></hass-loading-screen>`}
         </div>
         <div class="card-actions">

hassio/src/update-available/update-available-card.ts

@@ -128,7 +128,6 @@ class UpdateAvailableCard extends LitElement {
 
     return html`
       <ha-card
-        outlined
         .header=${this.supervisor.localize("update_available.update_name", {
           name: this._name,
         })}

package.json

@@ -72,8 +72,8 @@
     "@material/mwc-textfield": "0.25.3",
     "@material/mwc-top-app-bar-fixed": "^0.25.3",
     "@material/top-app-bar": "14.0.0-canary.261f2db59.0",
-    "@mdi/js": "6.7.96",
-    "@mdi/svg": "6.7.96",
+    "@mdi/js": "6.6.95",
+    "@mdi/svg": "6.6.95",
     "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
@@ -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.1",
     "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/core

@@ -15,7 +15,7 @@ if [ -z $(which hass) ]; then
   echo "Installing Home Asstant core from dev."
   python3 -m pip install --upgrade \
     colorlog \
-    git+https://github.com/home-assistant/home-assistant.git@dev
+    git+git://github.com/home-assistant/home-assistant.git@dev
 fi
 
 if [ ! -d "${WD}/config" ]; then

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      = 20220405.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/datetime/duration.ts

@@ -1,16 +0,0 @@
-import secondsToDuration from "./seconds_to_duration";
-
-const DAY_IN_SECONDS = 86400;
-const HOUR_IN_SECONDS = 3600;
-const MINUTE_IN_SECONDS = 60;
-
-export const UNIT_TO_SECOND_CONVERT = {
-  s: 1,
-  min: MINUTE_IN_SECONDS,
-  h: HOUR_IN_SECONDS,
-  d: DAY_IN_SECONDS,
-};
-
-export const formatDuration = (duration: string, units: string): string =>
-  secondsToDuration(parseFloat(duration) * UNIT_TO_SECOND_CONVERT[units]) ||
-  "0";

src/common/dom/ancestors-with-property.ts

@@ -1,41 +0,0 @@
-const DEFAULT_OWN = true;
-
-// Finds the closest ancestor of an element that has a specific optionally owned property,
-// traversing slot and shadow root boundaries until the body element is reached
-export const closestWithProperty = (
-  element: Element | null,
-  property: string | symbol,
-  own = DEFAULT_OWN
-) => {
-  if (!element || element === document.body) return null;
-
-  element = element.assignedSlot ?? element;
-  if (element.parentElement) {
-    element = element.parentElement;
-  } else {
-    const root = element.getRootNode();
-    element = root instanceof ShadowRoot ? root.host : null;
-  }
-
-  if (
-    own
-      ? Object.prototype.hasOwnProperty.call(element, property)
-      : element && property in element
-  )
-    return element;
-  return closestWithProperty(element, property, own);
-};
-
-// Finds the set of all such ancestors and includes starting element as first in the set
-export const ancestorsWithProperty = (
-  element: Element | null,
-  property: string | symbol,
-  own = DEFAULT_OWN
-) => {
-  const ancestors: Set<Element> = new Set();
-  while (element) {
-    ancestors.add(element);
-    element = closestWithProperty(element, property, own);
-  }
-  return ancestors;
-};

src/common/dom/is-navigation-click.ts

@@ -12,7 +12,7 @@ export const isNavigationClick = (e: MouseEvent) => {
 
   const anchor = e
     .composedPath()
-    .find((n) => (n as HTMLElement).tagName === "A") as
+    .filter((n) => (n as HTMLElement).tagName === "A")[0] as
     | HTMLAnchorElement
     | undefined;
   if (

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/compute_state_display.ts

@@ -2,74 +2,50 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { FrontendLocaleData } from "../../data/translation";
 import {
+  updateIsInstalling,
+  UpdateEntity,
   UPDATE_SUPPORT_PROGRESS,
-  updateIsInstallingFromAttributes,
 } from "../../data/update";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
-import { formatNumber, isNumericFromAttributes } from "../number/format_number";
+import { formatNumber, isNumericState } from "../number/format_number";
 import { LocalizeFunc } from "../translations/localize";
-import { supportsFeatureFromAttributes } from "./supports-feature";
-import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
-import { computeDomain } from "./compute_domain";
+import { computeStateDomain } from "./compute_state_domain";
+import { supportsFeature } from "./supports-feature";
 
 export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
   locale: FrontendLocaleData,
   state?: string
-): string =>
-  computeStateDisplayFromEntityAttributes(
-    localize,
-    locale,
-    stateObj.entity_id,
-    stateObj.attributes,
-    state !== undefined ? state : stateObj.state
-  );
-
-export const computeStateDisplayFromEntityAttributes = (
-  localize: LocalizeFunc,
-  locale: FrontendLocaleData,
-  entityId: string,
-  attributes: any,
-  state: string
 ): string => {
-  if (state === UNKNOWN || state === UNAVAILABLE) {
-    return localize(`state.default.${state}`);
+  const compareState = state !== undefined ? state : stateObj.state;
+
+  if (compareState === UNKNOWN || compareState === UNAVAILABLE) {
+    return localize(`state.default.${compareState}`);
   }
 
   // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
-  if (isNumericFromAttributes(attributes)) {
-    // state is duration
-    if (
-      attributes.device_class === "duration" &&
-      attributes.unit_of_measurement &&
-      UNIT_TO_SECOND_CONVERT[attributes.unit_of_measurement]
-    ) {
+  if (isNumericState(stateObj)) {
+    if (stateObj.attributes.device_class === "monetary") {
       try {
-        return formatDuration(state, attributes.unit_of_measurement);
-      } catch (_err) {
-        // fallback to default
-      }
-    }
-    if (attributes.device_class === "monetary") {
-      try {
-        return formatNumber(state, locale, {
+        return formatNumber(compareState, locale, {
           style: "currency",
-          currency: attributes.unit_of_measurement,
-          minimumFractionDigits: 2,
+          currency: stateObj.attributes.unit_of_measurement,
         });
       } catch (_err) {
         // fallback to default
       }
     }
-    return `${formatNumber(state, locale)}${
-      attributes.unit_of_measurement ? " " + attributes.unit_of_measurement : ""
+    return `${formatNumber(compareState, locale)}${
+      stateObj.attributes.unit_of_measurement
+        ? " " + stateObj.attributes.unit_of_measurement
+        : ""
     }`;
   }
 
-  const domain = computeDomain(entityId);
+  const domain = computeStateDomain(stateObj);
 
   if (domain === "input_datetime") {
     if (state !== undefined) {
@@ -104,32 +80,36 @@ export const computeStateDisplayFromEntityAttributes = (
     } else {
       // If not trying to display an explicit state, create `Date` object from `stateObj`'s attributes then format.
       let date: Date;
-      if (attributes.has_date && attributes.has_time) {
+      if (stateObj.attributes.has_date && stateObj.attributes.has_time) {
         date = new Date(
-          attributes.year,
-          attributes.month - 1,
-          attributes.day,
-          attributes.hour,
-          attributes.minute
+          stateObj.attributes.year,
+          stateObj.attributes.month - 1,
+          stateObj.attributes.day,
+          stateObj.attributes.hour,
+          stateObj.attributes.minute
         );
         return formatDateTime(date, locale);
       }
-      if (attributes.has_date) {
-        date = new Date(attributes.year, attributes.month - 1, attributes.day);
+      if (stateObj.attributes.has_date) {
+        date = new Date(
+          stateObj.attributes.year,
+          stateObj.attributes.month - 1,
+          stateObj.attributes.day
+        );
         return formatDate(date, locale);
       }
-      if (attributes.has_time) {
+      if (stateObj.attributes.has_time) {
         date = new Date();
-        date.setHours(attributes.hour, attributes.minute);
+        date.setHours(stateObj.attributes.hour, stateObj.attributes.minute);
         return formatTime(date, locale);
       }
-      return state;
+      return stateObj.state;
     }
   }
 
   if (domain === "humidifier") {
-    if (state === "on" && attributes.humidity) {
-      return `${attributes.humidity} %`;
+    if (compareState === "on" && stateObj.attributes.humidity) {
+      return `${stateObj.attributes.humidity} %`;
     }
   }
 
@@ -139,7 +119,7 @@ export const computeStateDisplayFromEntityAttributes = (
     domain === "number" ||
     domain === "input_number"
   ) {
-    return formatNumber(state, locale);
+    return formatNumber(compareState, locale);
   }
 
   // state of button is a timestamp
@@ -147,12 +127,12 @@ export const computeStateDisplayFromEntityAttributes = (
     domain === "button" ||
     domain === "input_button" ||
     domain === "scene" ||
-    (domain === "sensor" && attributes.device_class === "timestamp")
+    (domain === "sensor" && stateObj.attributes.device_class === "timestamp")
   ) {
     try {
-      return formatDateTime(new Date(state), locale);
+      return formatDateTime(new Date(compareState), locale);
     } catch (_err) {
-      return state;
+      return compareState;
     }
   }
 
@@ -163,28 +143,30 @@ export const computeStateDisplayFromEntityAttributes = (
     // When the latest version is skipped, show the latest version
     // When update is not available, show "Up-to-date"
     // When update is not available and there is no latest_version show "Unavailable"
-    return state === "on"
-      ? updateIsInstallingFromAttributes(attributes)
-        ? supportsFeatureFromAttributes(attributes, UPDATE_SUPPORT_PROGRESS)
+    return compareState === "on"
+      ? updateIsInstalling(stateObj as UpdateEntity)
+        ? supportsFeature(stateObj, UPDATE_SUPPORT_PROGRESS)
           ? localize("ui.card.update.installing_with_progress", {
-              progress: attributes.in_progress,
+              progress: stateObj.attributes.in_progress,
             })
           : localize("ui.card.update.installing")
-        : attributes.latest_version
-      : attributes.skipped_version === attributes.latest_version
-      ? attributes.latest_version ?? localize("state.default.unavailable")
+        : stateObj.attributes.latest_version
+      : stateObj.attributes.skipped_version ===
+        stateObj.attributes.latest_version
+      ? stateObj.attributes.latest_version ??
+        localize("state.default.unavailable")
       : localize("ui.card.update.up_to_date");
   }
 
   return (
     // Return device class translation
-    (attributes.device_class &&
+    (stateObj.attributes.device_class &&
       localize(
-        `component.${domain}.state.${attributes.device_class}.${state}`
+        `component.${domain}.state.${stateObj.attributes.device_class}.${compareState}`
       )) ||
     // Return default translation
-    localize(`component.${domain}.state._.${state}`) ||
+    localize(`component.${domain}.state._.${compareState}`) ||
     // We don't know! Return the raw state.
-    state
+    compareState
   );
 };

src/common/entity/compute_state_name.ts

@@ -1,13 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { computeObjectId } from "./compute_object_id";
 
-export const computeStateNameFromEntityAttributes = (
-  entityId: string,
-  attributes: { [key: string]: any }
-): string =>
-  attributes.friendly_name === undefined
-    ? computeObjectId(entityId).replace(/_/g, " ")
-    : attributes.friendly_name || "";
-
 export const computeStateName = (stateObj: HassEntity): string =>
-  computeStateNameFromEntityAttributes(stateObj.entity_id, stateObj.attributes);
+  stateObj.attributes.friendly_name === undefined
+    ? computeObjectId(stateObj.entity_id).replace(/_/g, " ")
+    : stateObj.attributes.friendly_name || "";

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.
  *
@@ -49,20 +46,6 @@ export const domainIcon = (
   stateObj?: HassEntity,
   state?: string
 ): string => {
-  const icon = domainIconWithoutDefault(domain, stateObj, state);
-  if (icon) {
-    return icon;
-  }
-  // eslint-disable-next-line
-  console.warn(`Unable to find icon for domain ${domain}`);
-  return DEFAULT_DOMAIN_ICON;
-};
-
-export const domainIconWithoutDefault = (
-  domain: string,
-  stateObj?: HassEntity,
-  state?: string
-): string | undefined => {
   const compareState = state !== undefined ? state : stateObj?.state;
 
   switch (domain) {
@@ -104,15 +87,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,31 +124,33 @@ 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) {
     return FIXED_DOMAIN_ICONS[domain];
   }
 
-  return undefined;
+  // eslint-disable-next-line
+  console.warn(`Unable to find icon for domain ${domain}`);
+  return DEFAULT_DOMAIN_ICON;
 };

src/common/entity/supports-feature.ts

@@ -3,13 +3,6 @@ import { HassEntity } from "home-assistant-js-websocket";
 export const supportsFeature = (
   stateObj: HassEntity,
   feature: number
-): boolean => supportsFeatureFromAttributes(stateObj.attributes, feature);
-
-export const supportsFeatureFromAttributes = (
-  attributes: {
-    [key: string]: any;
-  },
-  feature: number
 ): boolean =>
   // eslint-disable-next-line no-bitwise
-  (attributes.supported_features! & feature) !== 0;
+  (stateObj.attributes.supported_features! & feature) !== 0;

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/number/format_number.ts

@@ -7,11 +7,8 @@ import { round } from "./round";
  * @param stateObj The entity state object
  */
 export const isNumericState = (stateObj: HassEntity): boolean =>
-  isNumericFromAttributes(stateObj.attributes);
-
-export const isNumericFromAttributes = (attributes: {
-  [key: string]: any;
-}): boolean => !!attributes.unit_of_measurement || !!attributes.state_class;
+  !!stateObj.attributes.unit_of_measurement ||
+  !!stateObj.attributes.state_class;
 
 export const numberFormatToLocale = (
   localeOptions: FrontendLocaleData

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/common/util/promise-timeout.ts

@@ -1,4 +1,4 @@
-export const promiseTimeout = (ms: number, promise: Promise<any> | any) => {
+export const promiseTimeout = (ms: number, promise: Promise<any>) => {
   const timeout = new Promise((_resolve, reject) => {
     setTimeout(() => {
       reject(`Timed out in ${ms} ms.`);

src/common/util/subscribe-polling.ts

@@ -1,18 +0,0 @@
-import { HomeAssistant } from "../../types";
-
-export const subscribePollingCollection = (
-  hass: HomeAssistant,
-  updateData: (hass: HomeAssistant) => void,
-  interval: number
-) => {
-  let timeout;
-  const fetchData = async () => {
-    try {
-      await updateData(hass);
-    } finally {
-      timeout = setTimeout(() => fetchData(), interval);
-    }
-  };
-  fetchData();
-  return () => clearTimeout(timeout);
-};

src/common/util/throttle.ts

@@ -13,7 +13,7 @@ export const throttle = <T extends any[]>(
 ) => {
   let timeout: number | undefined;
   let previous = 0;
-  const throttledFunc = (...args: T): void => {
+  return (...args: T): void => {
     const later = () => {
       previous = leading === false ? 0 : Date.now();
       timeout = undefined;
@@ -35,10 +35,4 @@ export const throttle = <T extends any[]>(
       timeout = window.setTimeout(later, remaining);
     }
   };
-  throttledFunc.cancel = () => {
-    clearTimeout(timeout);
-    timeout = undefined;
-    previous = 0;
-  };
-  return throttledFunc;
 };

src/components/chart/chart-date-adapter.ts

@@ -34,7 +34,7 @@ import {
   endOfMonth,
   endOfQuarter,
   endOfYear,
-} from "date-fns/esm";
+} from "date-fns";
 import {
   formatDate,
   formatDateMonth,

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/currency-datalist.ts

@@ -1,167 +1,165 @@
-export const currencies = [
-  "AED",
-  "AFN",
-  "ALL",
-  "AMD",
-  "ANG",
-  "AOA",
-  "ARS",
-  "AUD",
-  "AWG",
-  "AZN",
-  "BAM",
-  "BBD",
-  "BDT",
-  "BGN",
-  "BHD",
-  "BIF",
-  "BMD",
-  "BND",
-  "BOB",
-  "BRL",
-  "BSD",
-  "BTN",
-  "BWP",
-  "BYN",
-  "BYR",
-  "BZD",
-  "CAD",
-  "CDF",
-  "CHF",
-  "CLP",
-  "CNY",
-  "COP",
-  "CRC",
-  "CUP",
-  "CVE",
-  "CZK",
-  "DJF",
-  "DKK",
-  "DOP",
-  "DZD",
-  "EGP",
-  "ERN",
-  "ETB",
-  "EUR",
-  "FJD",
-  "FKP",
-  "GBP",
-  "GEL",
-  "GHS",
-  "GIP",
-  "GMD",
-  "GNF",
-  "GTQ",
-  "GYD",
-  "HKD",
-  "HNL",
-  "HRK",
-  "HTG",
-  "HUF",
-  "IDR",
-  "ILS",
-  "INR",
-  "IQD",
-  "IRR",
-  "ISK",
-  "JMD",
-  "JOD",
-  "JPY",
-  "KES",
-  "KGS",
-  "KHR",
-  "KMF",
-  "KPW",
-  "KRW",
-  "KWD",
-  "KYD",
-  "KZT",
-  "LAK",
-  "LBP",
-  "LKR",
-  "LRD",
-  "LSL",
-  "LTL",
-  "LYD",
-  "MAD",
-  "MDL",
-  "MGA",
-  "MKD",
-  "MMK",
-  "MNT",
-  "MOP",
-  "MRO",
-  "MUR",
-  "MVR",
-  "MWK",
-  "MXN",
-  "MYR",
-  "MZN",
-  "NAD",
-  "NGN",
-  "NIO",
-  "NOK",
-  "NPR",
-  "NZD",
-  "OMR",
-  "PAB",
-  "PEN",
-  "PGK",
-  "PHP",
-  "PKR",
-  "PLN",
-  "PYG",
-  "QAR",
-  "RON",
-  "RSD",
-  "RUB",
-  "RWF",
-  "SAR",
-  "SBD",
-  "SCR",
-  "SDG",
-  "SEK",
-  "SGD",
-  "SHP",
-  "SLL",
-  "SOS",
-  "SRD",
-  "SSP",
-  "STD",
-  "SYP",
-  "SZL",
-  "THB",
-  "TJS",
-  "TMT",
-  "TND",
-  "TOP",
-  "TRY",
-  "TTD",
-  "TWD",
-  "TZS",
-  "UAH",
-  "UGX",
-  "USD",
-  "UYU",
-  "UZS",
-  "VEF",
-  "VND",
-  "VUV",
-  "WST",
-  "XAF",
-  "XCD",
-  "XOF",
-  "XPF",
-  "YER",
-  "ZAR",
-  "ZMK",
-  "ZWL",
-];
-
 export const createCurrencyListEl = () => {
   const list = document.createElement("datalist");
   list.id = "currencies";
-  for (const currency of currencies) {
+  for (const currency of [
+    "AED",
+    "AFN",
+    "ALL",
+    "AMD",
+    "ANG",
+    "AOA",
+    "ARS",
+    "AUD",
+    "AWG",
+    "AZN",
+    "BAM",
+    "BBD",
+    "BDT",
+    "BGN",
+    "BHD",
+    "BIF",
+    "BMD",
+    "BND",
+    "BOB",
+    "BRL",
+    "BSD",
+    "BTN",
+    "BWP",
+    "BYN",
+    "BYR",
+    "BZD",
+    "CAD",
+    "CDF",
+    "CHF",
+    "CLP",
+    "CNY",
+    "COP",
+    "CRC",
+    "CUP",
+    "CVE",
+    "CZK",
+    "DJF",
+    "DKK",
+    "DOP",
+    "DZD",
+    "EGP",
+    "ERN",
+    "ETB",
+    "EUR",
+    "FJD",
+    "FKP",
+    "GBP",
+    "GEL",
+    "GHS",
+    "GIP",
+    "GMD",
+    "GNF",
+    "GTQ",
+    "GYD",
+    "HKD",
+    "HNL",
+    "HRK",
+    "HTG",
+    "HUF",
+    "IDR",
+    "ILS",
+    "INR",
+    "IQD",
+    "IRR",
+    "ISK",
+    "JMD",
+    "JOD",
+    "JPY",
+    "KES",
+    "KGS",
+    "KHR",
+    "KMF",
+    "KPW",
+    "KRW",
+    "KWD",
+    "KYD",
+    "KZT",
+    "LAK",
+    "LBP",
+    "LKR",
+    "LRD",
+    "LSL",
+    "LTL",
+    "LYD",
+    "MAD",
+    "MDL",
+    "MGA",
+    "MKD",
+    "MMK",
+    "MNT",
+    "MOP",
+    "MRO",
+    "MUR",
+    "MVR",
+    "MWK",
+    "MXN",
+    "MYR",
+    "MZN",
+    "NAD",
+    "NGN",
+    "NIO",
+    "NOK",
+    "NPR",
+    "NZD",
+    "OMR",
+    "PAB",
+    "PEN",
+    "PGK",
+    "PHP",
+    "PKR",
+    "PLN",
+    "PYG",
+    "QAR",
+    "RON",
+    "RSD",
+    "RUB",
+    "RWF",
+    "SAR",
+    "SBD",
+    "SCR",
+    "SDG",
+    "SEK",
+    "SGD",
+    "SHP",
+    "SLL",
+    "SOS",
+    "SRD",
+    "SSP",
+    "STD",
+    "SYP",
+    "SZL",
+    "THB",
+    "TJS",
+    "TMT",
+    "TND",
+    "TOP",
+    "TRY",
+    "TTD",
+    "TWD",
+    "TZS",
+    "UAH",
+    "UGX",
+    "USD",
+    "UYU",
+    "UZS",
+    "VEF",
+    "VND",
+    "VUV",
+    "WST",
+    "XAF",
+    "XCD",
+    "XOF",
+    "XPF",
+    "YER",
+    "ZAR",
+    "ZMK",
+    "ZWL",
+  ]) {
     const option = document.createElement("option");
     option.value = currency;
     option.innerHTML = currency;

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

@@ -269,8 +269,8 @@ export class HaDataTable extends LitElement {
                       @change=${this._handleHeaderRowCheckboxClick}
                       .indeterminate=${this._checkedRows.length &&
                       this._checkedRows.length !== this._checkableRowsCount}
-                      .checked=${this._checkedRows.length &&
-                      this._checkedRows.length === this._checkableRowsCount}
+                      .checked=${this._checkedRows.length ===
+                      this._checkableRowsCount}
                     >
                     </ha-checkbox>
                   </div>

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

@@ -5,7 +5,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import {
   DeviceAutomation,
   deviceAutomationsEqual,
-  sortDeviceAutomations,
 } from "../../data/device_automation";
 import { HomeAssistant } from "../../types";
 import "../ha-select";
@@ -128,9 +127,7 @@ export abstract class HaDeviceAutomationPicker<
 
   private async _updateDeviceInfo() {
     this._automations = this.deviceId
-      ? (await this._fetchDeviceAutomations(this.hass, this.deviceId)).sort(
-          sortDeviceAutomations
-        )
+      ? await this._fetchDeviceAutomations(this.hass, this.deviceId)
       : // No device, clear the list of automations
         [];
 
@@ -164,9 +161,8 @@ export abstract class HaDeviceAutomationPicker<
     if (this.value && deviceAutomationsEqual(automation, this.value)) {
       return;
     }
-    const value = { ...automation };
-    delete value.metadata;
-    fireEvent(this, "value-changed", { value });
+    fireEvent(this, "change");
+    fireEvent(this, "value-changed", { value: automation });
   }
 
   static get styles(): CSSResultGroup {

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

@@ -198,10 +198,9 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
           this.hass,
           deviceEntityLookup[device.id]
         ),
-        area:
-          device.area_id && areaLookup[device.area_id]
-            ? areaLookup[device.area_id].name
-            : this.hass.localize("ui.components.device-picker.no_area"),
+        area: device.area_id
+          ? areaLookup[device.area_id].name
+          : this.hass.localize("ui.components.device-picker.no_area"),
       }));
       if (!outputDevices.length) {
         return [

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

@@ -20,7 +20,7 @@ interface HassEntityWithCachedName extends HassEntity {
   friendly_name: string;
 }
 
-export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
+export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
 // eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<HassEntityWithCachedName> = (item) =>
@@ -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-analytics.ts

@@ -2,12 +2,12 @@ import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import type { Analytics, AnalyticsPreferences } from "../data/analytics";
+import { Analytics, AnalyticsPreferences } from "../data/analytics";
 import { haStyle } from "../resources/styles";
-import type { HomeAssistant } from "../types";
+import { HomeAssistant } from "../types";
+import "./ha-checkbox";
+import type { HaCheckbox } from "./ha-checkbox";
 import "./ha-settings-row";
-import "./ha-switch";
-import type { HaSwitch } from "./ha-switch";
 
 const ADDITIONAL_PREFERENCES = [
   {
@@ -40,62 +40,62 @@ export class HaAnalytics extends LitElement {
 
     return html`
       <ha-settings-row>
+        <span slot="prefix">
+          <ha-checkbox
+            @change=${this._handleRowCheckboxClick}
+            .checked=${baseEnabled}
+            .preference=${"base"}
+            .disabled=${loading}
+            name="base"
+          >
+          </ha-checkbox>
+        </span>
         <span slot="heading" data-for="base"> Basic analytics </span>
         <span slot="description" data-for="base">
           This includes information about your system.
         </span>
-        <ha-switch
-          @change=${this._handleRowClick}
-          .checked=${baseEnabled}
-          .preference=${"base"}
-          .disabled=${loading}
-          name="base"
-        >
-        </ha-switch>
       </ha-settings-row>
       ${ADDITIONAL_PREFERENCES.map(
         (preference) =>
-          html`
-            <ha-settings-row>
-              <span slot="heading" data-for=${preference.key}>
-                ${preference.title}
-              </span>
-              <span slot="description" data-for=${preference.key}>
-                ${preference.description}
-              </span>
-              <span>
-                <ha-switch
-                  @change=${this._handleRowClick}
-                  .checked=${this.analytics?.preferences[preference.key]}
-                  .preference=${preference.key}
-                  name=${preference.key}
-                >
-                </ha-switch>
-                ${!baseEnabled
-                  ? html`
-                      <paper-tooltip animation-delay="0" position="right">
-                        You need to enable basic analytics for this option to be
-                        available
-                      </paper-tooltip>
-                    `
-                  : ""}
-              </span>
-            </ha-settings-row>
-          `
+          html`<ha-settings-row>
+            <span slot="prefix">
+              <ha-checkbox
+                @change=${this._handleRowCheckboxClick}
+                .checked=${this.analytics?.preferences[preference.key]}
+                .preference=${preference.key}
+                name=${preference.key}
+              >
+              </ha-checkbox>
+              ${!baseEnabled
+                ? html`<paper-tooltip animation-delay="0" position="right">
+                    You need to enable basic analytics for this option to be
+                    available
+                  </paper-tooltip>`
+                : ""}
+            </span>
+            <span slot="heading" data-for=${preference.key}>
+              ${preference.title}
+            </span>
+            <span slot="description" data-for=${preference.key}>
+              ${preference.description}
+            </span>
+          </ha-settings-row>`
       )}
       <ha-settings-row>
+        <span slot="prefix">
+          <ha-checkbox
+            @change=${this._handleRowCheckboxClick}
+            .checked=${this.analytics?.preferences.diagnostics}
+            .preference=${"diagnostics"}
+            .disabled=${loading}
+            name="diagnostics"
+          >
+          </ha-checkbox>
+        </span>
         <span slot="heading" data-for="diagnostics"> Diagnostics </span>
         <span slot="description" data-for="diagnostics">
           Share crash reports when unexpected errors occur.
         </span>
-        <ha-switch
-          @change=${this._handleRowClick}
-          .checked=${this.analytics?.preferences.diagnostics}
-          .preference=${"diagnostics"}
-          .disabled=${loading}
-          name="diagnostics"
-        >
-        </ha-switch>
       </ha-settings-row>
     `;
   }
@@ -120,23 +120,23 @@ export class HaAnalytics extends LitElement {
     });
   }
 
-  private _handleRowClick(ev: Event) {
-    const target = ev.currentTarget as HaSwitch;
-    const preference = (target as any).preference;
+  private _handleRowCheckboxClick(ev: Event) {
+    const checkbox = ev.currentTarget as HaCheckbox;
+    const preference = (checkbox as any).preference;
     const preferences = this.analytics ? { ...this.analytics.preferences } : {};
 
-    if (preferences[preference] === target.checked) {
+    if (preferences[preference] === checkbox.checked) {
       return;
     }
 
-    preferences[preference] = target.checked;
+    preferences[preference] = checkbox.checked;
 
     if (
       ADDITIONAL_PREFERENCES.some((entry) => entry.key === preference) &&
-      target.checked
+      checkbox.checked
     ) {
       preferences.base = true;
-    } else if (preference === "base" && !target.checked) {
+    } else if (preference === "base" && !checkbox.checked) {
       preferences.usage = false;
       preferences.statistics = false;
     }

src/components/ha-area-picker.ts

@@ -409,7 +409,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
             name,
           });
           this._areas = [...this._areas!, area];
-          (this.comboBox as any).filteredItems = this._getAreas(
+          (this.comboBox as any).items = this._getAreas(
             this._areas!,
             this._devices!,
             this._entities!,

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

@@ -310,7 +310,6 @@ export class HaBaseTimeInput extends LitElement {
       border-radius: var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0 0;
       overflow: hidden;
       position: relative;
-      direction: ltr;
     }
     ha-textfield {
       width: 40px;

src/components/ha-button-menu.ts

@@ -1,22 +1,17 @@
-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 { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
-import type { HaIconButton } from "./ha-icon-button";
 
 @customElement("ha-button-menu")
 export class HaButtonMenu extends LitElement {
-  protected readonly [FOCUS_TARGET];
-
   @property() public corner: Corner = "TOP_START";
 
   @property() public menuCorner: MenuCorner = "START";
 
-  @property({ type: Number }) public x: number | null = null;
+  @property({ type: Number }) public x?: number;
 
-  @property({ type: Number }) public y: number | null = null;
+  @property({ type: Number }) public y?: number;
 
   @property({ type: Boolean }) public multi = false;
 
@@ -36,18 +31,10 @@ export class HaButtonMenu extends LitElement {
     return this._menu?.selected;
   }
 
-  public override focus() {
-    if (this._menu?.open) {
-      this._menu.focusItemAtIndex(0);
-    } else {
-      this._triggerButton?.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}
@@ -63,21 +50,6 @@ export class HaButtonMenu extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps): void {
-    super.firstUpdated(changedProps);
-
-    if (document.dir === "rtl") {
-      this.updateComplete.then(() => {
-        this.querySelectorAll("mwc-list-item").forEach((item) => {
-          const style = document.createElement("style");
-          style.innerHTML =
-            "span.material-icons:first-of-type { margin-left: var(--mdc-list-item-graphic-margin, 32px) !important; margin-right: 0px !important;}";
-          item!.shadowRoot!.appendChild(style);
-        });
-      });
-    }
-  }
-
   private _handleClick(): void {
     if (this.disabled) {
       return;
@@ -86,18 +58,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,60 +0,0 @@
-import { css, CSSResultGroup, 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 {
-  @property() public href?: string;
-
-  @property({ type: Boolean }) public disableHref = false;
-
-  @property({ type: Boolean, reflect: true }) public openNewTab = false;
-
-  @query("a") private _anchor!: HTMLAnchorElement;
-
-  public render() {
-    const r = super.render();
-    const href = this.href || "";
-
-    return html`${this.disableHref
-      ? html`<a aria-role="option">${r}</a>`
-      : html`<a
-          aria-role="option"
-          target=${this.openNewTab ? "_blank" : ""}
-          href=${href}
-          >${r}</a
-        >`}`;
-  }
-
-  firstUpdated() {
-    super.firstUpdated();
-    this.addEventListener("keydown", (ev) => {
-      if (ev.key === "Enter" || ev.key === " ") {
-        this._anchor.click();
-      }
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      super.styles,
-      css`
-        a {
-          width: 100%;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          padding-left: var(--mdc-list-side-padding, 20px);
-          padding-right: var(--mdc-list-side-padding, 20px);
-          overflow: hidden;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-clickable-list-item": HaClickableListItem;
-  }
-}

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());
   }