Merge branch 'rc'

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.devcontainer/devcontainer.json

@@ -2,12 +2,12 @@
   "name": "Home Assistant Frontend",
   "build": {
     "dockerfile": "Dockerfile",
-    "context": ".."
+    "context": "..",
   },
   "appPort": "8124:8123",
   "postStartCommand": "script/bootstrap",
   "containerEnv": {
-    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
+    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}",
   },
   "customizations": {
     "vscode": {
@@ -16,7 +16,7 @@
         "esbenp.prettier-vscode",
         "runem.lit-plugin",
         "github.vscode-pull-request-github",
-        "eamodio.gitlens"
+        "eamodio.gitlens",
       ],
       "settings": {
         "files.eol": "\n",
@@ -27,17 +27,17 @@
         "editor.renderWhitespace": "boundary",
         "editor.rulers": [80],
         "[typescript]": {
-          "editor.defaultFormatter": "esbenp.prettier-vscode"
+          "editor.defaultFormatter": "esbenp.prettier-vscode",
         },
         "[javascript]": {
-          "editor.defaultFormatter": "esbenp.prettier-vscode"
+          "editor.defaultFormatter": "esbenp.prettier-vscode",
         },
         "files.trimTrailingWhitespace": true,
         "terminal.integrated.shell.linux": "/usr/bin/zsh",
         "gitlens.showWelcomeOnInstall": false,
         "gitlens.showWhatsNewAfterUpgrades": false,
-        "workbench.startupEditor": "none"
-      }
-    }
-  }
+        "workbench.startupEditor": "none",
+      },
+    },
+  },
 }

.github/workflows/ci.yaml

@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@v3.3.3
+        uses: actions/cache@v4.0.0
         with:
           path: |
             node_modules/.cache/prettier
@@ -89,7 +89,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.1.0
+        uses: actions/upload-artifact@v4.3.0
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
@@ -113,7 +113,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.1.0
+        uses: actions/upload-artifact@v4.3.0
         with:
           name: supervisor-bundle-stats
           path: build/stats/*.json

.github/workflows/nightly.yaml

@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@v4.1.0
+        uses: actions/upload-artifact@v4.3.0
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@v4.1.0
+        uses: actions/upload-artifact@v4.3.0
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/release-drafter.yaml

@@ -18,6 +18,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@v5
+      - uses: release-drafter/release-drafter@v6.0.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.yarn/patches/sortablejs-npm-1.15.0-f3a393abcc.patch

@@ -1,39 +0,0 @@
-diff --git a/modular/sortable.complete.esm.js b/modular/sortable.complete.esm.js
-index 02e9f2d6bebeb430fe6e7c1cc3f9c3c9df051f14..bb8268b0844a1faa4108cc92c0be2a3dbaf23f83 100644
---- a/modular/sortable.complete.esm.js
-+++ b/modular/sortable.complete.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
--        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();
-diff --git a/modular/sortable.core.esm.js b/modular/sortable.core.esm.js
-index b04c8b4634f7c6b4ef1aadbb48afe6564306dea9..39a107163c8c336ebd669b5ea8a936af87e1c1e7 100644
---- a/modular/sortable.core.esm.js
-+++ b/modular/sortable.core.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
--        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();
-diff --git a/modular/sortable.esm.js b/modular/sortable.esm.js
-index 6ec7ed1bb557e21c2578200161e989c65d23150b..0a05475a22904472fac6c13f524c674da76584b0 100644
---- a/modular/sortable.esm.js
-+++ b/modular/sortable.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
--        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();

.yarn/patches/sortablejs-npm-1.15.2-73347ae85a.patch

@@ -0,0 +1,73 @@
+diff --git a/modular/sortable.core.esm.js b/modular/sortable.core.esm.js
+index 93ba17509e2e8583ab241fea6845fbe714c584a2..de0651ddb5dced30d36f7d764da0dd0b441f523f 100644
+--- a/modular/sortable.core.esm.js
++++ b/modular/sortable.core.esm.js
+@@ -1461,7 +1461,7 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+           }
+           target = parent; // store last element
+         }
+-        /* jshint boss:true */ while (parent = parent.parentNode);
++        /* jshint boss:true */ while (parent = parent.parentNode || parent.getRootNode().host);
+       }
+       _unhideGhostForTarget();
+     }
+@@ -1781,11 +1781,16 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+         }
+         if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) {
+           capture();
+-          if (elLastChild && elLastChild.nextSibling) {
+-            // the last draggable element is not the last node
+-            el.insertBefore(dragEl, elLastChild.nextSibling);
+-          } else {
+-            el.appendChild(dragEl);
++          try {
++            if (elLastChild && elLastChild.nextSibling) {
++              // the last draggable element is not the last node
++              el.insertBefore(dragEl, elLastChild.nextSibling);
++            } else {
++              el.appendChild(dragEl);
++            }
++          }
++          catch(err) {
++            return completed(false);
+           }
+           parentEl = el; // actualization
+ 
+@@ -1802,7 +1807,13 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+         targetRect = getRect(target);
+         if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) {
+           capture();
+-          el.insertBefore(dragEl, firstChild);
++          try {
++            el.insertBefore(dragEl, firstChild);
++          }
++          catch(err) {
++            return completed(false);
++          }
++          
+           parentEl = el; // actualization
+ 
+           changed();
+@@ -1849,12 +1860,17 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+           _silent = true;
+           setTimeout(_unsilent, 30);
+           capture();
+-          if (after && !nextSibling) {
+-            el.appendChild(dragEl);
+-          } else {
+-            target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
+-          }
+ 
++          try {
++            if (after && !nextSibling) {
++              el.appendChild(dragEl);
++            } else {
++              target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
++            }
++          }
++          catch(err) {
++            return completed(false);
++          }
+           // Undo chrome's scroll adjustment (has no effect on other browsers)
+           if (scrolledPastTop) {
+             scrollBy(scrolledPastTop, 0, scrollBefore - scrolledPastTop.scrollTop);

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

cast/src/launcher/layout/hc-cast.ts

@@ -31,11 +31,11 @@ import "./hc-layout";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
-  @property() public auth!: Auth;
+  @property({ attribute: false }) public auth!: Auth;
 
-  @property() public connection!: Connection;
+  @property({ attribute: false }) public connection!: Connection;
 
-  @property() public castManager!: CastManager;
+  @property({ attribute: false }) public castManager!: CastManager;
 
   @state() private askWrite = false;
 
@@ -241,6 +241,8 @@ class HcCast extends LitElement {
 
       mwc-button ha-svg-icon {
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
         height: 18px;
       }
 

cast/src/launcher/layout/hc-layout.ts

@@ -10,13 +10,13 @@ import "../../../../src/components/ha-card";
 
 @customElement("hc-layout")
 class HcLayout extends LitElement {
-  @property() public subtitle?: string | undefined;
+  @property() public subtitle?: string;
 
-  @property() public auth?: Auth;
+  @property({ attribute: false }) public auth?: Auth;
 
-  @property() public connection?: Connection;
+  @property({ attribute: false }) public connection?: Connection;
 
-  @property() public user?: HassUser;
+  @property({ attribute: false }) public user?: HassUser;
 
   protected render(): TemplateResult {
     return html`

cast/src/receiver/layout/hc-launch-screen.ts

@@ -12,8 +12,8 @@ class HcLaunchScreen extends LitElement {
     return html`
       <div class="container">
         <img
-          alt="Home Assistant logo on left, Nabu Casa logo on right, and red heart in center"
-          src="https://www.home-assistant.io/images/blog/2018-09-thinking-big/social.png"
+          alt="Nabu Casa logo on left, Home Assistant logo on right, and red heart in center"
+          src="https://cast.home-assistant.io/images/nabu-loves-hass.png"
         />
         <div class="status">
           ${this.hass ? "Connected" : "Not Connected"}
@@ -45,6 +45,8 @@ class HcLaunchScreen extends LitElement {
       }
       .status {
         padding-right: 54px;
+        padding-inline-end: 54px;
+        padding-inline-start: initial;
       }
     `;
   }

cast/src/receiver/layout/hc-main.ts

@@ -205,7 +205,6 @@ export class HcMain extends HassElement {
           expires_in: 0,
         }),
       });
-      this._hassUUID = msg.hassUUID;
     } catch (err: any) {
       const errorMessage = this._getErrorMessage(err);
       this._error = errorMessage;
@@ -225,6 +224,17 @@ export class HcMain extends HassElement {
       this.hass.connection.close();
     }
     this.initializeHass(auth, connection);
+    if (this._hassUUID !== msg.hassUUID) {
+      this._hassUUID = msg.hassUUID;
+      this._lovelacePath = null;
+      this._urlPath = undefined;
+      this._lovelaceConfig = undefined;
+      if (this._unsubLovelace) {
+        this._unsubLovelace();
+        this._unsubLovelace = undefined;
+      }
+      resourcesLoaded = false;
+    }
     this._error = undefined;
     this._sendStatus();
   }
@@ -233,7 +243,7 @@ export class HcMain extends HassElement {
     this._showDemo = false;
     // We should not get this command before we are connected.
     // Means a client got out of sync. Let's send status to them.
-    if (!this.hass) {
+    if (!this.hass?.connected) {
       this._sendStatus(msg.senderId!);
       this._error = "Cannot show Lovelace because we're not connected.";
       this._sendError(
@@ -284,6 +294,7 @@ export class HcMain extends HassElement {
       this._lovelaceConfig = undefined;
       if (this._unsubLovelace) {
         this._unsubLovelace();
+        this._unsubLovelace = undefined;
       }
       const llColl = atLeastVersion(this.hass.connection.haVersion, 0, 107)
         ? getLovelaceCollection(this.hass.connection, msg.urlPath)

gallery/src/components/demo-card.ts

@@ -13,7 +13,7 @@ export interface DemoCardConfig {
 class DemoCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public config!: DemoCardConfig;
+  @property({ attribute: false }) public config!: DemoCardConfig;
 
   @property({ type: Boolean }) public showConfig = false;
 

gallery/src/components/demo-cards.ts

@@ -10,7 +10,7 @@ import "../ha-demo-options";
 
 @customElement("demo-cards")
 class DemoCards extends LitElement {
-  @property() public configs!: DemoCardConfig[];
+  @property({ attribute: false }) public configs!: DemoCardConfig[];
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 

gallery/src/components/demo-more-infos.ts

@@ -1,19 +1,19 @@
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
-import "./demo-more-info";
-import "../ha-demo-options";
 import { HomeAssistant } from "../../../src/types";
+import "../ha-demo-options";
+import "./demo-more-info";
 
 @customElement("demo-more-infos")
 class DemoMoreInfos extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public entities!: [];
+  @property({ type: Array }) public entities!: string[];
 
-  @property({ attribute: false }) _showConfig: boolean = false;
+  @state() private _showConfig = false;
 
   render() {
     return html`

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

@@ -10,6 +10,7 @@ import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervis
 import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
 import "../../../../src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
+import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { HomeAssistant } from "../../../../src/types";
@@ -97,22 +98,25 @@ const DEVICES = [
   },
 ];
 
-const AREAS = [
+const AREAS: AreaRegistryEntry[] = [
   {
     area_id: "backyard",
     name: "Backyard",
+    icon: null,
     picture: null,
     aliases: [],
   },
   {
     area_id: "bedroom",
     name: "Bedroom",
+    icon: "mdi:bed",
     picture: null,
     aliases: [],
   },
   {
     area_id: "livingroom",
     name: "Livingroom",
+    icon: "mdi:sofa",
     picture: null,
     aliases: [],
   },

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

@@ -9,6 +9,7 @@ import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
 import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
+import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
 import { BlueprintInput } from "../../../../src/data/blueprint";
 import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { getEntity } from "../../../../src/fake_data/entity";
@@ -93,22 +94,25 @@ const DEVICES = [
   },
 ];
 
-const AREAS = [
+const AREAS: AreaRegistryEntry[] = [
   {
     area_id: "backyard",
     name: "Backyard",
+    icon: null,
     picture: null,
     aliases: [],
   },
   {
     area_id: "bedroom",
     name: "Bedroom",
+    icon: "mdi:bed",
     picture: null,
     aliases: [],
   },
   {
     area_id: "livingroom",
     name: "Livingroom",
+    icon: "mdi:sofa",
     picture: null,
     aliases: [],
   },

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

@@ -65,15 +65,23 @@ const CONFIGS = [
     >> ...by using additional greater-than signs right next to each other...
     > > > ...or with spaces between arrows.
 
-    > **Warning** Hey there
-    > This is a warning with a title
+    > [!NOTE]
+    > This is a GitHub note alert
 
-    > **Note**
-    > This is a note
+    > [!TIP]
+    > This is a GitHub tip alert
 
-    > **Note**
-    > This is a multiline note
-    > Lorem ipsum...
+    > [!IMPORTANT]
+    > This is a GitHub important alert
+
+    > [!WARNING]
+    > This is a GitHub warning alert
+
+    > [!CAUTION]
+    > This is a GitHub caution alert
+
+    > [!TIP]
+    > - This is a list entry in GitHub tip alert
 
     ## Lists
 

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

@@ -79,6 +79,18 @@ const CONFIGS = [
   color: pink
     `,
   },
+  {
+    heading: "Whole tile tap action",
+    config: `
+- type: tile
+  entity: switch.tv_outlet
+  color: pink
+  tap_action:
+    action: toggle
+  icon_tap_action:
+    action: none
+    `,
+  },
   {
     heading: "Unknown entity",
     config: `

gallery/src/pages/misc/entity-state.ts

@@ -53,6 +53,7 @@ const SENSOR_DEVICE_CLASSES = [
   "volatile_organic_compounds_parts",
   "voltage",
   "volume",
+  "volume_flow_rate",
   "water",
   "weight",
   "wind_speed",
@@ -344,6 +345,7 @@ export class DemoEntityState extends LitElement {
           title: "Icon",
           template: (entry) => html`
             <state-badge
+              .hass=${hass}
               .stateObj=${entry.stateObj}
               .stateColor=${true}
             ></state-badge>

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

@@ -243,6 +243,8 @@ export class HassioAddonStore extends LitElement {
       }
       .advanced a {
         margin-left: 0.5em;
+        margin-inline-start: 0.5em;
+        margin-inline-end: initial;
         color: var(--primary-color);
       }
     `;

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

@@ -250,7 +250,9 @@ class HassioAddonDashboard extends LitElement {
     }
 
     if (path === "uninstall") {
-      window.history.back();
+      if (this.isConnected) {
+        navigate(this._backPath);
+      }
     } else if (path === "install") {
       this.addon = await fetchHassioAddonInfo(this.hass, this.addon!.slug);
     } else {

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

@@ -1188,11 +1188,13 @@ class HassioAddonInfo extends LitElement {
         }
         .addon-header {
           padding-left: 8px;
+          padding-inline-start: 8px;
+          padding-inline-end: initial;
           font-size: 24px;
           color: var(--ha-card-header-color, --primary-text-color);
         }
         .addon-version {
-          float: right;
+          float: var(--float-end);
           font-size: 15px;
           vertical-align: middle;
         }

hassio/src/backups/hassio-backups.ts

@@ -395,6 +395,8 @@ export class HassioBackups extends LitElement {
         .selected-txt {
           font-weight: bold;
           padding-left: 16px;
+          padding-inline-start: 16px;
+          padding-inline-end: initial;
           color: var(--primary-text-color);
         }
         .table-header .selected-txt {
@@ -405,6 +407,8 @@ export class HassioBackups extends LitElement {
         }
         .header-toolbar .header-btns {
           margin-right: -12px;
+          margin-inline-end: -12px;
+          margin-inline-start: initial;
         }
         .header-btns > mwc-button,
         .header-btns > ha-icon-button {

hassio/src/components/hassio-card-content.ts

@@ -60,6 +60,10 @@ class HassioCardContent extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      :host {
+        direction: ltr;
+      }
+
       ha-svg-icon {
         margin-right: 24px;
         margin-left: 8px;

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

@@ -72,7 +72,7 @@ const _computeAddons = (addons): AddonCheckboxItem[] =>
 export class SupervisorBackupContent extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public localize?: LocalizeFunc;
+  @property({ attribute: false }) public localize?: LocalizeFunc;
 
   @property({ attribute: false }) public supervisor?: Supervisor;
 
@@ -316,6 +316,8 @@ export class SupervisorBackupContent extends LitElement {
         display: flex;
         flex-direction: column;
         margin-left: 30px;
+        margin-inline-start: 30px;
+        margin-inline-end: initial;
       }
       ha-formfield.password {
         display: block;
@@ -324,6 +326,8 @@ export class SupervisorBackupContent extends LitElement {
       .backup-types {
         display: flex;
         margin-left: -13px;
+        margin-inline-start: -13px;
+        margin-inline-end: initial;
       }
       .sub-header {
         margin-top: 8px;

hassio/src/components/supervisor-formfield-label.ts

@@ -37,6 +37,8 @@ class SupervisorFormfieldLabel extends LitElement {
       }
       .label {
         margin-right: 4px;
+        margin-inline-end: 4px;
+        margin-inline-start: initial;
       }
       .version {
         color: var(--secondary-text-color);
@@ -45,6 +47,8 @@ class SupervisorFormfieldLabel extends LitElement {
         max-height: 22px;
         max-width: 22px;
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
       }
     `;
   }

hassio/src/components/supervisor-metric.ts

@@ -64,6 +64,8 @@ class SupervisorMetric extends LitElement {
       .value {
         width: 48px;
         padding-right: 4px;
+        padding-inline-start: initial;
+        padding-inline-end: 4px;
         flex-shrink: 0;
       }
     `;

hassio/src/dialogs/backup/dialog-hassio-backup-location.ts

@@ -27,8 +27,7 @@ const SCHEMA = memoizeOne(
 class HassioBackupLocationDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false })
-  public _dialogParams?: HassioBackupLocationDialogParams;
+  @state() private _dialogParams?: HassioBackupLocationDialogParams;
 
   @state() private _data?: { default_backup_mount: string | null };
 

hassio/src/dialogs/backup/dialog-hassio-create-backup.ts

@@ -138,6 +138,9 @@ class HassioCreateBackupDialog extends LitElement {
       haStyle,
       haStyleDialog,
       css`
+        :host {
+          direction: var(--direction);
+        }
         ha-circular-progress {
           display: block;
           text-align: center;

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

@@ -597,6 +597,8 @@ export class DialogHassioNetwork
 
         mwc-button.scan {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
 
         .container {

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

@@ -229,6 +229,8 @@ class HassioRegistriesDialog extends LitElement {
         ha-icon-button {
           color: var(--error-color);
           margin-right: -10px;
+          margin-inline-end: -10px;
+          margin-inline-start: initial;
         }
       `,
     ];

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

@@ -195,6 +195,8 @@ class HassioRepositoriesDialog extends LitElement {
         }
         mwc-button {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
         ha-circular-progress {
           display: block;

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -360,7 +360,7 @@ class HassioIngressView extends LitElement {
       }
 
       .main-title {
-        margin: 0 0 0 24px;
+        margin: var(--margin-title);
         line-height: 20px;
         flex-grow: 1;
       }

hassio/src/resources/hassio-style.ts

@@ -19,10 +19,14 @@ export const hassioStyle = css`
     letter-spacing: var(--paper-font-headline_-_letter-spacing);
     line-height: var(--paper-font-headline_-_line-height);
     padding-left: 8px;
+    padding-inline-start: 8px;
+    padding-inline-end: initial;
   }
   .description {
     margin-top: 4px;
     padding-left: 8px;
+    padding-inline-start: 8px;
+    padding-inline-end: initial;
   }
   .card-group {
     display: grid;

hassio/src/system/hassio-system.ts

@@ -73,6 +73,8 @@ class HassioSystem extends LitElement {
           color: var(--primary-text-color);
           font-size: 2em;
           padding-left: 8px;
+          padding-inline-start: 8px;
+          padding-inline-end: initial;
           margin-bottom: 8px;
         }
         hassio-supervisor-log {

lint-staged.config.js

@@ -2,7 +2,7 @@ export default {
   "*.?(c|m){js,ts}": [
     "eslint --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --fix",
     "prettier --cache --write",
-    "lit-analyzer",
+    "lit-analyzer --quiet",
   ],
   "*.{json,css,md,markdown,html,y?aml}": "prettier --cache --write",
   "translations/*/*.json": (files) =>

package.json

@@ -25,24 +25,24 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.23.8",
+    "@babel/runtime": "7.23.9",
     "@braintree/sanitize-url": "7.0.0",
     "@codemirror/autocomplete": "6.12.0",
     "@codemirror/commands": "6.3.3",
-    "@codemirror/language": "6.10.0",
+    "@codemirror/language": "6.10.1",
     "@codemirror/legacy-modes": "6.3.3",
     "@codemirror/search": "6.5.5",
     "@codemirror/state": "6.4.0",
-    "@codemirror/view": "6.23.0",
+    "@codemirror/view": "6.23.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.12.0",
-    "@formatjs/intl-displaynames": "6.6.4",
+    "@formatjs/intl-datetimeformat": "6.12.2",
+    "@formatjs/intl-displaynames": "6.6.6",
     "@formatjs/intl-getcanonicallocales": "2.3.0",
-    "@formatjs/intl-listformat": "7.5.3",
-    "@formatjs/intl-locale": "3.4.3",
-    "@formatjs/intl-numberformat": "8.9.0",
-    "@formatjs/intl-pluralrules": "5.2.10",
-    "@formatjs/intl-relativetimeformat": "11.2.10",
+    "@formatjs/intl-listformat": "7.5.5",
+    "@formatjs/intl-locale": "3.4.5",
+    "@formatjs/intl-numberformat": "8.10.0",
+    "@formatjs/intl-pluralrules": "5.2.12",
+    "@formatjs/intl-relativetimeformat": "11.2.12",
     "@fullcalendar/core": "6.1.10",
     "@fullcalendar/daygrid": "6.1.10",
     "@fullcalendar/interaction": "6.1.10",
@@ -51,10 +51,10 @@
     "@fullcalendar/timegrid": "6.1.10",
     "@lezer/highlight": "1.2.0",
     "@lit-labs/context": "0.4.1",
-    "@lit-labs/motion": "1.0.6",
+    "@lit-labs/motion": "1.0.7",
     "@lit-labs/observers": "2.0.2",
     "@lit-labs/virtualizer": "2.0.12",
-    "@lrnwebcomponents/simple-tooltip": "7.0.18",
+    "@lrnwebcomponents/simple-tooltip": "8.0.0",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
     "@material/mwc-base": "0.27.0",
@@ -80,7 +80,7 @@
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "=1.1.1",
+    "@material/web": "=1.2.0",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@polymer/paper-item": "3.0.1",
@@ -89,8 +89,8 @@
     "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.3.3",
-    "@vaadin/vaadin-themable-mixin": "24.3.3",
+    "@vaadin/combo-box": "24.3.5",
+    "@vaadin/vaadin-themable-mixin": "24.3.5",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -100,7 +100,7 @@
     "app-datepicker": "5.1.1",
     "chart.js": "4.4.1",
     "comlink": "4.4.1",
-    "core-js": "3.35.0",
+    "core-js": "3.35.1",
     "cropperjs": "1.6.1",
     "date-fns": "2.30.0",
     "date-fns-tz": "2.0.0",
@@ -109,16 +109,16 @@
     "element-internals-polyfill": "1.3.10",
     "fuse.js": "7.0.0",
     "google-timezones-json": "1.2.0",
-    "hls.js": "1.5.1",
+    "hls.js": "1.5.3",
     "home-assistant-js-websocket": "9.1.0",
     "idb-keyval": "6.2.1",
-    "intl-messageformat": "10.5.8",
+    "intl-messageformat": "10.5.11",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
     "lit": "2.8.0",
     "luxon": "3.4.4",
-    "marked": "11.1.1",
+    "marked": "11.2.0",
     "memoize-one": "6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "0.3.2",
@@ -149,13 +149,13 @@
     "xss": "1.0.14"
   },
   "devDependencies": {
-    "@babel/core": "7.23.7",
-    "@babel/helper-define-polyfill-provider": "0.4.4",
-    "@babel/plugin-proposal-decorators": "7.23.7",
-    "@babel/plugin-transform-runtime": "7.23.7",
-    "@babel/preset-env": "7.23.8",
+    "@babel/core": "7.23.9",
+    "@babel/helper-define-polyfill-provider": "0.5.0",
+    "@babel/plugin-proposal-decorators": "7.23.9",
+    "@babel/plugin-transform-runtime": "7.23.9",
+    "@babel/preset-env": "7.23.9",
     "@babel/preset-typescript": "7.23.3",
-    "@bundle-stats/plugin-webpack-filter": "4.8.4",
+    "@bundle-stats/plugin-webpack-filter": "4.9.2",
     "@koa/cors": "5.0.0",
     "@lokalise/node-api": "12.1.0",
     "@octokit/auth-oauth-device": "6.0.1",
@@ -175,21 +175,21 @@
     "@types/js-yaml": "4.0.9",
     "@types/leaflet": "1.9.8",
     "@types/leaflet-draw": "1.0.11",
-    "@types/luxon": "3.4.1",
+    "@types/luxon": "3.4.2",
     "@types/mocha": "10.0.6",
     "@types/qrcode": "1.5.5",
     "@types/serve-handler": "6.1.4",
     "@types/sortablejs": "1.15.7",
-    "@types/tar": "6.1.10",
+    "@types/tar": "6.1.11",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "6.18.1",
-    "@typescript-eslint/parser": "6.18.1",
+    "@typescript-eslint/eslint-plugin": "6.20.0",
+    "@typescript-eslint/parser": "6.20.0",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.3",
     "babel-plugin-template-html-minifier": "4.1.0",
-    "chai": "5.0.0",
+    "chai": "5.0.3",
     "del": "7.1.0",
     "eslint": "8.56.0",
     "eslint-config-airbnb-base": "15.0.0",
@@ -199,7 +199,7 @@
     "eslint-plugin-disable": "2.0.3",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-lit": "1.11.0",
-    "eslint-plugin-lit-a11y": "4.1.1",
+    "eslint-plugin-lit-a11y": "4.1.2",
     "eslint-plugin-unused-imports": "3.0.0",
     "eslint-plugin-wc": "2.0.4",
     "fancy-log": "2.0.0",
@@ -212,19 +212,19 @@
     "gulp-rename": "2.0.0",
     "gulp-zopfli-green": "6.0.1",
     "html-minifier-terser": "7.2.0",
-    "husky": "8.0.3",
+    "husky": "9.0.10",
     "instant-mocha": "1.5.2",
     "jszip": "3.10.1",
-    "lint-staged": "15.2.0",
+    "lint-staged": "15.2.1",
     "lit-analyzer": "2.0.3",
     "lodash.template": "4.5.0",
-    "magic-string": "0.30.5",
+    "magic-string": "0.30.6",
     "map-stream": "0.0.7",
     "mocha": "10.2.0",
     "object-hash": "3.0.0",
     "open": "10.0.3",
     "pinst": "3.0.0",
-    "prettier": "3.2.2",
+    "prettier": "3.2.4",
     "rollup": "2.79.1",
     "rollup-plugin-string": "3.0.0",
     "rollup-plugin-terser": "7.0.2",
@@ -240,7 +240,7 @@
     "typescript": "5.3.3",
     "vinyl-buffer": "1.0.1",
     "vinyl-source-stream": "2.0.0",
-    "webpack": "5.89.0",
+    "webpack": "5.90.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
     "webpack-manifest-plugin": "5.0.0",
@@ -255,8 +255,8 @@
     "lit": "2.8.0",
     "clean-css": "5.3.3",
     "@lit/reactive-element": "1.6.3",
-    "sortablejs@1.15.0": "patch:sortablejs@npm%3A1.15.0#./.yarn/patches/sortablejs-npm-1.15.0-f3a393abcc.patch",
+    "sortablejs@1.15.2": "patch:sortablejs@npm%3A1.15.2#~/.yarn/patches/sortablejs-npm-1.15.2-73347ae85a.patch",
     "leaflet-draw@1.0.4": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch"
   },
-  "packageManager": "yarn@4.0.2"
+  "packageManager": "yarn@4.1.0"
 }

pyproject.toml

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

src/auth/ha-auth-flow.ts

@@ -34,7 +34,7 @@ export class HaAuthFlow extends LitElement {
 
   @property() public oauth2State?: string;
 
-  @property() public localize!: LocalizeFunc;
+  @property({ attribute: false }) public localize!: LocalizeFunc;
 
   @property({ attribute: false }) public step?: DataEntryFlowStep;
 
@@ -93,6 +93,8 @@ export class HaAuthFlow extends LitElement {
       <style>
         ha-auth-flow .store-token {
           margin-left: -16px;
+          margin-inline-start: -16px;
+          margin-inline-end: initial;
         }
         a.forgot-password {
           color: var(--primary-color);

src/auth/ha-authorize.ts

@@ -149,6 +149,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           text-decoration: none;
           color: var(--primary-text-color);
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
         }
         h1 {
           font-size: 28px;

src/auth/ha-pick-auth-provider.ts

@@ -18,9 +18,9 @@ declare global {
 
 @customElement("ha-pick-auth-provider")
 export class HaPickAuthProvider extends LitElement {
-  @property() public authProviders: AuthProvider[] = [];
+  @property({ attribute: false }) public authProviders: AuthProvider[] = [];
 
-  @property() public localize!: LocalizeFunc;
+  @property({ attribute: false }) public localize!: LocalizeFunc;
 
   protected render() {
     return html`

src/common/const.ts

@@ -1,6 +1,7 @@
 /** Constants to be used in the frontend. */
 
 import {
+  mdiAccount,
   mdiAirFilter,
   mdiAlert,
   mdiAngleAcute,
@@ -18,7 +19,6 @@ import {
   mdiChatSleep,
   mdiClipboardList,
   mdiClock,
-  mdiCloudUpload,
   mdiCog,
   mdiCommentAlert,
   mdiCounter,
@@ -48,11 +48,14 @@ import {
   mdiMoleculeCo2,
   mdiPalette,
   mdiPh,
+  mdiPipe,
   mdiProgressClock,
   mdiRayVertex,
   mdiRemote,
+  mdiRobot,
   mdiRobotMower,
   mdiRobotVacuum,
+  mdiRoomService,
   mdiScriptText,
   mdiSineWave,
   mdiSpeakerMessage,
@@ -62,6 +65,7 @@ import {
   mdiThermometerLines,
   mdiThermostat,
   mdiTimerOutline,
+  mdiToggleSwitch,
   mdiTransmissionTower,
   mdiWater,
   mdiWaterPercent,
@@ -70,6 +74,7 @@ import {
   mdiWeatherRainy,
   mdiWeatherWindy,
   mdiWeight,
+  mdiWhiteBalanceSunny,
   mdiWifi,
 } from "@mdi/js";
 
@@ -79,6 +84,9 @@ import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
 // Arrays with values should be alphabetically sorted if order doesn't matter.
 // Each constant should have a description what it is supposed to be used for.
 
+/** Icon to use when no icon specified for service. */
+export const DEFAULT_SERVICE_ICON = mdiRoomService;
+
 /** Icon to use when no icon specified for domain. */
 export const DEFAULT_DOMAIN_ICON = mdiBookmark;
 
@@ -86,20 +94,23 @@ export const DEFAULT_DOMAIN_ICON = mdiBookmark;
 export const FIXED_DOMAIN_ICONS = {
   air_quality: mdiAirFilter,
   alert: mdiAlert,
+  automation: mdiRobot,
   calendar: mdiCalendar,
   climate: mdiThermostat,
   configurator: mdiCog,
   conversation: mdiMicrophoneMessage,
   counter: mdiCounter,
-  datetime: mdiCalendarClock,
   date: mdiCalendar,
+  datetime: mdiCalendarClock,
   demo: mdiHomeAssistant,
+  device_tracker: mdiAccount,
   google_assistant: mdiGoogleAssistant,
   group: mdiGoogleCirclesCommunities,
   homeassistant: mdiHomeAssistant,
   homekit: mdiHomeAutomation,
-  image: mdiImage,
   image_processing: mdiImageFilterFrames,
+  image: mdiImage,
+  input_boolean: mdiToggleSwitch,
   input_button: mdiButtonPointer,
   input_datetime: mdiCalendarClock,
   input_number: mdiRayVertex,
@@ -111,6 +122,7 @@ export const FIXED_DOMAIN_ICONS = {
   notify: mdiCommentAlert,
   number: mdiRayVertex,
   persistent_notification: mdiBell,
+  person: mdiAccount,
   plant: mdiFlower,
   proximity: mdiAppleSafari,
   remote: mdiRemote,
@@ -122,12 +134,12 @@ export const FIXED_DOMAIN_ICONS = {
   simple_alarm: mdiBell,
   siren: mdiBullhorn,
   stt: mdiMicrophoneMessage,
+  sun: mdiWhiteBalanceSunny,
   text: mdiFormTextbox,
-  todo: mdiClipboardList,
   time: mdiClock,
   timer: mdiTimerOutline,
+  todo: mdiClipboardList,
   tts: mdiSpeakerMessage,
-  updater: mdiCloudUpload,
   vacuum: mdiRobotVacuum,
   wake_word: mdiChatSleep,
   weather: mdiWeatherPartlyCloudy,
@@ -180,6 +192,7 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   volatile_organic_compounds_parts: mdiMolecule,
   voltage: mdiSineWave,
   volume: mdiCarCoolantLevel,
+  volume_flow_rate: mdiPipe,
   water: mdiWater,
   weight: mdiWeight,
   wind_speed: mdiWeatherWindy,

src/common/dom/apply_themes_on_element.ts

@@ -41,7 +41,9 @@ export const applyThemesOnElement = (
   // If there is no explicitly desired dark mode provided, we automatically
   // use the active one from `themes`.
   const darkMode =
-    themeSettings?.dark !== undefined ? themeSettings.dark : themes.darkMode;
+    themeSettings?.dark !== undefined
+      ? themeSettings.dark
+      : themes?.darkMode || false;
 
   let cacheKey = themeToApply;
   let themeRules: Partial<ThemeVars> = {};

src/common/entity/alarm_panel_icon.ts

@@ -1,36 +0,0 @@
-/** Return an icon representing a alarm panel state. */
-
-import {
-  mdiShieldLock,
-  mdiShieldAirplane,
-  mdiShieldHome,
-  mdiShieldMoon,
-  mdiSecurity,
-  mdiShieldOutline,
-  mdiBellRing,
-  mdiShieldOff,
-  mdiShield,
-} from "@mdi/js";
-
-export const alarmPanelIcon = (state?: string) => {
-  switch (state) {
-    case "armed_away":
-      return mdiShieldLock;
-    case "armed_vacation":
-      return mdiShieldAirplane;
-    case "armed_home":
-      return mdiShieldHome;
-    case "armed_night":
-      return mdiShieldMoon;
-    case "armed_custom_bypass":
-      return mdiSecurity;
-    case "pending":
-      return mdiShieldOutline;
-    case "triggered":
-      return mdiBellRing;
-    case "disarmed":
-      return mdiShieldOff;
-    default:
-      return mdiShield;
-  }
-};

src/common/entity/battery_icon.ts

@@ -1,92 +1,59 @@
-/** Return an icon representing a battery state. */
-import {
-  mdiBattery,
-  mdiBattery10,
-  mdiBattery20,
-  mdiBattery30,
-  mdiBattery40,
-  mdiBattery50,
-  mdiBattery60,
-  mdiBattery70,
-  mdiBattery80,
-  mdiBattery90,
-  mdiBatteryAlert,
-  mdiBatteryAlertVariantOutline,
-  mdiBatteryCharging,
-  mdiBatteryCharging10,
-  mdiBatteryCharging20,
-  mdiBatteryCharging30,
-  mdiBatteryCharging40,
-  mdiBatteryCharging50,
-  mdiBatteryCharging60,
-  mdiBatteryCharging70,
-  mdiBatteryCharging80,
-  mdiBatteryCharging90,
-  mdiBatteryChargingOutline,
-  mdiBatteryUnknown,
-} from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 
 const BATTERY_ICONS = {
-  10: mdiBattery10,
-  20: mdiBattery20,
-  30: mdiBattery30,
-  40: mdiBattery40,
-  50: mdiBattery50,
-  60: mdiBattery60,
-  70: mdiBattery70,
-  80: mdiBattery80,
-  90: mdiBattery90,
-  100: mdiBattery,
+  10: "mdi:battery-10",
+  20: "mdi:battery-20",
+  30: "mdi:battery-30",
+  40: "mdi:battery-40",
+  50: "mdi:battery-50",
+  60: "mdi:battery-60",
+  70: "mdi:battery-70",
+  80: "mdi:battery-80",
+  90: "mdi:battery-90",
+  100: "mdi:battery",
 };
 const BATTERY_CHARGING_ICONS = {
-  10: mdiBatteryCharging10,
-  20: mdiBatteryCharging20,
-  30: mdiBatteryCharging30,
-  40: mdiBatteryCharging40,
-  50: mdiBatteryCharging50,
-  60: mdiBatteryCharging60,
-  70: mdiBatteryCharging70,
-  80: mdiBatteryCharging80,
-  90: mdiBatteryCharging90,
-  100: mdiBatteryCharging,
+  10: "mdi:battery-charging-10",
+  20: "mdi:battery-charging-20",
+  30: "mdi:battery-charging-30",
+  40: "mdi:battery-charging-40",
+  50: "mdi:battery-charging-50",
+  60: "mdi:battery-charging-60",
+  70: "mdi:battery-charging-70",
+  80: "mdi:battery-charging-80",
+  90: "mdi:battery-charging-90",
+  100: "mdi:battery-charging",
 };
 
-export const batteryStateIcon = (
-  batteryState: HassEntity,
-  batteryChargingState?: HassEntity
-) => {
-  const battery = batteryState.state;
-  const batteryCharging =
-    batteryChargingState && batteryChargingState.state === "on";
-
-  return batteryIcon(battery, batteryCharging);
+export const batteryIcon = (stateObj: HassEntity, state?: string) => {
+  const level = state ?? stateObj.state;
+  return batteryLevelIcon(level);
 };
 
-export const batteryIcon = (
-  batteryState: number | string,
-  batteryCharging?: boolean
-) => {
-  const batteryValue = Number(batteryState);
+export const batteryLevelIcon = (
+  batteryLevel: number | string,
+  isBatteryCharging?: boolean
+): string => {
+  const batteryValue = Number(batteryLevel);
   if (isNaN(batteryValue)) {
-    if (batteryState === "off") {
-      return mdiBattery;
+    if (batteryLevel === "off") {
+      return "mdi:battery";
     }
-    if (batteryState === "on") {
-      return mdiBatteryAlert;
+    if (batteryLevel === "on") {
+      return "mdi:battery-alert";
     }
-    return mdiBatteryUnknown;
+    return "mdi:battery-unknown";
   }
 
   const batteryRound = Math.round(batteryValue / 10) * 10;
-  if (batteryCharging && batteryValue >= 10) {
+  if (isBatteryCharging && batteryValue >= 10) {
     return BATTERY_CHARGING_ICONS[batteryRound];
   }
-  if (batteryCharging) {
-    return mdiBatteryChargingOutline;
+  if (isBatteryCharging) {
+    return "mdi:battery-charging-outline";
   }
   if (batteryValue <= 5) {
-    return mdiBatteryAlertVariantOutline;
+    return "mdi:battery-alert-variant-outline";
   }
   return BATTERY_ICONS[batteryRound];
 };

src/common/entity/binary_sensor_icon.ts

@@ -1,108 +0,0 @@
-import {
-  mdiAlertCircle,
-  mdiBattery,
-  mdiBatteryCharging,
-  mdiBatteryOutline,
-  mdiBrightness5,
-  mdiBrightness7,
-  mdiCheckboxMarkedCircle,
-  mdiCheckNetworkOutline,
-  mdiCloseNetworkOutline,
-  mdiCheckCircle,
-  mdiCropPortrait,
-  mdiDoorClosed,
-  mdiDoorOpen,
-  mdiFire,
-  mdiGarage,
-  mdiGarageOpen,
-  mdiHome,
-  mdiHomeOutline,
-  mdiLock,
-  mdiLockOpen,
-  mdiMusicNote,
-  mdiMusicNoteOff,
-  mdiMotionSensor,
-  mdiMotionSensorOff,
-  mdiPackage,
-  mdiPackageUp,
-  mdiPlay,
-  mdiPowerPlug,
-  mdiPowerPlugOff,
-  mdiRadioboxBlank,
-  mdiSnowflake,
-  mdiSmokeDetector,
-  mdiSmokeDetectorAlert,
-  mdiSmokeDetectorVariant,
-  mdiSmokeDetectorVariantAlert,
-  mdiSquare,
-  mdiSquareOutline,
-  mdiStop,
-  mdiThermometer,
-  mdiVibrate,
-  mdiWater,
-  mdiWaterOff,
-  mdiWindowClosed,
-  mdiWindowOpen,
-} from "@mdi/js";
-import { HassEntity } from "home-assistant-js-websocket";
-
-/** Return an icon representing a binary sensor state. */
-
-export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
-  const is_off = state === "off";
-  switch (stateObj?.attributes.device_class) {
-    case "battery":
-      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":
-      return is_off ? mdiCloseNetworkOutline : mdiCheckNetworkOutline;
-    case "door":
-      return is_off ? mdiDoorClosed : mdiDoorOpen;
-    case "garage_door":
-      return is_off ? mdiGarage : mdiGarageOpen;
-    case "power":
-      return is_off ? mdiPowerPlugOff : mdiPowerPlug;
-    case "gas":
-    case "problem":
-    case "safety":
-    case "tamper":
-      return is_off ? mdiCheckCircle : mdiAlertCircle;
-    case "smoke":
-      return is_off ? mdiSmokeDetectorVariant : mdiSmokeDetectorVariantAlert;
-    case "heat":
-      return is_off ? mdiThermometer : mdiFire;
-    case "light":
-      return is_off ? mdiBrightness5 : mdiBrightness7;
-    case "lock":
-      return is_off ? mdiLock : mdiLockOpen;
-    case "moisture":
-      return is_off ? mdiWaterOff : mdiWater;
-    case "motion":
-      return is_off ? mdiMotionSensorOff : mdiMotionSensor;
-    case "occupancy":
-      return is_off ? mdiHomeOutline : mdiHome;
-    case "opening":
-      return is_off ? mdiSquare : mdiSquareOutline;
-    case "plug":
-      return is_off ? mdiPowerPlugOff : mdiPowerPlug;
-    case "presence":
-      return is_off ? mdiHomeOutline : mdiHome;
-    case "running":
-      return is_off ? mdiStop : mdiPlay;
-    case "sound":
-      return is_off ? mdiMusicNoteOff : mdiMusicNote;
-    case "update":
-      return is_off ? mdiPackage : mdiPackageUp;
-    case "vibration":
-      return is_off ? mdiCropPortrait : mdiVibrate;
-    case "window":
-      return is_off ? mdiWindowClosed : mdiWindowOpen;
-    default:
-      return is_off ? mdiRadioboxBlank : mdiCheckboxMarkedCircle;
-  }
-};

src/common/entity/cover_icon.ts

@@ -1,132 +1,12 @@
 /** Return an icon representing a cover state. */
 import {
-  mdiArrowUpBox,
-  mdiArrowDownBox,
-  mdiGarage,
-  mdiGarageOpen,
-  mdiGateArrowRight,
-  mdiGate,
-  mdiGateOpen,
-  mdiDoorOpen,
-  mdiDoorClosed,
-  mdiCircle,
-  mdiWindowShutter,
-  mdiWindowShutterOpen,
-  mdiBlindsHorizontal,
-  mdiBlindsHorizontalClosed,
-  mdiRollerShade,
-  mdiRollerShadeClosed,
-  mdiWindowClosed,
-  mdiWindowOpen,
-  mdiArrowExpandHorizontal,
-  mdiArrowUp,
   mdiArrowCollapseHorizontal,
   mdiArrowDown,
-  mdiCircleSlice8,
-  mdiArrowSplitVertical,
-  mdiCurtains,
-  mdiCurtainsClosed,
+  mdiArrowExpandHorizontal,
+  mdiArrowUp,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 
-export const coverIcon = (state?: string, stateObj?: HassEntity): string => {
-  const open = state !== "closed";
-
-  switch (stateObj?.attributes.device_class) {
-    case "garage":
-      switch (state) {
-        case "opening":
-          return mdiArrowUpBox;
-        case "closing":
-          return mdiArrowDownBox;
-        case "closed":
-          return mdiGarage;
-        default:
-          return mdiGarageOpen;
-      }
-    case "gate":
-      switch (state) {
-        case "opening":
-        case "closing":
-          return mdiGateArrowRight;
-        case "closed":
-          return mdiGate;
-        default:
-          return mdiGateOpen;
-      }
-    case "door":
-      return open ? mdiDoorOpen : mdiDoorClosed;
-    case "damper":
-      return open ? mdiCircle : mdiCircleSlice8;
-    case "shutter":
-      switch (state) {
-        case "opening":
-          return mdiArrowUpBox;
-        case "closing":
-          return mdiArrowDownBox;
-        case "closed":
-          return mdiWindowShutter;
-        default:
-          return mdiWindowShutterOpen;
-      }
-    case "curtain":
-      switch (state) {
-        case "opening":
-          return mdiArrowSplitVertical;
-        case "closing":
-          return mdiArrowCollapseHorizontal;
-        case "closed":
-          return mdiCurtainsClosed;
-        default:
-          return mdiCurtains;
-      }
-    case "blind":
-      switch (state) {
-        case "opening":
-          return mdiArrowUpBox;
-        case "closing":
-          return mdiArrowDownBox;
-        case "closed":
-          return mdiBlindsHorizontalClosed;
-        default:
-          return mdiBlindsHorizontal;
-      }
-    case "shade":
-      switch (state) {
-        case "opening":
-          return mdiArrowUpBox;
-        case "closing":
-          return mdiArrowDownBox;
-        case "closed":
-          return mdiRollerShadeClosed;
-        default:
-          return mdiRollerShade;
-      }
-    case "window":
-      switch (state) {
-        case "opening":
-          return mdiArrowUpBox;
-        case "closing":
-          return mdiArrowDownBox;
-        case "closed":
-          return mdiWindowClosed;
-        default:
-          return mdiWindowOpen;
-      }
-  }
-
-  switch (state) {
-    case "opening":
-      return mdiArrowUpBox;
-    case "closing":
-      return mdiArrowDownBox;
-    case "closed":
-      return mdiWindowClosed;
-    default:
-      return mdiWindowOpen;
-  }
-};
-
 export const computeOpenIcon = (stateObj: HassEntity): string => {
   switch (stateObj.attributes.device_class) {
     case "awning":

src/common/entity/device_tracker_icon.ts

@@ -0,0 +1,16 @@
+import { HassEntity } from "home-assistant-js-websocket";
+
+export const deviceTrackerIcon = (stateObj: HassEntity, state?: string) => {
+  const compareState = state ?? stateObj.state;
+  if (stateObj?.attributes.source_type === "router") {
+    return compareState === "home" ? "mdi:lan-connect" : "mdi:lan-disconnect";
+  }
+  if (
+    ["bluetooth", "bluetooth_le"].includes(stateObj?.attributes.source_type)
+  ) {
+    return compareState === "home" ? "mdi:bluetooth-connect" : "mdi:bluetooth";
+  }
+  return compareState === "not_home"
+    ? "mdi:account-arrow-right"
+    : "mdi:account";
+};

src/common/entity/domain_icon.ts

@@ -1,301 +0,0 @@
-import {
-  mdiAccount,
-  mdiAccountArrowRight,
-  mdiAirHumidifier,
-  mdiAirHumidifierOff,
-  mdiAudioVideo,
-  mdiAudioVideoOff,
-  mdiBluetooth,
-  mdiBluetoothConnect,
-  mdiButtonPointer,
-  mdiCalendar,
-  mdiCast,
-  mdiCastConnected,
-  mdiCastOff,
-  mdiChartSankey,
-  mdiCheckCircleOutline,
-  mdiClock,
-  mdiCloseCircleOutline,
-  mdiCrosshairsQuestion,
-  mdiDoorbell,
-  mdiEyeCheck,
-  mdiFan,
-  mdiFanOff,
-  mdiGestureTapButton,
-  mdiLanConnect,
-  mdiLanDisconnect,
-  mdiLock,
-  mdiLockAlert,
-  mdiLockClock,
-  mdiLockOpen,
-  mdiMeterGas,
-  mdiMotionSensor,
-  mdiPackage,
-  mdiPackageDown,
-  mdiPackageUp,
-  mdiPipeValve,
-  mdiPowerPlug,
-  mdiPowerPlugOff,
-  mdiRestart,
-  mdiRobot,
-  mdiRobotConfused,
-  mdiRobotOff,
-  mdiSpeaker,
-  mdiSpeakerOff,
-  mdiSpeakerPause,
-  mdiSpeakerPlay,
-  mdiSwapHorizontal,
-  mdiTelevision,
-  mdiTelevisionOff,
-  mdiTelevisionPause,
-  mdiTelevisionPlay,
-  mdiToggleSwitchVariant,
-  mdiToggleSwitchVariantOff,
-  mdiVideo,
-  mdiVideoOff,
-  mdiWaterBoiler,
-  mdiWaterBoilerOff,
-  mdiWeatherNight,
-  mdiWhiteBalanceSunny,
-} from "@mdi/js";
-import { HassEntity } from "home-assistant-js-websocket";
-import { UpdateEntity, updateIsInstalling } from "../../data/update";
-import { weatherIcon } from "../../data/weather";
-/**
- * Return the icon to be used for a domain.
- *
- * Optionally pass in a state to influence the domain icon.
- */
-import { DEFAULT_DOMAIN_ICON, FIXED_DOMAIN_ICONS } from "../const";
-import { alarmPanelIcon } from "./alarm_panel_icon";
-import { binarySensorIcon } from "./binary_sensor_icon";
-import { coverIcon } from "./cover_icon";
-import { numberIcon } from "./number_icon";
-import { sensorIcon } from "./sensor_icon";
-
-export const domainIcon = (
-  domain: string,
-  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) {
-    case "alarm_control_panel":
-      return alarmPanelIcon(compareState);
-
-    case "automation":
-      return compareState === "unavailable"
-        ? mdiRobotConfused
-        : compareState === "off"
-          ? mdiRobotOff
-          : mdiRobot;
-
-    case "binary_sensor":
-      return binarySensorIcon(compareState, stateObj);
-
-    case "button":
-      switch (stateObj?.attributes.device_class) {
-        case "identify":
-          return mdiCrosshairsQuestion;
-        case "restart":
-          return mdiRestart;
-        case "update":
-          return mdiPackageUp;
-        default:
-          return mdiButtonPointer;
-      }
-
-    case "camera":
-      return compareState === "off" ? mdiVideoOff : mdiVideo;
-
-    case "cover":
-      return coverIcon(compareState, stateObj);
-
-    case "device_tracker":
-      if (stateObj?.attributes.source_type === "router") {
-        return compareState === "home" ? mdiLanConnect : mdiLanDisconnect;
-      }
-      if (
-        ["bluetooth", "bluetooth_le"].includes(stateObj?.attributes.source_type)
-      ) {
-        return compareState === "home" ? mdiBluetoothConnect : mdiBluetooth;
-      }
-      return compareState === "not_home" ? mdiAccountArrowRight : mdiAccount;
-
-    case "event":
-      switch (stateObj?.attributes.device_class) {
-        case "doorbell":
-          return mdiDoorbell;
-        case "button":
-          return mdiGestureTapButton;
-        case "motion":
-          return mdiMotionSensor;
-        default:
-          return mdiEyeCheck;
-      }
-
-    case "fan":
-      return compareState === "off" ? mdiFanOff : mdiFan;
-
-    case "humidifier":
-      return compareState === "off" ? mdiAirHumidifierOff : mdiAirHumidifier;
-
-    case "input_boolean":
-      return compareState === "on"
-        ? 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":
-          return mdiLockOpen;
-        case "jammed":
-          return mdiLockAlert;
-        case "locking":
-        case "unlocking":
-          return mdiLockClock;
-        default:
-          return mdiLock;
-      }
-
-    case "media_player":
-      switch (stateObj?.attributes.device_class) {
-        case "speaker":
-          switch (compareState) {
-            case "playing":
-              return mdiSpeakerPlay;
-            case "paused":
-              return mdiSpeakerPause;
-            case "off":
-              return mdiSpeakerOff;
-            default:
-              return mdiSpeaker;
-          }
-        case "tv":
-          switch (compareState) {
-            case "playing":
-              return mdiTelevisionPlay;
-            case "paused":
-              return mdiTelevisionPause;
-            case "off":
-              return mdiTelevisionOff;
-            default:
-              return mdiTelevision;
-          }
-        case "receiver":
-          switch (compareState) {
-            case "off":
-              return mdiAudioVideoOff;
-            default:
-              return mdiAudioVideo;
-          }
-        default:
-          switch (compareState) {
-            case "playing":
-            case "paused":
-              return mdiCastConnected;
-            case "off":
-              return mdiCastOff;
-            default:
-              return mdiCast;
-          }
-      }
-
-    case "number": {
-      const icon = numberIcon(stateObj);
-      if (icon) {
-        return icon;
-      }
-
-      break;
-    }
-
-    case "person":
-      return compareState === "not_home" ? mdiAccountArrowRight : mdiAccount;
-
-    case "switch":
-      switch (stateObj?.attributes.device_class) {
-        case "outlet":
-          return compareState === "on" ? mdiPowerPlug : mdiPowerPlugOff;
-        case "switch":
-          return compareState === "on"
-            ? mdiToggleSwitchVariant
-            : mdiToggleSwitchVariantOff;
-        default:
-          return mdiToggleSwitchVariant;
-      }
-
-    case "sensor": {
-      const icon = sensorIcon(stateObj);
-      if (icon) {
-        return icon;
-      }
-
-      break;
-    }
-
-    case "sun":
-      return stateObj?.state === "above_horizon"
-        ? mdiWhiteBalanceSunny
-        : mdiWeatherNight;
-
-    case "switch_as_x":
-      return mdiSwapHorizontal;
-
-    case "threshold":
-      return mdiChartSankey;
-
-    case "update":
-      return compareState === "on"
-        ? updateIsInstalling(stateObj as UpdateEntity)
-          ? mdiPackageDown
-          : mdiPackageUp
-        : mdiPackage;
-
-    case "valve":
-      switch (stateObj?.attributes.device_class) {
-        case "water":
-          return mdiPipeValve;
-        case "gas":
-          return mdiMeterGas;
-        default:
-          return mdiPipeValve;
-      }
-
-    case "water_heater":
-      return compareState === "off" ? mdiWaterBoilerOff : mdiWaterBoiler;
-
-    case "weather":
-      return weatherIcon(stateObj?.state);
-  }
-
-  if (domain in FIXED_DOMAIN_ICONS) {
-    return FIXED_DOMAIN_ICONS[domain];
-  }
-
-  return undefined;
-};

src/common/entity/get_states.ts

@@ -211,6 +211,7 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
       "volatile_organic_compounds",
       "volatile_organic_compounds_parts",
       "voltage",
+      "volume_flow_rate",
     ],
     state_class: ["measurement", "total", "total_increasing"],
   },

src/common/entity/number_icon.ts

@@ -1,13 +0,0 @@
-/** Return an icon representing a number state. */
-import { HassEntity } from "home-assistant-js-websocket";
-import { FIXED_DEVICE_CLASS_ICONS } from "../const";
-
-export const numberIcon = (stateObj?: HassEntity): string | undefined => {
-  const dclass = stateObj?.attributes.device_class;
-
-  if (dclass && dclass in FIXED_DEVICE_CLASS_ICONS) {
-    return FIXED_DEVICE_CLASS_ICONS[dclass];
-  }
-
-  return undefined;
-};

src/common/entity/sensor_icon.ts

@@ -1,25 +0,0 @@
-/** Return an icon representing a sensor state. */
-import { mdiBattery, mdiThermometer } from "@mdi/js";
-import { HassEntity } from "home-assistant-js-websocket";
-import { SENSOR_DEVICE_CLASS_BATTERY } from "../../data/sensor";
-import { FIXED_DEVICE_CLASS_ICONS, UNIT_C, UNIT_F } from "../const";
-import { batteryStateIcon } from "./battery_icon";
-
-export const sensorIcon = (stateObj?: HassEntity): string | undefined => {
-  const dclass = stateObj?.attributes.device_class;
-
-  if (dclass && dclass in FIXED_DEVICE_CLASS_ICONS) {
-    return FIXED_DEVICE_CLASS_ICONS[dclass];
-  }
-
-  if (dclass === SENSOR_DEVICE_CLASS_BATTERY) {
-    return stateObj ? batteryStateIcon(stateObj) : mdiBattery;
-  }
-
-  const unit = stateObj?.attributes.unit_of_measurement;
-  if (unit === UNIT_C || unit === UNIT_F) {
-    return mdiThermometer;
-  }
-
-  return undefined;
-};

src/common/entity/state_icon.ts

@@ -0,0 +1,42 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { computeStateDomain } from "./compute_state_domain";
+import { updateIcon } from "./update_icon";
+import { deviceTrackerIcon } from "./device_tracker_icon";
+import { batteryIcon } from "./battery_icon";
+
+export const stateIcon = (
+  stateObj: HassEntity,
+  state?: string
+): string | undefined => {
+  const domain = computeStateDomain(stateObj);
+  const compareState = state ?? stateObj.state;
+  const dc = stateObj.attributes.device_class;
+  switch (domain) {
+    case "update":
+      return updateIcon(stateObj, compareState);
+
+    case "sensor":
+      if (dc === "battery") {
+        return batteryIcon(stateObj, compareState);
+      }
+      break;
+
+    case "device_tracker":
+      return deviceTrackerIcon(stateObj, compareState);
+
+    case "sun":
+      return compareState === "above_horizon"
+        ? "mdi:white-balance-sunny"
+        : "mdi:weather-night";
+
+    case "input_datetime":
+      if (!stateObj.attributes.has_date) {
+        return "mdi:clock";
+      }
+      if (!stateObj.attributes.has_time) {
+        return "mdi:calendar";
+      }
+      break;
+  }
+  return undefined;
+};

src/common/entity/state_icon_path.ts

@@ -1,12 +0,0 @@
-/** Return an icon representing a state. */
-import { HassEntity } from "home-assistant-js-websocket";
-import { DEFAULT_DOMAIN_ICON } from "../const";
-import { computeDomain } from "./compute_domain";
-import { domainIcon } from "./domain_icon";
-
-export const stateIconPath = (state?: HassEntity) => {
-  if (!state) {
-    return DEFAULT_DOMAIN_ICON;
-  }
-  return domainIcon(computeDomain(state.entity_id), state);
-};

src/common/entity/update_icon.ts

@@ -0,0 +1,11 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { UpdateEntity, updateIsInstalling } from "../../data/update";
+
+export const updateIcon = (stateObj: HassEntity, state?: string) => {
+  const compareState = state ?? stateObj.state;
+  return compareState === "on"
+    ? updateIsInstalling(stateObj as UpdateEntity)
+      ? "mdi:package-down"
+      : "mdi:package-up"
+    : "mdi:package";
+};

src/common/util/compute_rtl.ts

@@ -34,4 +34,12 @@ export function setDirectionStyles(direction: string, element: LitElement) {
     "--float-end",
     direction === "ltr" ? "right" : "left"
   );
+  element.style.setProperty(
+    "--margin-title",
+    direction === "ltr" ? "var(--margin-title-ltr)" : "var(--margin-title-rtl)"
+  );
+  element.style.setProperty(
+    "--scale-direction",
+    direction === "ltr" ? "1" : "-1"
+  );
 }

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

@@ -10,7 +10,6 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { clamp } from "../../common/number/clamp";
-import { computeRTL } from "../../common/util/compute_rtl";
 import { HomeAssistant } from "../../types";
 import { debounce } from "../../common/util/debounce";
 
@@ -212,12 +211,10 @@ export class HaChartBase extends LitElement {
             height: `${
               this.height ?? this._chartHeight ?? this.clientWidth / 2
             }px`,
-            "padding-left": `${
-              computeRTL(this.hass) ? 0 : this._paddingYAxisInternal
-            }px`,
-            "padding-right": `${
-              computeRTL(this.hass) ? this._paddingYAxisInternal : 0
-            }px`,
+            "padding-left": `${this._paddingYAxisInternal}`,
+            "padding-right": 0,
+            "padding-inline-start": `${this._paddingYAxisInternal}`,
+            "padding-inline-end": 0,
           })}
         >
           <canvas></canvas>
@@ -433,14 +430,6 @@ export class HaChartBase extends LitElement {
       .chartTooltip .bullet {
         align-self: baseline;
       }
-      :host([rtl]) .chartLegend .bullet,
-      :host([rtl]) .chartTooltip .bullet {
-        margin-right: inherit;
-        margin-left: 6px;
-        margin-inline-end: inherit;
-        margin-inline-start: 6px;
-        direction: var(--direction);
-      }
       .chartTooltip {
         padding: 8px;
         font-size: 90%;
@@ -449,12 +438,13 @@ export class HaChartBase extends LitElement {
         color: white;
         border-radius: 4px;
         pointer-events: none;
-        z-index: 1000;
+        z-index: 1;
+        -ms-user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
         width: 200px;
         box-sizing: border-box;
-      }
-      :host([rtl]) .chartTooltip {
-        direction: rtl;
+        direction: var(--direction);
       }
       .chartLegend ul,
       .chartTooltip ul {

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

@@ -27,7 +27,7 @@ export class StateHistoryChartLine extends LitElement {
 
   @property({ attribute: false }) public data: LineChartEntity[] = [];
 
-  @property() public names?: Record<string, string>;
+  @property({ attribute: false }) public names?: Record<string, string>;
 
   @property() public unit?: string;
 
@@ -47,6 +47,12 @@ export class StateHistoryChartLine extends LitElement {
 
   @property({ type: Boolean }) public logarithmicScale = false;
 
+  @property({ type: Number }) public minYAxis?: number;
+
+  @property({ type: Number }) public maxYAxis?: number;
+
+  @property({ type: Boolean }) public fitYData = false;
+
   @state() private _chartData?: ChartData<"line">;
 
   @state() private _entityIds: string[] = [];
@@ -84,7 +90,10 @@ export class StateHistoryChartLine extends LitElement {
       changedProps.has("startTime") ||
       changedProps.has("endTime") ||
       changedProps.has("unit") ||
-      changedProps.has("logarithmicScale")
+      changedProps.has("logarithmicScale") ||
+      changedProps.has("minYAxis") ||
+      changedProps.has("maxYAxis") ||
+      changedProps.has("fitYData")
     ) {
       this._chartOptions = {
         parsing: false,
@@ -121,6 +130,10 @@ export class StateHistoryChartLine extends LitElement {
             },
           },
           y: {
+            suggestedMin: this.fitYData ? this.minYAxis : null,
+            suggestedMax: this.fitYData ? this.maxYAxis : null,
+            min: this.fitYData ? null : this.minYAxis,
+            max: this.fitYData ? null : this.maxYAxis,
             ticks: {
               maxTicksLimit: 7,
             },
@@ -207,7 +220,12 @@ export class StateHistoryChartLine extends LitElement {
         // @ts-expect-error
         locale: numberFormatToLocale(this.hass.locale),
         onClick: (e: any) => {
-          if (!this.clickForMoreInfo) {
+          if (
+            !this.clickForMoreInfo ||
+            !(e.native instanceof MouseEvent) ||
+            (e.native instanceof PointerEvent &&
+              e.native.pointerType !== "mouse")
+          ) {
             return;
           }
 

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

@@ -25,7 +25,7 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property() public names?: Record<string, string>;
+  @property({ attribute: false }) public names?: Record<string, string>;
 
   @property() public unit?: string;
 
@@ -224,7 +224,11 @@ export class StateHistoryChartTimeline extends LitElement {
       // @ts-expect-error
       locale: numberFormatToLocale(this.hass.locale),
       onClick: (e: any) => {
-        if (!this.clickForMoreInfo) {
+        if (
+          !this.clickForMoreInfo ||
+          !(e.native instanceof MouseEvent) ||
+          (e.native instanceof PointerEvent && e.native.pointerType !== "mouse")
+        ) {
           return;
         }
 

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

@@ -54,10 +54,9 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property() public names?: Record<string, string>;
+  @property({ attribute: false }) public names?: Record<string, string>;
 
-  @property({ type: Boolean, attribute: "virtualize", reflect: true })
-  public virtualize = false;
+  @property({ type: Boolean, reflect: true }) public virtualize = false;
 
   @property({ attribute: false }) public endTime?: Date;
 
@@ -75,6 +74,12 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ type: Boolean }) public logarithmicScale = false;
 
+  @property({ type: Number }) public minYAxis?: number;
+
+  @property({ type: Number }) public maxYAxis?: number;
+
+  @property({ type: Boolean }) public fitYData = false;
+
   private _computedStartTime!: Date;
 
   private _computedEndTime!: Date;
@@ -162,6 +167,9 @@ export class StateHistoryCharts extends LitElement {
           .chartIndex=${index}
           .clickForMoreInfo=${this.clickForMoreInfo}
           .logarithmicScale=${this.logarithmicScale}
+          .minYAxis=${this.minYAxis}
+          .maxYAxis=${this.maxYAxis}
+          .fitYData=${this.fitYData}
           @y-width-changed=${this._yWidthChanged}
         ></state-history-chart-line>
       </div> `;
@@ -301,6 +309,8 @@ export class StateHistoryCharts extends LitElement {
       :host([virtualize]) .entry-container {
         padding-left: 1px;
         padding-right: 1px;
+        padding-inline-start: 1px;
+        padding-inline-end: 1px;
       }
 
       .entry-container:not(:first-child) {

src/components/chart/statistics-chart.ts

@@ -54,7 +54,7 @@ export class StatisticsChart extends LitElement {
     StatisticsMetaData
   >;
 
-  @property() public names?: Record<string, string>;
+  @property({ attribute: false }) public names?: Record<string, string>;
 
   @property() public unit?: string;
 

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

@@ -688,15 +688,12 @@ export class HaDataTable extends LitElement {
           padding-left: 16px;
           /* @noflip */
           padding-right: 0;
+          /* @noflip */
+          padding-inline-start: 16px;
+          /* @noflip */
+          padding-inline-end: initial;
           width: 60px;
         }
-        :host([dir="rtl"]) .mdc-data-table__header-cell--checkbox,
-        :host([dir="rtl"]) .mdc-data-table__cell--checkbox {
-          /* @noflip */
-          padding-left: 0;
-          /* @noflip */
-          padding-right: 16px;
-        }
 
         .mdc-data-table__table {
           height: 100%;
@@ -723,11 +720,7 @@ export class HaDataTable extends LitElement {
         }
 
         .mdc-data-table__cell--numeric {
-          text-align: right;
-        }
-        :host([dir="rtl"]) .mdc-data-table__cell--numeric {
-          /* @noflip */
-          text-align: left;
+          text-align: var(--float-end);
         }
 
         .mdc-data-table__cell--icon {
@@ -753,43 +746,24 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:not(
             .not-sorted
           ) {
-          text-align: left;
-        }
-        :host([dir="rtl"])
-          .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:hover,
-        :host([dir="rtl"])
-          .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:not(
-            .not-sorted
-          ) {
-          text-align: right;
+          text-align: var(--float-start);
         }
 
-        .mdc-data-table__cell--icon:first-child ha-icon,
         .mdc-data-table__cell--icon:first-child img,
+        .mdc-data-table__cell--icon:first-child ha-icon,
+        .mdc-data-table__cell--icon:first-child ha-svg-icon,
         .mdc-data-table__cell--icon:first-child ha-state-icon,
-        .mdc-data-table__cell--icon:first-child ha-svg-icon {
+        .mdc-data-table__cell--icon:first-child ha-domain-icon,
+        .mdc-data-table__cell--icon:first-child ha-service-icon {
           margin-left: 8px;
-        }
-        :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-icon,
-        :host([dir="rtl"])
-          .mdc-data-table__cell--icon:first-child
-          ha-state-icon,
-        :host([dir="rtl"])
-          .mdc-data-table__cell--icon:first-child
-          ha-svg-icon
-          :host([dir="rtl"])
-          .mdc-data-table__cell--icon:first-child
-          img {
-          margin-left: auto;
-          margin-right: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
 
         .mdc-data-table__cell--icon:first-child state-badge {
           margin-right: -8px;
-        }
-        :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child state-badge {
-          margin-right: auto;
-          margin-left: -8px;
+          margin-inline-end: -8px;
+          margin-inline-start: initial;
         }
 
         .mdc-data-table__cell--overflow-menu,
@@ -822,15 +796,8 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__header-cell--icon-button:first-child,
         .mdc-data-table__cell--icon-button:first-child {
           padding-left: 16px;
-        }
-        :host([dir="rtl"])
-          .mdc-data-table__header-cell--overflow-menu:first-child,
-        :host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:first-child,
-        :host([dir="rtl"])
-          .mdc-data-table__header-cell--overflow-menu:first-child,
-        :host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:first-child {
-          padding-left: 8px;
-          padding-right: 16px;
+          padding-inline-start: 16px;
+          padding-inline-end: initial;
         }
 
         .mdc-data-table__cell--overflow-menu:last-child,
@@ -838,14 +805,8 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__header-cell--icon-button:last-child,
         .mdc-data-table__cell--icon-button:last-child {
           padding-right: 16px;
-        }
-        :host([dir="rtl"])
-          .mdc-data-table__header-cell--overflow-menu:last-child,
-        :host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:last-child,
-        :host([dir="rtl"]) .mdc-data-table__header-cell--icon-button:last-child,
-        :host([dir="rtl"]) .mdc-data-table__cell--icon-button:last-child {
-          padding-right: 8px;
-          padding-left: 16px;
+          padding-inline-end: 16px;
+          padding-inline-start: initial;
         }
         .mdc-data-table__cell--overflow-menu,
         .mdc-data-table__header-cell--overflow-menu {
@@ -865,28 +826,15 @@ export class HaDataTable extends LitElement {
           letter-spacing: 0.0071428571em;
           text-decoration: inherit;
           text-transform: inherit;
-          text-align: left;
-        }
-        :host([dir="rtl"]) .mdc-data-table__header-cell {
-          /* @noflip */
-          text-align: right;
+          text-align: var(--float-start);
         }
 
         .mdc-data-table__header-cell--numeric {
-          text-align: right;
+          text-align: var(--float-end);
         }
         .mdc-data-table__header-cell--numeric.sortable:hover,
         .mdc-data-table__header-cell--numeric.sortable:not(.not-sorted) {
-          text-align: left;
-        }
-        :host([dir="rtl"]) .mdc-data-table__header-cell--numeric {
-          /* @noflip */
-          text-align: left;
-        }
-        :host([dir="rtl"]) .mdc-data-table__header-cell--numeric.sortable:hover,
-        :host([dir="rtl"])
-          .mdc-data-table__header-cell--numeric.sortable:not(.not-sorted) {
-          text-align: right;
+          text-align: var(--float-start);
         }
 
         /* custom from here */
@@ -907,20 +855,15 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__header-cell span {
           position: relative;
           left: 0px;
-        }
-        :host([dir="rtl"]) .mdc-data-table__header-cell span {
-          left: auto;
-          right: 0px;
+          inset-inline-start: 0px;
+          inset-inline-end: initial;
         }
 
         .mdc-data-table__header-cell.sortable {
           cursor: pointer;
         }
         .mdc-data-table__header-cell > * {
-          transition: left 0.2s ease;
-        }
-        :host([dir="rtl"]) .mdc-data-table__header-cell > * {
-          transition: right 0.2s ease;
+          transition: var(--float-start) 0.2s ease;
         }
         .mdc-data-table__header-cell ha-svg-icon {
           top: -3px;
@@ -928,35 +871,20 @@ export class HaDataTable extends LitElement {
         }
         .mdc-data-table__header-cell.not-sorted ha-svg-icon {
           left: -20px;
-        }
-        :host([dir="rtl"]) .mdc-data-table__header-cell.not-sorted ha-svg-icon {
-          right: -20px;
+          inset-inline-start: -20px;
+          inset-inline-end: initial;
         }
         .mdc-data-table__header-cell.sortable:not(.not-sorted) span,
         .mdc-data-table__header-cell.sortable.not-sorted:hover span {
           left: 24px;
-        }
-        :host([dir="rtl"])
-          .mdc-data-table__header-cell.sortable:not(.not-sorted)
-          span,
-        :host([dir="rtl"])
-          .mdc-data-table__header-cell.sortable.not-sorted:hover
-          span {
-          left: auto;
-          right: 24px;
+          inset-inline-start: 24px;
+          inset-inline-end: initial;
         }
         .mdc-data-table__header-cell.sortable:not(.not-sorted) ha-svg-icon,
         .mdc-data-table__header-cell.sortable:hover.not-sorted ha-svg-icon {
           left: 12px;
-        }
-        :host([dir="rtl"])
-          .mdc-data-table__header-cell.sortable:not(.not-sorted)
-          ha-svg-icon,
-        :host([dir="rtl"])
-          .mdc-data-table__header-cell.sortable:hover.not-sorted
-          ha-svg-icon {
-          left: auto;
-          right: 12px;
+          inset-inline-start: 12px;
+          inset-inline-end: initial;
         }
         .table-header {
           border-bottom: 1px solid var(--divider-color);
@@ -964,6 +892,8 @@ export class HaDataTable extends LitElement {
         search-input {
           display: block;
           flex: 1;
+          --mdc-text-field-fill-color: var(--sidebar-background-color);
+          --mdc-text-field-idle-line-color: transparent;
         }
         slot[name="header"] {
           display: block;

src/components/date-range-picker.ts

@@ -9,6 +9,7 @@ import {
   localizeWeekdays,
   localizeMonths,
 } from "../common/datetime/localize_date";
+import { mainWindow } from "../common/dom/get_main_window";
 
 // Set the current date to the left picker instead of the right picker because the right is hidden
 const CustomDateRangePicker = Vue.extend({
@@ -157,7 +158,7 @@ class DateRangePickerElement extends WrappedElement {
             min-width: initial !important;
             max-height: var(--date-range-picker-max-height);
             overflow-y: auto;
-          }
+                      }
           .daterangepicker:before {
             display: none;
           }
@@ -267,15 +268,37 @@ class DateRangePickerElement extends WrappedElement {
           .calendar-table {
             padding: 0 !important;
           }
-          .daterangepicker.ltr {
+          .calendar-time {
             direction: ltr;
-            text-align: left;
+          }
+          .daterangepicker.ltr {
+            direction: var(--direction);
+            text-align: var(--float-start);
           }
           .vue-daterange-picker{
             min-width: unset !important;
             display: block !important;
           }
         `;
+    if (mainWindow.document.dir === "rtl") {
+      style.innerHTML += `
+            .daterangepicker .calendar-table .next span {
+              transform: rotate(135deg);
+              -webkit-transform: rotate(135deg);
+            }
+            .daterangepicker .calendar-table .prev span {
+              transform: rotate(-45deg);
+              -webkit-transform: rotate(-45deg);
+            }
+            .daterangepicker td.start-date {
+              border-radius: 0 50% 50% 0;
+            }
+            .daterangepicker td.end-date {
+              border-radius: 50% 0 0 50%;
+            }
+            `;
+    }
+
     const shadowRoot = this.shadowRoot!;
     shadowRoot.appendChild(style);
     // Stop click events from reaching the document, otherwise it will close the picker immediately.

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

@@ -25,7 +25,7 @@ export abstract class HaDeviceAutomationPicker<
 
   @property() public deviceId?: string;
 
-  @property() public value?: T;
+  @property({ type: Object }) public value?: T;
 
   @state() private _automations: T[] = [];
 

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

@@ -84,9 +84,11 @@ export class HaDevicePicker extends LitElement {
   @property({ type: Array, attribute: "exclude-devices" })
   public excludeDevices?: string[];
 
-  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+  @property({ attribute: false })
+  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
 
-  @property() public entityFilter?: HaDevicePickerEntityFilterFunc;
+  @property({ attribute: false })
+  public entityFilter?: HaDevicePickerEntityFilterFunc;
 
   @property({ type: Boolean }) public disabled = false;
 

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

@@ -12,7 +12,7 @@ import type {
 class HaDevicesPicker extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() public value?: string[];
+  @property({ type: Array }) public value?: string[];
 
   @property() public helper?: string;
 
@@ -36,17 +36,19 @@ class HaDevicesPicker extends LitElement {
   @property({ type: Array, attribute: "exclude-domains" })
   public excludeDomains?: string[];
 
-  @property({ attribute: "picked-device-label" })
   @property({ type: Array, attribute: "include-device-classes" })
   public includeDeviceClasses?: string[];
 
+  @property({ attribute: "picked-device-label" })
   public pickedDeviceLabel?: string;
 
   @property({ attribute: "pick-device-label" }) public pickDeviceLabel?: string;
 
-  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+  @property({ attribute: false })
+  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
 
-  @property() public entityFilter?: HaDevicePickerEntityFilterFunc;
+  @property({ attribute: false })
+  public entityFilter?: HaDevicePickerEntityFilterFunc;
 
   protected render() {
     if (!this.hass) {

src/components/entity/ha-battery-icon.ts

@@ -1,22 +1,25 @@
-import { html, LitElement } from "lit";
+import { HassEntity } from "home-assistant-js-websocket";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import { batteryStateIcon } from "../../common/entity/battery_icon";
-import "../ha-svg-icon";
+import { batteryLevelIcon } from "../../common/entity/battery_icon";
+import "../ha-icon";
 
 @customElement("ha-battery-icon")
 export class HaBatteryIcon extends LitElement {
-  @property() public batteryStateObj;
+  @property({ attribute: false }) public batteryStateObj?: HassEntity;
 
-  @property() public batteryChargingStateObj;
+  @property({ attribute: false }) public batteryChargingStateObj?: HassEntity;
 
   protected render() {
+    if (!this.batteryStateObj) return nothing;
+
     return html`
-      <ha-svg-icon
-        .path=${batteryStateIcon(
-          this.batteryStateObj,
-          this.batteryChargingStateObj
+      <ha-icon
+        .icon=${batteryLevelIcon(
+          this.batteryStateObj.state,
+          this.batteryChargingStateObj?.state === "on"
         )}
-      ></ha-svg-icon>
+      ></ha-icon>
     `;
   }
 }

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

@@ -73,7 +73,8 @@ class HaEntitiesPickerLight extends LitElement {
 
   @property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string;
 
-  @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
+  @property({ attribute: false })
+  public entityFilter?: HaEntityPickerEntityFilterFunc;
 
   protected render() {
     if (!this.hass) {

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

@@ -1,8 +1,8 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { LitElement, PropertyValues, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
-import { ValueChangedEvent, HomeAssistant } from "../../types";
+import { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
 
@@ -37,7 +37,7 @@ class HaEntityAttributePicker extends LitElement {
 
   @property() public helper?: string;
 
-  @property({ type: Boolean }) private _opened = false;
+  @state() private _opened = false;
 
   @query("ha-combo-box", true) private _comboBox!: HaComboBox;
 
@@ -47,15 +47,17 @@ class HaEntityAttributePicker extends LitElement {
 
   protected updated(changedProps: PropertyValues) {
     if (changedProps.has("_opened") && this._opened) {
-      const state = this.entityId ? this.hass.states[this.entityId] : undefined;
-      (this._comboBox as any).items = state
-        ? Object.keys(state.attributes)
+      const entityState = this.entityId
+        ? this.hass.states[this.entityId]
+        : undefined;
+      (this._comboBox as any).items = entityState
+        ? Object.keys(entityState.attributes)
             .filter((key) => !this.hideAttributes?.includes(key))
             .map((key) => ({
               value: key,
               label: computeAttributeNameDisplay(
                 this.hass.localize,
-                state,
+                entityState,
                 this.hass.entities,
                 key
               ),

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

@@ -25,16 +25,6 @@ interface HassEntityWithCachedName extends HassEntity, ScorableTextItem {
 
 export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
 
-// eslint-disable-next-line lit/prefer-static-styles
-const rowRenderer: ComboBoxLitRenderer<HassEntityWithCachedName> = (item) =>
-  html`<ha-list-item graphic="avatar" .twoline=${!!item.entity_id}>
-    ${item.state
-      ? html`<state-badge slot="graphic" .stateObj=${item}></state-badge>`
-      : ""}
-    <span>${item.friendly_name}</span>
-    <span slot="secondary">${item.entity_id}</span>
-  </ha-list-item>`;
-
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -102,7 +92,8 @@ export class HaEntityPicker extends LitElement {
   @property({ type: Array, attribute: "exclude-entities" })
   public excludeEntities?: string[];
 
-  @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
+  @property({ attribute: false })
+  public entityFilter?: HaEntityPickerEntityFilterFunc;
 
   @property({ type: Boolean }) public hideClearIcon = false;
 
@@ -127,6 +118,21 @@ export class HaEntityPicker extends LitElement {
 
   private _states: HassEntityWithCachedName[] = [];
 
+  private _rowRenderer: ComboBoxLitRenderer<HassEntityWithCachedName> = (
+    item
+  ) =>
+    html`<ha-list-item graphic="avatar" .twoline=${!!item.entity_id}>
+      ${item.state
+        ? html`<state-badge
+            slot="graphic"
+            .stateObj=${item}
+            .hass=${this.hass}
+          ></state-badge>`
+        : ""}
+      <span>${item.friendly_name}</span>
+      <span slot="secondary">${item.entity_id}</span>
+    </ha-list-item>`;
+
   private _getStates = memoizeOne(
     (
       _opened: boolean,
@@ -326,7 +332,7 @@ export class HaEntityPicker extends LitElement {
         .helper=${this.helper}
         .allowCustomValue=${this.allowCustomEntity}
         .filteredItems=${this._states}
-        .renderer=${rowRenderer}
+        .renderer=${this._rowRenderer}
         .required=${this.required}
         .disabled=${this.disabled}
         @opened-changed=${this._openedChanged}

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

@@ -1,6 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { LitElement, PropertyValues, html, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { getStates } from "../../common/entity/get_states";
 import { HomeAssistant, ValueChangedEvent } from "../../types";
@@ -17,7 +17,7 @@ class HaEntityStatePicker extends LitElement {
 
   @property() public attribute?: string;
 
-  @property() public extraOptions?: any[];
+  @property({ attribute: false }) public extraOptions?: any[];
 
   @property({ type: Boolean }) public autofocus = false;
 
@@ -34,7 +34,7 @@ class HaEntityStatePicker extends LitElement {
 
   @property() public helper?: string;
 
-  @property({ type: Boolean }) private _opened = false;
+  @state() private _opened = false;
 
   @query("ha-combo-box", true) private _comboBox!: HaComboBox;
 
@@ -49,16 +49,18 @@ class HaEntityStatePicker extends LitElement {
       changedProps.has("attribute") ||
       changedProps.has("extraOptions")
     ) {
-      const state = this.entityId ? this.hass.states[this.entityId] : undefined;
+      const stateObj = this.entityId
+        ? this.hass.states[this.entityId]
+        : undefined;
       (this._comboBox as any).items = [
         ...(this.extraOptions ?? []),
-        ...(this.entityId && state
-          ? getStates(state, this.attribute).map((key) => ({
+        ...(this.entityId && stateObj
+          ? getStates(stateObj, this.attribute).map((key) => ({
               value: key,
               label: !this.attribute
-                ? this.hass.formatEntityState(state, key)
+                ? this.hass.formatEntityState(stateObj, key)
                 : this.hass.formatEntityAttributeValue(
-                    state,
+                    stateObj,
                     this.attribute,
                     key
                   ),

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

@@ -140,7 +140,8 @@ export class HaStateLabelBadge extends LitElement {
         ${!image && showIcon
           ? html`<ha-state-icon
               .icon=${this.icon}
-              .state=${entityState}
+              .stateObj=${entityState}
+              .hass=${this.hass}
             ></ha-state-icon>`
           : ""}
         ${value && !image && !showIcon
@@ -173,7 +174,6 @@ export class HaStateLabelBadge extends LitElement {
       case "scene":
       case "sun":
       case "timer":
-      case "updater":
         return null;
       // @ts-expect-error we don't break and go to default
       case "sensor":
@@ -207,7 +207,6 @@ export class HaStateLabelBadge extends LitElement {
       case "alarm_control_panel":
       case "binary_sensor":
       case "device_tracker":
-      case "updater":
       case "person":
       case "scene":
       case "sun":
@@ -284,8 +283,7 @@ export class HaStateLabelBadge extends LitElement {
         --ha-label-badge-label-text-transform: none;
       }
 
-      ha-label-badge.binary_sensor,
-      ha-label-badge.updater {
+      ha-label-badge.binary_sensor {
         --ha-label-badge-color: var(--label-badge-blue);
       }
 

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

@@ -105,6 +105,7 @@ export class HaStatisticPicker extends LitElement {
         ? html`<state-badge
             slot="graphic"
             .stateObj=${item.state}
+            .hass=${this.hass}
           ></state-badge>`
         : ""}
       <span>${item.name}</span>

src/components/entity/state-badge.ts

@@ -1,11 +1,11 @@
 import { mdiAlert } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
+  css,
+  html,
   nothing,
 } from "lit";
 import { property, state } from "lit/decorators";
@@ -14,8 +14,8 @@ import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import {
-  stateColorCss,
   stateColorBrightness,
+  stateColorCss,
 } from "../../common/entity/state_color";
 import { iconColorCSS } from "../../common/style/icon_color_css";
 import { cameraUrlWithWidthHeight } from "../../data/camera";
@@ -36,8 +36,8 @@ export class StateBadge extends LitElement {
 
   @property() public color?: string;
 
-  @property({ type: Boolean, reflect: true, attribute: "icon" })
-  private _showIcon = true;
+  // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
+  @property({ type: Boolean, reflect: true }) public icon = true;
 
   @state() private _iconStyle: { [name: string]: string | undefined } = {};
 
@@ -83,22 +83,23 @@ export class StateBadge extends LitElement {
       </div>`;
     }
 
-    if (!this._showIcon) {
+    if (!this.icon) {
       return nothing;
     }
 
     const domain = stateObj ? computeStateDomain(stateObj) : undefined;
 
     return html`<ha-state-icon
+      .hass=${this.hass}
       style=${styleMap(this._iconStyle)}
       data-domain=${ifDefined(domain)}
       data-state=${ifDefined(stateObj?.state)}
       .icon=${this.overrideIcon}
-      .state=${stateObj}
+      .stateObj=${stateObj}
     ></ha-state-icon>`;
   }
 
-  public willUpdate(changedProps: PropertyValues) {
+  public willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
     if (
       !changedProps.has("stateObj") &&
@@ -114,7 +115,7 @@ export class StateBadge extends LitElement {
     const iconStyle: { [name: string]: string } = {};
     let backgroundImage = "";
 
-    this._showIcon = true;
+    this.icon = true;
 
     if (stateObj && this.overrideImage === undefined) {
       // hide icon if we have entity picture
@@ -134,7 +135,7 @@ export class StateBadge extends LitElement {
           imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
         }
         backgroundImage = `url(${imageUrl})`;
-        this._showIcon = false;
+        this.icon = false;
         if (domain === "update") {
           this.style.borderRadius = "0";
         } else if (domain === "media_player") {
@@ -180,7 +181,7 @@ export class StateBadge extends LitElement {
         imageUrl = this.hass.hassUrl(imageUrl);
       }
       backgroundImage = `url(${imageUrl})`;
-      this._showIcon = false;
+      this.icon = false;
     }
 
     this._iconStyle = iconStyle;

src/components/entity/state-info.ts

@@ -3,7 +3,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { computeRTL } from "../../common/util/compute_rtl";
 import type { HomeAssistant } from "../../types";
 import "../ha-relative-time";
 import "./state-badge";
@@ -16,9 +15,6 @@ class StateInfo extends LitElement {
 
   @property({ type: Boolean }) public inDialog = false;
 
-  // property used only in CSS
-  @property({ type: Boolean, reflect: true }) public rtl = false;
-
   @property() public color?: string;
 
   protected render() {
@@ -29,6 +25,7 @@ class StateInfo extends LitElement {
     const name = computeStateName(this.stateObj);
 
     return html`<state-badge
+        .hass=${this.hass}
         .stateObj=${this.stateObj}
         .stateColor=${true}
         .color=${this.color}
@@ -78,18 +75,6 @@ class StateInfo extends LitElement {
       </div>`;
   }
 
-  protected updated(changedProps) {
-    super.updated(changedProps);
-    if (!changedProps.has("hass")) {
-      return;
-    }
-
-    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.locale !== this.hass.locale) {
-      this.rtl = computeRTL(this.hass);
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       :host {
@@ -105,17 +90,14 @@ class StateInfo extends LitElement {
 
       .info {
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
         display: flex;
         flex-direction: column;
         justify-content: center;
         height: 100%;
         min-width: 0;
-      }
-
-      :host([rtl]) .info {
-        margin-right: 8px;
-        margin-left: 0;
-        text-align: right;
+        text-align: var(--float-start);
       }
 
       .name {

src/components/ha-alert.ts

@@ -117,7 +117,6 @@ class HaAlert extends LitElement {
       margin-right: 0;
       margin-inline-start: 8px;
       margin-inline-end: 0;
-      direction: var(--direction);
     }
     .title {
       margin-top: 2px;
@@ -155,6 +154,10 @@ class HaAlert extends LitElement {
     .issue-type.success::after {
       background-color: var(--success-color);
     }
+    :host ::slotted(ul) {
+      margin: 0;
+      padding-inline-start: 20px;
+    }
   `;
 }
 

src/components/ha-aliases-editor.ts

@@ -8,7 +8,7 @@ import "./ha-multi-textfield";
 class AliasesEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public aliases!: string[];
+  @property({ type: Array }) public aliases!: string[];
 
   @property({ type: Boolean }) public disabled = false;
 

src/components/ha-area-filter.ts

@@ -1,4 +1,4 @@
-import { mdiChevronRight, mdiSofa } from "@mdi/js";
+import { mdiSofa } from "@mdi/js";
 import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
@@ -6,6 +6,7 @@ import { showAreaFilterDialog } from "../dialogs/area-filter/show-area-filter-di
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 import "./ha-textfield";
+import "./ha-icon-next";
 
 export type AreaFilterValue = {
   hidden?: string[];
@@ -53,11 +54,10 @@ export class HaAreaPicker extends LitElement {
         <ha-svg-icon slot="graphic" .path=${mdiSofa}></ha-svg-icon>
         <span>${this.label}</span>
         <span slot="secondary">${description}</span>
-        <ha-svg-icon
+        <ha-icon-next
           slot="meta"
           .label=${this.hass.localize("ui.common.edit")}
-          .path=${mdiChevronRight}
-        ></ha-svg-icon>
+        ></ha-icon-next>
       </ha-list-item>
     `;
   }

src/components/ha-area-picker.ts

@@ -1,6 +1,6 @@
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
@@ -36,8 +36,12 @@ type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry;
 
 const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) =>
   html`<ha-list-item
+    graphic="icon"
     class=${classMap({ "add-new": item.area_id === "add_new" })}
   >
+    ${item.icon
+      ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
+      : nothing}
     ${item.name}
   </ha-list-item>`;
 
@@ -54,7 +58,7 @@ export class HaAreaPicker extends LitElement {
   @property() public placeholder?: string;
 
   @property({ type: Boolean, attribute: "no-add" })
-  public noAdd?: boolean;
+  public noAdd = false;
 
   /**
    * Show only areas with entities from specific domains.
@@ -88,9 +92,11 @@ export class HaAreaPicker extends LitElement {
   @property({ type: Array, attribute: "exclude-areas" })
   public excludeAreas?: string[];
 
-  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+  @property({ attribute: false })
+  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
 
-  @property() public entityFilter?: (entity: HassEntity) => boolean;
+  @property({ attribute: false })
+  public entityFilter?: (entity: HassEntity) => boolean;
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -133,6 +139,7 @@ export class HaAreaPicker extends LitElement {
             area_id: "no_areas",
             name: this.hass.localize("ui.components.area-picker.no_areas"),
             picture: null,
+            icon: null,
             aliases: [],
           },
         ];
@@ -260,7 +267,9 @@ export class HaAreaPicker extends LitElement {
       }
 
       if (areaIds) {
-        outputAreas = areas.filter((area) => areaIds!.includes(area.area_id));
+        outputAreas = outputAreas.filter((area) =>
+          areaIds!.includes(area.area_id)
+        );
       }
 
       if (excludeAreas) {
@@ -275,6 +284,7 @@ export class HaAreaPicker extends LitElement {
             area_id: "no_areas",
             name: this.hass.localize("ui.components.area-picker.no_match"),
             picture: null,
+            icon: null,
             aliases: [],
           },
         ];
@@ -288,6 +298,7 @@ export class HaAreaPicker extends LitElement {
               area_id: "add_new",
               name: this.hass.localize("ui.components.area-picker.add_new"),
               picture: null,
+              icon: "mdi:plus",
               aliases: [],
             },
           ];

src/components/ha-areas-picker.ts

@@ -13,14 +13,14 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
 
   @property() public label?: string;
 
-  @property() public value?: string[];
+  @property({ type: Array }) public value?: string[];
 
   @property() public helper?: string;
 
   @property() public placeholder?: string;
 
   @property({ type: Boolean, attribute: "no-add" })
-  public noAdd?: boolean;
+  public noAdd = false;
 
   /**
    * Show only areas with entities from specific domains.
@@ -46,9 +46,11 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
   @property({ type: Array, attribute: "include-device-classes" })
   public includeDeviceClasses?: string[];
 
-  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+  @property({ attribute: false })
+  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
 
-  @property() public entityFilter?: (entity: HassEntity) => boolean;
+  @property({ attribute: false })
+  public entityFilter?: (entity: HassEntity) => boolean;
 
   @property({ attribute: "picked-area-label" })
   public pickedAreaLabel?: string;

src/components/ha-attribute-icon.ts

@@ -0,0 +1,55 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { until } from "lit/directives/until";
+import { attributeIcon } from "../data/icons";
+import { HomeAssistant } from "../types";
+import "./ha-icon";
+import "./ha-svg-icon";
+
+@customElement("ha-attribute-icon")
+export class HaAttributeIcon extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  @property() public attribute?: string;
+
+  @property() public attributeValue?: string;
+
+  @property() public icon?: string;
+
+  protected render() {
+    if (this.icon) {
+      return html`<ha-icon .icon=${this.icon}></ha-icon>`;
+    }
+
+    if (!this.stateObj || !this.attribute) {
+      return nothing;
+    }
+
+    if (!this.hass) {
+      return nothing;
+    }
+
+    const icon = attributeIcon(
+      this.hass,
+      this.stateObj,
+      this.attribute,
+      this.attributeValue
+    ).then((icn) => {
+      if (icn) {
+        return html`<ha-icon .icon=${icn}></ha-icon>`;
+      }
+      return nothing;
+    });
+
+    return html`${until(icon)}`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-attribute-icon": HaAttributeIcon;
+  }
+}

src/components/ha-attribute-value.ts

@@ -13,8 +13,7 @@ class HaAttributeValue extends LitElement {
 
   @property() public attribute!: string;
 
-  @property({ type: Boolean, attribute: "hide-unit" })
-  public hideUnit?: boolean;
+  @property({ type: Boolean, attribute: "hide-unit" }) public hideUnit = false;
 
   protected render() {
     if (!this.stateObj) {

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

@@ -353,6 +353,8 @@ export class HaBaseTimeInput extends LitElement {
       text-transform: var(--mdc-typography-body2-text-transform, inherit);
       color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
       padding-left: 4px;
+      padding-inline-start: 4px;
+      padding-inline-end: initial;
     }
   `;
 }

src/components/ha-blueprint-picker.ts

@@ -24,7 +24,7 @@ class HaBluePrintPicker extends LitElement {
 
   @property() public domain: BlueprintDomain = "automation";
 
-  @property() public blueprints?: Blueprints;
+  @property({ attribute: false }) public blueprints?: Blueprints;
 
   @property({ type: Boolean }) public disabled = false;
 

src/components/ha-button-toggle-group.ts

@@ -69,6 +69,7 @@ export class HaButtonToggleGroup extends LitElement {
         display: flex;
         --mdc-icon-button-size: var(--button-toggle-size, 36px);
         --mdc-icon-size: var(--button-toggle-icon-size, 20px);
+        direction: ltr;
       }
       mwc-button {
         --mdc-shape-small: 0;
@@ -119,19 +120,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;
-      }
     `;
   }
 }

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

@@ -37,6 +37,10 @@ export class HaCheckListItem extends CheckListItemBase {
       .mdc-deprecated-list-item__graphic {
         margin-top: var(--check-list-item-graphic-margin-top);
       }
+      :host([graphic="icon"]) .mdc-deprecated-list-item__graphic {
+        margin-inline-start: 0;
+        margin-inline-end: var(--mdc-list-item-graphic-margin, 32px);
+      }
     `,
   ];
 }

src/components/ha-combo-box.ts

@@ -95,14 +95,13 @@ export class HaComboBox extends LitElement {
 
   @property({ attribute: "item-id-path" }) public itemIdPath?: string;
 
-  @property() public renderer?: ComboBoxLitRenderer<any>;
+  @property({ attribute: false }) public renderer?: ComboBoxLitRenderer<any>;
 
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = false;
 
-  @property({ type: Boolean, reflect: true, attribute: "opened" })
-  public opened?: boolean;
+  @property({ type: Boolean, reflect: true }) public opened = false;
 
   @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
 

src/components/ha-control-circular-slider.ts

@@ -71,68 +71,49 @@ export type ControlCircularSliderMode = "start" | "end" | "full";
 
 @customElement("ha-control-circular-slider")
 export class HaControlCircularSlider extends LitElement {
-  @property({ type: Boolean, reflect: true })
-  public disabled = false;
+  @property({ type: Boolean, reflect: true }) public disabled = false;
 
-  @property({ type: Boolean, reflect: true })
-  public readonly = false;
+  @property({ type: Boolean, reflect: true }) public readonly = false;
 
-  @property({ type: Boolean })
-  public dual?: boolean;
+  @property({ type: Boolean }) public dual = false;
 
-  @property({ type: String })
-  public mode?: ControlCircularSliderMode;
+  @property({ type: String }) public mode?: ControlCircularSliderMode;
 
-  @property({ type: Boolean })
-  public inactive?: boolean;
+  @property({ type: Boolean }) public inactive = false;
 
-  @property({ type: String })
-  public label?: string;
+  @property({ type: String }) public label?: string;
 
-  @property({ type: String, attribute: "low-label" })
-  public lowLabel?: string;
+  @property({ type: String, attribute: "low-label" }) public lowLabel?: string;
 
   @property({ type: String, attribute: "high-label" })
   public highLabel?: string;
 
-  @property({ type: Number })
-  public value?: number;
+  @property({ type: Number }) public value?: number;
 
-  @property({ type: Number })
-  public low?: number;
+  @property({ type: Number }) public low?: number;
 
-  @property({ type: Number })
-  public high?: number;
+  @property({ type: Number }) public high?: number;
 
-  @property({ type: Number })
-  public current?: number;
+  @property({ type: Number }) public current?: number;
 
-  @property({ type: Number })
-  public step = 1;
+  @property({ type: Number }) public step = 1;
 
-  @property({ type: Number })
-  public min = 0;
+  @property({ type: Number }) public min = 0;
 
-  @property({ type: Number })
-  public max = 100;
+  @property({ type: Number }) public max = 100;
 
   @property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
-  public preventInteractionOnScroll?: boolean;
+  public preventInteractionOnScroll = false;
 
-  @state()
-  public _localValue?: number = this.value;
+  @state() public _localValue?: number = this.value;
 
-  @state()
-  public _localLow?: number = this.low;
+  @state() public _localLow?: number = this.low;
 
-  @state()
-  public _localHigh?: number = this.high;
+  @state() public _localHigh?: number = this.high;
 
-  @state()
-  public _activeSlider?: ActiveSlider;
+  @state() public _activeSlider?: ActiveSlider;
 
-  @state()
-  public _lastSlider?: ActiveSlider;
+  @state() public _lastSlider?: ActiveSlider;
 
   private _valueToPercentage(value: number) {
     return (
@@ -618,11 +599,11 @@ export class HaControlCircularSlider extends LitElement {
           targetCircle
             ? svg`
               <!-- Use circle instead of path for interaction (Safari doesn't support well pointer-events with stroke-dasharray) -->
-              <circle 
-                transform="rotate(${angle} 0 0)" 
-                ?data-interaction=${onlyDotInteraction} 
+              <circle
+                transform="rotate(${angle} 0 0)"
+                ?data-interaction=${onlyDotInteraction}
                 cx=${RADIUS}
-                cy="0" 
+                cy="0"
                 />
               <path
                 d=${path}

src/components/ha-control-select-menu.ts

@@ -27,10 +27,10 @@ export class HaControlSelectMenu extends SelectBase {
   @query(".select-anchor") protected anchorElement!: HTMLDivElement | null;
 
   @property({ type: Boolean, attribute: "show-arrow" })
-  public showArrow?: boolean;
+  public showArrow = false;
 
   @property({ type: Boolean, attribute: "hide-label" })
-  public hideLabel?: boolean;
+  public hideLabel = false;
 
   @queryAsync("mwc-ripple") private _ripple!: Promise<Ripple | null>;
 
@@ -126,9 +126,9 @@ export class HaControlSelectMenu extends SelectBase {
 
     return html`
       <div class="icon">
-        ${icon && "path" in icon
+        ${icon && icon.localName === "ha-svg-icon" && "path" in icon
           ? html`<ha-svg-icon .path=${icon.path}></ha-svg-icon>`
-          : icon && "icon" in icon
+          : icon && icon.localName === "ha-icon" && "icon" in icon
             ? html`<ha-icon .path=${icon.icon}></ha-icon>`
             : html`<slot name="icon"></slot>`}
       </div>

src/components/ha-control-select.ts

@@ -5,6 +5,7 @@ import {
   LitElement,
   nothing,
   PropertyValues,
+  TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -17,7 +18,7 @@ import "./ha-svg-icon";
 export type ControlSelectOption = {
   value: string;
   label?: string;
-  icon?: string;
+  icon?: TemplateResult;
   path?: string;
 };
 
@@ -25,7 +26,7 @@ export type ControlSelectOption = {
 export class HaControlSelect extends LitElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  @property() public options?: ControlSelectOption[];
+  @property({ attribute: false }) public options?: ControlSelectOption[];
 
   @property() public value?: string;
 
@@ -183,9 +184,7 @@ export class HaControlSelect extends LitElement {
         <div class="content">
           ${option.path
             ? html`<ha-svg-icon .path=${option.path}></ha-svg-icon>`
-            : option.icon
-              ? html`<ha-icon .icon=${option.icon}></ha-icon> `
-              : nothing}
+            : option.icon || nothing}
           ${option.label && !this.hideLabel
             ? html`<span>${option.label}</span>`
             : nothing}

src/components/ha-control-switch.ts

@@ -19,17 +19,13 @@ import "./ha-svg-icon";
 
 @customElement("ha-control-switch")
 export class HaControlSwitch extends LitElement {
-  @property({ type: Boolean, reflect: true })
-  public disabled = false;
+  @property({ type: Boolean, reflect: true }) public disabled = false;
 
-  @property({ type: Boolean })
-  public vertical = false;
+  @property({ type: Boolean }) public vertical = false;
 
-  @property({ type: Boolean })
-  public reversed = false;
+  @property({ type: Boolean }) public reversed = false;
 
-  @property({ type: Boolean, reflect: true })
-  public checked?: boolean;
+  @property({ type: Boolean, reflect: true }) public checked = false;
 
   // SVG icon path (if you need a non SVG icon instead, use the provided on icon slot to pass an <ha-icon slot="icon-on"> in)
   @property({ type: String }) pathOn?: string;

src/components/ha-country-picker.ts

@@ -269,7 +269,7 @@ export class HaCountryPicker extends LitElement {
 
   @property() public label?: string;
 
-  @property() public countries?: string[];
+  @property({ type: Array }) public countries?: string[];
 
   @property() public helper?: string;
 

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

@@ -32,7 +32,6 @@ import { firstWeekdayIndex } from "../common/datetime/first_weekday";
 import { formatDate } from "../common/datetime/format_date";
 import { formatDateTime } from "../common/datetime/format_date_time";
 import { useAmPm } from "../common/datetime/use_am_pm";
-import { computeRTLDirection } from "../common/util/compute_rtl";
 import { HomeAssistant } from "../types";
 import "./date-range-picker";
 import "./ha-icon-button";
@@ -47,11 +46,11 @@ export interface DateRangePickerRanges {
 export class HaDateRangePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public startDate!: Date;
+  @property({ attribute: false }) public startDate!: Date;
 
-  @property() public endDate!: Date;
+  @property({ attribute: false }) public endDate!: Date;
 
-  @property() public ranges?: DateRangePickerRanges | false;
+  @property({ attribute: false }) public ranges?: DateRangePickerRanges | false;
 
   @state() private _ranges?: DateRangePickerRanges;
 
@@ -61,11 +60,9 @@ export class HaDateRangePicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) private _hour24format = false;
+  @property({ type: Boolean }) public minimal = false;
 
-  @property({ type: String }) private _rtlDirection = "ltr";
-
-  @property({ type: Boolean }) private minimal = false;
+  @state() private _hour24format = false;
 
   @property({ type: Boolean }) public extendedPresets = false;
 
@@ -236,7 +233,6 @@ export class HaDateRangePicker extends LitElement {
       const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
       if (!oldHass || oldHass.locale !== this.hass.locale) {
         this._hour24format = !useAmPm(this.hass.locale);
-        this._rtlDirection = computeRTLDirection(this.hass);
       }
     }
   }
@@ -306,11 +302,7 @@ export class HaDateRangePicker extends LitElement {
               ></ha-icon-button>`}
         </div>
         ${this.ranges !== false && (this.ranges || this._ranges)
-          ? html`<div
-              slot="ranges"
-              class="date-range-ranges"
-              .dir=${this._rtlDirection}
-            >
+          ? html`<div slot="ranges" class="date-range-ranges">
               <mwc-list @action=${this._setDateRange} activatable>
                 ${Object.keys(this.ranges || this._ranges!).map(
                   (name) => html`<mwc-list-item>${name}</mwc-list-item>`

src/components/ha-domain-icon.ts

@@ -0,0 +1,84 @@
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { until } from "lit/directives/until";
+import { DEFAULT_DOMAIN_ICON, FIXED_DOMAIN_ICONS } from "../common/const";
+import { domainIcon } from "../data/icons";
+import { HomeAssistant } from "../types";
+import { brandsUrl } from "../util/brands-url";
+import "./ha-icon";
+
+@customElement("ha-domain-icon")
+export class HaDomainIcon extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public domain?: string;
+
+  @property() public deviceClass?: string;
+
+  @property() public icon?: string;
+
+  @property({ type: Boolean }) public brandFallback?: boolean;
+
+  protected render() {
+    if (this.icon) {
+      return html`<ha-icon .icon=${this.icon}></ha-icon>`;
+    }
+
+    if (!this.domain) {
+      return nothing;
+    }
+
+    if (!this.hass) {
+      return this._renderFallback();
+    }
+
+    const icon = domainIcon(this.hass, this.domain, this.deviceClass).then(
+      (icn) => {
+        if (icn) {
+          return html`<ha-icon .icon=${icn}></ha-icon>`;
+        }
+        return this._renderFallback();
+      }
+    );
+
+    return html`${until(icon)}`;
+  }
+
+  private _renderFallback() {
+    if (this.domain! in FIXED_DOMAIN_ICONS) {
+      return html`
+        <ha-svg-icon .path=${FIXED_DOMAIN_ICONS[this.domain!]}></ha-svg-icon>
+      `;
+    }
+    if (this.brandFallback) {
+      const image = brandsUrl({
+        domain: this.domain!,
+        type: "icon",
+        darkOptimized: this.hass.themes?.darkMode,
+      });
+      return html`
+        <img
+          alt=""
+          src=${image}
+          crossorigin="anonymous"
+          referrerpolicy="no-referrer"
+        />
+      `;
+    }
+    return html`<ha-svg-icon .path=${DEFAULT_DOMAIN_ICON}></ha-svg-icon>`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      img {
+        width: var(--mdc-icon-size, 24px);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-domain-icon": HaDomainIcon;
+  }
+}

src/components/ha-drawer.ts

@@ -3,6 +3,7 @@ import { styles } from "@material/mwc-drawer/mwc-drawer.css";
 import { css, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { mainWindow } from "../common/dom/get_main_window";
 
 const blockingElements = (document as any).$blockingElements;
 
@@ -12,6 +13,8 @@ export class HaDrawer extends DrawerBase {
 
   private _mc?: HammerManager;
 
+  private _rtlStyle?: HTMLElement;
+
   protected createAdapter() {
     return {
       ...super.createAdapter(),
@@ -31,8 +34,26 @@ export class HaDrawer extends DrawerBase {
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
     if (changedProps.has("direction")) {
-      this.mdcRoot.dir = this.direction;
+      if (mainWindow.document.dir === "rtl") {
+        this._rtlStyle = document.createElement("style");
+        this._rtlStyle.innerHTML = `
+          .mdc-drawer--animate {
+            transform: translateX(100%);
+          }
+          .mdc-drawer--opening {
+            transform: translateX(0);
+          }
+          .mdc-drawer--closing {
+            transform: translateX(100%);
+          }
+        `;
+
+        this.shadowRoot!.appendChild(this._rtlStyle);
+      } else if (this._rtlStyle) {
+        this.shadowRoot!.removeChild(this._rtlStyle);
+      }
     }
+
     if (changedProps.has("open") && this.open && this.type === "modal") {
       this._setupSwipe();
     } else if (this._mc) {
@@ -66,6 +87,8 @@ export class HaDrawer extends DrawerBase {
         position: fixed;
         top: 0;
         border-color: var(--divider-color, rgba(0, 0, 0, 0.12));
+        inset-inline-start: 0 !important;
+        inset-inline-end: initial !important;
       }
       .mdc-drawer.mdc-drawer--modal.mdc-drawer--open {
         z-index: 200;

src/components/ha-expansion-panel.ts

@@ -168,12 +168,18 @@ export class HaExpansionPanel extends LitElement {
       }
 
       .summary-icon {
+        transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        direction: var(--direction);
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
       }
 
       :host([leftchevron]) .summary-icon {
         margin-left: 0;
         margin-right: 8px;
+        margin-inline-start: 0;
+        margin-inline-end: 8px;
       }
 
       #summary {
@@ -188,11 +194,6 @@ export class HaExpansionPanel extends LitElement {
         outline: none;
       }
 
-      .summary-icon {
-        transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
-        direction: var(--direction);
-      }
-
       .summary-icon.expanded {
         transform: rotate(180deg);
       }

src/components/ha-file-upload.ts

@@ -31,11 +31,11 @@ export class HaFileUpload extends LitElement {
 
   @property() public supports?: string;
 
-  @property() public value?: File | File[] | FileList | string;
+  @property({ type: Object }) public value?: File | File[] | FileList | string;
 
   @property({ type: Boolean }) public multiple = false;
 
-  @property({ type: Boolean, reflect: true }) public disabled: boolean = false;
+  @property({ type: Boolean, reflect: true }) public disabled = false;
 
   @property({ type: Boolean }) public uploading = false;
 
@@ -282,6 +282,8 @@ export class HaFileUpload extends LitElement {
       }
       .value ha-svg-icon {
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
       }
       .big-icon {
         --mdc-icon-size: 48px;

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

@@ -12,9 +12,9 @@ import "../ha-checkbox";
 
 @customElement("ha-form-boolean")
 export class HaFormBoolean extends LitElement implements HaFormElement {
-  @property() public schema!: HaFormBooleanSchema;
+  @property({ attribute: false }) public schema!: HaFormBooleanSchema;
 
-  @property() public data!: HaFormBooleanData;
+  @property({ attribute: false }) public data!: HaFormBooleanData;
 
   @property() public label!: string;