Make sure config exists

.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!

.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/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/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/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";

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/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

@@ -68,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-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

@@ -17,12 +17,7 @@ import {
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import {
-  fetchHassioSupervisorInfo,
-  setSupervisorOption,
-} from "../../../src/data/hassio/supervisor";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-error-screen";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
@@ -171,44 +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 supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
-        if (
-          !supervisorInfo.addons_repositories.find(
-            (repo) => repo === 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 setSupervisorOption(this.hass, {
-              addons_repositories: [
-                ...supervisorInfo.addons_repositories,
-                requestedAddonRepository,
-              ],
-            });
-          } catch (err: any) {
-            this._error = extractApiErrorMessage(err);
-          }
-        }
-      }
-
       if (requestedAddon) {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
         const validAddon = addonsInfo.addons.some(

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

@@ -166,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 : ""}
@@ -649,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}

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,
@@ -166,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")}
@@ -190,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/dashboard/hassio-addons.ts

@@ -26,7 +26,7 @@ class HassioAddons extends LitElement {
         <div class="card-group">
           ${!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")}
@@ -38,11 +38,7 @@ class HassioAddons extends LitElement {
                 .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/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.3",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
     "js-yaml": "^4.1.0",

pyproject.toml

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

script/version_bump.js

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

setup.cfg

@@ -0,0 +1,26 @@
+[metadata]
+name         = home-assistant-frontend
+version      = 20220420.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/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,51 @@ 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,
+          currency: stateObj.attributes.unit_of_measurement,
           minimumFractionDigits: 2,
         });
       } 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 +81,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 +120,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 +128,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 +144,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

@@ -29,8 +29,7 @@ import {
   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.
  *
@@ -47,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) {
@@ -102,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":
@@ -148,6 +124,15 @@ 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]
@@ -159,14 +144,13 @@ export const domainIconWithoutDefault = (
           ? 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/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/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/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/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,13 +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.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

@@ -12,8 +12,6 @@ export class HaClickableListItem extends ListItemBase {
   // property used only in css
   @property({ type: Boolean, reflect: true }) public rtl = false;
 
-  @property({ type: Boolean, reflect: true }) public openNewTab = false;
-
   @query("a") private _anchor!: HTMLAnchorElement;
 
   public render() {
@@ -22,12 +20,7 @@ export class HaClickableListItem extends ListItemBase {
 
     return html`${this.disableHref
       ? html`<a aria-role="option">${r}</a>`
-      : html`<a
-          aria-role="option"
-          target=${this.openNewTab ? "_blank" : ""}
-          href=${href}
-          >${r}</a
-        >`}`;
+      : html`<a aria-role="option" href=${href}>${r}</a>`}`;
   }
 
   firstUpdated() {
@@ -47,6 +40,10 @@ export class HaClickableListItem extends ListItemBase {
           padding-left: 0px;
           padding-right: 0px;
         }
+        :host([rtl]) span {
+          margin-left: var(--mdc-list-item-graphic-margin, 20px) !important;
+          margin-right: 0px !important;
+        }
         :host([graphic="avatar"]:not([twoLine])),
         :host([graphic="icon"]:not([twoLine])) {
           height: 48px;
@@ -58,20 +55,6 @@ export class HaClickableListItem extends ListItemBase {
           align-items: center;
           padding-left: var(--mdc-list-side-padding, 20px);
           padding-right: var(--mdc-list-side-padding, 20px);
-          overflow: hidden;
-        }
-        span.material-icons:first-of-type {
-          margin-inline-start: 0px !important;
-          margin-inline-end: var(
-            --mdc-list-item-graphic-margin,
-            16px
-          ) !important;
-          direction: var(--direction);
-        }
-        span.material-icons:last-of-type {
-          margin-inline-start: auto !important;
-          margin-inline-end: 0px !important;
-          direction: var(--direction);
         }
       `,
     ];

src/components/ha-climate-state.ts

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

src/components/ha-combo-box.ts

@@ -1,17 +1,13 @@
 import "@material/mwc-list/mwc-list-item";
 import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
-import type {
-  ComboBoxLight,
-  ComboBoxLightFilterChangedEvent,
-  ComboBoxLightOpenedChangedEvent,
-  ComboBoxLightValueChangedEvent,
-} from "@vaadin/combo-box/vaadin-combo-box-light";
+import type { ComboBoxLight } from "@vaadin/combo-box/vaadin-combo-box-light";
 import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
 import "./ha-textfield";
@@ -100,8 +96,6 @@ export class HaComboBox extends LitElement {
 
   @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
 
-  private _overlayMutationObserver?: MutationObserver;
-
   public open() {
     this.updateComplete.then(() => {
       this._comboBox?.open();
@@ -114,14 +108,6 @@ export class HaComboBox extends LitElement {
     });
   }
 
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._overlayMutationObserver) {
-      this._overlayMutationObserver.disconnect();
-      this._overlayMutationObserver = undefined;
-    }
-  }
-
   public get selectedItem() {
     return this._comboBox.selectedItem;
   }
@@ -207,64 +193,21 @@ export class HaComboBox extends LitElement {
     }
   }
 
-  private _openedChanged(ev: ComboBoxLightOpenedChangedEvent) {
-    const opened = ev.detail.value;
+  private _openedChanged(ev: PolymerChangedEvent<boolean>) {
     // delay this so we can handle click event before setting _opened
     setTimeout(() => {
-      this._opened = opened;
+      this._opened = ev.detail.value;
     }, 0);
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail);
-
-    if (
-      opened &&
-      "MutationObserver" in window &&
-      !this._overlayMutationObserver
-    ) {
-      const overlay = document.querySelector<HTMLElement>(
-        "vaadin-combo-box-overlay"
-      );
-
-      if (!overlay) {
-        return;
-      }
-
-      this._overlayMutationObserver = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (
-            mutation.type === "attributes" &&
-            mutation.attributeName === "inert"
-          ) {
-            this._overlayMutationObserver?.disconnect();
-            this._overlayMutationObserver = undefined;
-            // @ts-expect-error
-            overlay.inert = false;
-          } else if (mutation.type === "childList") {
-            mutation.removedNodes.forEach((node) => {
-              if (node.nodeName === "VAADIN-COMBO-BOX-OVERLAY") {
-                this._overlayMutationObserver?.disconnect();
-                this._overlayMutationObserver = undefined;
-              }
-            });
-          }
-        });
-      });
-
-      this._overlayMutationObserver.observe(overlay, {
-        attributes: true,
-      });
-      this._overlayMutationObserver.observe(document.body, {
-        childList: true,
-      });
-    }
   }
 
-  private _filterChanged(ev: ComboBoxLightFilterChangedEvent) {
+  private _filterChanged(ev: PolymerChangedEvent<string>) {
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail, { composed: false });
   }
 
-  private _valueChanged(ev: ComboBoxLightValueChangedEvent) {
+  private _valueChanged(ev: PolymerChangedEvent<string>) {
     ev.stopPropagation();
     const newValue = ev.detail.value;
 
@@ -298,9 +241,6 @@ export class HaComboBox extends LitElement {
       .toggle-button {
         right: 12px;
         top: -10px;
-        inset-inline-start: initial;
-        inset-inline-end: 12px;
-        direction: var(--direction);
       }
       :host([opened]) .toggle-button {
         color: var(--primary-color);
@@ -309,9 +249,18 @@ export class HaComboBox extends LitElement {
         --mdc-icon-size: 20px;
         top: -7px;
         right: 36px;
-        inset-inline-start: initial;
-        inset-inline-end: 36px;
-        direction: var(--direction);
+      }
+
+      :host-context([style*="direction: rtl;"]) .toggle-button {
+        left: 12px;
+        right: auto;
+        top: -10px;
+      }
+      :host-context([style*="direction: rtl;"]) .clear-button {
+        --mdc-icon-size: 20px;
+        top: -7px;
+        left: 36px;
+        right: auto;
       }
     `;
   }

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

@@ -140,9 +140,6 @@ export class HaDateRangePicker extends LitElement {
     return css`
       ha-svg-icon {
         margin-right: 8px;
-        margin-inline-end: 8px;
-        margin-inline-start: initial;
-        direction: var(--direction);
       }
 
       .date-range-inputs {
@@ -169,9 +166,6 @@ export class HaDateRangePicker extends LitElement {
 
       ha-textfield:last-child {
         margin-left: 8px;
-        margin-inline-start: 8px;
-        margin-inline-end: initial;
-        direction: var(--direction);
       }
 
       @media only screen and (max-width: 800px) {

src/components/ha-dialog.ts

@@ -3,8 +3,8 @@ import { styles } from "@material/mwc-dialog/mwc-dialog.css";
 import { mdiClose } from "@mdi/js";
 import { css, html, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
+import { computeRTLDirection } from "../common/util/compute_rtl";
 import type { HomeAssistant } from "../types";
-import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
 import "./ha-icon-button";
 
 export const createCloseHeading = (
@@ -17,13 +17,12 @@ export const createCloseHeading = (
     .path=${mdiClose}
     dialogAction="close"
     class="header_button"
+    dir=${computeRTLDirection(hass)}
   ></ha-icon-button>
 `;
 
 @customElement("ha-dialog")
 export class HaDialog extends DialogBase {
-  protected readonly [FOCUS_TARGET];
-
   public scrollToPos(x: number, y: number) {
     this.contentElement?.scrollTo(x, y);
   }
@@ -90,18 +89,18 @@ export class HaDialog extends DialogBase {
       }
       .header_title {
         margin-right: 40px;
-        margin-inline-end: 40px;
-        direction: var(--direction);
       }
-      .header_button {
-        inset-inline-start: initial;
-        inset-inline-end: 16px;
-        direction: var(--direction);
+      [dir="rtl"].header_button {
+        right: auto;
+        left: 16px;
       }
-      .dialog-actions {
-        inset-inline-start: initial !important;
-        inset-inline-end: 0px !important;
-        direction: var(--direction);
+      [dir="rtl"].header_title {
+        margin-left: 40px;
+        margin-right: 0px;
+      }
+      :host-context([style*="direction: rtl;"]) .dialog-actions {
+        left: 0px !important;
+        right: auto !important;
       }
     `,
   ];

src/components/ha-expansion-panel.ts

@@ -133,9 +133,6 @@ class HaExpansionPanel extends LitElement {
       .summary-icon {
         transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
         margin-left: auto;
-        margin-inline-start: auto;
-        margin-inline-end: initial;
-        direction: var(--direction);
       }
 
       .summary-icon.expanded {

src/components/ha-fab.ts

@@ -1,25 +1,24 @@
-import { FabBase } from "@material/mwc-fab/mwc-fab-base";
-import { styles } from "@material/mwc-fab/mwc-fab.css";
+import { Fab } from "@material/mwc-fab";
 import { customElement } from "lit/decorators";
 import { css } from "lit";
 
 @customElement("ha-fab")
-export class HaFab extends FabBase {
+export class HaFab extends Fab {
   protected firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
   }
 
-  static override styles = [
-    styles,
+  static override styles = Fab.styles.concat([
     css`
-      :host .mdc-fab--extended .mdc-fab__icon {
-        margin-inline-start: -8px;
-        margin-inline-end: 12px;
-        direction: var(--direction);
+      :host-context([style*="direction: rtl;"])
+        .mdc-fab--extended
+        .mdc-fab__icon {
+        margin-left: 12px !important;
+        margin-right: calc(12px - 20px) !important;
       }
     `,
-  ];
+  ]);
 }
 
 declare global {

src/components/ha-file-upload.ts

@@ -175,23 +175,24 @@ export class HaFileUpload extends LitElement {
         }
         .mdc-text-field__icon--leading {
           margin-bottom: 12px;
-          inset-inline-start: initial;
-          inset-inline-end: 0px;
-          direction: var(--direction);
+        }
+        :host-context([style*="direction: rtl;"])
+          .mdc-text-field__icon--leading {
+          margin-right: 0px;
         }
         .mdc-text-field--filled .mdc-floating-label--float-above {
           transform: scale(0.75);
           top: 8px;
         }
-        .mdc-floating-label {
-          inset-inline-start: 16px !important;
-          inset-inline-end: initial !important;
-          direction: var(--direction);
+        :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+          left: initial;
+          right: 16px;
         }
-        .mdc-text-field--filled .mdc-floating-label {
-          inset-inline-start: 48px !important;
-          inset-inline-end: initial !important;
-          direction: var(--direction);
+        :host-context([style*="direction: rtl;"])
+          .mdc-text-field--filled
+          .mdc-floating-label {
+          left: initial;
+          right: 48px;
         }
         .dragged:before {
           position: var(--layout-fit_-_position);

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

@@ -132,12 +132,6 @@ export class HaFormString extends LitElement implements HaFormElement {
         --mdc-icon-button-size: 24px;
         color: var(--secondary-text-color);
       }
-
-      ha-icon-button {
-        inset-inline-start: initial;
-        inset-inline-end: 12px;
-        direction: var(--direction);
-      }
     `;
   }
 }

src/components/ha-formfield.ts

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

src/components/ha-icon-button.ts

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

src/components/ha-metric.ts

@@ -1,79 +0,0 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { roundWithOneDecimal } from "../util/calculate";
-import "./ha-bar";
-import "./ha-settings-row";
-
-@customElement("ha-metric")
-class HaMetric extends LitElement {
-  @property({ type: Number }) public value!: number;
-
-  @property({ type: String }) public heading!: string;
-
-  @property({ type: String }) public tooltip?: string;
-
-  protected render(): TemplateResult {
-    const roundedValue = roundWithOneDecimal(this.value);
-    return html`
-      <ha-settings-row>
-        <span slot="heading"> ${this.heading} </span>
-        <div slot="description" .title=${this.tooltip ?? ""}>
-          <span class="value"> ${roundedValue} % </span>
-          <ha-bar
-            class=${classMap({
-              "target-warning": roundedValue > 50,
-              "target-critical": roundedValue > 85,
-            })}
-            .value=${this.value}
-          ></ha-bar>
-        </div>
-      </ha-settings-row>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      ha-settings-row {
-        padding: 0;
-        height: 54px;
-        width: 100%;
-      }
-      ha-settings-row > div[slot="description"] {
-        white-space: normal;
-        color: var(--secondary-text-color);
-        display: flex;
-        justify-content: space-between;
-      }
-      ha-bar {
-        --ha-bar-primary-color: var(
-          --metric-bar-ok-color,
-          var(--success-color)
-        );
-      }
-      .target-warning {
-        --ha-bar-primary-color: var(
-          --metric-bar-warning-color,
-          var(--warning-color)
-        );
-      }
-      .target-critical {
-        --ha-bar-primary-color: var(
-          --metric-bar-critical-color,
-          var(--error-color)
-        );
-      }
-      .value {
-        width: 48px;
-        padding-right: 4px;
-        flex-shrink: 0;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-metric": HaMetric;
-  }
-}

src/components/ha-navigation-list.ts

@@ -4,9 +4,9 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { PageNavigation } from "../layouts/hass-tabs-subpage";
 import type { HomeAssistant } from "../types";
-import "./ha-clickable-list-item";
 import "./ha-icon-next";
 import "./ha-svg-icon";
+import "./ha-clickable-list-item";
 
 @customElement("ha-navigation-list")
 class HaNavigationList extends LitElement {
@@ -56,15 +56,18 @@ class HaNavigationList extends LitElement {
   }
 
   static styles: CSSResultGroup = css`
-    :host {
-      --mdc-list-vertical-padding: 0;
+    a {
+      text-decoration: none;
+      color: var(--primary-text-color);
+      position: relative;
+      display: block;
+      outline: 0;
     }
     ha-svg-icon,
     ha-icon-next {
       color: var(--secondary-text-color);
       height: 24px;
       width: 24px;
-      display: block;
     }
     ha-svg-icon {
       padding: 8px;
@@ -75,10 +78,9 @@ class HaNavigationList extends LitElement {
     .icon-background ha-svg-icon {
       color: #fff;
     }
-    ha-clickable-list-item {
+    mwc-list-item {
       cursor: pointer;
       font-size: var(--navigation-list-item-title-font-size);
-      padding: var(--navigation-list-item-padding) 0;
     }
   `;
 }

src/components/ha-network.ts

@@ -163,9 +163,6 @@ export class HaNetwork extends LitElement {
 
         ha-settings-row {
           padding: 0;
-          --paper-time-input-justify-content: flex-end;
-          --settings-row-content-display: contents;
-          --settings-row-prefix-display: contents;
         }
 
         span[slot="heading"],

src/components/ha-select.ts

@@ -47,18 +47,9 @@ export class HaSelect extends SelectBase {
       .mdc-select__anchor {
         width: var(--ha-select-min-width, 200px);
       }
-      .mdc-select--filled .mdc-floating-label {
-        inset-inline-start: 12px;
-        inset-inline-end: initial;
-        direction: var(--direction);
-      }
-      .mdc-select .mdc-select__anchor {
-        padding-inline-start: 12px;
-        padding-inline-end: 0px;
-        direction: var(--direction);
-      }
-      .mdc-select__anchor .mdc-floating-label--float-above {
-        transform-origin: var(--float-start);
+      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+        right: 16px !important;
+        left: initial !important;
       }
     `,
   ];

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

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

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

@@ -27,8 +27,8 @@ export class HaColorTempSelector extends LitElement {
         pin
         icon="hass:thermometer"
         .caption=${this.label || ""}
-        .min=${this.selector.color_temp?.min_mireds ?? 153}
-        .max=${this.selector.color_temp?.max_mireds ?? 500}
+        .min=${this.selector.color_temp.min_mireds ?? 153}
+        .max=${this.selector.color_temp.max_mireds ?? 500}
         .value=${this.value}
         .disabled=${this.disabled}
         .helper=${this.helper}

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

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

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

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -76,13 +76,6 @@ export class HaLocationSelector extends LitElement {
     const radius = ev.detail.radius;
     fireEvent(this, "value-changed", { value: { ...this.value, radius } });
   }
-
-  static styles = css`
-    :host {
-      display: block;
-      height: 400px;
-    }
-  `;
 }
 
 declare global {

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

@@ -107,7 +107,6 @@ export class HaNumberSelector extends LitElement {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        direction: ltr;
       }
       ha-slider {
         flex: 1;

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

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

src/components/ha-service-control.ts

@@ -287,7 +287,9 @@ export class HaServiceControl extends LitElement {
       ${shouldRenderServiceDataYaml
         ? html`<ha-yaml-editor
             .hass=${this.hass}
-            .label=${this.hass.localize("ui.components.service-control.data")}
+            .label=${this.hass.localize(
+              "ui.components.service-control.service_data"
+            )}
             .name=${"data"}
             .defaultValue=${this._value?.data}
             @value-changed=${this._dataChanged}
@@ -470,7 +472,6 @@ export class HaServiceControl extends LitElement {
       ha-settings-row {
         --paper-time-input-justify-content: flex-end;
         --settings-row-content-width: 100%;
-        --settings-row-prefix-display: contents;
         border-top: var(
           --service-control-items-border-top,
           1px solid var(--divider-color)

src/components/ha-settings-row.ts

@@ -47,7 +47,7 @@ export class HaSettingsRow extends LitElement {
         display: contents;
       }
       :host(:not([narrow])) .content {
-        display: var(--settings-row-content-display, flex);
+        display: flex;
         justify-content: flex-end;
         flex: 1;
         padding: 16px 0;
@@ -68,7 +68,7 @@ export class HaSettingsRow extends LitElement {
         white-space: normal;
       }
       .prefix-wrap {
-        display: var(--settings-row-prefix-display);
+        display: contents;
       }
       :host([narrow]) .prefix-wrap {
         display: flex;

src/components/ha-sidebar.ts

@@ -1051,6 +1051,9 @@ class HaSidebar extends LitElement {
           padding: 0px 6px;
           color: var(--text-accent-color, var(--text-primary-color));
         }
+        .configuration-badge {
+          background-color: var(--primary-color);
+        }
         ha-svg-icon + .notification-badge,
         ha-svg-icon + .configuration-badge {
           position: absolute;

src/components/ha-target-picker.ts

@@ -569,9 +569,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         height: 16px;
         --mdc-icon-size: 14px;
         color: var(--secondary-text-color);
-        margin-inline-start: 4px !important;
-        margin-inline-end: -4px !important;
-        direction: var(--direction);
       }
       .mdc-chip__icon--leading {
         display: flex;
@@ -581,9 +578,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         border-radius: 50%;
         padding: 6px;
         margin-left: -14px !important;
-        margin-inline-start: -14px !important;
-        margin-inline-end: 4px !important;
-        direction: var(--direction);
       }
       .expand-btn {
         margin-right: 0;
@@ -622,6 +616,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         opacity: var(--light-disabled-opacity);
         pointer-events: none;
       }
+      :host-context([style*="direction: rtl;"]) .mdc-chip__icon {
+        margin-right: -14px !important;
+        margin-left: 4px !important;
+      }
     `;
   }
 }

src/components/ha-textfield.ts

@@ -57,9 +57,6 @@ export class HaTextField extends TextFieldBase {
       .mdc-text-field__affix--suffix {
         padding-left: var(--text-field-suffix-padding-left, 12px);
         padding-right: var(--text-field-suffix-padding-right, 0px);
-        padding-inline-start: var(--text-field-suffix-padding-left, 12px);
-        padding-inline-end: var(--text-field-suffix-padding-right, 0px);
-        direction: var(--direction);
       }
 
       .mdc-text-field:not(.mdc-text-field--disabled)
@@ -95,19 +92,17 @@ export class HaTextField extends TextFieldBase {
         overflow: var(--text-field-overflow);
       }
 
-      .mdc-floating-label {
-        inset-inline-start: 16px !important;
-        inset-inline-end: initial !important;
-        transform-origin: var(--float-start);
-        direction: var(--direction);
+      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+        right: 10px !important;
+        left: initial !important;
       }
 
-      .mdc-text-field--with-leading-icon.mdc-text-field--filled
+      :host-context([style*="direction: rtl;"])
+        .mdc-text-field--with-leading-icon.mdc-text-field--filled
         .mdc-floating-label {
         max-width: calc(100% - 48px);
-        inset-inline-start: 48px !important;
-        inset-inline-end: initial !important;
-        direction: var(--direction);
+        right: 48px !important;
+        left: initial !important;
       }
     `,
   ];

src/components/media-player/dialog-media-manage.ts

@@ -302,10 +302,6 @@ class DialogMediaManage extends LitElement {
           --mdc-theme-primary: var(--mdc-theme-on-primary);
         }
 
-        mwc-list {
-          direction: ltr;
-        }
-
         .danger {
           --mdc-theme-primary: var(--error-color);
         }
@@ -314,12 +310,6 @@ class DialogMediaManage extends LitElement {
           vertical-align: middle;
         }
 
-        ha-svg-icon[slot="icon"] {
-          margin-inline-start: 0px !important;
-          margin-inline-end: 8px !important;
-          direction: var(--direction);
-        }
-
         .refresh {
           display: flex;
           height: 200px;

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

@@ -151,8 +151,6 @@ class DialogMediaPlayerBrowse extends LitElement {
 
         ha-media-player-browse {
           --media-browser-max-height: calc(100vh - 65px);
-          height: calc(100vh - 65px);
-          direction: ltr;
         }
 
         @media (min-width: 800px) {
@@ -165,7 +163,6 @@ class DialogMediaPlayerBrowse extends LitElement {
           ha-media-player-browse {
             position: initial;
             --media-browser-max-height: 100vh - 137px;
-            height: 100vh - 137px;
             width: 700px;
           }
         }

src/components/media-player/ha-media-manage-button.ts

@@ -59,12 +59,6 @@ class MediaManageButton extends LitElement {
     ha-circular-progress[slot="icon"] {
       vertical-align: middle;
     }
-
-    ha-svg-icon[slot="icon"] {
-      margin-inline-start: 0px;
-      margin-inline-end: 8px;
-      direction: var(--direction);
-    }
   `;
 }
 

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

@@ -1,6 +1,3 @@
-import "@lit-labs/virtualizer";
-import type { LitVirtualizer } from "@lit-labs/virtualizer";
-import { grid } from "@lit-labs/virtualizer/layouts/grid";
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
@@ -19,16 +16,16 @@ import {
   eventOptions,
   property,
   query,
+  queryAll,
   state,
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
-import { until } from "lit/directives/until";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
 import { getSignedPath } from "../../data/auth";
-import { UNAVAILABLE_STATES } from "../../data/entity";
 import type { MediaPlayerItem } from "../../data/media-player";
 import {
   browseMediaPlayer,
@@ -46,9 +43,9 @@ import type { HomeAssistant } from "../../types";
 import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
 import "../entity/ha-entity-picker";
-import "../ha-alert";
 import "../ha-button-menu";
 import "../ha-card";
+import type { HaCard } from "../ha-card";
 import "../ha-circular-progress";
 import "../ha-fab";
 import "../ha-icon-button";
@@ -104,9 +101,7 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @query(".content") private _content?: HTMLDivElement;
 
-  @query("lit-virtualizer") private _virtualizer?: LitVirtualizer;
-
-  private _observed = false;
+  @queryAll(".lazythumbnail") private _thumbnails?: HaCard[];
 
   private _headerOffsetHeight = 0;
 
@@ -153,6 +148,326 @@ export class HaMediaPlayerBrowse extends LitElement {
     }
   }
 
+  protected render(): TemplateResult {
+    if (this._error) {
+      return html`
+        <div class="container">${this._renderError(this._error)}</div>
+      `;
+    }
+
+    if (!this._currentItem) {
+      return html`<ha-circular-progress active></ha-circular-progress>`;
+    }
+
+    const currentItem = this._currentItem;
+
+    const subtitle = this.hass.localize(
+      `ui.components.media-browser.class.${currentItem.media_class}`
+    );
+    const children = currentItem.children || [];
+    const mediaClass = MediaClassBrowserSettings[currentItem.media_class];
+    const childrenMediaClass = currentItem.children_media_class
+      ? MediaClassBrowserSettings[currentItem.children_media_class]
+      : MediaClassBrowserSettings.directory;
+
+    return html`
+              ${
+                currentItem.can_play
+                  ? html` <div
+                      class="header ${classMap({
+                        "no-img": !currentItem.thumbnail,
+                        "no-dialog": !this.dialog,
+                      })}"
+                      @transitionend=${this._setHeaderHeight}
+                    >
+                      <div class="header-content">
+                        ${currentItem.thumbnail
+                          ? html`
+                              <div
+                                class="img"
+                                style=${styleMap({
+                                  backgroundImage: currentItem.thumbnail
+                                    ? `url(${currentItem.thumbnail})`
+                                    : "none",
+                                })}
+                              >
+                                ${this._narrow && currentItem?.can_play
+                                  ? html`
+                                      <ha-fab
+                                        mini
+                                        .item=${currentItem}
+                                        @click=${this._actionClicked}
+                                      >
+                                        <ha-svg-icon
+                                          slot="icon"
+                                          .label=${this.hass.localize(
+                                            `ui.components.media-browser.${this.action}-media`
+                                          )}
+                                          .path=${this.action === "play"
+                                            ? mdiPlay
+                                            : mdiPlus}
+                                        ></ha-svg-icon>
+                                        ${this.hass.localize(
+                                          `ui.components.media-browser.${this.action}`
+                                        )}
+                                      </ha-fab>
+                                    `
+                                  : ""}
+                              </div>
+                            `
+                          : html``}
+                        <div class="header-info">
+                          <div class="breadcrumb">
+                            <h1 class="title">${currentItem.title}</h1>
+                            ${subtitle
+                              ? html` <h2 class="subtitle">${subtitle}</h2> `
+                              : ""}
+                          </div>
+                          ${currentItem.can_play &&
+                          (!currentItem.thumbnail || !this._narrow)
+                            ? html`
+                                <mwc-button
+                                  raised
+                                  .item=${currentItem}
+                                  @click=${this._actionClicked}
+                                >
+                                  <ha-svg-icon
+                                    .label=${this.hass.localize(
+                                      `ui.components.media-browser.${this.action}-media`
+                                    )}
+                                    .path=${this.action === "play"
+                                      ? mdiPlay
+                                      : mdiPlus}
+                                  ></ha-svg-icon>
+                                  ${this.hass.localize(
+                                    `ui.components.media-browser.${this.action}`
+                                  )}
+                                </mwc-button>
+                              `
+                            : ""}
+                        </div>
+                      </div>
+                    </div>`
+                  : ""
+              }
+          <div
+            class="content"
+            @scroll=${this._scroll}
+            @touchmove=${this._scroll}
+          >
+            ${
+              this._error
+                ? html`
+                    <div class="container">
+                      ${this._renderError(this._error)}
+                    </div>
+                  `
+                : isTTSMediaSource(currentItem.media_content_id)
+                ? html`
+                    <ha-browse-media-tts
+                      .item=${currentItem}
+                      .hass=${this.hass}
+                      .action=${this.action}
+                      @tts-picked=${this._ttsPicked}
+                    ></ha-browse-media-tts>
+                  `
+                : !children.length && !currentItem.not_shown
+                ? html`
+                    <div class="container no-items">
+                      ${currentItem.media_content_id ===
+                      "media-source://media_source/local/."
+                        ? html`
+                            <div class="highlight-add-button">
+                              <span>
+                                <ha-svg-icon
+                                  .path=${mdiArrowUpRight}
+                                ></ha-svg-icon>
+                              </span>
+                              <span>
+                                ${this.hass.localize(
+                                  "ui.components.media-browser.file_management.highlight_button"
+                                )}
+                              </span>
+                            </div>
+                          `
+                        : this.hass.localize(
+                            "ui.components.media-browser.no_items"
+                          )}
+                    </div>
+                  `
+                : childrenMediaClass.layout === "grid"
+                ? html`
+                    <div
+                      class="children ${classMap({
+                        portrait:
+                          childrenMediaClass.thumbnail_ratio === "portrait",
+                      })}"
+                    >
+                      ${children.map(
+                        (child) => html`
+                          <div
+                            class="child"
+                            .item=${child}
+                            @click=${this._childClicked}
+                          >
+                            <ha-card outlined>
+                              <div class="thumbnail">
+                                ${child.thumbnail
+                                  ? html`
+                                      <div
+                                        class="${["app", "directory"].includes(
+                                          child.media_class
+                                        )
+                                          ? "centered-image"
+                                          : ""} image lazythumbnail"
+                                        data-src=${child.thumbnail}
+                                      ></div>
+                                    `
+                                  : html`
+                                      <div class="icon-holder image">
+                                        <ha-svg-icon
+                                          class="folder"
+                                          .path=${MediaClassBrowserSettings[
+                                            child.media_class === "directory"
+                                              ? child.children_media_class ||
+                                                child.media_class
+                                              : child.media_class
+                                          ].icon}
+                                        ></ha-svg-icon>
+                                      </div>
+                                    `}
+                                ${child.can_play
+                                  ? html`
+                                      <ha-icon-button
+                                        class="play ${classMap({
+                                          can_expand: child.can_expand,
+                                        })}"
+                                        .item=${child}
+                                        .label=${this.hass.localize(
+                                          `ui.components.media-browser.${this.action}-media`
+                                        )}
+                                        .path=${this.action === "play"
+                                          ? mdiPlay
+                                          : mdiPlus}
+                                        @click=${this._actionClicked}
+                                      ></ha-icon-button>
+                                    `
+                                  : ""}
+                              </div>
+                              <div class="title">
+                                ${child.title}
+                                <paper-tooltip
+                                  fitToVisibleBounds
+                                  position="top"
+                                  offset="4"
+                                  >${child.title}</paper-tooltip
+                                >
+                              </div>
+                            </ha-card>
+                          </div>
+                        `
+                      )}
+                      ${currentItem.not_shown
+                        ? html`
+                            <div class="grid not-shown">
+                              <div class="title">
+                                ${this.hass.localize(
+                                  "ui.components.media-browser.not_shown",
+                                  { count: currentItem.not_shown }
+                                )}
+                              </div>
+                            </div>
+                          `
+                        : ""}
+                    </div>
+                  `
+                : html`
+                    <mwc-list>
+                      ${children.map(
+                        (child) => html`
+                          <mwc-list-item
+                            @click=${this._childClicked}
+                            .item=${child}
+                            .graphic=${mediaClass.show_list_images
+                              ? "medium"
+                              : "avatar"}
+                            dir=${computeRTLDirection(this.hass)}
+                          >
+                            <div
+                              class=${classMap({
+                                graphic: true,
+                                lazythumbnail:
+                                  mediaClass.show_list_images === true,
+                              })}
+                              data-src=${ifDefined(
+                                mediaClass.show_list_images && child.thumbnail
+                                  ? child.thumbnail
+                                  : undefined
+                              )}
+                              slot="graphic"
+                            >
+                              <ha-icon-button
+                                class="play ${classMap({
+                                  show:
+                                    !mediaClass.show_list_images ||
+                                    !child.thumbnail,
+                                })}"
+                                .item=${child}
+                                .label=${this.hass.localize(
+                                  `ui.components.media-browser.${this.action}-media`
+                                )}
+                                .path=${this.action === "play"
+                                  ? mdiPlay
+                                  : mdiPlus}
+                                @click=${this._actionClicked}
+                              ></ha-icon-button>
+                            </div>
+                            <span class="title">${child.title}</span>
+                          </mwc-list-item>
+                          <li divider role="separator"></li>
+                        `
+                      )}
+                      ${currentItem.not_shown
+                        ? html`
+                            <mwc-list-item
+                              noninteractive
+                              class="not-shown"
+                              .graphic=${mediaClass.show_list_images
+                                ? "medium"
+                                : "avatar"}
+                              dir=${computeRTLDirection(this.hass)}
+                            >
+                              <span class="title">
+                                ${this.hass.localize(
+                                  "ui.components.media-browser.not_shown",
+                                  { count: currentItem.not_shown }
+                                )}
+                              </span>
+                            </mwc-list-item>
+                          `
+                        : ""}
+                    </mwc-list>
+                  `
+            }
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected firstUpdated(): void {
+    this._measureCard();
+    this._attachResizeObserver();
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.size > 1 || !changedProps.has("hass")) {
+      return true;
+    }
+    const oldHass = changedProps.get("hass") as this["hass"];
+    return oldHass === undefined || oldHass.localize !== this.hass.localize;
+  }
+
   public willUpdate(changedProps: PropertyValues<this>): void {
     super.willUpdate(changedProps);
 
@@ -248,16 +563,6 @@ export class HaMediaPlayerBrowse extends LitElement {
             ],
             replace: true,
           });
-        } else if (
-          err.code === "entity_not_found" &&
-          UNAVAILABLE_STATES.includes(this.hass.states[this.entityId]?.state)
-        ) {
-          this._setError({
-            message: this.hass.localize(
-              `ui.components.media-browser.media_player_unavailable`
-            ),
-            code: "entity_not_found",
-          });
         } else {
           this._setError(err);
         }
@@ -278,19 +583,6 @@ export class HaMediaPlayerBrowse extends LitElement {
     }
   }
 
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.size > 1 || !changedProps.has("hass")) {
-      return true;
-    }
-    const oldHass = changedProps.get("hass") as this["hass"];
-    return oldHass === undefined || oldHass.localize !== this.hass.localize;
-  }
-
-  protected firstUpdated(): void {
-    this._measureCard();
-    this._attachResizeObserver();
-  }
-
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
@@ -298,389 +590,16 @@ export class HaMediaPlayerBrowse extends LitElement {
       this._animateHeaderHeight();
     } else if (changedProps.has("_currentItem")) {
       this._setHeaderHeight();
-
-      // This fixes a race condition for resizing of the cards using the grid layout
-      if (this._observed) {
-        return;
-      }
-
-      // @ts-ignore
-      const virtualizer = this._virtualizer?._virtualizer;
-
-      if (virtualizer) {
-        this._observed = true;
-        setTimeout(() => virtualizer._observeMutations(), 0);
-      }
+      this._attachIntersectionObserver();
     }
   }
 
-  protected render(): TemplateResult {
-    if (this._error) {
-      return html`
-        <div class="container">
-          <ha-alert alert-type="error">
-            ${this._renderError(this._error)}
-          </ha-alert>
-        </div>
-      `;
-    }
-
-    if (!this._currentItem) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
-    }
-
-    const currentItem = this._currentItem;
-
-    const subtitle = this.hass.localize(
-      `ui.components.media-browser.class.${currentItem.media_class}`
-    );
-    const children = currentItem.children || [];
-    const mediaClass = MediaClassBrowserSettings[currentItem.media_class];
-    const childrenMediaClass = currentItem.children_media_class
-      ? MediaClassBrowserSettings[currentItem.children_media_class]
-      : MediaClassBrowserSettings.directory;
-
-    const backgroundImage = currentItem.thumbnail
-      ? this._getSignedThumbnail(currentItem.thumbnail).then(
-          (value) => `url(${value})`
-        )
-      : "none";
-
-    return html`
-              ${
-                currentItem.can_play
-                  ? html`
-                      <div
-                        class="header ${classMap({
-                          "no-img": !currentItem.thumbnail,
-                          "no-dialog": !this.dialog,
-                        })}"
-                        @transitionend=${this._setHeaderHeight}
-                      >
-                        <div class="header-content">
-                          ${currentItem.thumbnail
-                            ? html`
-                                <div
-                                  class="img"
-                                  style="background-image: ${until(
-                                    backgroundImage,
-                                    ""
-                                  )}"
-                                >
-                                  ${this._narrow && currentItem?.can_play
-                                    ? html`
-                                        <ha-fab
-                                          mini
-                                          .item=${currentItem}
-                                          @click=${this._actionClicked}
-                                        >
-                                          <ha-svg-icon
-                                            slot="icon"
-                                            .label=${this.hass.localize(
-                                              `ui.components.media-browser.${this.action}-media`
-                                            )}
-                                            .path=${this.action === "play"
-                                              ? mdiPlay
-                                              : mdiPlus}
-                                          ></ha-svg-icon>
-                                          ${this.hass.localize(
-                                            `ui.components.media-browser.${this.action}`
-                                          )}
-                                        </ha-fab>
-                                      `
-                                    : ""}
-                                </div>
-                              `
-                            : html``}
-                          <div class="header-info">
-                            <div class="breadcrumb">
-                              <h1 class="title">${currentItem.title}</h1>
-                              ${subtitle
-                                ? html` <h2 class="subtitle">${subtitle}</h2> `
-                                : ""}
-                            </div>
-                            ${currentItem.can_play &&
-                            (!currentItem.thumbnail || !this._narrow)
-                              ? html`
-                                  <mwc-button
-                                    raised
-                                    .item=${currentItem}
-                                    @click=${this._actionClicked}
-                                  >
-                                    <ha-svg-icon
-                                      .label=${this.hass.localize(
-                                        `ui.components.media-browser.${this.action}-media`
-                                      )}
-                                      .path=${this.action === "play"
-                                        ? mdiPlay
-                                        : mdiPlus}
-                                    ></ha-svg-icon>
-                                    ${this.hass.localize(
-                                      `ui.components.media-browser.${this.action}`
-                                    )}
-                                  </mwc-button>
-                                `
-                              : ""}
-                          </div>
-                        </div>
-                      </div>
-                    `
-                  : ""
-              }
-          <div
-            class="content"
-            @scroll=${this._scroll}
-            @touchmove=${this._scroll}
-          >
-            ${
-              this._error
-                ? html`
-                    <div class="container">
-                      <ha-alert alert-type="error">
-                        ${this._renderError(this._error)}
-                      </ha-alert>
-                    </div>
-                  `
-                : isTTSMediaSource(currentItem.media_content_id)
-                ? html`
-                    <ha-browse-media-tts
-                      .item=${currentItem}
-                      .hass=${this.hass}
-                      .action=${this.action}
-                      @tts-picked=${this._ttsPicked}
-                    ></ha-browse-media-tts>
-                  `
-                : !children.length && !currentItem.not_shown
-                ? html`
-                    <div class="container no-items">
-                      ${currentItem.media_content_id ===
-                      "media-source://media_source/local/."
-                        ? html`
-                            <div class="highlight-add-button">
-                              <span>
-                                <ha-svg-icon
-                                  .path=${mdiArrowUpRight}
-                                ></ha-svg-icon>
-                              </span>
-                              <span>
-                                ${this.hass.localize(
-                                  "ui.components.media-browser.file_management.highlight_button"
-                                )}
-                              </span>
-                            </div>
-                          `
-                        : this.hass.localize(
-                            "ui.components.media-browser.no_items"
-                          )}
-                    </div>
-                  `
-                : childrenMediaClass.layout === "grid"
-                ? html`
-                    <lit-virtualizer
-                      scroller
-                      .layout=${grid({
-                        itemSize: {
-                          width: "175px",
-                          height: "225px",
-                        },
-                        gap: "16px",
-                        flex: { preserve: "aspect-ratio" },
-                        justify: "space-evenly",
-                        direction: "vertical",
-                      })}
-                      .items=${children}
-                      .renderItem=${this._renderGridItem}
-                      class="children ${classMap({
-                        portrait:
-                          childrenMediaClass.thumbnail_ratio === "portrait",
-                        not_shown: !!currentItem.not_shown,
-                      })}"
-                    ></lit-virtualizer>
-                    ${currentItem.not_shown
-                      ? html`
-                          <div class="grid not-shown">
-                            <div class="title">
-                              ${this.hass.localize(
-                                "ui.components.media-browser.not_shown",
-                                { count: currentItem.not_shown }
-                              )}
-                            </div>
-                          </div>
-                        `
-                      : ""}
-                  `
-                : html`
-                    <mwc-list>
-                      <lit-virtualizer
-                        scroller
-                        .items=${children}
-                        style=${styleMap({
-                          height: `${children.length * 72 + 26}px`,
-                        })}
-                        .renderItem=${this._renderListItem}
-                      ></lit-virtualizer>
-                      ${currentItem.not_shown
-                        ? html`
-                            <mwc-list-item
-                              noninteractive
-                              class="not-shown"
-                              .graphic=${mediaClass.show_list_images
-                                ? "medium"
-                                : "avatar"}
-                              dir=${computeRTLDirection(this.hass)}
-                            >
-                              <span class="title">
-                                ${this.hass.localize(
-                                  "ui.components.media-browser.not_shown",
-                                  { count: currentItem.not_shown }
-                                )}
-                              </span>
-                            </mwc-list-item>
-                          `
-                        : ""}
-                    </mwc-list>
-                  `
-            }
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  private _renderGridItem = (child: MediaPlayerItem): TemplateResult => {
-    const backgroundImage = child.thumbnail
-      ? this._getSignedThumbnail(child.thumbnail).then(
-          (value) => `url(${value})`
-        )
-      : "none";
-
-    return html`
-      <div class="child" .item=${child} @click=${this._childClicked}>
-        <ha-card outlined>
-          <div class="thumbnail">
-            ${child.thumbnail
-              ? html`
-                  <div
-                    class="${["app", "directory"].includes(child.media_class)
-                      ? "centered-image"
-                      : ""} image"
-                    style="background-image: ${until(backgroundImage, "")}"
-                  ></div>
-                `
-              : html`
-                  <div class="icon-holder image">
-                    <ha-svg-icon
-                      class="folder"
-                      .path=${MediaClassBrowserSettings[
-                        child.media_class === "directory"
-                          ? child.children_media_class || child.media_class
-                          : child.media_class
-                      ].icon}
-                    ></ha-svg-icon>
-                  </div>
-                `}
-            ${child.can_play
-              ? html`
-                  <ha-icon-button
-                    class="play ${classMap({
-                      can_expand: child.can_expand,
-                    })}"
-                    .item=${child}
-                    .label=${this.hass.localize(
-                      `ui.components.media-browser.${this.action}-media`
-                    )}
-                    .path=${this.action === "play" ? mdiPlay : mdiPlus}
-                    @click=${this._actionClicked}
-                  ></ha-icon-button>
-                `
-              : ""}
-          </div>
-          <div class="title">
-            ${child.title}
-            <paper-tooltip fitToVisibleBounds position="top" offset="4"
-              >${child.title}</paper-tooltip
-            >
-          </div>
-        </ha-card>
-      </div>
-    `;
-  };
-
-  private _renderListItem = (child: MediaPlayerItem): TemplateResult => {
-    const currentItem = this._currentItem;
-    const mediaClass = MediaClassBrowserSettings[currentItem!.media_class];
-
-    const backgroundImage =
-      mediaClass.show_list_images && child.thumbnail
-        ? this._getSignedThumbnail(child.thumbnail).then(
-            (value) => `url(${value})`
-          )
-        : "none";
-
-    return html`
-      <mwc-list-item
-        @click=${this._childClicked}
-        .item=${child}
-        .graphic=${mediaClass.show_list_images ? "medium" : "avatar"}
-        dir=${computeRTLDirection(this.hass)}
-      >
-        <div
-          class=${classMap({
-            graphic: true,
-            thumbnail: mediaClass.show_list_images === true,
-          })}
-          style="background-image: ${until(backgroundImage, "")}"
-          slot="graphic"
-        >
-          <ha-icon-button
-            class="play ${classMap({
-              show: !mediaClass.show_list_images || !child.thumbnail,
-            })}"
-            .item=${child}
-            .label=${this.hass.localize(
-              `ui.components.media-browser.${this.action}-media`
-            )}
-            .path=${this.action === "play" ? mdiPlay : mdiPlus}
-            @click=${this._actionClicked}
-          ></ha-icon-button>
-        </div>
-        <span class="title">${child.title}</span>
-      </mwc-list-item>
-    `;
-  };
-
-  private async _getSignedThumbnail(
-    thumbnailUrl: string | undefined
-  ): Promise<string> {
-    if (!thumbnailUrl) {
-      return "";
-    }
-
-    if (thumbnailUrl.startsWith("/")) {
-      // Thumbnails served by local API require authentication
-      return (await getSignedPath(this.hass, thumbnailUrl)).path;
-    }
-
-    if (thumbnailUrl.startsWith("https://brands.home-assistant.io")) {
-      // The backend is not aware of the theme used by the users,
-      // so we rewrite the URL to show a proper icon
-      thumbnailUrl = brandsUrl({
-        domain: extractDomainFromBrandUrl(thumbnailUrl),
-        type: "icon",
-        useFallback: true,
-        darkOptimized: this.hass.themes?.darkMode,
-      });
-    }
-
-    return thumbnailUrl;
-  }
-
-  private _actionClicked = (ev: MouseEvent): void => {
+  private _actionClicked(ev: MouseEvent): void {
     ev.stopPropagation();
     const item = (ev.currentTarget as any).item;
 
     this._runAction(item);
-  };
+  }
 
   private _runAction(item: MediaPlayerItem): void {
     fireEvent(this, "media-picked", { item, navigateIds: this.navigateIds });
@@ -696,7 +615,7 @@ export class HaMediaPlayerBrowse extends LitElement {
     });
   }
 
-  private _childClicked = async (ev: MouseEvent): Promise<void> => {
+  private async _childClicked(ev: MouseEvent): Promise<void> {
     const target = ev.currentTarget as any;
     const item: MediaPlayerItem = target.item;
 
@@ -712,7 +631,7 @@ export class HaMediaPlayerBrowse extends LitElement {
     fireEvent(this, "media-browsed", {
       ids: [...this.navigateIds, item],
     });
-  };
+  }
 
   private async _fetchData(
     entityId: string,
@@ -739,6 +658,55 @@ export class HaMediaPlayerBrowse extends LitElement {
     this._resizeObserver.observe(this);
   }
 
+  /**
+   * Load thumbnails for images on demand as they become visible.
+   */
+  private async _attachIntersectionObserver(): Promise<void> {
+    if (!("IntersectionObserver" in window) || !this._thumbnails) {
+      return;
+    }
+    if (!this._intersectionObserver) {
+      this._intersectionObserver = new IntersectionObserver(
+        async (entries, observer) => {
+          await Promise.all(
+            entries.map(async (entry) => {
+              if (!entry.isIntersecting) {
+                return;
+              }
+              const thumbnailCard = entry.target as HTMLElement;
+              let thumbnailUrl = thumbnailCard.dataset.src;
+              if (!thumbnailUrl) {
+                return;
+              }
+              if (thumbnailUrl.startsWith("/")) {
+                // Thumbnails served by local API require authentication
+                const signedPath = await getSignedPath(this.hass, thumbnailUrl);
+                thumbnailUrl = signedPath.path;
+              } else if (
+                thumbnailUrl.startsWith("https://brands.home-assistant.io")
+              ) {
+                // The backend is not aware of the theme used by the users,
+                // so we rewrite the URL to show a proper icon
+                thumbnailUrl = brandsUrl({
+                  domain: extractDomainFromBrandUrl(thumbnailUrl),
+                  type: "icon",
+                  useFallback: true,
+                  darkOptimized: this.hass.themes?.darkMode,
+                });
+              }
+              thumbnailCard.style.backgroundImage = `url(${thumbnailUrl})`;
+              observer.unobserve(thumbnailCard); // loaded, so no need to observe anymore
+            })
+          );
+        }
+      );
+    }
+    const observer = this._intersectionObserver!;
+    for (const thumbnailCard of this._thumbnails) {
+      observer.observe(thumbnailCard);
+    }
+  }
+
   private _closeDialogAction(): void {
     fireEvent(this, "close-dialog");
   }
@@ -873,7 +841,6 @@ export class HaMediaPlayerBrowse extends LitElement {
         .content {
           overflow-y: auto;
           box-sizing: border-box;
-          height: 100%;
         }
 
         /* HEADER */
@@ -959,7 +926,6 @@ export class HaMediaPlayerBrowse extends LitElement {
         .not-shown {
           font-style: italic;
           color: var(--secondary-text-color);
-          padding: 8px 16px 8px;
         }
 
         .grid.not-shown {
@@ -985,11 +951,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           border-bottom-color: var(--divider-color);
         }
 
-        mwc-list-item {
-          width: 100%;
-        }
-
-        div.children {
+        .children {
           display: grid;
           grid-template-columns: repeat(
             auto-fit,
@@ -1026,7 +988,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding-bottom: 100%;
         }
 
-        .portrait ha-card .thumbnail {
+        .portrait.children ha-card .thumbnail {
           padding-bottom: 150%;
         }
 
@@ -1100,6 +1062,10 @@ export class HaMediaPlayerBrowse extends LitElement {
           color: var(--primary-color);
         }
 
+        ha-card:hover .lazythumbnail {
+          opacity: 0.5;
+        }
+
         .child .title {
           font-size: 16px;
           padding-top: 16px;
@@ -1161,7 +1127,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding: 0 24px;
         }
 
-        :host([narrow]) div.children {
+        :host([narrow]) .children {
           grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
         }
 
@@ -1266,16 +1232,6 @@ export class HaMediaPlayerBrowse extends LitElement {
           --mdc-fab-box-shadow: none;
           --mdc-theme-secondary: rgba(var(--rgb-primary-color), 0.5);
         }
-
-        lit-virtualizer {
-          height: 100%;
-          overflow: overlay !important;
-          contain: size layout !important;
-        }
-
-        lit-virtualizer.not_shown {
-          height: calc(100% - 36px);
-        }
       `,
     ];
   }

src/components/media-player/ha-media-upload-button.ts

@@ -119,12 +119,6 @@ class MediaUploadButton extends LitElement {
     ha-circular-progress[slot="icon"] {
       vertical-align: middle;
     }
-
-    ha-svg-icon[slot="icon"] {
-      margin-inline-start: 0px;
-      margin-inline-end: 8px;
-      direction: var(--direction);
-    }
   `;
 }
 

src/components/trace/ha-timeline.ts

@@ -10,8 +10,6 @@ export class HaTimeline extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public raised = false;
 
-  @property({ reflect: true, type: Boolean }) notEnabled = false;
-
   @property({ type: Boolean }) public lastItem = false;
 
   @property({ type: String }) public icon?: string;
@@ -78,9 +76,6 @@ export class HaTimeline extends LitElement {
           margin-right: 8px;
           width: 24px;
         }
-        :host([notEnabled]) ha-svg-icon {
-          opacity: 0.5;
-        }
         ha-svg-icon {
           color: var(
             --timeline-ball-color,

src/components/trace/ha-trace-logbook.ts

@@ -3,7 +3,7 @@ import { customElement, property } from "lit/decorators";
 import { LogbookEntry } from "../../data/logbook";
 import { HomeAssistant } from "../../types";
 import "./hat-logbook-note";
-import "../../panels/logbook/ha-logbook-renderer";
+import "../../panels/logbook/ha-logbook";
 import { TraceExtended } from "../../data/trace";
 
 @customElement("ha-trace-logbook")
@@ -19,12 +19,12 @@ export class HaTraceLogbook extends LitElement {
   protected render(): TemplateResult {
     return this.logbookEntries.length
       ? html`
-          <ha-logbook-renderer
+          <ha-logbook
             relative-time
             .hass=${this.hass}
             .entries=${this.logbookEntries}
             .narrow=${this.narrow}
-          ></ha-logbook-renderer>
+          ></ha-logbook>
           <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
         `
       : html`<div class="padded-box">

src/components/trace/ha-trace-path-details.ts

@@ -13,7 +13,7 @@ import {
   getDataFromPath,
   TraceExtended,
 } from "../../data/trace";
-import "../../panels/logbook/ha-logbook-renderer";
+import "../../panels/logbook/ha-logbook";
 import { traceTabStyles } from "./trace-tab-styles";
 import { HomeAssistant } from "../../types";
 import type { NodeInfo } from "./hat-script-graph";
@@ -114,11 +114,6 @@ export class HaTracePathDetails extends LitElement {
           const { path, timestamp, result, error, changed_variables, ...rest } =
             trace as any;
 
-          if (result?.enabled === false) {
-            return html`This node was disabled and skipped during execution so
-            no further trace information is available.`;
-          }
-
           return html`
             ${curPath === this.selected.path
               ? ""
@@ -194,7 +189,7 @@ export class HaTracePathDetails extends LitElement {
       // it's the last entry. Find all logbook entries after start.
       const startTime = new Date(startTrace[0].timestamp);
       const idx = this.logbookEntries.findIndex(
-        (entry) => new Date(entry.when * 1000) >= startTime
+        (entry) => new Date(entry.when) >= startTime
       );
       if (idx === -1) {
         entries = [];
@@ -210,7 +205,7 @@ export class HaTracePathDetails extends LitElement {
       entries = [];
 
       for (const entry of this.logbookEntries || []) {
-        const entryDate = new Date(entry.when * 1000);
+        const entryDate = new Date(entry.when);
         if (entryDate >= startTime) {
           if (entryDate < endTime) {
             entries.push(entry);
@@ -224,12 +219,12 @@ export class HaTracePathDetails extends LitElement {
 
     return entries.length
       ? html`
-          <ha-logbook-renderer
+          <ha-logbook
             relative-time
             .hass=${this.hass}
             .entries=${entries}
             .narrow=${this.narrow}
-          ></ha-logbook-renderer>
+          ></ha-logbook>
           <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
         `
       : html`<div class="padded-box">

src/components/trace/hat-graph-node.ts

@@ -19,8 +19,6 @@ export class HatGraphNode extends LitElement {
 
   @property({ reflect: true, type: Boolean }) disabled?: boolean;
 
-  @property({ reflect: true, type: Boolean }) notEnabled = false;
-
   @property({ reflect: true, type: Boolean }) graphStart?: boolean;
 
   @property({ type: Boolean, attribute: "nofocus" }) noFocus = false;
@@ -116,14 +114,8 @@ export class HatGraphNode extends LitElement {
         --stroke-clr: var(--hover-clr);
         --icon-clr: var(--default-icon-clr);
       }
-      :host([notEnabled]) circle {
-        --stroke-clr: var(--disabled-clr);
-      }
-      :host([notEnabled][active]) circle {
-        --stroke-clr: var(--disabled-active-clr);
-      }
-      :host([notEnabled]:hover) circle {
-        --stroke-clr: var(--disabled-hover-clr);
+      :host([disabled]) circle {
+        stroke: var(--disabled-clr);
       }
       svg {
         width: 100%;