Do not show skip if entity support auto update

2026-06-27 18:51:45 +00:00 · 2022-03-31 16:12:48 +00:00
395 changed files with 6731 additions and 15372 deletions
@@ -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.
@@ -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?
@@ -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!
@@ -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",
@@ -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");
    }
@@ -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: {
@@ -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
@@ -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",
@@ -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",
@@ -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";

@@ -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";
@@ -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",
@@ -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",
@@ -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")
@@ -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;
  }
 }
@@ -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")
@@ -159,19 +159,13 @@ export class DemoHaAlert extends LitElement {

  firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
+    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
+      default_theme: "default",
+      default_dark_theme: "default",
+      themes: {},
+      darkMode: true,
+      theme: "default",
+    });
  }

  static get styles() {
@@ -170,7 +170,6 @@ const SCHEMAS: {
          select: { options: ["Option 1", "Option 2"], mode: "list" },
        },
      },
-      template: { name: "Template", selector: { template: {} } },
      select: {
        name: "Select",
        selector: {
@@ -262,8 +261,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {

  @state() private _required = false;

-  @state() private _helper = false;
-
  @state() private _label = true;

  private data = SCHEMAS.map(() => ({}));
@@ -421,13 +418,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
            @change=${this._handleOptionChange}
          ></ha-switch>
        </ha-formfield>
-        <ha-formfield label="Helper text">
-          <ha-switch
-            .name=${"helper"}
-            .checked=${this._helper}
-            @change=${this._handleOptionChange}
-          ></ha-switch>
-        </ha-formfield>
      </div>
      ${SCHEMAS.map((info, idx) => {
        const data = this.data[idx];
@@ -456,7 +446,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                        .disabled=${this._disabled}
                        .required=${this._required}
                        @value-changed=${valueChanged}
-                        .helper=${this._helper ? "Helper text" : undefined}
                      ></ha-selector>
                    </ha-settings-row>
                  `
@@ -477,8 +466,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
      width: 60;
    }
    .options {
-      max-width: 800px;
-      margin: 16px auto;
+      padding: 16px 48px;
    }
    .options ha-formfield {
      margin-right: 16px;
@@ -1,3 +0,0 @@
---
-title: Tips
---
@@ -1,73 +0,0 @@
-import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-tip";
-import "../../../../src/components/ha-card";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-
-const tips: (string | TemplateResult)[] = [
-  "Test tip",
-  "Bigger test tip, with some random text just to fill up as much space as possible without it looking like I'm really trying to to that",
-  html`<i>Tip</i> <b>with</b> <sub>HTML</sub>`,
-];
-
-@customElement("demo-components-ha-tip")
-export class DemoHaTip extends LitElement {
-  protected render(): TemplateResult {
-    return html` ${["light", "dark"].map(
-      (mode) => html`
-        <div class=${mode}>
-          <ha-card header="ha-tip ${mode} demo">
-            <div class="card-content">
-              ${tips.map((tip) => html`<ha-tip>${tip}</ha-tip>`)}
-            </div>
-          </ha-card>
-        </div>
-      `
-    )}`;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-      .dark,
-      .light {
-        display: block;
-        background-color: var(--primary-background-color);
-        padding: 0 50px;
-      }
-      ha-tip {
-        margin-bottom: 14px;
-      }
-      ha-card {
-        margin: 24px auto;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-tip": DemoHaTip;
-  }
-}
@@ -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
@@ -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
@@ -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
@@ -6,6 +6,7 @@ import {
  UPDATE_SUPPORT_PROGRESS,
  UPDATE_SUPPORT_INSTALL,
  UPDATE_SUPPORT_RELEASE_NOTES,
+  UPDATE_SUPPORT_AUTO_UPDATE,
 } from "../../../../src/data/update";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
@@ -18,7 +19,7 @@ import { LONG_TEXT } from "../../data/text";

 const base_attributes = {
  title: "Awesome",
-  installed_version: "1.2.2",
+  current_version: "1.2.2",
  latest_version: "1.2.3",
  release_url: "https://home-assistant.io",
  supported_features: UPDATE_SUPPORT_INSTALL,
@@ -50,7 +51,7 @@ const ENTITIES = [
  }),
  getEntity("update", "update5", "off", {
    ...base_attributes,
-    installed_version: "1.2.3",
+    current_version: "1.2.3",
    friendly_name: "No update",
  }),
  getEntity("update", "update6", "off", {
@@ -102,8 +103,8 @@ const ENTITIES = [
  }),
  getEntity("update", "update14", "off", {
    ...base_attributes,
-    installed_version: null,
-    friendly_name: "Update without installed_version",
+    current_version: null,
+    friendly_name: "Update without current_version",
  }),
  getEntity("update", "update15", "off", {
    ...base_attributes,
@@ -128,16 +129,11 @@ const ENTITIES = [
    supported_features:
      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
  }),
-  getEntity("update", "update19", "on", {
+  getEntity("update", "update18", "on", {
    ...base_attributes,
    friendly_name: "Update with auto update",
-    auto_update: true,
-  }),
-  getEntity("update", "update20", "on", {
-    ...base_attributes,
-    in_progress: true,
-    title: undefined,
-    friendly_name: "Installing without title",
+    supported_features:
+      base_attributes.supported_features + UPDATE_SUPPORT_AUTO_UPDATE,
  }),
 ];

@@ -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}
@@ -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">
@@ -39,14 +39,7 @@ import type { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";

-const SUPPORTED_UI_TYPES = [
-  "string",
-  "select",
-  "boolean",
-  "integer",
-  "float",
-  "schema",
-];
+const SUPPORTED_UI_TYPES = ["string", "select", "boolean", "integer", "float"];

 const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
  new Type("!secret", {
@@ -55,8 +48,6 @@ const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
  }),
 ]);

-const MASKED_FIELDS = ["password", "secret", "token"];
-
@customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
  @property({ attribute: false }) public addon!: HassioAddonDetails;
@@ -84,66 +75,19 @@ class HassioAddonConfig extends LitElement {
  public computeLabel = (entry: HaFormSchema): string =>
    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
      ?.name ||
-    this.addon.translations.en?.configuration?.[entry.name]?.name ||
+    this.addon.translations.en?.configuration?.[entry.name].name ||
    entry.name;

-  public computeHelper = (entry: HaFormSchema): string =>
-    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
-      ?.description ||
-    this.addon.translations.en?.configuration?.[entry.name]?.description ||
-    "";
-
-  private _convertSchema = memoizeOne(
-    // Convert supervisor schema to selectors
-    (schema: Record<string, any>): HaFormSchema[] =>
-      schema.map((entry) =>
-        entry.type === "select"
-          ? {
-              name: entry.name,
-              required: entry.required,
-              selector: { select: { options: entry.options } },
-            }
-          : entry.type === "string"
-          ? entry.multiple
-            ? {
-                name: entry.name,
-                required: entry.required,
-                selector: {
-                  select: { options: [], multiple: true, custom_value: true },
-                },
-              }
-            : {
-                name: entry.name,
-                required: entry.required,
-                selector: {
-                  text: {
-                    type:
-                      entry.format || MASKED_FIELDS.includes(entry.name)
-                        ? "password"
-                        : "text",
-                  },
-                },
-              }
-          : entry.type === "boolean"
-          ? {
-              name: entry.name,
-              required: entry.required,
-              selector: { boolean: {} },
-            }
-          : entry.type === "schema"
-          ? {
-              name: entry.name,
-              required: entry.required,
-              selector: { object: {} },
-            }
-          : entry.type === "float" || entry.type === "integer"
-          ? {
-              name: entry.name,
-              required: entry.required,
-              selector: { number: { mode: "box" } },
-            }
-          : entry
-      )
+  private _schema = memoizeOne((schema: HaFormSchema[]): HaFormSchema[] =>
+    // @ts-expect-error supervisor does not implement [string, string] for select.options[]
+    schema.map((entry) =>
+      entry.type === "select"
+        ? {
+            ...entry,
+            options: entry.options.map((option) => [option, option]),
+          }
+        : entry
+    )
  );

  private _filteredShchema = memoizeOne(
@@ -162,7 +106,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")}
@@ -196,8 +140,7 @@ class HassioAddonConfig extends LitElement {
                .data=${this._options!}
                @value-changed=${this._configChanged}
                .computeLabel=${this.computeLabel}
-                .computeHelper=${this.computeHelper}
-                .schema=${this._convertSchema(
+                .schema=${this._schema(
                  this._showOptional
                    ? this.addon.schema!
                    : this._filteredShchema(
@@ -254,9 +197,8 @@ class HassioAddonConfig extends LitElement {
  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    this._canShowSchema = !this.addon.schema!.find(
-      (entry) =>
-        // @ts-ignore
-        !SUPPORTED_UI_TYPES.includes(entry.type)
+      // @ts-ignore
+      (entry) => !SUPPORTED_UI_TYPES.includes(entry.type) || entry.multiple
    );
    this._yamlMode = !this._canShowSchema;
  }
@@ -1,3 +1,4 @@
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
  css,
  CSSResultGroup,
@@ -7,13 +8,10 @@ import {
  TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-form/ha-form";
-import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import {
  HassioAddonDetails,
  HassioAddonSetOptionParams,
@@ -26,6 +24,16 @@ import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";

+interface NetworkItem {
+  description: string;
+  container: string;
+  host: number | null;
+}
+
+interface NetworkItemInput extends PaperInputElement {
+  container: string;
+}
+
@customElement("hassio-addon-network")
 class HassioAddonNetwork extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -34,13 +42,9 @@ class HassioAddonNetwork extends LitElement {

  @property({ attribute: false }) public addon!: HassioAddonDetails;

-  @state() private _showOptional = false;
-
-  @state() private _configHasChanged = false;
-
  @state() private _error?: string;

-  @state() private _config?: Record<string, any>;
+  @state() private _config?: NetworkItem[];

  public connectedCallback(): void {
    super.connectedCallback();
@@ -52,61 +56,59 @@ class HassioAddonNetwork extends LitElement {
      return html``;
    }

-    const hasHiddenOptions = Object.keys(this._config).find(
-      (entry) => this._config![entry] === null
-    );
-
    return html`
      <ha-card
-        outlined
        .header=${this.supervisor.localize(
          "addon.configuration.network.header"
        )}
      >
        <div class="card-content">
-          <p>
-            ${this.supervisor.localize(
-              "addon.configuration.network.introduction"
-            )}
-          </p>
          ${this._error
            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
            : ""}

-          <ha-form
-            .data=${this._config}
-            @value-changed=${this._configChanged}
-            .computeLabel=${this._computeLabel}
-            .computeHelper=${this._computeHelper}
-            .schema=${this._createSchema(
-              this._config,
-              this._showOptional,
-              this.hass.userData?.showAdvanced || false
-            )}
-          ></ha-form>
-        </div>
-        ${hasHiddenOptions
-          ? html`<ha-formfield
-              class="show-optional"
-              .label=${this.supervisor.localize(
-                "addon.configuration.network.show_disabled"
+          <table>
+            <tbody>
+              <tr>
+                <th>
+                  ${this.supervisor.localize(
+                    "addon.configuration.network.container"
+                  )}
+                </th>
+                <th>
+                  ${this.supervisor.localize(
+                    "addon.configuration.network.host"
+                  )}
+                </th>
+                <th>${this.supervisor.localize("common.description")}</th>
+              </tr>
+              ${this._config!.map(
+                (item) => html`
+                  <tr>
+                    <td>${item.container}</td>
+                    <td>
+                      <paper-input
+                        @value-changed=${this._configChanged}
+                        placeholder=${this.supervisor.localize(
+                          "addon.configuration.network.disabled"
+                        )}
+                        .value=${item.host ? String(item.host) : ""}
+                        .container=${item.container}
+                        no-label-float
+                      ></paper-input>
+                    </td>
+                    <td>${this._computeDescription(item)}</td>
+                  </tr>
+                `
              )}
-            >
-              <ha-switch
-                @change=${this._toggleOptional}
-                .checked=${this._showOptional}
-              >
-              </ha-switch>
-            </ha-formfield>`
-          : ""}
+            </tbody>
+          </table>
+        </div>
        <div class="card-actions">
          <ha-progress-button class="warning" @click=${this._resetTapped}>
            ${this.supervisor.localize("common.reset_defaults")}
          </ha-progress-button>
-          <ha-progress-button
-            @click=${this._saveTapped}
-            .disabled=${!this._configHasChanged}
-          >
+          <ha-progress-button @click=${this._saveTapped}>
            ${this.supervisor.localize("common.save")}
          </ha-progress-button>
        </div>
@@ -121,60 +123,50 @@ class HassioAddonNetwork extends LitElement {
    }
  }

-  private _createSchema = memoizeOne(
-    (
-      config: Record<string, number>,
-      showOptional: boolean,
-      advanced: boolean
-    ): HaFormSchema[] =>
-      (showOptional
-        ? Object.keys(config)
-        : Object.keys(config).filter((entry) => config[entry] !== null)
-      ).map((entry) => ({
-        name: entry,
-        selector: {
-          number: {
-            mode: "box",
-            min: 0,
-            max: 65535,
-            unit_of_measurement: advanced ? entry : undefined,
-          },
-        },
-      }))
-  );
-
-  private _computeLabel = (_: HaFormSchema): string => "";
-
-  private _computeHelper = (item: HaFormSchema): string =>
-    this.addon.translations[this.hass.language]?.network?.[item.name] ||
-    this.addon.translations.en?.network?.[item.name] ||
-    this.addon.network_description?.[item.name] ||
-    item.name;
+  private _computeDescription = (item: NetworkItem): string =>
+    this.addon.translations[this.hass.language]?.network?.[item.container]
+      ?.description ||
+    this.addon.translations.en?.network?.[item.container]?.description ||
+    item.description;

  private _setNetworkConfig(): void {
-    this._config = this.addon.network || {};
+    const network = this.addon.network || {};
+    const description = this.addon.network_description || {};
+    const items: NetworkItem[] = Object.keys(network).map((key) => ({
+      container: key,
+      host: network[key],
+      description: description[key],
+    }));
+    this._config = items.sort((a, b) => (a.container > b.container ? 1 : -1));
  }

-  private async _configChanged(ev: CustomEvent): Promise<void> {
-    this._configHasChanged = true;
-    this._config! = ev.detail.value;
+  private async _configChanged(ev: Event): Promise<void> {
+    const target = ev.target as NetworkItemInput;
+    this._config!.forEach((item) => {
+      if (
+        item.container === target.container &&
+        item.host !== parseInt(String(target.value), 10)
+      ) {
+        item.host = target.value ? parseInt(String(target.value), 10) : null;
+      }
+    });
  }

  private async _resetTapped(ev: CustomEvent): Promise<void> {
    const button = ev.currentTarget as any;
+    button.progress = true;
+
    const data: HassioAddonSetOptionParams = {
      network: null,
    };

    try {
      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      this._configHasChanged = false;
      const eventdata = {
        success: true,
        response: undefined,
        path: "option",
      };
-      button.actionSuccess();
      fireEvent(this, "hass-api-called", eventdata);
      if (this.addon?.state === "started") {
        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
@@ -185,21 +177,19 @@ class HassioAddonNetwork extends LitElement {
        "error",
        extractApiErrorMessage(err)
      );
-      button.actionError();
    }
-  }

-  private _toggleOptional() {
-    this._showOptional = !this._showOptional;
+    button.progress = false;
  }

  private async _saveTapped(ev: CustomEvent): Promise<void> {
    const button = ev.currentTarget as any;
+    button.progress = true;

    this._error = undefined;
    const networkconfiguration = {};
-    Object.entries(this._config!).forEach(([key, value]) => {
-      networkconfiguration[key] = value ?? null;
+    this._config!.forEach((item) => {
+      networkconfiguration[item.container] = parseInt(String(item.host), 10);
    });

    const data: HassioAddonSetOptionParams = {
@@ -208,13 +198,11 @@ class HassioAddonNetwork extends LitElement {

    try {
      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      this._configHasChanged = false;
      const eventdata = {
        success: true,
        response: undefined,
        path: "option",
      };
-      button.actionSuccess();
      fireEvent(this, "hass-api-called", eventdata);
      if (this.addon?.state === "started") {
        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
@@ -225,8 +213,8 @@ class HassioAddonNetwork extends LitElement {
        "error",
        extractApiErrorMessage(err)
      );
-      button.actionError();
    }
+    button.progress = false;
  }

  static get styles(): CSSResultGroup {
@@ -244,9 +232,6 @@ class HassioAddonNetwork extends LitElement {
          display: flex;
          justify-content: space-between;
        }
-        .show-optional {
-          padding: 16px;
-        }
      `,
    ];
  }
@@ -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>`
            : ""}
@@ -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(
@@ -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}
@@ -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">
@@ -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
@@ -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;
  }
 }
@@ -32,6 +32,13 @@ interface AddonCheckboxItem extends CheckboxItem {

 const _computeFolders = (folders): CheckboxItem[] => {
  const list: CheckboxItem[] = [];
+  if (folders.includes("homeassistant")) {
+    list.push({
+      slug: "homeassistant",
+      name: "Home Assistant configuration",
+      checked: false,
+    });
+  }
  if (folders.includes("ssl")) {
    list.push({ slug: "ssl", name: "SSL", checked: false });
  }
@@ -93,7 +100,7 @@ export class SupervisorBackupContent extends LitElement {
      this.folders = _computeFolders(
        this.backup
          ? this.backup.folders
-          : ["ssl", "share", "media", "addons/local"]
+          : ["homeassistant", "ssl", "share", "media", "addons/local"]
      );
      this.addons = _computeAddons(
        this.backup ? this.backup.addons : this.supervisor?.supervisor.addons
@@ -180,7 +187,7 @@ export class SupervisorBackupContent extends LitElement {
            >
              <ha-checkbox
                .checked=${this.homeAssistant}
-                @change=${this.toggleHomeAssistant}
+                @click=${this.toggleHomeAssistant}
              >
              </ha-checkbox>
            </ha-formfield>
@@ -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}
@@ -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;
-        }
      `,
    ];
  }
@@ -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>
@@ -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!);
  }

@@ -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)}`;
  }

@@ -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,
+  },
+];
@@ -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>
@@ -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")
@@ -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>
@@ -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">
@@ -128,7 +128,6 @@ class UpdateAvailableCard extends LitElement {

    return html`
      <ha-card
-        outlined
        .header=${this.supervisor.localize("update_available.update_name", {
          name: this._name,
        })}
@@ -72,8 +72,8 @@
    "@material/mwc-textfield": "0.25.3",
    "@material/mwc-top-app-bar-fixed": "^0.25.3",
    "@material/top-app-bar": "14.0.0-canary.261f2db59.0",
-    "@mdi/js": "6.7.96",
-    "@mdi/svg": "6.7.96",
+    "@mdi/js": "6.6.95",
+    "@mdi/svg": "6.6.95",
    "@polymer/app-layout": "^3.1.0",
    "@polymer/iron-flex-layout": "^3.0.1",
    "@polymer/iron-icon": "^3.0.1",
@@ -89,8 +89,8 @@
    "@polymer/paper-tooltip": "^3.0.1",
    "@polymer/polymer": "3.4.1",
    "@thomasloven/round-slider": "0.5.4",
-    "@vaadin/combo-box": "^23.0.10",
-    "@vaadin/vaadin-themable-mixin": "^23.0.10",
+    "@vaadin/combo-box": "^22.0.4",
+    "@vaadin/vaadin-themable-mixin": "^22.0.4",
    "@vibrant/color": "^3.2.1-alpha.1",
    "@vibrant/core": "^3.2.1-alpha.1",
    "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
@@ -108,7 +108,7 @@
    "fuse.js": "^6.0.0",
    "google-timezones-json": "^1.0.2",
    "hls.js": "^1.1.5",
-    "home-assistant-js-websocket": "^7.1.0",
+    "home-assistant-js-websocket": "^7.0.1",
    "idb-keyval": "^5.1.3",
    "intl-messageformat": "^9.9.1",
    "js-yaml": "^4.1.0",
@@ -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
@@ -15,7 +15,7 @@ if [ -z $(which hass) ]; then
  echo "Installing Home Asstant core from dev."
  python3 -m pip install --upgrade \
    colorlog \
-    git+https://github.com/home-assistant/home-assistant.git@dev
+    git+git://github.com/home-assistant/home-assistant.git@dev
 fi

 if [ ! -d "${WD}/config" ]; then
@@ -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;
@@ -0,0 +1,26 @@
+[metadata]
+name         = home-assistant-frontend
+version      = 20220330.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
@@ -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";
@@ -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;
-};
@@ -12,7 +12,7 @@ export const isNavigationClick = (e: MouseEvent) => {

  const anchor = e
    .composedPath()
-    .find((n) => (n as HTMLElement).tagName === "A") as
+    .filter((n) => (n as HTMLElement).tagName === "A")[0] as
    | HTMLAnchorElement
    | undefined;
  if (
@@ -29,11 +29,8 @@ import {
  mdiPowerPlug,
  mdiPowerPlugOff,
  mdiRadioboxBlank,
+  mdiSmoke,
  mdiSnowflake,
-  mdiSmokeDetector,
-  mdiSmokeDetectorAlert,
-  mdiSmokeDetectorVariant,
-  mdiSmokeDetectorVariantAlert,
  mdiSquare,
  mdiSquareOutline,
  mdiStop,
@@ -55,8 +52,6 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
      return is_off ? mdiBattery : mdiBatteryOutline;
    case "battery_charging":
      return is_off ? mdiBattery : mdiBatteryCharging;
-    case "carbon_monoxide":
-      return is_off ? mdiSmokeDetector : mdiSmokeDetectorAlert;
    case "cold":
      return is_off ? mdiThermometer : mdiSnowflake;
    case "connectivity":
@@ -73,7 +68,7 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
    case "tamper":
      return is_off ? mdiCheckCircle : mdiAlertCircle;
    case "smoke":
-      return is_off ? mdiSmokeDetectorVariant : mdiSmokeDetectorVariantAlert;
+      return is_off ? mdiCheckCircle : mdiSmoke;
    case "heat":
      return is_off ? mdiThermometer : mdiFire;
    case "light":
@@ -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;

@@ -2,74 +2,50 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { FrontendLocaleData } from "../../data/translation";
 import {
+  updateIsInstalling,
+  UpdateEntity,
  UPDATE_SUPPORT_PROGRESS,
-  updateIsInstallingFromAttributes,
 } from "../../data/update";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
-import { formatNumber, isNumericFromAttributes } from "../number/format_number";
+import { formatNumber, isNumericState } from "../number/format_number";
 import { LocalizeFunc } from "../translations/localize";
-import { supportsFeatureFromAttributes } from "./supports-feature";
-import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
-import { computeDomain } from "./compute_domain";
+import { computeStateDomain } from "./compute_state_domain";
+import { supportsFeature } from "./supports-feature";

 export const computeStateDisplay = (
  localize: LocalizeFunc,
  stateObj: HassEntity,
  locale: FrontendLocaleData,
  state?: string
-): string =>
-  computeStateDisplayFromEntityAttributes(
-    localize,
-    locale,
-    stateObj.entity_id,
-    stateObj.attributes,
-    state !== undefined ? state : stateObj.state
-  );
-
-export const computeStateDisplayFromEntityAttributes = (
-  localize: LocalizeFunc,
-  locale: FrontendLocaleData,
-  entityId: string,
-  attributes: any,
-  state: string
 ): string => {
-  if (state === UNKNOWN || state === UNAVAILABLE) {
-    return localize(`state.default.${state}`);
+  const compareState = state !== undefined ? state : stateObj.state;
+
+  if (compareState === UNKNOWN || compareState === UNAVAILABLE) {
+    return localize(`state.default.${compareState}`);
  }

  // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
-  if (isNumericFromAttributes(attributes)) {
-    // state is duration
-    if (
-      attributes.device_class === "duration" &&
-      attributes.unit_of_measurement &&
-      UNIT_TO_SECOND_CONVERT[attributes.unit_of_measurement]
-    ) {
+  if (isNumericState(stateObj)) {
+    if (stateObj.attributes.device_class === "monetary") {
      try {
-        return formatDuration(state, attributes.unit_of_measurement);
-      } catch (_err) {
-        // fallback to default
-      }
-    }
-    if (attributes.device_class === "monetary") {
-      try {
-        return formatNumber(state, locale, {
+        return formatNumber(compareState, locale, {
          style: "currency",
-          currency: attributes.unit_of_measurement,
-          minimumFractionDigits: 2,
+          currency: stateObj.attributes.unit_of_measurement,
        });
      } catch (_err) {
        // fallback to default
      }
    }
-    return `${formatNumber(state, locale)}${
-      attributes.unit_of_measurement ? " " + attributes.unit_of_measurement : ""
+    return `${formatNumber(compareState, locale)}${
+      stateObj.attributes.unit_of_measurement
+        ? " " + stateObj.attributes.unit_of_measurement
+        : ""
    }`;
  }

-  const domain = computeDomain(entityId);
+  const domain = computeStateDomain(stateObj);

  if (domain === "input_datetime") {
    if (state !== undefined) {
@@ -104,32 +80,36 @@ export const computeStateDisplayFromEntityAttributes = (
    } else {
      // If not trying to display an explicit state, create `Date` object from `stateObj`'s attributes then format.
      let date: Date;
-      if (attributes.has_date && attributes.has_time) {
+      if (stateObj.attributes.has_date && stateObj.attributes.has_time) {
        date = new Date(
-          attributes.year,
-          attributes.month - 1,
-          attributes.day,
-          attributes.hour,
-          attributes.minute
+          stateObj.attributes.year,
+          stateObj.attributes.month - 1,
+          stateObj.attributes.day,
+          stateObj.attributes.hour,
+          stateObj.attributes.minute
        );
        return formatDateTime(date, locale);
      }
-      if (attributes.has_date) {
-        date = new Date(attributes.year, attributes.month - 1, attributes.day);
+      if (stateObj.attributes.has_date) {
+        date = new Date(
+          stateObj.attributes.year,
+          stateObj.attributes.month - 1,
+          stateObj.attributes.day
+        );
        return formatDate(date, locale);
      }
-      if (attributes.has_time) {
+      if (stateObj.attributes.has_time) {
        date = new Date();
-        date.setHours(attributes.hour, attributes.minute);
+        date.setHours(stateObj.attributes.hour, stateObj.attributes.minute);
        return formatTime(date, locale);
      }
-      return state;
+      return stateObj.state;
    }
  }

  if (domain === "humidifier") {
-    if (state === "on" && attributes.humidity) {
-      return `${attributes.humidity} %`;
+    if (compareState === "on" && stateObj.attributes.humidity) {
+      return `${stateObj.attributes.humidity} %`;
    }
  }

@@ -139,7 +119,7 @@ export const computeStateDisplayFromEntityAttributes = (
    domain === "number" ||
    domain === "input_number"
  ) {
-    return formatNumber(state, locale);
+    return formatNumber(compareState, locale);
  }

  // state of button is a timestamp
@@ -147,12 +127,12 @@ export const computeStateDisplayFromEntityAttributes = (
    domain === "button" ||
    domain === "input_button" ||
    domain === "scene" ||
-    (domain === "sensor" && attributes.device_class === "timestamp")
+    (domain === "sensor" && stateObj.attributes.device_class === "timestamp")
  ) {
    try {
-      return formatDateTime(new Date(state), locale);
+      return formatDateTime(new Date(compareState), locale);
    } catch (_err) {
-      return state;
+      return compareState;
    }
  }

@@ -163,28 +143,30 @@ export const computeStateDisplayFromEntityAttributes = (
    // When the latest version is skipped, show the latest version
    // When update is not available, show "Up-to-date"
    // When update is not available and there is no latest_version show "Unavailable"
-    return state === "on"
-      ? updateIsInstallingFromAttributes(attributes)
-        ? supportsFeatureFromAttributes(attributes, UPDATE_SUPPORT_PROGRESS)
+    return compareState === "on"
+      ? updateIsInstalling(stateObj as UpdateEntity)
+        ? supportsFeature(stateObj, UPDATE_SUPPORT_PROGRESS)
          ? localize("ui.card.update.installing_with_progress", {
-              progress: attributes.in_progress,
+              progress: stateObj.attributes.in_progress,
            })
          : localize("ui.card.update.installing")
-        : attributes.latest_version
-      : attributes.skipped_version === attributes.latest_version
-      ? attributes.latest_version ?? localize("state.default.unavailable")
+        : stateObj.attributes.latest_version
+      : stateObj.attributes.skipped_version ===
+        stateObj.attributes.latest_version
+      ? stateObj.attributes.latest_version ??
+        localize("state.default.unavailable")
      : localize("ui.card.update.up_to_date");
  }

  return (
    // Return device class translation
-    (attributes.device_class &&
+    (stateObj.attributes.device_class &&
      localize(
-        `component.${domain}.state.${attributes.device_class}.${state}`
+        `component.${domain}.state.${stateObj.attributes.device_class}.${compareState}`
      )) ||
    // Return default translation
-    localize(`component.${domain}.state._.${state}`) ||
+    localize(`component.${domain}.state._.${compareState}`) ||
    // We don't know! Return the raw state.
-    state
+    compareState
  );
 };
@@ -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 || "";
@@ -8,29 +8,29 @@ import {
  mdiCalendar,
  mdiCast,
  mdiCastConnected,
-  mdiCheckCircleOutline,
  mdiClock,
-  mdiCloseCircleOutline,
  mdiGestureTapButton,
  mdiLanConnect,
  mdiLanDisconnect,
+  mdiLightSwitch,
  mdiLock,
  mdiLockAlert,
  mdiLockClock,
  mdiLockOpen,
-  mdiPackage,
-  mdiPackageDown,
  mdiPackageUp,
  mdiPowerPlug,
  mdiPowerPlugOff,
  mdiRestart,
-  mdiToggleSwitchVariant,
-  mdiToggleSwitchVariantOff,
+  mdiToggleSwitch,
+  mdiToggleSwitchOff,
+  mdiCheckCircleOutline,
+  mdiCloseCircleOutline,
  mdiWeatherNight,
+  mdiPackage,
+  mdiPackageDown,
 } 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 +47,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 +88,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":
@@ -132,11 +109,9 @@ export const domainIconWithoutDefault = (
        case "outlet":
          return compareState === "on" ? mdiPowerPlug : mdiPowerPlugOff;
        case "switch":
-          return compareState === "on"
-            ? mdiToggleSwitchVariant
-            : mdiToggleSwitchVariantOff;
+          return compareState === "on" ? mdiToggleSwitch : mdiToggleSwitchOff;
        default:
-          return mdiToggleSwitchVariant;
+          return mdiLightSwitch;
      }

    case "sensor": {
@@ -148,6 +123,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 +143,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;
 };
@@ -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;
@@ -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
@@ -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.`);
@@ -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);
-};
@@ -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;
 };
@@ -34,7 +34,7 @@ import {
  endOfMonth,
  endOfQuarter,
  endOfYear,
-} from "date-fns/esm";
+} from "date-fns";
 import {
  formatDate,
  formatDateMonth,
@@ -347,8 +347,8 @@ class StatisticsChart extends LitElement {
        statTypes.forEach((type) => {
          let val: number | null;
          if (type === "sum") {
-            if (initVal === null) {
-              initVal = val = stat.state || 0;
+            if (!initVal) {
+              initVal = val = stat.state;
              prevSum = stat.sum;
            } else {
              val = initVal + ((stat.sum || 0) - prevSum!);
@@ -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;
@@ -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>
@@ -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 {
@@ -52,8 +52,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {

  @property() public value?: string;

-  @property() public helper?: string;
-
  @property() public devices?: DeviceRegistryEntry[];

  @property() public areas?: AreaRegistryEntry[];
@@ -198,10 +196,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 [
@@ -272,7 +269,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
          ? this.hass.localize("ui.components.device-picker.device")
          : this.label}
        .value=${this._value}
-        .helper=${this.helper}
        .renderer=${rowRenderer}
        .disabled=${this.disabled}
        .required=${this.required}
@@ -4,7 +4,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import "./ha-device-picker";
-import type { HaDevicePickerDeviceFilterFunc } from "./ha-device-picker";

@customElement("ha-devices-picker")
 class HaDevicesPicker extends LitElement {
@@ -12,10 +11,6 @@ class HaDevicesPicker extends LitElement {

  @property() public value?: string[];

-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled?: boolean;
-
  @property({ type: Boolean }) public required?: boolean;

  /**
@@ -42,8 +37,6 @@ class HaDevicesPicker extends LitElement {

  @property({ attribute: "pick-device-label" }) public pickDeviceLabel?: string;

-  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
-
  protected render(): TemplateResult {
    if (!this.hass) {
      return html``;
@@ -58,13 +51,11 @@ class HaDevicesPicker extends LitElement {
              allow-custom-entity
              .curValue=${entityId}
              .hass=${this.hass}
-              .deviceFilter=${this.deviceFilter}
              .includeDomains=${this.includeDomains}
              .excludeDomains=${this.excludeDomains}
              .includeDeviceClasses=${this.includeDeviceClasses}
              .value=${entityId}
              .label=${this.pickedDeviceLabel}
-              .disabled=${this.disabled}
              @value-changed=${this._deviceChanged}
            ></ha-device-picker>
          </div>
@@ -72,16 +63,12 @@ class HaDevicesPicker extends LitElement {
      )}
      <div>
        <ha-device-picker
-          allow-custom-entity
          .hass=${this.hass}
-          .helper=${this.helper}
-          .deviceFilter=${this.deviceFilter}
          .includeDomains=${this.includeDomains}
          .excludeDomains=${this.excludeDomains}
          .includeDeviceClasses=${this.includeDeviceClasses}
          .label=${this.pickDeviceLabel}
-          .disabled=${this.disabled}
-          .required=${this.required && !currentDevices.length}
+          .required=${this.required}
          @value-changed=${this._addDevice}
        ></ha-device-picker>
      </div>
@@ -14,12 +14,8 @@ class HaEntitiesPickerLight extends LitElement {

  @property({ type: Array }) public value?: string[];

-  @property({ type: Boolean }) public disabled?: boolean;
-
  @property({ type: Boolean }) public required?: boolean;

-  @property() public helper?: string;
-
  /**
   * Show entities from specific domains.
   * @type {string}
@@ -98,7 +94,6 @@ class HaEntitiesPickerLight extends LitElement {
              .entityFilter=${this._entityFilter}
              .value=${entityId}
              .label=${this.pickedEntityLabel}
-              .disabled=${this.disabled}
              @value-changed=${this._entityChanged}
            ></ha-entity-picker>
          </div>
@@ -106,7 +101,6 @@ class HaEntitiesPickerLight extends LitElement {
      )}
      <div>
        <ha-entity-picker
-          allow-custom-entity
          .hass=${this.hass}
          .includeDomains=${this.includeDomains}
          .excludeDomains=${this.excludeDomains}
@@ -116,9 +110,7 @@ class HaEntitiesPickerLight extends LitElement {
          .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
          .entityFilter=${this._entityFilter}
          .label=${this.pickEntityLabel}
-          .helper=${this.helper}
-          .disabled=${this.disabled}
-          .required=${this.required && !currentEntities.length}
+          .required=${this.required}
          @value-changed=${this._addEntity}
        ></ha-entity-picker>
      </div>
@@ -28,8 +28,6 @@ class HaEntityAttributePicker extends LitElement {

  @property() public value?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean }) private _opened = false;

  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
@@ -66,7 +64,6 @@ class HaEntityAttributePicker extends LitElement {
        )}
        .disabled=${this.disabled || !this.entityId}
        .required=${this.required}
-        .helper=${this.helper}
        .allowCustomValue=${this.allowCustomValue}
        item-value-path="value"
        item-label-path="label"
@@ -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;
@@ -49,8 +48,6 @@ export class HaEntityPicker extends LitElement {

  @property() public value?: string;

-  @property() public helper?: string;
-
  /**
   * Show entities from specific domains.
   * @type {Array}
@@ -307,7 +304,6 @@ export class HaEntityPicker extends LitElement {
        .label=${this.label === undefined
          ? this.hass.localize("ui.components.entity.entity-picker.entity")
          : this.label}
-        .helper=${this.helper}
        .allowCustomValue=${this.allowCustomEntity}
        .filteredItems=${this._states}
        .renderer=${rowRenderer}
@@ -29,8 +29,6 @@ class HaAddonPicker extends LitElement {

  @property() public value = "";

-  @property() public helper?: string;
-
  @state() private _addons?: HassioAddonInfo[];

  @property({ type: Boolean }) public disabled = false;
@@ -64,7 +62,6 @@ class HaAddonPicker extends LitElement {
        .value=${this._value}
        .required=${this.required}
        .disabled=${this.disabled}
-        .helper=${this.helper}
        .renderer=${rowRenderer}
        .items=${this._addons}
        item-value-path="slug"
@@ -2,12 +2,12 @@ import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import type { Analytics, AnalyticsPreferences } from "../data/analytics";
+import { Analytics, AnalyticsPreferences } from "../data/analytics";
 import { haStyle } from "../resources/styles";
-import type { HomeAssistant } from "../types";
+import { HomeAssistant } from "../types";
+import "./ha-checkbox";
+import type { HaCheckbox } from "./ha-checkbox";
 import "./ha-settings-row";
-import "./ha-switch";
-import type { HaSwitch } from "./ha-switch";

 const ADDITIONAL_PREFERENCES = [
  {
@@ -40,62 +40,62 @@ export class HaAnalytics extends LitElement {

    return html`
      <ha-settings-row>
+        <span slot="prefix">
+          <ha-checkbox
+            @change=${this._handleRowCheckboxClick}
+            .checked=${baseEnabled}
+            .preference=${"base"}
+            .disabled=${loading}
+            name="base"
+          >
+          </ha-checkbox>
+        </span>
        <span slot="heading" data-for="base"> Basic analytics </span>
        <span slot="description" data-for="base">
          This includes information about your system.
        </span>
-        <ha-switch
-          @change=${this._handleRowClick}
-          .checked=${baseEnabled}
-          .preference=${"base"}
-          .disabled=${loading}
-          name="base"
-        >
-        </ha-switch>
      </ha-settings-row>
      ${ADDITIONAL_PREFERENCES.map(
        (preference) =>
-          html`
-            <ha-settings-row>
-              <span slot="heading" data-for=${preference.key}>
-                ${preference.title}
-              </span>
-              <span slot="description" data-for=${preference.key}>
-                ${preference.description}
-              </span>
-              <span>
-                <ha-switch
-                  @change=${this._handleRowClick}
-                  .checked=${this.analytics?.preferences[preference.key]}
-                  .preference=${preference.key}
-                  name=${preference.key}
-                >
-                </ha-switch>
-                ${!baseEnabled
-                  ? html`
-                      <paper-tooltip animation-delay="0" position="right">
-                        You need to enable basic analytics for this option to be
-                        available
-                      </paper-tooltip>
-                    `
-                  : ""}
-              </span>
-            </ha-settings-row>
-          `
+          html`<ha-settings-row>
+            <span slot="prefix">
+              <ha-checkbox
+                @change=${this._handleRowCheckboxClick}
+                .checked=${this.analytics?.preferences[preference.key]}
+                .preference=${preference.key}
+                name=${preference.key}
+              >
+              </ha-checkbox>
+              ${!baseEnabled
+                ? html`<paper-tooltip animation-delay="0" position="right">
+                    You need to enable basic analytics for this option to be
+                    available
+                  </paper-tooltip>`
+                : ""}
+            </span>
+            <span slot="heading" data-for=${preference.key}>
+              ${preference.title}
+            </span>
+            <span slot="description" data-for=${preference.key}>
+              ${preference.description}
+            </span>
+          </ha-settings-row>`
      )}
      <ha-settings-row>
+        <span slot="prefix">
+          <ha-checkbox
+            @change=${this._handleRowCheckboxClick}
+            .checked=${this.analytics?.preferences.diagnostics}
+            .preference=${"diagnostics"}
+            .disabled=${loading}
+            name="diagnostics"
+          >
+          </ha-checkbox>
+        </span>
        <span slot="heading" data-for="diagnostics"> Diagnostics </span>
        <span slot="description" data-for="diagnostics">
          Share crash reports when unexpected errors occur.
        </span>
-        <ha-switch
-          @change=${this._handleRowClick}
-          .checked=${this.analytics?.preferences.diagnostics}
-          .preference=${"diagnostics"}
-          .disabled=${loading}
-          name="diagnostics"
-        >
-        </ha-switch>
      </ha-settings-row>
    `;
  }
@@ -120,23 +120,23 @@ export class HaAnalytics extends LitElement {
    });
  }

-  private _handleRowClick(ev: Event) {
-    const target = ev.currentTarget as HaSwitch;
-    const preference = (target as any).preference;
+  private _handleRowCheckboxClick(ev: Event) {
+    const checkbox = ev.currentTarget as HaCheckbox;
+    const preference = (checkbox as any).preference;
    const preferences = this.analytics ? { ...this.analytics.preferences } : {};

-    if (preferences[preference] === target.checked) {
+    if (preferences[preference] === checkbox.checked) {
      return;
    }

-    preferences[preference] = target.checked;
+    preferences[preference] = checkbox.checked;

    if (
      ADDITIONAL_PREFERENCES.some((entry) => entry.key === preference) &&
-      target.checked
+      checkbox.checked
    ) {
      preferences.base = true;
-    } else if (preference === "base" && !target.checked) {
+    } else if (preference === "base" && !checkbox.checked) {
      preferences.usage = false;
      preferences.statistics = false;
    }
@@ -49,8 +49,6 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {

  @property() public value?: string;

-  @property() public helper?: string;
-
  @property() public placeholder?: string;

  @property({ type: Boolean, attribute: "no-add" })
@@ -314,7 +312,6 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
    return html`
      <ha-combo-box
        .hass=${this.hass}
-        .helper=${this.helper}
        item-value-path="area_id"
        item-id-path="area_id"
        item-label-path="name"
@@ -409,7 +406,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!,
@@ -15,8 +15,6 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {

  @property() public value?: string[];

-  @property() public helper?: string;
-
  @property() public placeholder?: string;

  @property({ type: Boolean, attribute: "no-add" })
@@ -92,7 +90,6 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
          .noAdd=${this.noAdd}
          .hass=${this.hass}
          .label=${this.pickAreaLabel}
-          .helper=${this.helper}
          .includeDomains=${this.includeDomains}
          .excludeDomains=${this.excludeDomains}
          .includeDeviceClasses=${this.includeDeviceClasses}
@@ -100,7 +97,7 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
          .entityFilter=${this.entityFilter}
          .disabled=${this.disabled}
          .placeholder=${this.placeholder}
-          .required=${this.required && !currentAreas.length}
+          .required=${this.required}
          @value-changed=${this._addArea}
        ></ha-area-picker>
      </div>
@@ -5,7 +5,6 @@ import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import "./ha-select";
 import "./ha-textfield";
-import "./ha-input-helper-text";

 export interface TimeChangedEvent {
  days?: number;
@@ -131,7 +130,7 @@ export class HaBaseTimeInput extends LitElement {
  protected render(): TemplateResult {
    return html`
      ${this.label
-        ? html`<label>${this.label}${this.required ? " *" : ""}</label>`
+        ? html`<label>${this.label}${this.required ? "*" : ""}</label>`
        : ""}
      <div class="time-input-wrap">
        ${this.enableDay
@@ -254,9 +253,7 @@ export class HaBaseTimeInput extends LitElement {
              <mwc-list-item value="PM">PM</mwc-list-item>
            </ha-select>`}
      </div>
-      ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""}
+      ${this.helper ? html`<div class="helper">${this.helper}</div>` : ""}
    `;
  }

@@ -310,7 +307,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;
@@ -354,6 +350,13 @@ export class HaBaseTimeInput extends LitElement {
      color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
      padding-left: 4px;
    }
+
+    .helper {
+      color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
+      font-size: 0.75rem;
+      padding-left: 16px;
+      padding-right: 16px;
+    }
  `;
 }

@@ -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 {
@@ -117,19 +117,6 @@ export class HaButtonToggleGroup extends LitElement {
        --mdc-shape-small: 4px;
        border-right-width: 1px;
      }
-
-      :host([dir="rtl"]) ha-icon-button:first-child,
-      :host([dir="rtl"]) mwc-button:first-child {
-        border-radius: 0 4px 4px 0;
-        border-right-width: 1px;
-        --mdc-shape-small: 0 4px 4px 0;
-        --mdc-button-outline-width: 1px;
-      }
-      :host([dir="rtl"]) ha-icon-button:last-child,
-      :host([dir="rtl"]) mwc-button:last-child {
-        --mdc-shape-small: 4px 0 0 4px;
-        border-radius: 4px 0 0 4px;
-      }
    `;
  }
 }
@@ -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"] {
@@ -1,85 +0,0 @@
-import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
-import { styles } from "@material/mwc-list/mwc-list-item.css";
-import { css, CSSResult, html } from "lit";
-import { customElement, property, query } from "lit/decorators";
-
-@customElement("ha-clickable-list-item")
-export class HaClickableListItem extends ListItemBase {
-  @property() public href?: string;
-
-  @property({ type: Boolean }) public disableHref = false;
-
-  // property used only in css
-  @property({ type: Boolean, reflect: true }) public rtl = false;
-
-  @property({ type: Boolean, reflect: true }) public openNewTab = false;
-
-  @query("a") private _anchor!: HTMLAnchorElement;
-
-  public render() {
-    const r = super.render();
-    const href = this.href || "";
-
-    return html`${this.disableHref
-      ? html`<a aria-role="option">${r}</a>`
-      : html`<a
-          aria-role="option"
-          target=${this.openNewTab ? "_blank" : ""}
-          href=${href}
-          >${r}</a
-        >`}`;
-  }
-
-  firstUpdated() {
-    super.firstUpdated();
-    this.addEventListener("keydown", (ev) => {
-      if (ev.key === "Enter" || ev.key === " ") {
-        this._anchor.click();
-      }
-    });
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      styles,
-      css`
-        :host {
-          padding-left: 0px;
-          padding-right: 0px;
-        }
-        :host([graphic="avatar"]:not([twoLine])),
-        :host([graphic="icon"]:not([twoLine])) {
-          height: 48px;
-        }
-        a {
-          width: 100%;
-          height: 100%;
-          display: flex;
-          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);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-clickable-list-item": HaClickableListItem;
-  }
-}
@@ -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}`
    );
@@ -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";
@@ -68,8 +64,6 @@ export class HaComboBox extends LitElement {

  @property() public validationMessage?: string;

-  @property() public helper?: string;
-
  @property({ attribute: "error-message" }) public errorMessage?: string;

  @property({ type: Boolean }) public invalid?: boolean;
@@ -100,8 +94,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 +106,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;
  }
@@ -163,8 +147,6 @@ export class HaComboBox extends LitElement {
          .suffix=${html`<div style="width: 28px;"></div>`}
          .icon=${this.icon}
          .invalid=${this.invalid}
-          .helper=${this.helper}
-          helperPersistent
        >
          <slot name="icon" slot="leadingIcon"></slot>
        </ha-textfield>
@@ -207,64 +189,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 +237,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 +245,6 @@ export class HaComboBox extends LitElement {
        --mdc-icon-size: 20px;
        top: -7px;
        right: 36px;
-        inset-inline-start: initial;
-        inset-inline-end: 36px;
-        direction: var(--direction);
      }
    `;
  }
@@ -39,15 +39,11 @@ export class HaDateInput extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  render() {
    return html`<ha-textfield
      .label=${this.label}
-      .helper=${this.helper}
      .disabled=${this.disabled}
      iconTrailing
-      helperPersistent
      @click=${this._openDialog}
      .value=${this.value
        ? formatDateNumeric(new Date(this.value), this.locale)
@@ -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) {
@@ -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,14 @@ 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;
      }
    `,
  ];
@@ -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 {
@@ -1,25 +1,12 @@
-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,
-    css`
-      :host .mdc-fab--extended .mdc-fab__icon {
-        margin-inline-start: -8px;
-        margin-inline-end: 12px;
-        direction: var(--direction);
-      }
-    `,
-  ];
 }

 declare global {
@@ -175,24 +175,11 @@ export class HaFileUpload extends LitElement {
        }
        .mdc-text-field__icon--leading {
          margin-bottom: 12px;
-          inset-inline-start: initial;
-          inset-inline-end: 0px;
-          direction: var(--direction);
        }
        .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);
-        }
-        .mdc-text-field--filled .mdc-floating-label {
-          inset-inline-start: 48px !important;
-          inset-inline-end: initial !important;
-          direction: var(--direction);
-        }
        .dragged:before {
          position: var(--layout-fit_-_position);
          top: var(--layout-fit_-_top);
@@ -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);
-      }
    `;
  }
 }
@@ -77,7 +77,7 @@ export class HaForm extends LitElement implements HaFormElement {

  protected render(): TemplateResult {
    return html`
-      <div class="root" part="root">
+      <div class="root">
        ${this.error && this.error.base
          ? html`
              <ha-alert alert-type="error">
@@ -173,6 +173,7 @@ export class HaForm extends LitElement implements HaFormElement {
  }

  static get styles(): CSSResultGroup {
+    // .root has overflow: auto to avoid margin collapse
    return css`
      .root {
        margin-bottom: -24px;
@@ -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;
      }
    `,
  ];
@@ -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
@@ -31,8 +31,6 @@ export class HaIconPicker extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property() public placeholder?: string;

  @property() public fallbackPath?: string;
@@ -59,7 +57,6 @@ export class HaIconPicker extends LitElement {
        allow-custom-value
        .filteredItems=${iconItems}
        .label=${this.label}
-        .helper=${this.helper}
        .disabled=${this.disabled}
        .required=${this.required}
        .placeholder=${this.placeholder}
@@ -1,25 +0,0 @@
-import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-input-helper-text")
-class InputHelperText extends LitElement {
-  protected render(): TemplateResult {
-    return html`<slot></slot>`;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-      font-size: 0.75rem;
-      padding-left: 16px;
-      padding-right: 16px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-input-helper-text": InputHelperText;
-  }
-}
@@ -46,14 +46,11 @@ class HaLabeledSlider extends PolymerElement {
          value="{{value}}"
        ></ha-slider>
      </div>
-      <template is="dom-if" if="[[helper]]">
-        <ha-input-helper-text>[[helper]]</ha-input-helper-text>
-      </template>
    `;
  }

  _getTitle() {
-    return `${this.caption}${this.caption && this.required ? " *" : ""}`;
+    return `${this.caption}${this.required ? "*" : ""}`;
  }

  static get properties() {
@@ -65,7 +62,6 @@ class HaLabeledSlider extends PolymerElement {
      max: Number,
      pin: Boolean,
      step: Number,
-      helper: String,

      extra: {
        type: Boolean,
@@ -3,6 +3,7 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { computeDomain } from "../common/entity/compute_domain";
 import { subscribeNotifications } from "../data/persistent_notification";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
@@ -42,15 +43,18 @@ class HaMenuButton extends LitElement {

  protected render(): TemplateResult {
    const hasNotifications =
-      this._hasNotifications &&
-      (this.narrow || this.hass.dockedSidebar === "always_hidden");
+      (this.narrow || this.hass.dockedSidebar === "always_hidden") &&
+      (this._hasNotifications ||
+        Object.keys(this.hass.states).some(
+          (entityId) => computeDomain(entityId) === "configurator"
+        ));
    return html`
      <ha-icon-button
        .label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
        .path=${mdiMenu}
        @click=${this._toggleMenu}
      ></ha-icon-button>
-      ${hasNotifications ? html`<div class="dot"></div>` : ""}
+      ${hasNotifications ? html` <div class="dot"></div> ` : ""}
    `;
  }

@@ -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;
-  }
-}
--- a/Show More
+++ b/Show More