Add

Add date option
2025-10-16 07:09:38 +00:00 · 2025-10-08 09:38:17 +01:00 · 2025-10-08 09:30:56 +01:00
189 changed files with 3629 additions and 10058 deletions
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -36,14 +36,14 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@f443b600d91635bebf5b0d9ebc620189c0d6fba5 # v4.30.8
+        uses: github/codeql-action/init@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
        with:
          languages: ${{ matrix.language }}

      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@f443b600d91635bebf5b0d9ebc620189c0d6fba5 # v4.30.8
+        uses: github/codeql-action/autobuild@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6

      # ℹ️ Command-line programs to run using the OS shell.
      # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
      #   make release

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@f443b600d91635bebf5b0d9ebc620189c0d6fba5 # v4.30.8
+        uses: github/codeql-action/analyze@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -55,7 +55,7 @@ jobs:
          script/release

      - name: Upload release assets
-        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
        with:
          files: |
            dist/*.whl
@@ -108,7 +108,7 @@ jobs:
      - name: Tar folder
        run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
      - name: Upload release asset
-        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
        with:
          files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz

@@ -137,6 +137,6 @@ jobs:
      - name: Tar folder
        run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
      - name: Upload release asset
-        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
        with:
          files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz
--- a/gallery/src/pages/components/ha-wa-dialog.markdown
+++ b/gallery/src/pages/components/ha-wa-dialog.markdown
@@ -1,3 +0,0 @@
---
-title: Dialog (ha-wa-dialog)
---
--- a/gallery/src/pages/components/ha-wa-dialog.ts
+++ b/gallery/src/pages/components/ha-wa-dialog.ts
@@ -1,523 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import { mdiCog, mdiHelp } from "@mdi/js";
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-dialog-footer";
-import "../../../../src/components/ha-form/ha-form";
-import "../../../../src/components/ha-icon-button";
-import "../../../../src/components/ha-wa-dialog";
-import type { HaFormSchema } from "../../../../src/components/ha-form/types";
-
-const SCHEMA: HaFormSchema[] = [
-  { type: "string", name: "Name", default: "", autofocus: true },
-  { type: "string", name: "Email", default: "" },
-];
-
-type DialogType =
-  | false
-  | "basic"
-  | "basic-subtitle-below"
-  | "basic-subtitle-above"
-  | "form"
-  | "actions";
-
-@customElement("demo-components-ha-wa-dialog")
-export class DemoHaWaDialog extends LitElement {
-  @state() private _openDialog: DialogType = false;
-
-  protected render() {
-    return html`
-      <div class="content">
-        <h1>Dialog <code>&lt;ha-wa-dialog&gt;</code></h1>
-
-        <p class="subtitle">Dialog component built with WebAwesome.</p>
-
-        <h2>Demos</h2>
-
-        <div class="buttons">
-          <ha-button @click=${this._handleOpenDialog("basic")}
-            >Basic dialog</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("basic-subtitle-below")}
-            >Basic dialog with subtitle below</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("basic-subtitle-above")}
-            >Basic dialog with subtitle above</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("form")}
-            >Dialog with form</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("actions")}
-            >Dialog with actions</ha-button
-          >
-        </div>
-
-        <ha-wa-dialog
-          .open=${this._openDialog === "basic"}
-          header-title="Basic dialog"
-          @closed=${this._handleClosed}
-        >
-          <div>Dialog content</div>
-        </ha-wa-dialog>
-
-        <ha-wa-dialog
-          .open=${this._openDialog === "basic-subtitle-below"}
-          header-title="Basic dialog with subtitle"
-          header-subtitle="This is a basic dialog with a subtitle below"
-          @closed=${this._handleClosed}
-        >
-          <div>Dialog content</div>
-        </ha-wa-dialog>
-
-        <ha-wa-dialog
-          .open=${this._openDialog === "basic-subtitle-above"}
-          header-title="Dialog with subtitle above"
-          header-subtitle="This is a basic dialog with a subtitle above"
-          header-subtitle-position="above"
-          @closed=${this._handleClosed}
-        >
-          <div>Dialog content</div>
-        </ha-wa-dialog>
-
-        <ha-wa-dialog
-          .open=${this._openDialog === "form"}
-          header-title="Dialog with form"
-          header-subtitle="This is a dialog with a form and a footer"
-          prevent-scrim-close
-          @closed=${this._handleClosed}
-        >
-          <ha-form autofocus .schema=${SCHEMA}></ha-form>
-          <ha-dialog-footer slot="footer">
-            <ha-button
-              data-dialog="close"
-              slot="secondaryAction"
-              variant="plain"
-              >Cancel</ha-button
-            >
-            <ha-button data-dialog="close" slot="primaryAction" variant="accent"
-              >Submit</ha-button
-            >
-          </ha-dialog-footer>
-        </ha-wa-dialog>
-
-        <ha-wa-dialog
-          .open=${this._openDialog === "actions"}
-          header-title="Dialog with actions"
-          header-subtitle="This is a dialog with header actions"
-          @closed=${this._handleClosed}
-        >
-          <div slot="headerActionItems">
-            <ha-icon-button label="Settings" path=${mdiCog}></ha-icon-button>
-            <ha-icon-button label="Help" path=${mdiHelp}></ha-icon-button>
-          </div>
-
-          <div>Dialog content</div>
-        </ha-wa-dialog>
-
-        <h2>Design</h2>
-
-        <h3>Width</h3>
-
-        <p>There are multiple widths available for the dialog.</p>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Value</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>small</code></td>
-              <td><code>min(320px, var(--full-width))</code></td>
-            </tr>
-            <tr>
-              <td><code>medium</code></td>
-              <td><code>min(580px, var(--full-width))</code></td>
-            </tr>
-            <tr>
-              <td><code>large</code></td>
-              <td><code>min(720px, var(--full-width))</code></td>
-            </tr>
-            <tr>
-              <td><code>full</code></td>
-              <td><code>var(--full-width)</code></td>
-            </tr>
-          </tbody>
-        </table>
-
-        <p>
-          <code>--full-width</code> is calculated based on the available width
-          of the screen. 95vw is the maximum width of the dialog on a large
-          screen, while on a small screen it is 100vw minus the safe area
-          insets.
-        </p>
-
-        <p>Dialogs have a default width of <code>medium</code>.</p>
-
-        <h3>Prevent scrim close</h3>
-
-        <p>
-          You can prevent the dialog from being closed by clicking the
-          scrim/overlay. This is allowed by default.
-        </p>
-
-        <h3>Header</h3>
-
-        <p>The header contains a title, a subtitle and action items.</p>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Slot</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>header</code></td>
-              <td>The entire header area.</td>
-            </tr>
-            <tr>
-              <td><code>headerTitle</code></td>
-              <td>The header title text.</td>
-            </tr>
-            <tr>
-              <td><code>headerSubtitle</code></td>
-              <td>The header subtitle text.</td>
-            </tr>
-            <tr>
-              <td><code>headerActionItems</code></td>
-              <td>The header action items.</td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h4>Header title</h4>
-
-        <p>The header title is a text string.</p>
-
-        <h4>Header subtitle</h4>
-
-        <p>The header subtitle is a text string.</p>
-
-        <h4>Header action items</h4>
-
-        <p>
-          The header action items usually containing icon buttons and/or menu
-          buttons.
-        </p>
-
-        <h3>Body</h3>
-
-        <p>The body is the content of the dialog.</p>
-
-        <h3>Footer</h3>
-
-        <p>The footer is the footer of the dialog.</p>
-
-        <p>
-          It is recommended to use the <code>ha-dialog-footer</code> component
-          for the footer and to style the buttons inside the footer as so:
-        </p>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Slot</th>
-              <th>Description</th>
-              <th>Variant to use</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>secondaryAction</code></td>
-              <td>The secondary action button(s).</td>
-              <td><code>plain</code></td>
-            </tr>
-            <tr>
-              <td><code>primaryAction</code></td>
-              <td>The primary action button(s).</td>
-              <td><code>accent</code></td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h2>Implementation</h2>
-
-        <h3>Example Usage</h3>
-
-        <pre><code>&lt;ha-wa-dialog
-  open
-  header-title="Dialog title"
-  header-subtitle="Dialog subtitle"
-  prevent-scrim-close
-&gt;
-  &lt;div slot="headerActionItems"&gt;
-    &lt;ha-icon-button label="Settings" path="mdiCog"&gt;&lt;/ha-icon-button&gt;
-    &lt;ha-icon-button label="Help" path="mdiHelp"&gt;&lt;/ha-icon-button&gt;
-  &lt;/div&gt;
-  &lt;div&gt;Dialog content&lt;/div&gt;
-  &lt;ha-dialog-footer slot="footer"&gt;
-    &lt;ha-button data-dialog="close" slot="secondaryAction" variant="plain"
-      &gt;Cancel&lt;/ha-button
-    &gt;
-    &lt;ha-button slot="primaryAction" variant="accent"&gt;Submit&lt;/ha-button&gt;
-  &lt;/ha-dialog-footer&gt;
-&lt;/ha-wa-dialog&gt;</code></pre>
-
-        <h3>API</h3>
-
-        <p>
-          This component is based on the webawesome dialog component. Check the
-          <a
-            href="https://webawesome.com/docs/components/dialog/"
-            target="_blank"
-            rel="noopener noreferrer"
-            >webawesome documentation</a
-          >
-          for more details.
-        </p>
-
-        <h4>Attributes</h4>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Attribute</th>
-              <th>Description</th>
-              <th>Default</th>
-              <th>Options</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>open</code></td>
-              <td>Controls the dialog open state.</td>
-              <td><code>false</code></td>
-              <td><code>false</code>, <code>true</code></td>
-            </tr>
-            <tr>
-              <td><code>width</code></td>
-              <td>Preferred dialog width preset.</td>
-              <td><code>medium</code></td>
-              <td>
-                <code>small</code>, <code>medium</code>, <code>large</code>,
-                <code>full</code>
-              </td>
-            </tr>
-            <tr>
-              <td><code>prevent-scrim-close</code></td>
-              <td>
-                Prevents closing the dialog by clicking the scrim/overlay.
-              </td>
-              <td><code>false</code></td>
-              <td><code>true</code></td>
-            </tr>
-            <tr>
-              <td><code>header-title</code></td>
-              <td>Header title text when no custom title slot is provided.</td>
-              <td></td>
-              <td></td>
-            </tr>
-            <tr>
-              <td><code>header-subtitle</code></td>
-              <td>
-                Header subtitle text when no custom subtitle slot is provided.
-              </td>
-              <td></td>
-              <td></td>
-            </tr>
-            <tr>
-              <td><code>header-subtitle-position</code></td>
-              <td>Position of the subtitle relative to the title.</td>
-              <td><code>below</code></td>
-              <td><code>above</code>, <code>below</code></td>
-            </tr>
-            <tr>
-              <td><code>flexcontent</code></td>
-              <td>
-                Makes the dialog body a flex container for flexible layouts.
-              </td>
-              <td><code>false</code></td>
-              <td><code>false</code>, <code>true</code></td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h4>CSS Custom Properties</h4>
-
-        <table>
-          <thead>
-            <tr>
-              <th>CSS Property</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>--dialog-content-padding</code></td>
-              <td>Padding for dialog content sections.</td>
-            </tr>
-            <tr>
-              <td><code>--ha-dialog-show-duration</code></td>
-              <td>Show animation duration.</td>
-            </tr>
-            <tr>
-              <td><code>--ha-dialog-hide-duration</code></td>
-              <td>Hide animation duration.</td>
-            </tr>
-            <tr>
-              <td><code>--ha-dialog-surface-background</code></td>
-              <td>Dialog background color.</td>
-            </tr>
-            <tr>
-              <td><code>--ha-dialog-border-radius</code></td>
-              <td>Border radius of the dialog surface.</td>
-            </tr>
-            <tr>
-              <td><code>--dialog-z-index</code></td>
-              <td>Z-index for the dialog.</td>
-            </tr>
-            <tr>
-              <td><code>--dialog-surface-position</code></td>
-              <td>CSS position of the dialog surface.</td>
-            </tr>
-            <tr>
-              <td><code>--dialog-surface-margin-top</code></td>
-              <td>Top margin for the dialog surface.</td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h4>Events</h4>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Event</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>opened</code></td>
-              <td>Fired when the dialog is shown.</td>
-            </tr>
-            <tr>
-              <td><code>closed</code></td>
-              <td>Fired after the dialog is hidden.</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    `;
-  }
-
-  private _handleOpenDialog = (dialog: DialogType) => () => {
-    this._openDialog = dialog;
-  };
-
-  private _handleClosed = () => {
-    this._openDialog = false;
-  };
-
-  static styles = [
-    css`
-      :host {
-        display: block;
-        padding: var(--ha-space-4);
-      }
-
-      .content {
-        max-width: 1000px;
-        margin: 0 auto;
-      }
-
-      h1 {
-        margin-top: 0;
-        margin-bottom: var(--ha-space-2);
-      }
-
-      h2 {
-        margin-top: var(--ha-space-6);
-        margin-bottom: var(--ha-space-3);
-      }
-
-      h3,
-      h4 {
-        margin-top: var(--ha-space-4);
-        margin-bottom: var(--ha-space-2);
-      }
-
-      p {
-        margin: var(--ha-space-2) 0;
-        line-height: 1.6;
-      }
-
-      .subtitle {
-        color: var(--secondary-text-color);
-        font-size: 1.1em;
-        margin-bottom: var(--ha-space-4);
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        margin: var(--ha-space-3) 0;
-      }
-
-      th,
-      td {
-        text-align: left;
-        padding: var(--ha-space-2);
-        border-bottom: 1px solid var(--divider-color);
-      }
-
-      th {
-        font-weight: 500;
-      }
-
-      code {
-        background-color: var(--secondary-background-color);
-        padding: 2px 6px;
-        border-radius: 4px;
-        font-family: monospace;
-        font-size: 0.9em;
-      }
-
-      pre {
-        background-color: var(--secondary-background-color);
-        padding: var(--ha-space-3);
-        border-radius: 8px;
-        overflow-x: auto;
-        margin: var(--ha-space-3) 0;
-      }
-
-      pre code {
-        background-color: transparent;
-        padding: 0;
-      }
-
-      .buttons {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: var(--ha-space-2);
-        margin: var(--ha-space-4) 0;
-      }
-
-      a {
-        color: var(--primary-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-wa-dialog": DemoHaWaDialog;
-  }
-}
--- a/package.json
+++ b/package.json
@@ -34,25 +34,25 @@
    "@codemirror/legacy-modes": "6.5.2",
    "@codemirror/search": "6.5.11",
    "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.5",
+    "@codemirror/view": "6.38.4",
    "@date-fns/tz": "1.4.1",
    "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.18.2",
-    "@formatjs/intl-displaynames": "6.8.13",
-    "@formatjs/intl-durationformat": "0.7.6",
+    "@formatjs/intl-datetimeformat": "6.18.1",
+    "@formatjs/intl-displaynames": "6.8.12",
+    "@formatjs/intl-durationformat": "0.7.5",
    "@formatjs/intl-getcanonicallocales": "2.5.6",
-    "@formatjs/intl-listformat": "7.7.13",
-    "@formatjs/intl-locale": "4.2.13",
-    "@formatjs/intl-numberformat": "8.15.6",
-    "@formatjs/intl-pluralrules": "5.4.6",
-    "@formatjs/intl-relativetimeformat": "11.4.13",
+    "@formatjs/intl-listformat": "7.7.12",
+    "@formatjs/intl-locale": "4.2.12",
+    "@formatjs/intl-numberformat": "8.15.5",
+    "@formatjs/intl-pluralrules": "5.4.5",
+    "@formatjs/intl-relativetimeformat": "11.4.12",
    "@fullcalendar/core": "6.1.19",
    "@fullcalendar/daygrid": "6.1.19",
    "@fullcalendar/interaction": "6.1.19",
    "@fullcalendar/list": "6.1.19",
    "@fullcalendar/luxon3": "6.1.19",
    "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-beta.6.ha.4",
+    "@home-assistant/webawesome": "3.0.0-beta.6.ha.1",
    "@lezer/highlight": "1.2.1",
    "@lit-labs/motion": "1.0.9",
    "@lit-labs/observers": "2.0.6",
@@ -99,7 +99,7 @@
    "barcode-detector": "3.0.6",
    "color-name": "2.0.2",
    "comlink": "4.4.2",
-    "core-js": "3.46.0",
+    "core-js": "3.45.1",
    "cropperjs": "1.6.2",
    "culori": "4.0.2",
    "date-fns": "4.1.0",
@@ -114,7 +114,7 @@
    "hls.js": "1.6.13",
    "home-assistant-js-websocket": "9.5.0",
    "idb-keyval": "6.2.2",
-    "intl-messageformat": "10.7.18",
+    "intl-messageformat": "10.7.17",
    "js-yaml": "4.1.0",
    "leaflet": "1.9.4",
    "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -122,7 +122,7 @@
    "lit": "3.3.1",
    "lit-html": "3.3.1",
    "luxon": "3.7.2",
-    "marked": "16.4.0",
+    "marked": "16.3.0",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.3",
    "object-hash": "3.0.0",
@@ -135,7 +135,7 @@
    "stacktrace-js": "2.0.2",
    "superstruct": "2.0.2",
    "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.6",
+    "ua-parser-js": "2.0.5",
    "vue": "2.7.16",
    "vue2-daterange-picker": "0.6.8",
    "weekstart": "2.0.0",
@@ -152,12 +152,12 @@
    "@babel/helper-define-polyfill-provider": "0.6.5",
    "@babel/plugin-transform-runtime": "7.28.3",
    "@babel/preset-env": "7.28.3",
-    "@bundle-stats/plugin-webpack-filter": "4.21.5",
+    "@bundle-stats/plugin-webpack-filter": "4.21.4",
    "@lokalise/node-api": "15.3.0",
    "@octokit/auth-oauth-device": "8.0.2",
    "@octokit/plugin-retry": "8.0.2",
    "@octokit/rest": "22.0.0",
-    "@rsdoctor/rspack-plugin": "1.3.2",
+    "@rsdoctor/rspack-plugin": "1.3.1",
    "@rspack/core": "1.5.8",
    "@rspack/dev-server": "1.1.4",
    "@types/babel__plugin-transform-runtime": "7.9.5",
@@ -167,7 +167,7 @@
    "@types/culori": "4.0.1",
    "@types/html-minifier-terser": "7.0.2",
    "@types/js-yaml": "4.0.9",
-    "@types/leaflet": "1.9.21",
+    "@types/leaflet": "1.9.20",
    "@types/leaflet-draw": "1.0.13",
    "@types/leaflet.markercluster": "1.5.6",
    "@types/lodash.merge": "4.6.9",
@@ -203,7 +203,7 @@
    "husky": "9.1.7",
    "jsdom": "27.0.0",
    "jszip": "3.10.1",
-    "lint-staged": "16.2.4",
+    "lint-staged": "16.2.3",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
    "lodash.template": "4.5.0",
@@ -217,7 +217,7 @@
    "terser-webpack-plugin": "5.3.14",
    "ts-lit-plugin": "2.0.2",
    "typescript": "5.9.3",
-    "typescript-eslint": "8.46.0",
+    "typescript-eslint": "8.45.0",
    "vite-tsconfig-paths": "5.1.4",
    "vitest": "3.2.4",
    "webpack-stats-plugin": "1.1.3",
--- a/renovate.json
+++ b/renovate.json
@@ -9,7 +9,7 @@
    ":semanticCommitsDisabled",
    "group:monorepos",
    "group:recommended",
-    "security:minimumReleaseAgeNpm"
+    "npm:unpublishSafe"
  ],
  "enabledManagers": ["npm", "nvm"],
  "postUpdateOptions": ["yarnDedupeHighest"],
--- a/src/common/entity/compute_entity_name.ts
+++ b/src/common/entity/compute_entity_name.ts
@@ -61,9 +61,3 @@ export const computeEntityEntryName = (

  return name;
 };
-
-export const entityUseDeviceName = (
-  stateObj: HassEntity,
-  entities: HomeAssistant["entities"],
-  devices: HomeAssistant["devices"]
-): boolean => !computeEntityName(stateObj, entities, devices);
--- a/src/common/entity/compute_entity_name_display.ts
+++ b/src/common/entity/compute_entity_name_display.ts
@@ -1,109 +0,0 @@
-import type { HassEntity } from "home-assistant-js-websocket";
-import type { HomeAssistant } from "../../types";
-import { ensureArray } from "../array/ensure-array";
-import { computeAreaName } from "./compute_area_name";
-import { computeDeviceName } from "./compute_device_name";
-import { computeEntityName, entityUseDeviceName } from "./compute_entity_name";
-import { computeFloorName } from "./compute_floor_name";
-import { getEntityContext } from "./context/get_entity_context";
-
-const DEFAULT_SEPARATOR = " ";
-
-export const DEFAULT_ENTITY_NAME = [
-  { type: "device" },
-  { type: "entity" },
-] satisfies EntityNameItem[];
-
-export type EntityNameItem =
-  | {
-      type: "entity" | "device" | "area" | "floor";
-    }
-  | {
-      type: "text";
-      text: string;
-    };
-
-export interface EntityNameOptions {
-  separator?: string;
-}
-
-export const computeEntityNameDisplay = (
-  stateObj: HassEntity,
-  name: EntityNameItem | EntityNameItem[] | undefined,
-  entities: HomeAssistant["entities"],
-  devices: HomeAssistant["devices"],
-  areas: HomeAssistant["areas"],
-  floors: HomeAssistant["floors"],
-  options?: EntityNameOptions
-) => {
-  let items = ensureArray(name || DEFAULT_ENTITY_NAME);
-
-  const separator = options?.separator ?? DEFAULT_SEPARATOR;
-
-  // If all items are text, just join them
-  if (items.every((n) => n.type === "text")) {
-    return items.map((item) => item.text).join(separator);
-  }
-
-  const useDeviceName = entityUseDeviceName(stateObj, entities, devices);
-
-  // If entity uses device name, and device is not already included, replace it with device name
-  if (useDeviceName) {
-    const hasDevice = items.some((n) => n.type === "device");
-    if (!hasDevice) {
-      items = items.map((n) => (n.type === "entity" ? { type: "device" } : n));
-    }
-  }
-
-  const names = computeEntityNameList(
-    stateObj,
-    items,
-    entities,
-    devices,
-    areas,
-    floors
-  );
-
-  // If after processing there is only one name, return that
-  if (names.length === 1) {
-    return names[0] || "";
-  }
-
-  return names.filter((n) => n).join(separator);
-};
-
-export const computeEntityNameList = (
-  stateObj: HassEntity,
-  name: EntityNameItem[],
-  entities: HomeAssistant["entities"],
-  devices: HomeAssistant["devices"],
-  areas: HomeAssistant["areas"],
-  floors: HomeAssistant["floors"]
-): (string | undefined)[] => {
-  const { device, area, floor } = getEntityContext(
-    stateObj,
-    entities,
-    devices,
-    areas,
-    floors
-  );
-
-  const names = name.map((item) => {
-    switch (item.type) {
-      case "entity":
-        return computeEntityName(stateObj, entities, devices);
-      case "device":
-        return device ? computeDeviceName(device) : undefined;
-      case "area":
-        return area ? computeAreaName(area) : undefined;
-      case "floor":
-        return floor ? computeFloorName(floor) : undefined;
-      case "text":
-        return item.text;
-      default:
-        return "";
-    }
-  });
-
-  return names;
-};
--- a/src/common/entity/context/get_area_context.ts
+++ b/src/common/entity/context/get_area_context.ts
@@ -8,10 +8,10 @@ interface AreaContext {
 }
 export const getAreaContext = (
  area: AreaRegistryEntry,
-  hassFloors: HomeAssistant["floors"]
+  hass: HomeAssistant
 ): AreaContext => {
  const floorId = area.floor_id;
-  const floor = floorId ? hassFloors[floorId] : undefined;
+  const floor = floorId ? hass.floors[floorId] : undefined;

  return {
    area: area,
--- a/src/common/translations/entity-state.ts
+++ b/src/common/translations/entity-state.ts
@@ -1,12 +1,13 @@
 import type { HassConfig, HassEntity } from "home-assistant-js-websocket";
 import type { FrontendLocaleData } from "../../data/translation";
 import type { HomeAssistant } from "../../types";
-import {
-  computeEntityNameDisplay,
-  type EntityNameItem,
-  type EntityNameOptions,
-} from "../entity/compute_entity_name_display";
 import type { LocalizeFunc } from "./localize";
+import { computeEntityName } from "../entity/compute_entity_name";
+import { computeDeviceName } from "../entity/compute_device_name";
+import { getEntityContext } from "../entity/context/get_entity_context";
+import { computeAreaName } from "../entity/compute_area_name";
+import { computeFloorName } from "../entity/compute_floor_name";
+import { ensureArray } from "../array/ensure-array";

 export type FormatEntityStateFunc = (
  stateObj: HassEntity,
@@ -26,8 +27,8 @@ export type EntityNameType = "entity" | "device" | "area" | "floor";

 export type FormatEntityNameFunc = (
  stateObj: HassEntity,
-  name: EntityNameItem | EntityNameItem[],
-  options?: EntityNameOptions
+  type: EntityNameType | EntityNameType[],
+  separator?: string
 ) => string;

 export const computeFormatFunctions = async (
@@ -74,15 +75,45 @@ export const computeFormatFunctions = async (
      ),
    formatEntityAttributeName: (stateObj, attribute) =>
      computeAttributeNameDisplay(localize, stateObj, entities, attribute),
-    formatEntityName: (stateObj, name, options) =>
-      computeEntityNameDisplay(
+    formatEntityName: (stateObj, type, separator = " ") => {
+      const types = ensureArray(type);
+      const namesList: (string | undefined)[] = [];
+
+      const { device, area, floor } = getEntityContext(
        stateObj,
-        name,
        entities,
        devices,
        areas,
-        floors,
-        options
-      ),
+        floors
+      );
+
+      for (const t of types) {
+        switch (t) {
+          case "entity": {
+            namesList.push(computeEntityName(stateObj, entities, devices));
+            break;
+          }
+          case "device": {
+            if (device) {
+              namesList.push(computeDeviceName(device));
+            }
+            break;
+          }
+          case "area": {
+            if (area) {
+              namesList.push(computeAreaName(area));
+            }
+            break;
+          }
+          case "floor": {
+            if (floor) {
+              namesList.push(computeFloorName(floor));
+            }
+            break;
+          }
+        }
+      }
+      return namesList.filter((name) => name !== undefined).join(separator);
+    },
  };
 };
--- a/src/common/util/xss.ts
+++ b/src/common/util/xss.ts
@@ -1,8 +0,0 @@
-import xss from "xss";
-
-export const filterXSS = (html: string) =>
-  xss(html, {
-    whiteList: {},
-    stripIgnoreTag: true,
-    stripIgnoreTagBody: true,
-  });
--- a/src/components/chart/down-sample.ts
+++ b/src/components/chart/down-sample.ts
@@ -1,22 +1,21 @@
 import type { LineSeriesOption } from "echarts";

-export function downSampleLineData<
-  T extends [number, number] | NonNullable<LineSeriesOption["data"]>[number],
->(
-  data: T[] | undefined,
-  maxDetails: number,
+export function downSampleLineData(
+  data: LineSeriesOption["data"],
+  chartWidth: number,
  minX?: number,
  maxX?: number
-): T[] {
-  if (!data) {
-    return [];
+) {
+  if (!data || data.length < 10) {
+    return data;
  }
-  if (data.length <= maxDetails) {
+  const width = chartWidth * window.devicePixelRatio;
+  if (data.length <= width) {
    return data;
  }
  const min = minX ?? getPointData(data[0]!)[0];
  const max = maxX ?? getPointData(data[data.length - 1]!)[0];
-  const step = Math.ceil((max - min) / Math.floor(maxDetails));
+  const step = Math.floor((max - min) / width);
  const frames = new Map<
    number,
    {
@@ -48,7 +47,7 @@ export function downSampleLineData<
  }

  // Convert frames back to points
-  const result: T[] = [];
+  const result: typeof data = [];
  for (const [_i, frame] of frames) {
    // Use min/max points to preserve visual accuracy
    // The order of the data must be preserved so max may be before min
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -22,12 +22,11 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { listenMediaQuery } from "../../common/dom/media_query";
 import { themesContext } from "../../data/context";
 import type { Themes } from "../../data/ws-themes";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts";
 import type { HomeAssistant } from "../../types";
 import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
 import "../ha-icon-button";
-import { filterXSS } from "../../common/util/xss";
 import { formatTimeLabel } from "./axis-label";
 import { downSampleLineData } from "./down-sample";

@@ -346,7 +345,7 @@ export class HaChartBase extends LitElement {
      if (this.chart) {
        this.chart.dispose();
      }
-      const echarts = (await import("../../resources/echarts/echarts")).default;
+      const echarts = (await import("../../resources/echarts")).default;

      if (this.extraComponents?.length) {
        echarts.use(this.extraComponents);
@@ -805,15 +804,14 @@ export class HaChartBase extends LitElement {
            sampling: undefined,
            data: downSampleLineData(
              data as LineSeriesOption["data"],
-              this.clientWidth * window.devicePixelRatio,
+              this.clientWidth,
              minX,
              maxX
            ),
          };
        }
      }
-      const name = filterXSS(String(s.name ?? s.id ?? ""));
-      return { ...s, name, data };
+      return { ...s, data };
    });
    return series as ECOption["series"];
  }
--- a/src/components/chart/ha-network-graph.ts
+++ b/src/components/chart/ha-network-graph.ts
@@ -6,7 +6,7 @@ import type { TopLevelFormatterParams } from "echarts/types/dist/shared";
 import { mdiFormatTextVariant, mdiGoogleCirclesGroup } from "@mdi/js";
 import memoizeOne from "memoize-one";
 import { listenMediaQuery } from "../../common/dom/media_query";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts";
 import "./ha-chart-base";
 import type { HaChartBase } from "./ha-chart-base";
 import type { HomeAssistant } from "../../types";
--- a/src/components/chart/ha-sankey-chart.ts
+++ b/src/components/chart/ha-sankey-chart.ts
@@ -1,15 +1,14 @@
 import { customElement, property, state } from "lit/decorators";
 import { LitElement, html, css } from "lit";
 import type { EChartsType } from "echarts/core";
+import type { CallbackDataParams } from "echarts/types/dist/shared";
 import type { SankeySeriesOption } from "echarts/types/dist/echarts";
-import type { CallbackDataParams } from "echarts/types/src/util/types";
+import { SankeyChart } from "echarts/charts";
 import memoizeOne from "memoize-one";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
-import SankeyChart from "../../resources/echarts/components/sankey/install";
 import type { HomeAssistant } from "../../types";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts";
 import { measureTextWidth } from "../../util/text";
-import { filterXSS } from "../../common/util/xss";
 import "./ha-chart-base";
 import { NODE_SIZE } from "../trace/hat-graph-const";
 import "../ha-alert";
@@ -39,7 +38,7 @@ type ProcessedLink = Link & {

 const OVERFLOW_MARGIN = 5;
 const FONT_SIZE = 12;
-const NODE_GAP = 6;
+const NODE_GAP = 8;
 const LABEL_DISTANCE = 5;

@customElement("ha-sankey-chart")
@@ -93,12 +92,12 @@ export class HaSankeyChart extends LitElement {
      : data.value;
    if (data.id) {
      const node = this.data.nodes.find((n) => n.id === data.id);
-      return `${params.marker} ${filterXSS(node?.label ?? data.id)}<br>${value}`;
+      return `${params.marker} ${node?.label ?? data.id}<br>${value}`;
    }
    if (data.source && data.target) {
      const source = this.data.nodes.find((n) => n.id === data.source);
      const target = this.data.nodes.find((n) => n.id === data.target);
-      return `${filterXSS(source?.label ?? data.source)} → ${filterXSS(target?.label ?? data.target)}<br>${value}`;
+      return `${source?.label ?? data.source} → ${target?.label ?? data.target}<br>${value}`;
    }
    return null;
  };
@@ -164,7 +163,6 @@ export class HaSankeyChart extends LitElement {
      lineStyle: {
        color: "gradient",
        opacity: 0.4,
-        curveness: 0.5,
      },
      layoutIterations: 0,
      label: {
--- a/src/components/chart/state-history-chart-line.ts
+++ b/src/components/chart/state-history-chart-line.ts
@@ -11,7 +11,7 @@ import { computeRTL } from "../../common/util/compute_rtl";
 import type { LineChartEntity, LineChartState } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import {
  getNumberFormatOptions,
--- a/src/components/chart/state-history-chart-timeline.ts
+++ b/src/components/chart/state-history-chart-timeline.ts
@@ -15,8 +15,8 @@ import type { TimelineEntity } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import { computeTimelineColor } from "./timeline-color";
-import type { ECOption } from "../../resources/echarts/echarts";
-import echarts from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts";
+import echarts from "../../resources/echarts";
 import { luminosity } from "../../common/color/rgb";
 import { hex2rgb } from "../../common/color/convert-color";
 import { measureTextWidth } from "../../util/text";
--- a/src/components/chart/statistics-chart.ts
+++ b/src/components/chart/statistics-chart.ts
@@ -29,7 +29,7 @@ import {
  getStatisticMetadata,
  statisticsHaveType,
 } from "../../data/recorder";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts";
 import type { HomeAssistant } from "../../types";
 import type { CustomLegendOption } from "./ha-chart-base";
 import "./ha-chart-base";
--- a/src/components/data-table/sort-filter-worker.ts
+++ b/src/components/data-table/sort-filter-worker.ts
@@ -1,9 +1,6 @@
 import { expose } from "comlink";
-import Fuse from "fuse.js";
-import memoizeOne from "memoize-one";
-import { ipCompare, stringCompare } from "../../common/string/compare";
+import { stringCompare, ipCompare } from "../../common/string/compare";
 import { stripDiacritics } from "../../common/string/strip-diacritics";
-import { HaFuse } from "../../resources/fuse";
 import type {
  ClonedDataTableColumnData,
  DataTableRowData,
@@ -11,48 +8,29 @@ import type {
  SortingDirection,
 } from "./ha-data-table";

-const fuseIndex = memoizeOne(
-  (data: DataTableRowData[], columns: SortableColumnContainer) => {
-    const searchKeys = new Set<string>();
-    Object.entries(columns).forEach(([key, column]) => {
-      if (column.filterable) {
-        searchKeys.add(
-          column.filterKey
-            ? `${column.valueColumn || key}.${column.filterKey}`
-            : key
-        );
-      }
-    });
-    return Fuse.createIndex([...searchKeys], data);
-  }
-);
-
 const filterData = (
  data: DataTableRowData[],
  columns: SortableColumnContainer,
  filter: string
 ) => {
  filter = stripDiacritics(filter.toLowerCase());
+  return data.filter((row) =>
+    Object.entries(columns).some((columnEntry) => {
+      const [key, column] = columnEntry;
+      if (column.filterable) {
+        const value = String(
+          column.filterKey
+            ? row[column.valueColumn || key][column.filterKey]
+            : row[column.valueColumn || key]
+        );

-  if (filter === "") {
-    return data;
-  }
-
-  const index = fuseIndex(data, columns);
-
-  const fuse = new HaFuse(
-    data,
-    { shouldSort: false, minMatchCharLength: 1 },
-    index
+        if (stripDiacritics(value).toLowerCase().includes(filter)) {
+          return true;
+        }
+      }
+      return false;
+    })
  );
-
-  const searchResults = fuse.multiTermsSearch(filter);
-
-  if (searchResults) {
-    return searchResults.map((result) => result.item);
-  }
-
-  return data;
 };

 const sortData = (
--- a/src/components/device/ha-device-picker.ts
+++ b/src/components/device/ha-device-picker.ts
@@ -5,18 +5,24 @@ import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
-import { computeDeviceName } from "../../common/entity/compute_device_name";
+import {
+  computeDeviceName,
+  computeDeviceNameDisplay,
+} from "../../common/entity/compute_device_name";
+import { computeDomain } from "../../common/entity/compute_domain";
 import { getDeviceContext } from "../../common/entity/context/get_device_context";
 import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
 import {
-  getDevices,
-  type DevicePickerItem,
+  getDeviceEntityDisplayLookup,
+  type DeviceEntityDisplayLookup,
  type DeviceRegistryEntry,
 } from "../../data/device_registry";
+import { domainToName } from "../../data/integration";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";

 export type HaDevicePickerDeviceFilterFunc = (
  device: DeviceRegistryEntry
@@ -24,6 +30,11 @@ export type HaDevicePickerDeviceFilterFunc = (

 export type HaDevicePickerEntityFilterFunc = (entity: HassEntity) => boolean;

+interface DevicePickerItem extends PickerComboBoxItem {
+  domain?: string;
+  domain_name?: string;
+}
+
@customElement("ha-device-picker")
 export class HaDevicePicker extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -93,8 +104,6 @@ export class HaDevicePicker extends LitElement {

  @state() private _configEntryLookup: Record<string, ConfigEntry> = {};

-  private _getDevicesMemoized = memoizeOne(getDevices);
-
  protected firstUpdated(_changedProperties: PropertyValues): void {
    super.firstUpdated(_changedProperties);
    this._loadConfigEntries();
@@ -108,18 +117,162 @@ export class HaDevicePicker extends LitElement {
  }

  private _getItems = () =>
-    this._getDevicesMemoized(
-      this.hass,
+    this._getDevices(
+      this.hass.devices,
+      this.hass.entities,
      this._configEntryLookup,
      this.includeDomains,
      this.excludeDomains,
      this.includeDeviceClasses,
      this.deviceFilter,
      this.entityFilter,
-      this.excludeDevices,
-      this.value
+      this.excludeDevices
    );

+  private _getDevices = memoizeOne(
+    (
+      haDevices: HomeAssistant["devices"],
+      haEntities: HomeAssistant["entities"],
+      configEntryLookup: Record<string, ConfigEntry>,
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
+      includeDeviceClasses: this["includeDeviceClasses"],
+      deviceFilter: this["deviceFilter"],
+      entityFilter: this["entityFilter"],
+      excludeDevices: this["excludeDevices"]
+    ): DevicePickerItem[] => {
+      const devices = Object.values(haDevices);
+      const entities = Object.values(haEntities);
+
+      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
+
+      if (
+        includeDomains ||
+        excludeDomains ||
+        includeDeviceClasses ||
+        entityFilter
+      ) {
+        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
+      }
+
+      let inputDevices = devices.filter(
+        (device) => device.id === this.value || !device.disabled_by
+      );
+
+      if (includeDomains) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return false;
+          }
+          return deviceEntityLookup[device.id].some((entity) =>
+            includeDomains.includes(computeDomain(entity.entity_id))
+          );
+        });
+      }
+
+      if (excludeDomains) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return true;
+          }
+          return entities.every(
+            (entity) =>
+              !excludeDomains.includes(computeDomain(entity.entity_id))
+          );
+        });
+      }
+
+      if (excludeDevices) {
+        inputDevices = inputDevices.filter(
+          (device) => !excludeDevices!.includes(device.id)
+        );
+      }
+
+      if (includeDeviceClasses) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return false;
+          }
+          return deviceEntityLookup[device.id].some((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return (
+              stateObj.attributes.device_class &&
+              includeDeviceClasses.includes(stateObj.attributes.device_class)
+            );
+          });
+        });
+      }
+
+      if (entityFilter) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return false;
+          }
+          return devEntities.some((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return entityFilter(stateObj);
+          });
+        });
+      }
+
+      if (deviceFilter) {
+        inputDevices = inputDevices.filter(
+          (device) =>
+            // We always want to include the device of the current value
+            device.id === this.value || deviceFilter!(device)
+        );
+      }
+
+      const outputDevices = inputDevices.map<DevicePickerItem>((device) => {
+        const deviceName = computeDeviceNameDisplay(
+          device,
+          this.hass,
+          deviceEntityLookup[device.id]
+        );
+
+        const { area } = getDeviceContext(device, this.hass);
+
+        const areaName = area ? computeAreaName(area) : undefined;
+
+        const configEntry = device.primary_config_entry
+          ? configEntryLookup?.[device.primary_config_entry]
+          : undefined;
+
+        const domain = configEntry?.domain;
+        const domainName = domain
+          ? domainToName(this.hass.localize, domain)
+          : undefined;
+
+        return {
+          id: device.id,
+          label: "",
+          primary:
+            deviceName ||
+            this.hass.localize("ui.components.device-picker.unnamed_device"),
+          secondary: areaName,
+          domain: configEntry?.domain,
+          domain_name: domainName,
+          search_labels: [deviceName, areaName, domain, domainName].filter(
+            Boolean
+          ) as string[],
+          sorting_label: deviceName || "zzz",
+        };
+      });
+
+      return outputDevices;
+    }
+  );
+
  private _valueRenderer = memoizeOne(
    (configEntriesLookup: Record<string, ConfigEntry>) => (value: string) => {
      const deviceId = value;
--- a/src/components/entity/ha-entities-picker.ts
+++ b/src/components/entity/ha-entities-picker.ts
@@ -7,7 +7,7 @@ import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-sortable";
 import "./ha-entity-picker";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
+import type { HaEntityPickerEntityFilterFunc } from "./ha-entity-picker";

@customElement("ha-entities-picker")
 class HaEntitiesPicker extends LitElement {
--- a/src/components/entity/ha-entity-attribute-picker.ts
+++ b/src/components/entity/ha-entity-attribute-picker.ts
@@ -1,3 +1,4 @@
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -7,6 +8,8 @@ import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";

+export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
+
 interface AttributeOption {
  value: string;
  label: string;
--- a/src/components/entity/ha-entity-name-picker.ts
+++ b/src/components/entity/ha-entity-name-picker.ts
@@ -1,493 +0,0 @@
-import "@material/mwc-menu/mwc-menu-surface";
-import { mdiDrag, mdiPlus } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import type { IFuseOptions } from "fuse.js";
-import Fuse from "fuse.js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
-import { ensureArray } from "../../common/array/ensure-array";
-import { fireEvent } from "../../common/dom/fire_event";
-import { stopPropagation } from "../../common/dom/stop_propagation";
-import type { EntityNameItem } from "../../common/entity/compute_entity_name_display";
-import { getEntityContext } from "../../common/entity/context/get_entity_context";
-import type { EntityNameType } from "../../common/translations/entity-state";
-import type { LocalizeKeys } from "../../common/translations/localize";
-import type { HomeAssistant, ValueChangedEvent } from "../../types";
-import "../chips/ha-assist-chip";
-import "../chips/ha-chip-set";
-import "../chips/ha-input-chip";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
-import "../ha-sortable";
-
-interface EntityNameOption {
-  primary: string;
-  secondary?: string;
-  value: string;
-}
-
-const rowRenderer: ComboBoxLitRenderer<EntityNameOption> = (item) => html`
-  <ha-combo-box-item type="button">
-    <span slot="headline">${item.primary}</span>
-    ${item.secondary
-      ? html`<span slot="supporting-text">${item.secondary}</span>`
-      : nothing}
-  </ha-combo-box-item>
-`;
-
-const KNOWN_TYPES = new Set(["entity", "device", "area", "floor"]);
-
-const UNIQUE_TYPES = new Set(["entity", "device", "area", "floor"]);
-
-@customElement("ha-entity-name-picker")
-export class HaEntityNamePicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public entityId?: string;
-
-  @property({ attribute: false }) public value?:
-    | string
-    | EntityNameItem
-    | EntityNameItem[];
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public required = false;
-
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
-  @query(".container", true) private _container?: HTMLDivElement;
-
-  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
-
-  @state() private _opened = false;
-
-  private _editIndex?: number;
-
-  private _validOptions = memoizeOne((entityId?: string) => {
-    const options = new Set<string>();
-    if (!entityId) {
-      return options;
-    }
-
-    const stateObj = this.hass.states[entityId];
-
-    if (!stateObj) {
-      return options;
-    }
-
-    options.add("entity");
-
-    const context = getEntityContext(
-      stateObj,
-      this.hass.entities,
-      this.hass.devices,
-      this.hass.areas,
-      this.hass.floors
-    );
-
-    if (context.device) options.add("device");
-    if (context.area) options.add("area");
-    if (context.floor) options.add("floor");
-    return options;
-  });
-
-  private _getOptions = memoizeOne((entityId?: string) => {
-    if (!entityId) {
-      return [];
-    }
-
-    const options = this._validOptions(entityId);
-
-    const items = (
-      ["entity", "device", "area", "floor"] as const
-    ).map<EntityNameOption>((name) => {
-      const stateObj = this.hass.states[entityId];
-      const isValid = options.has(name);
-      const primary = this.hass.localize(
-        `ui.components.entity.entity-name-picker.types.${name}`
-      );
-      const secondary =
-        stateObj && isValid
-          ? this.hass.formatEntityName(stateObj, { type: name })
-          : this.hass.localize(
-              `ui.components.entity.entity-name-picker.types.${name}_missing` as LocalizeKeys
-            ) || "-";
-
-      return {
-        primary,
-        secondary,
-        value: name,
-      };
-    });
-
-    return items;
-  });
-
-  private _formatItem = (item: EntityNameItem) => {
-    if (item.type === "text") {
-      return `"${item.text}"`;
-    }
-    if (KNOWN_TYPES.has(item.type)) {
-      return this.hass.localize(
-        `ui.components.entity.entity-name-picker.types.${item.type as EntityNameType}`
-      );
-    }
-    return item.type;
-  };
-
-  protected render() {
-    const value = this._value;
-    const options = this._getOptions(this.entityId);
-    const validOptions = this._validOptions(this.entityId);
-
-    return html`
-      ${this.label ? html`<label>${this.label}</label>` : nothing}
-      <div class="container">
-        <ha-sortable
-          no-style
-          @item-moved=${this._moveItem}
-          .disabled=${this.disabled}
-          handle-selector="button.primary.action"
-          filter=".add"
-        >
-          <ha-chip-set>
-            ${repeat(
-              this._value,
-              (item) => item,
-              (item: EntityNameItem, idx) => {
-                const label = this._formatItem(item);
-                const isValid =
-                  item.type === "text" || validOptions.has(item.type);
-                return html`
-                  <ha-input-chip
-                    data-idx=${idx}
-                    @remove=${this._removeItem}
-                    @click=${this._editItem}
-                    .label=${label}
-                    .selected=${!this.disabled}
-                    .disabled=${this.disabled}
-                    class=${!isValid ? "invalid" : ""}
-                  >
-                    <ha-svg-icon slot="icon" .path=${mdiDrag}></ha-svg-icon>
-                    <span>${label}</span>
-                  </ha-input-chip>
-                `;
-              }
-            )}
-            ${this.disabled
-              ? nothing
-              : html`
-                  <ha-assist-chip
-                    @click=${this._addItem}
-                    .disabled=${this.disabled}
-                    label=${this.hass.localize(
-                      "ui.components.entity.entity-name-picker.add"
-                    )}
-                    class="add"
-                  >
-                    <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-                  </ha-assist-chip>
-                `}
-          </ha-chip-set>
-        </ha-sortable>
-
-        <mwc-menu-surface
-          .open=${this._opened}
-          @closed=${this._onClosed}
-          @opened=${this._onOpened}
-          @input=${stopPropagation}
-          .anchor=${this._container}
-        >
-          <ha-combo-box
-            .hass=${this.hass}
-            .value=${""}
-            .autofocus=${this.autofocus}
-            .disabled=${this.disabled || !this.entityId}
-            .required=${this.required && !value.length}
-            .helper=${this.helper}
-            .items=${options}
-            allow-custom-value
-            item-id-path="value"
-            item-value-path="value"
-            item-label-path="primary"
-            .renderer=${rowRenderer}
-            @opened-changed=${this._openedChanged}
-            @value-changed=${this._comboBoxValueChanged}
-            @filter-changed=${this._filterChanged}
-          >
-          </ha-combo-box>
-        </mwc-menu-surface>
-      </div>
-    `;
-  }
-
-  private _onClosed(ev) {
-    ev.stopPropagation();
-    this._opened = false;
-    this._editIndex = undefined;
-  }
-
-  private async _onOpened(ev) {
-    if (!this._opened) {
-      return;
-    }
-    ev.stopPropagation();
-    this._opened = true;
-    await this._comboBox?.focus();
-    await this._comboBox?.open();
-  }
-
-  private async _addItem(ev) {
-    ev.stopPropagation();
-    this._opened = true;
-  }
-
-  private async _editItem(ev) {
-    ev.stopPropagation();
-    const idx = parseInt(ev.currentTarget.dataset.idx, 10);
-    this._editIndex = idx;
-    this._opened = true;
-  }
-
-  private get _value(): EntityNameItem[] {
-    return this._toItems(this.value);
-  }
-
-  private _toItems = memoizeOne((value?: typeof this.value) => {
-    if (typeof value === "string") {
-      return [{ type: "text", text: value } as const];
-    }
-    return value ? ensureArray(value) : [];
-  });
-
-  private _toValue = memoizeOne(
-    (items: EntityNameItem[]): typeof this.value => {
-      if (items.length === 0) {
-        return [];
-      }
-      if (items.length === 1) {
-        const item = items[0];
-        return item.type === "text" ? item.text : item;
-      }
-      return items;
-    }
-  );
-
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    const open = ev.detail.value;
-    if (open) {
-      const options = this._comboBox.items || [];
-
-      const initialItem =
-        this._editIndex != null ? this._value[this._editIndex] : undefined;
-
-      const initialValue = initialItem
-        ? initialItem.type === "text"
-          ? initialItem.text
-          : initialItem.type
-        : "";
-
-      const filteredItems = this._filterSelectedOptions(options, initialValue);
-
-      this._comboBox.filteredItems = filteredItems;
-      this._comboBox.setInputValue(initialValue);
-    } else {
-      this._opened = false;
-    }
-  }
-
-  private _filterSelectedOptions = (
-    options: EntityNameOption[],
-    current?: string
-  ) => {
-    const value = this._value;
-
-    const types = value.map((item) => item.type) as string[];
-
-    const filteredOptions = options.filter(
-      (option) =>
-        !UNIQUE_TYPES.has(option.value) ||
-        !types.includes(option.value) ||
-        option.value === current
-    );
-    return filteredOptions;
-  };
-
-  private _filterChanged(ev: ValueChangedEvent<string>) {
-    const input = ev.detail.value;
-    const filter = input?.toLowerCase() || "";
-    const options = this._comboBox.items || [];
-
-    const currentItem =
-      this._editIndex != null ? this._value[this._editIndex] : undefined;
-
-    const currentValue = currentItem
-      ? currentItem.type === "text"
-        ? currentItem.text
-        : currentItem.type
-      : "";
-
-    this._comboBox.filteredItems = this._filterSelectedOptions(
-      options,
-      currentValue
-    );
-
-    if (!filter) {
-      return;
-    }
-
-    const fuseOptions: IFuseOptions<EntityNameOption> = {
-      keys: ["primary", "secondary", "value"],
-      isCaseSensitive: false,
-      minMatchCharLength: Math.min(filter.length, 2),
-      threshold: 0.2,
-      ignoreDiacritics: true,
-    };
-
-    const fuse = new Fuse(this._comboBox.filteredItems, fuseOptions);
-    const filteredItems = fuse.search(filter).map((result) => result.item);
-
-    this._comboBox.filteredItems = filteredItems;
-  }
-
-  private async _moveItem(ev: CustomEvent) {
-    ev.stopPropagation();
-    const { oldIndex, newIndex } = ev.detail;
-    const value = this._value;
-    const newValue = value.concat();
-    const element = newValue.splice(oldIndex, 1)[0];
-    newValue.splice(newIndex, 0, element);
-    this._setValue(newValue);
-    await this.updateComplete;
-    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
-  }
-
-  private async _removeItem(ev) {
-    ev.stopPropagation();
-    const value = [...this._value];
-    const idx = parseInt(ev.target.dataset.idx, 10);
-    value.splice(idx, 1);
-    this._setValue(value);
-    await this.updateComplete;
-    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
-  }
-
-  private _comboBoxValueChanged(ev: ValueChangedEvent<string>): void {
-    ev.stopPropagation();
-    const value = ev.detail.value;
-
-    if (this.disabled || value === "") {
-      return;
-    }
-
-    const item: EntityNameItem = KNOWN_TYPES.has(value as any)
-      ? { type: value as EntityNameType }
-      : { type: "text", text: value };
-
-    const newValue = [...this._value];
-
-    if (this._editIndex != null) {
-      newValue[this._editIndex] = item;
-    } else {
-      newValue.push(item);
-    }
-
-    this._setValue(newValue);
-  }
-
-  private _setValue(value: EntityNameItem[]) {
-    const newValue = this._toValue(value);
-    this.value = newValue;
-    fireEvent(this, "value-changed", {
-      value: newValue,
-    });
-  }
-
-  static styles = css`
-    :host {
-      position: relative;
-      width: 100%;
-    }
-
-    .container {
-      position: relative;
-      background-color: var(--mdc-text-field-fill-color, whitesmoke);
-      border-radius: var(--ha-border-radius-sm);
-      border-end-end-radius: var(--ha-border-radius-square);
-      border-end-start-radius: var(--ha-border-radius-square);
-    }
-    .container:after {
-      display: block;
-      content: "";
-      position: absolute;
-      pointer-events: none;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 1px;
-      width: 100%;
-      background-color: var(
-        --mdc-text-field-idle-line-color,
-        rgba(0, 0, 0, 0.42)
-      );
-      transform:
-        height 180ms ease-in-out,
-        background-color 180ms ease-in-out;
-    }
-    :host([disabled]) .container:after {
-      background-color: var(
-        --mdc-text-field-disabled-line-color,
-        rgba(0, 0, 0, 0.42)
-      );
-    }
-    .container:focus-within:after {
-      height: 2px;
-      background-color: var(--mdc-theme-primary);
-    }
-
-    label {
-      display: block;
-      margin: 0 0 var(--ha-space-2);
-    }
-
-    .add {
-      order: 1;
-    }
-
-    mwc-menu-surface {
-      --mdc-menu-min-width: 100%;
-    }
-
-    ha-chip-set {
-      padding: var(--ha-space-2) var(--ha-space-2);
-    }
-
-    .invalid {
-      text-decoration: line-through;
-    }
-
-    .sortable-fallback {
-      display: none;
-      opacity: 0;
-    }
-
-    .sortable-ghost {
-      opacity: 0.4;
-    }
-
-    .sortable-drag {
-      cursor: grabbing;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-entity-name-picker": HaEntityNamePicker;
-  }
-}
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@@ -1,17 +1,14 @@
 import { mdiPlus, mdiShape } from "@mdi/js";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
-import { computeEntityNameList } from "../../common/entity/compute_entity_name_display";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { computeStateName } from "../../common/entity/compute_state_name";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import { computeRTL } from "../../common/util/compute_rtl";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
-import {
-  getEntities,
-  type EntityComboBoxItem,
-} from "../../data/entity_registry";
 import { domainToName } from "../../data/integration";
 import {
  isHelperDomain,
@@ -22,11 +19,21 @@ import type { HomeAssistant } from "../../types";
 import "../ha-combo-box-item";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
-import type { PickerComboBoxSearchFn } from "../ha-picker-combo-box";
+import type {
+  PickerComboBoxItem,
+  PickerComboBoxSearchFn,
+} from "../ha-picker-combo-box";
 import type { PickerValueRenderer } from "../ha-picker-field";
 import "../ha-svg-icon";
 import "./state-badge";

+interface EntityComboBoxItem extends PickerComboBoxItem {
+  domain_name?: string;
+  stateObj?: HassEntity;
+}
+
+export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
+
 const CREATE_ID = "___create-new-entity___";

@customElement("ha-entity-picker")
@@ -137,14 +144,9 @@ export class HaEntityPicker extends LitElement {
      `;
    }

-    const [entityName, deviceName, areaName] = computeEntityNameList(
-      stateObj,
-      [{ type: "entity" }, { type: "device" }, { type: "area" }],
-      this.hass.entities,
-      this.hass.devices,
-      this.hass.areas,
-      this.hass.floors
-    );
+    const entityName = this.hass.formatEntityName(stateObj, "entity");
+    const deviceName = this.hass.formatEntityName(stateObj, "device");
+    const areaName = this.hass.formatEntityName(stateObj, "area");

    const isRTL = computeRTL(this.hass);

@@ -247,10 +249,8 @@ export class HaEntityPicker extends LitElement {
    }
  );

-  private _getEntitiesMemoized = memoizeOne(getEntities);
-
  private _getItems = () =>
-    this._getEntitiesMemoized(
+    this._getEntities(
      this.hass,
      this.includeDomains,
      this.excludeDomains,
@@ -258,10 +258,125 @@ export class HaEntityPicker extends LitElement {
      this.includeDeviceClasses,
      this.includeUnitOfMeasurement,
      this.includeEntities,
-      this.excludeEntities,
-      this.value
+      this.excludeEntities
    );

+  private _getEntities = memoizeOne(
+    (
+      hass: this["hass"],
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
+      entityFilter: this["entityFilter"],
+      includeDeviceClasses: this["includeDeviceClasses"],
+      includeUnitOfMeasurement: this["includeUnitOfMeasurement"],
+      includeEntities: this["includeEntities"],
+      excludeEntities: this["excludeEntities"]
+    ): EntityComboBoxItem[] => {
+      let items: EntityComboBoxItem[] = [];
+
+      let entityIds = Object.keys(hass.states);
+
+      if (includeEntities) {
+        entityIds = entityIds.filter((entityId) =>
+          includeEntities.includes(entityId)
+        );
+      }
+
+      if (excludeEntities) {
+        entityIds = entityIds.filter(
+          (entityId) => !excludeEntities.includes(entityId)
+        );
+      }
+
+      if (includeDomains) {
+        entityIds = entityIds.filter((eid) =>
+          includeDomains.includes(computeDomain(eid))
+        );
+      }
+
+      if (excludeDomains) {
+        entityIds = entityIds.filter(
+          (eid) => !excludeDomains.includes(computeDomain(eid))
+        );
+      }
+
+      const isRTL = computeRTL(this.hass);
+
+      items = entityIds.map<EntityComboBoxItem>((entityId) => {
+        const stateObj = hass!.states[entityId];
+
+        const friendlyName = computeStateName(stateObj); // Keep this for search
+        const entityName = this.hass.formatEntityName(stateObj, "entity");
+        const deviceName = this.hass.formatEntityName(stateObj, "device");
+        const areaName = this.hass.formatEntityName(stateObj, "area");
+
+        const domainName = domainToName(
+          this.hass.localize,
+          computeDomain(entityId)
+        );
+
+        const primary = entityName || deviceName || entityId;
+        const secondary = [areaName, entityName ? deviceName : undefined]
+          .filter(Boolean)
+          .join(isRTL ? " ◂ " : " ▸ ");
+        const a11yLabel = [deviceName, entityName].filter(Boolean).join(" - ");
+
+        return {
+          id: entityId,
+          primary: primary,
+          secondary: secondary,
+          domain_name: domainName,
+          sorting_label: [deviceName, entityName].filter(Boolean).join("_"),
+          search_labels: [
+            entityName,
+            deviceName,
+            areaName,
+            domainName,
+            friendlyName,
+            entityId,
+          ].filter(Boolean) as string[],
+          a11y_label: a11yLabel,
+          stateObj: stateObj,
+        };
+      });
+
+      if (includeDeviceClasses) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj?.attributes.device_class &&
+              includeDeviceClasses.includes(
+                item.stateObj.attributes.device_class
+              ))
+        );
+      }
+
+      if (includeUnitOfMeasurement) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj?.attributes.unit_of_measurement &&
+              includeUnitOfMeasurement.includes(
+                item.stateObj.attributes.unit_of_measurement
+              ))
+        );
+      }
+
+      if (entityFilter) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj && entityFilter!(item.stateObj))
+        );
+      }
+
+      return items;
+    }
+  );
+
  protected render() {
    const placeholder =
      this.placeholder ??
--- a/src/components/entity/ha-entity-state-picker.ts
+++ b/src/components/entity/ha-entity-state-picker.ts
@@ -1,3 +1,4 @@
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -8,6 +9,8 @@ import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";

+export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
+
 interface StateOption {
  value: string;
  label: string;
--- a/src/components/entity/ha-statistic-picker.ts
+++ b/src/components/entity/ha-statistic-picker.ts
@@ -6,7 +6,6 @@ import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
-import { computeEntityNameList } from "../../common/entity/compute_entity_name_display";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { domainToName } from "../../data/integration";
@@ -200,7 +199,7 @@ export class HaStatisticPicker extends LitElement {
        });
      }

-      const isRTL = computeRTL(hass);
+      const isRTL = computeRTL(this.hass);

      const output: StatisticComboBoxItem[] = [];

@@ -257,15 +256,9 @@ export class HaStatisticPicker extends LitElement {
        const id = meta.statistic_id;

        const friendlyName = computeStateName(stateObj); // Keep this for search
-
-        const [entityName, deviceName, areaName] = computeEntityNameList(
-          stateObj,
-          [{ type: "entity" }, { type: "device" }, { type: "area" }],
-          hass.entities,
-          hass.devices,
-          hass.areas,
-          hass.floors
-        );
+        const entityName = hass.formatEntityName(stateObj, "entity");
+        const deviceName = hass.formatEntityName(stateObj, "device");
+        const areaName = hass.formatEntityName(stateObj, "area");

        const primary = entityName || deviceName || id;
        const secondary = [areaName, entityName ? deviceName : undefined]
@@ -338,14 +331,9 @@ export class HaStatisticPicker extends LitElement {
    const stateObj = this.hass.states[statisticId];

    if (stateObj) {
-      const [entityName, deviceName, areaName] = computeEntityNameList(
-        stateObj,
-        [{ type: "entity" }, { type: "device" }, { type: "area" }],
-        this.hass.entities,
-        this.hass.devices,
-        this.hass.areas,
-        this.hass.floors
-      );
+      const entityName = this.hass.formatEntityName(stateObj, "entity");
+      const deviceName = this.hass.formatEntityName(stateObj, "device");
+      const areaName = this.hass.formatEntityName(stateObj, "area");

      const isRTL = computeRTL(this.hass);

--- a/src/components/ha-area-floor-picker.ts
+++ b/src/components/ha-area-floor-picker.ts
@@ -8,13 +8,21 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeAreaName } from "../common/entity/compute_area_name";
+import { computeDomain } from "../common/entity/compute_domain";
 import { computeFloorName } from "../common/entity/compute_floor_name";
+import { stringCompare } from "../common/string/compare";
 import { computeRTL } from "../common/util/compute_rtl";
+import type { AreaRegistryEntry } from "../data/area_registry";
+import type {
+  DeviceEntityDisplayLookup,
+  DeviceRegistryEntry,
+} from "../data/device_registry";
+import { getDeviceEntityDisplayLookup } from "../data/device_registry";
+import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
 import {
-  getAreasAndFloors,
-  type AreaFloorValue,
-  type FloorComboBoxItem,
-} from "../data/area_floor";
+  getFloorAreaLookup,
+  type FloorRegistryEntry,
+} from "../data/floor_registry";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box-item";
@@ -22,12 +30,24 @@ import "./ha-floor-icon";
 import "./ha-generic-picker";
 import type { HaGenericPicker } from "./ha-generic-picker";
 import "./ha-icon-button";
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 import type { PickerValueRenderer } from "./ha-picker-field";
 import "./ha-svg-icon";
 import "./ha-tree-indicator";

 const SEPARATOR = "________";

+interface FloorComboBoxItem extends PickerComboBoxItem {
+  type: "floor" | "area";
+  floor?: FloorRegistryEntry;
+  area?: AreaRegistryEntry;
+}
+
+interface AreaFloorValue {
+  id: string;
+  type: "floor" | "area";
+}
+
@customElement("ha-area-floor-picker")
 export class HaAreaFloorPicker extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -134,6 +154,243 @@ export class HaAreaFloorPicker extends LitElement {
    `;
  };

+  private _getAreasAndFloors = memoizeOne(
+    (
+      haFloors: HomeAssistant["floors"],
+      haAreas: HomeAssistant["areas"],
+      haDevices: HomeAssistant["devices"],
+      haEntities: HomeAssistant["entities"],
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
+      includeDeviceClasses: this["includeDeviceClasses"],
+      deviceFilter: this["deviceFilter"],
+      entityFilter: this["entityFilter"],
+      excludeAreas: this["excludeAreas"],
+      excludeFloors: this["excludeFloors"]
+    ): FloorComboBoxItem[] => {
+      const floors = Object.values(haFloors);
+      const areas = Object.values(haAreas);
+      const devices = Object.values(haDevices);
+      const entities = Object.values(haEntities);
+
+      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
+      let inputDevices: DeviceRegistryEntry[] | undefined;
+      let inputEntities: EntityRegistryDisplayEntry[] | undefined;
+
+      if (
+        includeDomains ||
+        excludeDomains ||
+        includeDeviceClasses ||
+        deviceFilter ||
+        entityFilter
+      ) {
+        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
+        inputDevices = devices;
+        inputEntities = entities.filter((entity) => entity.area_id);
+
+        if (includeDomains) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) =>
+              includeDomains.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter((entity) =>
+            includeDomains.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (excludeDomains) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return true;
+            }
+            return entities.every(
+              (entity) =>
+                !excludeDomains.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter(
+            (entity) =>
+              !excludeDomains.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (includeDeviceClasses) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = this.hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return (
+                stateObj.attributes.device_class &&
+                includeDeviceClasses.includes(stateObj.attributes.device_class)
+              );
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            return (
+              stateObj.attributes.device_class &&
+              includeDeviceClasses.includes(stateObj.attributes.device_class)
+            );
+          });
+        }
+
+        if (deviceFilter) {
+          inputDevices = inputDevices!.filter((device) =>
+            deviceFilter!(device)
+          );
+        }
+
+        if (entityFilter) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = this.hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return entityFilter(stateObj);
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return entityFilter!(stateObj);
+          });
+        }
+      }
+
+      let outputAreas = areas;
+
+      let areaIds: string[] | undefined;
+
+      if (inputDevices) {
+        areaIds = inputDevices
+          .filter((device) => device.area_id)
+          .map((device) => device.area_id!);
+      }
+
+      if (inputEntities) {
+        areaIds = (areaIds ?? []).concat(
+          inputEntities
+            .filter((entity) => entity.area_id)
+            .map((entity) => entity.area_id!)
+        );
+      }
+
+      if (areaIds) {
+        outputAreas = outputAreas.filter((area) =>
+          areaIds!.includes(area.area_id)
+        );
+      }
+
+      if (excludeAreas) {
+        outputAreas = outputAreas.filter(
+          (area) => !excludeAreas!.includes(area.area_id)
+        );
+      }
+
+      if (excludeFloors) {
+        outputAreas = outputAreas.filter(
+          (area) => !area.floor_id || !excludeFloors!.includes(area.floor_id)
+        );
+      }
+
+      const floorAreaLookup = getFloorAreaLookup(outputAreas);
+      const unassisgnedAreas = Object.values(outputAreas).filter(
+        (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
+      );
+
+      // @ts-ignore
+      const floorAreaEntries: [
+        FloorRegistryEntry | undefined,
+        AreaRegistryEntry[],
+      ][] = Object.entries(floorAreaLookup)
+        .map(([floorId, floorAreas]) => {
+          const floor = floors.find((fl) => fl.floor_id === floorId)!;
+          return [floor, floorAreas] as const;
+        })
+        .sort(([floorA], [floorB]) => {
+          if (floorA.level !== floorB.level) {
+            return (floorA.level ?? 0) - (floorB.level ?? 0);
+          }
+          return stringCompare(floorA.name, floorB.name);
+        });
+
+      const items: FloorComboBoxItem[] = [];
+
+      floorAreaEntries.forEach(([floor, floorAreas]) => {
+        if (floor) {
+          const floorName = computeFloorName(floor);
+
+          const areaSearchLabels = floorAreas
+            .map((area) => {
+              const areaName = computeAreaName(area) || area.area_id;
+              return [area.area_id, areaName, ...area.aliases];
+            })
+            .flat();
+
+          items.push({
+            id: this._formatValue({ id: floor.floor_id, type: "floor" }),
+            type: "floor",
+            primary: floorName,
+            floor: floor,
+            search_labels: [
+              floor.floor_id,
+              floorName,
+              ...floor.aliases,
+              ...areaSearchLabels,
+            ],
+          });
+        }
+        items.push(
+          ...floorAreas.map((area) => {
+            const areaName = computeAreaName(area) || area.area_id;
+            return {
+              id: this._formatValue({ id: area.area_id, type: "area" }),
+              type: "area" as const,
+              primary: areaName,
+              area: area,
+              icon: area.icon || undefined,
+              search_labels: [area.area_id, areaName, ...area.aliases],
+            };
+          })
+        );
+      });
+
+      items.push(
+        ...unassisgnedAreas.map((area) => {
+          const areaName = computeAreaName(area) || area.area_id;
+          return {
+            id: this._formatValue({ id: area.area_id, type: "area" }),
+            type: "area" as const,
+            primary: areaName,
+            icon: area.icon || undefined,
+            search_labels: [area.area_id, areaName, ...area.aliases],
+          };
+        })
+      );
+
+      return items;
+    }
+  );
+
  private _rowRenderer: ComboBoxLitRenderer<FloorComboBoxItem> = (
    item,
    { index },
@@ -188,16 +445,12 @@ export class HaAreaFloorPicker extends LitElement {
    `;
  };

-  private _getAreasAndFloorsMemoized = memoizeOne(getAreasAndFloors);
-
  private _getItems = () =>
-    this._getAreasAndFloorsMemoized(
-      this.hass.states,
+    this._getAreasAndFloors(
      this.hass.floors,
      this.hass.areas,
      this.hass.devices,
      this.hass.entities,
-      this._formatValue,
      this.includeDomains,
      this.excludeDomains,
      this.includeDeviceClasses,
--- a/src/components/ha-area-picker.ts
+++ b/src/components/ha-area-picker.ts
@@ -107,7 +107,7 @@ export class HaAreaPicker extends LitElement {
          `;
        }

-        const { floor } = getAreaContext(area, this.hass.floors);
+        const { floor } = getAreaContext(area, this.hass);

        const areaName = area ? computeAreaName(area) : undefined;
        const floorName = floor ? computeFloorName(floor) : undefined;
@@ -279,7 +279,7 @@ export class HaAreaPicker extends LitElement {
      }

      const items = outputAreas.map<PickerComboBoxItem>((area) => {
-        const { floor } = getAreaContext(area, this.hass.floors);
+        const { floor } = getAreaContext(area, this.hass);
        const floorName = floor ? computeFloorName(floor) : undefined;
        const areaName = computeAreaName(area);
        return {
--- a/src/components/ha-areas-display-editor.ts
+++ b/src/components/ha-areas-display-editor.ts
@@ -44,7 +44,7 @@ export class HaAreasDisplayEditor extends LitElement {
    );

    const items: DisplayItem[] = areas.map((area) => {
-      const { floor } = getAreaContext(area, this.hass.floors);
+      const { floor } = getAreaContext(area, this.hass!);
      return {
        value: area.area_id,
        label: area.name,
--- a/src/components/ha-areas-floors-display-editor.ts
+++ b/src/components/ha-areas-floors-display-editor.ts
@@ -138,7 +138,7 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
      );
      const groupedItems: Record<string, DisplayItem[]> = areas.reduce(
        (acc, area) => {
-          const { floor } = getAreaContext(area, this.hass.floors);
+          const { floor } = getAreaContext(area, this.hass!);
          const floorId = floor?.floor_id ?? UNASSIGNED_FLOOR;

          if (!acc[floorId]) {
--- a/src/components/ha-bottom-sheet.ts
+++ b/src/components/ha-bottom-sheet.ts
@@ -1,5 +1,5 @@
-import "@home-assistant/webawesome/dist/components/drawer/drawer";
 import { css, html, LitElement, type PropertyValues } from "lit";
+import "@home-assistant/webawesome/dist/components/drawer/drawer";
 import { customElement, property, state } from "lit/decorators";

 export const BOTTOM_SHEET_ANIMATION_DURATION_MS = 300;
@@ -8,9 +8,6 @@ export const BOTTOM_SHEET_ANIMATION_DURATION_MS = 300;
 export class HaBottomSheet extends LitElement {
  @property({ type: Boolean }) public open = false;

-  @property({ type: Boolean, reflect: true, attribute: "flexcontent" })
-  public flexContent = false;
-
  @state() private _drawerOpen = false;

  private _handleAfterHide() {
@@ -44,19 +41,16 @@ export class HaBottomSheet extends LitElement {

  static styles = css`
    wa-drawer {
-      --wa-color-surface-raised: transparent;
+      --wa-color-surface-raised: var(
+        --ha-bottom-sheet-surface-background,
+        var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
+      );
      --spacing: 0;
-      --size: var(--ha-bottom-sheet-height, auto);
+      --size: auto;
      --show-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
      --hide-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
    }
    wa-drawer::part(dialog) {
-      max-height: var(--ha-bottom-sheet-max-height, 90vh);
-      align-items: center;
-    }
-    wa-drawer::part(body) {
-      max-width: var(--ha-bottom-sheet-max-width);
-      width: 100%;
      border-top-left-radius: var(
        --ha-bottom-sheet-border-radius,
        var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
@@ -65,19 +59,10 @@ export class HaBottomSheet extends LitElement {
        --ha-bottom-sheet-border-radius,
        var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
      );
-      background-color: var(
-        --ha-bottom-sheet-surface-background,
-        var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
-      );
-      padding: var(
-        --ha-bottom-sheet-padding,
-        0 var(--safe-area-inset-right) var(--safe-area-inset-bottom)
-          var(--safe-area-inset-left)
-      );
-    }
-
-    :host([flexcontent]) wa-drawer::part(body) {
-      display: flex;
+      max-height: 90vh;
+      padding-bottom: var(--safe-area-inset-bottom);
+      padding-left: var(--safe-area-inset-left);
+      padding-right: var(--safe-area-inset-right);
    }
  `;
 }
--- a/src/components/ha-camera-stream.ts
+++ b/src/components/ha-camera-stream.ts
@@ -86,8 +86,7 @@ export class HaCameraStream extends LitElement {
    const streams = this._streams(
      this._capabilities?.frontend_stream_types,
      this._hlsStreams,
-      this._webRtcStreams,
-      this.muted
+      this._webRtcStreams
    );
    return html`${repeat(
      streams,
@@ -191,8 +190,7 @@ export class HaCameraStream extends LitElement {
    (
      supportedTypes?: StreamType[],
      hlsStreams?: { hasAudio: boolean; hasVideo: boolean },
-      webRtcStreams?: { hasAudio: boolean; hasVideo: boolean },
-      muted?: boolean
+      webRtcStreams?: { hasAudio: boolean; hasVideo: boolean }
    ): Stream[] => {
      if (__DEMO__) {
        return [{ type: MJPEG_STREAM, visible: true }];
@@ -222,10 +220,9 @@ export class HaCameraStream extends LitElement {
        if (
          hlsStreams.hasVideo &&
          hlsStreams.hasAudio &&
-          !webRtcStreams.hasAudio &&
-          !muted
+          !webRtcStreams.hasAudio
        ) {
-          // webRTC stream is missing audio and audio is not muted, use HLS
+          // webRTC stream is missing audio, use HLS
          return [{ type: STREAM_TYPE_HLS, visible: true }];
        }
        if (webRtcStreams.hasVideo) {
--- a/src/components/ha-dialog-footer.ts
+++ b/src/components/ha-dialog-footer.ts
@@ -1,52 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-
-/**
- * Home Assistant dialog footer component
- *
- * @element ha-dialog-footer
- * @extends {LitElement}
- *
- * @summary
- * A simple footer container for dialog actions,
- * typically used as the `footer` slot in `ha-wa-dialog`.
- *
- * @slot primaryAction - Primary action button(s), aligned to the end.
- * @slot secondaryAction - Secondary action button(s), placed before the primary action.
- *
- * @remarks
- * **Button Styling Guidance:**
- * - `primaryAction` slot: Use `variant="accent"`
- * - `secondaryAction` slot: Use `variant="plain"`
- */
-@customElement("ha-dialog-footer")
-export class HaDialogFooter extends LitElement {
-  protected render() {
-    return html`
-      <footer>
-        <slot name="secondaryAction"></slot>
-        <slot name="primaryAction"></slot>
-      </footer>
-    `;
-  }
-
-  static get styles() {
-    return [
-      css`
-        footer {
-          display: flex;
-          gap: var(--ha-space-3);
-          justify-content: flex-end;
-          align-items: center;
-          width: 100%;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dialog-footer": HaDialogFooter;
-  }
-}
--- a/src/components/ha-dialog-header.ts
+++ b/src/components/ha-dialog-header.ts
@@ -1,20 +1,9 @@
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement } from "lit/decorators";

@customElement("ha-dialog-header")
 export class HaDialogHeader extends LitElement {
-  @property({ type: String, attribute: "subtitle-position" })
-  public subtitlePosition: "above" | "below" = "below";
-
  protected render() {
-    const titleSlot = html`<div class="header-title">
-      <slot name="title"></slot>
-    </div>`;
-
-    const subtitleSlot = html`<div class="header-subtitle">
-      <slot name="subtitle"></slot>
-    </div>`;
-
    return html`
      <header class="header">
        <div class="header-bar">
@@ -22,9 +11,12 @@ export class HaDialogHeader extends LitElement {
            <slot name="navigationIcon"></slot>
          </section>
          <section class="header-content">
-            ${this.subtitlePosition === "above"
-              ? html`${subtitleSlot}${titleSlot}`
-              : html`${titleSlot}${subtitleSlot}`}
+            <div class="header-title">
+              <slot name="title"></slot>
+            </div>
+            <div class="header-subtitle">
+              <slot name="subtitle"></slot>
+            </div>
          </section>
          <section class="header-action-items">
            <slot name="actionItems"></slot>
@@ -48,7 +40,7 @@ export class HaDialogHeader extends LitElement {
        .header-bar {
          display: flex;
          flex-direction: row;
-          align-items: center;
+          align-items: flex-start;
          padding: 4px;
          box-sizing: border-box;
        }
@@ -61,17 +53,13 @@ export class HaDialogHeader extends LitElement {
          white-space: nowrap;
        }
        .header-title {
-          height: var(
-            --ha-dialog-header-title-height,
-            calc(var(--ha-font-size-xl) + 4px)
-          );
          font-size: var(--ha-font-size-xl);
          line-height: var(--ha-line-height-condensed);
-          font-weight: var(--ha-font-weight-medium);
+          font-weight: var(--ha-font-weight-normal);
        }
        .header-subtitle {
          font-size: var(--ha-font-size-m);
-          line-height: var(--ha-line-height-normal);
+          line-height: 20px;
          color: var(--secondary-text-color);
        }
        @media all and (min-width: 450px) and (min-height: 500px) {
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -121,7 +121,7 @@ export class HaDialog extends DialogBase {
        position: var(--dialog-surface-position, relative);
        top: var(--dialog-surface-top);
        margin-top: var(--dialog-surface-margin-top);
-        min-width: var(--mdc-dialog-min-width, auto);
+        min-width: var(--mdc-dialog-min-width, 100vw);
        min-height: var(--mdc-dialog-min-height, auto);
        border-radius: var(
          --ha-dialog-border-radius,
@@ -133,13 +133,25 @@ export class HaDialog extends DialogBase {
          --ha-dialog-surface-background,
          var(--mdc-theme-surface, #fff)
        );
-        padding: var(--dialog-surface-padding);
      }
      :host([flexContent]) .mdc-dialog .mdc-dialog__content {
        display: flex;
        flex-direction: column;
      }

+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        .mdc-dialog .mdc-dialog__surface {
+          min-height: 100vh;
+          min-height: 100svh;
+          max-height: 100vh;
+          max-height: 100svh;
+          padding-top: var(--safe-area-inset-top);
+          padding-bottom: var(--safe-area-inset-bottom);
+          padding-left: var(--safe-area-inset-left);
+          padding-right: var(--safe-area-inset-right);
+        }
+      }
+
      .header_title {
        display: flex;
        align-items: center;
--- a/src/components/ha-expansion-panel.ts
+++ b/src/components/ha-expansion-panel.ts
@@ -49,7 +49,6 @@ export class HaExpansionPanel extends LitElement {
          tabindex=${this.noCollapse ? -1 : 0}
          aria-expanded=${this.expanded}
          aria-controls="sect1"
-          part="summary"
        >
          ${this.leftChevron ? chevronIcon : nothing}
          <slot name="leading-icon"></slot>
@@ -171,11 +170,6 @@ export class HaExpansionPanel extends LitElement {
      margin-left: 8px;
      margin-inline-start: 8px;
      margin-inline-end: initial;
-      border-radius: var(--ha-border-radius-circle);
-    }
-
-    #summary:focus-visible ha-svg-icon.summary-icon {
-      background-color: var(--ha-color-fill-neutral-normal-active);
    }

    :host([left-chevron]) .summary-icon,
--- a/src/components/ha-form/ha-form-string.ts
+++ b/src/components/ha-form/ha-form-string.ts
@@ -61,7 +61,6 @@ export class HaFormString extends LitElement implements HaFormElement {
        .required=${this.schema.required}
        .autoValidate=${this.schema.required}
        .name=${this.schema.name}
-        .autofocus=${this.schema.autofocus}
        .autocomplete=${this.schema.autocomplete}
        .suffix=${this.isPassword
          ? // reserve some space for the icon.
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@@ -105,11 +105,6 @@ export class HaForm extends LitElement implements HaFormElement {
    }
  }

-  static shadowRootOptions: ShadowRootInit = {
-    mode: "open",
-    delegatesFocus: true,
-  };
-
  protected render(): TemplateResult {
    return html`
      <div class="root" part="root">
--- a/src/components/ha-generic-picker.ts
+++ b/src/components/ha-generic-picker.ts
@@ -79,7 +79,6 @@ export class HaGenericPicker extends LitElement {
        ${!this._opened
          ? html`
              <ha-picker-field
-                id="picker"
                type="button"
                compact
                aria-label=${ifDefined(this.label)}
--- a/src/components/ha-label-picker.ts
+++ b/src/components/ha-label-picker.ts
@@ -5,10 +5,16 @@ import { LitElement, html } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
+import { computeDomain } from "../common/entity/compute_domain";
+import type {
+  DeviceEntityDisplayLookup,
+  DeviceRegistryEntry,
+} from "../data/device_registry";
+import { getDeviceEntityDisplayLookup } from "../data/device_registry";
+import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
 import type { LabelRegistryEntry } from "../data/label_registry";
 import {
  createLabelRegistryEntry,
-  getLabels,
  subscribeLabelRegistry,
 } from "../data/label_registry";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
@@ -131,22 +137,201 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
      }
  );

-  private _getLabelsMemoized = memoizeOne(getLabels);
+  private _getLabels = memoizeOne(
+    (
+      labels: LabelRegistryEntry[] | undefined,
+      haAreas: HomeAssistant["areas"],
+      haDevices: HomeAssistant["devices"],
+      haEntities: HomeAssistant["entities"],
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
+      includeDeviceClasses: this["includeDeviceClasses"],
+      deviceFilter: this["deviceFilter"],
+      entityFilter: this["entityFilter"],
+      excludeLabels: this["excludeLabels"]
+    ): PickerComboBoxItem[] => {
+      if (!labels || labels.length === 0) {
+        return [
+          {
+            id: NO_LABELS,
+            primary: this.hass.localize("ui.components.label-picker.no_labels"),
+            icon_path: mdiLabel,
+          },
+        ];
+      }

-  private _getItems = () => {
-    if (!this._labels || this._labels.length === 0) {
-      return [
-        {
-          id: NO_LABELS,
-          primary: this.hass.localize("ui.components.label-picker.no_labels"),
-          icon_path: mdiLabel,
-        },
-      ];
+      const devices = Object.values(haDevices);
+      const entities = Object.values(haEntities);
+
+      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
+      let inputDevices: DeviceRegistryEntry[] | undefined;
+      let inputEntities: EntityRegistryDisplayEntry[] | undefined;
+
+      if (
+        includeDomains ||
+        excludeDomains ||
+        includeDeviceClasses ||
+        deviceFilter ||
+        entityFilter
+      ) {
+        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
+        inputDevices = devices;
+        inputEntities = entities.filter((entity) => entity.labels.length > 0);
+
+        if (includeDomains) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) =>
+              includeDomains.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter((entity) =>
+            includeDomains.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (excludeDomains) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return true;
+            }
+            return entities.every(
+              (entity) =>
+                !excludeDomains.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter(
+            (entity) =>
+              !excludeDomains.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (includeDeviceClasses) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = this.hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return (
+                stateObj.attributes.device_class &&
+                includeDeviceClasses.includes(stateObj.attributes.device_class)
+              );
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            return (
+              stateObj.attributes.device_class &&
+              includeDeviceClasses.includes(stateObj.attributes.device_class)
+            );
+          });
+        }
+
+        if (deviceFilter) {
+          inputDevices = inputDevices!.filter((device) =>
+            deviceFilter!(device)
+          );
+        }
+
+        if (entityFilter) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = this.hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return entityFilter(stateObj);
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return entityFilter!(stateObj);
+          });
+        }
+      }
+
+      let outputLabels = labels;
+      const usedLabels = new Set<string>();
+
+      let areaIds: string[] | undefined;
+
+      if (inputDevices) {
+        areaIds = inputDevices
+          .filter((device) => device.area_id)
+          .map((device) => device.area_id!);
+
+        inputDevices.forEach((device) => {
+          device.labels.forEach((label) => usedLabels.add(label));
+        });
+      }
+
+      if (inputEntities) {
+        areaIds = (areaIds ?? []).concat(
+          inputEntities
+            .filter((entity) => entity.area_id)
+            .map((entity) => entity.area_id!)
+        );
+        inputEntities.forEach((entity) => {
+          entity.labels.forEach((label) => usedLabels.add(label));
+        });
+      }
+
+      if (areaIds) {
+        areaIds.forEach((areaId) => {
+          const area = haAreas[areaId];
+          area.labels.forEach((label) => usedLabels.add(label));
+        });
+      }
+
+      if (excludeLabels) {
+        outputLabels = outputLabels.filter(
+          (label) => !excludeLabels!.includes(label.label_id)
+        );
+      }
+
+      if (inputDevices || inputEntities) {
+        outputLabels = outputLabels.filter((label) =>
+          usedLabels.has(label.label_id)
+        );
+      }
+
+      const items = outputLabels.map<PickerComboBoxItem>((label) => ({
+        id: label.label_id,
+        primary: label.name,
+        icon: label.icon || undefined,
+        icon_path: label.icon ? undefined : mdiLabel,
+        sorting_label: label.name,
+        search_labels: [label.name, label.label_id, label.description].filter(
+          (v): v is string => Boolean(v)
+        ),
+      }));
+
+      return items;
    }
+  );

-    return this._getLabelsMemoized(
-      this.hass,
+  private _getItems = () =>
+    this._getLabels(
      this._labels,
+      this.hass.areas,
+      this.hass.devices,
+      this.hass.entities,
      this.includeDomains,
      this.excludeDomains,
      this.includeDeviceClasses,
@@ -154,7 +339,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
      this.entityFilter,
      this.excludeLabels
    );
-  };

  private _allLabelNames = memoizeOne((labels?: LabelRegistryEntry[]) => {
    if (!labels) {
--- a/src/components/ha-picture-upload.ts
+++ b/src/components/ha-picture-upload.ts
@@ -39,15 +39,6 @@ export class HaPictureUpload extends LitElement {
  @property({ type: Boolean, attribute: "select-media" }) public selectMedia =
    false;

-  // This property is set when this component is used inside a media selector.
-  // When set, it returns selected media or uploaded files as MediaSelectorValue
-  // When unset, it only allows selecting images from image-upload, and returns
-  // selected or uploaded images as a string starting with /api/...
-  @property({ type: Boolean, attribute: "full-media" }) public fullMedia =
-    false;
-
-  @property({ attribute: false }) public contentIdHelper?: string;
-
  @property({ attribute: false }) public cropOptions?: CropOptions;

  @property({ type: Boolean }) public original = false;
@@ -173,33 +164,12 @@ export class HaPictureUpload extends LitElement {
    this._uploading = true;
    try {
      const media = await createImage(this.hass, file);
-      if (this.fullMedia) {
-        const item = {
-          media_content_id: `${MEDIA_PREFIX}/${media.id}`,
-          media_content_type: media.content_type,
-          title: media.name,
-          media_class: "image" as const,
-          can_play: true,
-          can_expand: false,
-          can_search: false,
-          thumbnail: generateImageThumbnailUrl(media.id, 256),
-        } as const;
-        const navigateIds = [
-          {},
-          { media_content_type: "app", media_content_id: MEDIA_PREFIX },
-        ];
-        fireEvent(this, "media-picked", {
-          item,
-          navigateIds,
-        });
-      } else {
-        this.value = generateImageThumbnailUrl(
-          media.id,
-          this.size,
-          this.original
-        );
-        fireEvent(this, "change");
-      }
+      this.value = generateImageThumbnailUrl(
+        media.id,
+        this.size,
+        this.original
+      );
+      fireEvent(this, "change");
    } catch (err: any) {
      showAlertDialog(this, {
        text: err.toString(),
@@ -213,24 +183,15 @@ export class HaPictureUpload extends LitElement {
    showMediaBrowserDialog(this, {
      action: "pick",
      entityId: "browser",
-      accept: ["image/*"],
-      navigateIds: this.fullMedia
-        ? undefined
-        : [
-            { media_content_id: undefined, media_content_type: undefined },
-            {
-              media_content_id: MEDIA_PREFIX,
-              media_content_type: "app",
-            },
-          ],
-      minimumNavigateLevel: this.fullMedia ? undefined : 2,
-      hideContentType: true,
-      contentIdHelper: this.contentIdHelper,
+      navigateIds: [
+        { media_content_id: undefined, media_content_type: undefined },
+        {
+          media_content_id: MEDIA_PREFIX,
+          media_content_type: "app",
+        },
+      ],
+      minimumNavigateLevel: 2,
      mediaPickedCallback: async (pickedMedia: MediaPickedEvent) => {
-        if (this.fullMedia) {
-          fireEvent(this, "media-picked", pickedMedia);
-          return;
-        }
        const mediaId = getIdFromUrl(pickedMedia.item.media_content_id);
        if (mediaId) {
          if (this.crop) {
--- a/src/components/ha-resizable-bottom-sheet.ts
+++ b/src/components/ha-resizable-bottom-sheet.ts
@@ -220,7 +220,7 @@ export class HaResizableBottomSheet extends LitElement {
      min-height: var(--min-height, 30dvh);
      background-color: var(
        --ha-bottom-sheet-surface-background,
-        var(--ha-color-surface-default)
+        var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
      );
      display: flex;
      flex-direction: column;
--- a/src/components/ha-selector/ha-selector-entity-name.ts
+++ b/src/components/ha-selector/ha-selector-entity-name.ts
@@ -1,50 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import type { EntityNameSelector } from "../../data/selector";
-import { SubscribeMixin } from "../../mixins/subscribe-mixin";
-import type { HomeAssistant } from "../../types";
-import "../entity/ha-entity-name-picker";
-
-@customElement("ha-selector-entity_name")
-export class HaSelectorEntityName extends SubscribeMixin(LitElement) {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public selector!: EntityNameSelector;
-
-  @property() public value?: string | string[];
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = true;
-
-  @property({ attribute: false }) public context?: {
-    entity?: string;
-  };
-
-  protected render() {
-    const value = this.value ?? this.selector.entity_name?.default_name;
-
-    return html`
-      <ha-entity-name-picker
-        .hass=${this.hass}
-        .entityId=${this.selector.entity_name?.entity_id ||
-        this.context?.entity}
-        .value=${value}
-        .label=${this.label}
-        .helper=${this.helper}
-        .disabled=${this.disabled}
-        .required=${this.required}
-      ></ha-entity-name-picker>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-entity_name": HaSelectorEntityName;
-  }
-}
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/src/components/ha-selector/ha-selector-media.ts
@@ -19,7 +19,6 @@ import "../ha-form/ha-form";
 import type { SchemaUnion } from "../ha-form/types";
 import { showMediaBrowserDialog } from "../media-player/show-media-browser-dialog";
 import { ensureArray } from "../../common/array/ensure-array";
-import "../ha-picture-upload";

 const MANUAL_SCHEMA = [
  { name: "media_content_id", required: false, selector: { text: {} } },
@@ -106,18 +105,6 @@ export class HaMediaSelector extends LitElement {
      (stateObj &&
        supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));

-    if (this.selector.media?.image_upload && !this.value) {
-      return html`${this.label ? html`<label>${this.label}</label>` : nothing}
-        <ha-picture-upload
-          .hass=${this.hass}
-          .value=${null}
-          .contentIdHelper=${this.selector.media?.content_id_helper}
-          select-media
-          full-media
-          @media-picked=${this._pictureUploadMediaPicked}
-        ></ha-picture-upload>`;
-    }
-
    return html`
      ${this._hasAccept ||
      (this._contextEntities && this._contextEntities.length <= 1)
@@ -142,7 +129,6 @@ export class HaMediaSelector extends LitElement {
          `}
      ${!supportsBrowse
        ? html`
-            ${this.label ? html`<label>${this.label}</label>` : nothing}
            <ha-alert>
              ${this.hass.localize(
                "ui.components.selectors.media.browse_not_supported"
@@ -156,7 +142,7 @@ export class HaMediaSelector extends LitElement {
              .computeHelper=${this._computeHelperCallback}
            ></ha-form>
          `
-        : html`${this.label ? html`<label>${this.label}</label>` : nothing}
+        : html`
            <ha-card
              outlined
              tabindex="0"
@@ -217,20 +203,7 @@ export class HaMediaSelector extends LitElement {
                </div>
              </div>
            </ha-card>
-            ${this.selector.media?.clearable
-              ? html`<div>
-                  <ha-button
-                    appearance="plain"
-                    size="small"
-                    variant="danger"
-                    @click=${this._clearValue}
-                  >
-                    ${this.hass.localize(
-                      "ui.components.picture-upload.clear_picture"
-                    )}
-                  </ha-button>
-                </div>`
-              : nothing}`}
+          `}
    `;
  }

@@ -275,8 +248,6 @@ export class HaMediaSelector extends LitElement {
      accept: this.selector.media?.accept,
      defaultId: this.value?.media_content_id,
      defaultType: this.value?.media_content_type,
-      hideContentType: this.selector.media?.hide_content_type,
-      contentIdHelper: this.selector.media?.content_id_helper,
      mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
        fireEvent(this, "value-changed", {
          value: {
@@ -318,31 +289,6 @@ export class HaMediaSelector extends LitElement {
    }
  }

-  private _pictureUploadMediaPicked(ev) {
-    const pickedMedia = ev.detail as MediaPickedEvent;
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.value,
-        media_content_id: pickedMedia.item.media_content_id,
-        media_content_type: pickedMedia.item.media_content_type,
-        metadata: {
-          title: pickedMedia.item.title,
-          thumbnail: pickedMedia.item.thumbnail,
-          media_class: pickedMedia.item.media_class,
-          children_media_class: pickedMedia.item.children_media_class,
-          navigateIds: pickedMedia.navigateIds?.map((id) => ({
-            media_content_type: id.media_content_type,
-            media_content_id: id.media_content_id,
-          })),
-        },
-      },
-    });
-  }
-
-  private _clearValue() {
-    fireEvent(this, "value-changed", { value: undefined });
-  }
-
  static styles = css`
    ha-entity-picker {
      display: block;
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -29,7 +29,6 @@ const LOAD_ELEMENTS = {
  device: () => import("./ha-selector-device"),
  duration: () => import("./ha-selector-duration"),
  entity: () => import("./ha-selector-entity"),
-  entity_name: () => import("./ha-selector-entity-name"),
  statistic: () => import("./ha-selector-statistic"),
  file: () => import("./ha-selector-file"),
  floor: () => import("./ha-selector-floor"),
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -857,7 +857,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          justify-content: center;
          align-items: center;
          min-width: 8px;
-          border-radius: var(--ha-border-radius-xl);
+          border-radius: var(--ha-border-radius-md);
          font-weight: var(--ha-font-weight-normal);
          line-height: normal;
          background-color: var(--accent-color);
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
--- a/src/components/ha-wa-dialog.ts
+++ b/src/components/ha-wa-dialog.ts
@@ -1,320 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import "@home-assistant/webawesome/dist/components/dialog/dialog";
-import { mdiClose } from "@mdi/js";
-import "./ha-dialog-header";
-import "./ha-icon-button";
-import type { HomeAssistant } from "../types";
-import { fireEvent } from "../common/dom/fire_event";
-import { haStyleScrollbar } from "../resources/styles";
-
-export type DialogWidth = "small" | "medium" | "large" | "full";
-
-/**
- * Home Assistant dialog component
- *
- * @element ha-wa-dialog
- * @extends {LitElement}
- *
- * @summary
- * A stylable dialog built using the `wa-dialog` component, providing a standardized header (ha-dialog-header),
- * body, and footer (preferably using `ha-dialog-footer`) with slots
- *
- * You can open and close the dialog declaratively by using the `data-dialog="close"` attribute.
- * @see https://webawesome.com/docs/components/dialog/#opening-and-closing-dialogs-declaratively
- *
- * @slot header - Replace the entire header area.
- * @slot headerNavigationIcon - Leading header action (e.g. close/back button).
- * @slot headerActionItems - Trailing header actions (e.g. buttons, menus).
- * @slot - Dialog content body.
- * @slot footer - Dialog footer content.
- *
- * @csspart dialog - The dialog surface.
- * @csspart header - The header container.
- * @csspart body - The scrollable body container.
- * @csspart footer - The footer container.
- *
- * @cssprop --dialog-content-padding - Padding for the dialog content sections.
- * @cssprop --ha-dialog-show-duration - Show animation duration.
- * @cssprop --ha-dialog-hide-duration - Hide animation duration.
- * @cssprop --ha-dialog-surface-background - Dialog background color.
- * @cssprop --ha-dialog-border-radius - Border radius of the dialog surface.
- * @cssprop --dialog-z-index - Z-index for the dialog.
- * @cssprop --dialog-surface-position - CSS position of the dialog surface.
- * @cssprop --dialog-surface-margin-top - Top margin for the dialog surface.
- *
- * @attr {boolean} open - Controls the dialog open state.
- * @attr {("small"|"medium"|"large"|"full")} width - Preferred dialog width preset. Defaults to "medium".
- * @attr {boolean} prevent-scrim-close - Prevents closing the dialog by clicking the scrim/overlay. Defaults to false.
- * @attr {string} header-title - Header title text when no custom title slot is provided.
- * @attr {string} header-subtitle - Header subtitle text when no custom subtitle slot is provided.
- * @attr {("above"|"below")} header-subtitle-position - Position of the subtitle relative to the title. Defaults to "below".
- * @attr {boolean} flexcontent - Makes the dialog body a flex container for flexible layouts.
- *
- * @event opened - Fired when the dialog is shown.
- * @event closed - Fired after the dialog is hidden.
- *
- * @remarks
- * **Focus Management:**
- * To automatically focus an element when the dialog opens, add the `autofocus` attribute to it.
- * Components with `delegatesFocus: true` (like `ha-form`) will forward focus to their first focusable child.
- * Example: `<ha-form autofocus .schema=${schema}></ha-form>`
- *
- * @see https://github.com/home-assistant/frontend/issues/27143
- */
-@customElement("ha-wa-dialog")
-export class HaWaDialog extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ type: Boolean, reflect: true })
-  public open = false;
-
-  @property({ type: String, reflect: true, attribute: "width" })
-  public width: DialogWidth = "medium";
-
-  @property({ type: Boolean, reflect: true, attribute: "prevent-scrim-close" })
-  public preventScrimClose = false;
-
-  @property({ type: String, attribute: "header-title" })
-  public headerTitle = "";
-
-  @property({ type: String, attribute: "header-subtitle" })
-  public headerSubtitle = "";
-
-  @property({ type: String, attribute: "header-subtitle-position" })
-  public headerSubtitlePosition: "above" | "below" = "below";
-
-  @property({ type: Boolean, reflect: true, attribute: "flexcontent" })
-  public flexContent = false;
-
-  @state()
-  private _open = false;
-
-  protected updated(
-    changedProperties: Map<string | number | symbol, unknown>
-  ): void {
-    super.updated(changedProperties);
-
-    if (changedProperties.has("open")) {
-      this._open = this.open;
-    }
-  }
-
-  protected render() {
-    return html`
-      <wa-dialog
-        .open=${this._open}
-        .lightDismiss=${!this.preventScrimClose}
-        without-header
-        @wa-show=${this._handleShow}
-        @wa-after-hide=${this._handleAfterHide}
-      >
-        <slot name="header">
-          <ha-dialog-header .subtitlePosition=${this.headerSubtitlePosition}>
-            <slot name="headerNavigationIcon" slot="navigationIcon">
-              <ha-icon-button
-                data-dialog="close"
-                .label=${this.hass?.localize("ui.common.close") ?? "Close"}
-                .path=${mdiClose}
-              ></ha-icon-button>
-            </slot>
-            ${this.headerTitle
-              ? html`<span slot="title" class="title">
-                  ${this.headerTitle}
-                </span>`
-              : nothing}
-            ${this.headerSubtitle
-              ? html`<span slot="subtitle">${this.headerSubtitle}</span>`
-              : nothing}
-            <slot name="headerActionItems" slot="actionItems"></slot>
-          </ha-dialog-header>
-        </slot>
-        <div class="body ha-scrollbar">
-          <slot></slot>
-        </div>
-        <slot name="footer" slot="footer"></slot>
-      </wa-dialog>
-    `;
-  }
-
-  private _handleShow = async () => {
-    this._open = true;
-    fireEvent(this, "opened");
-
-    await this.updateComplete;
-
-    (this.querySelector("[autofocus]") as HTMLElement | null)?.focus();
-  };
-
-  private _handleAfterHide = () => {
-    this._open = false;
-    fireEvent(this, "closed");
-  };
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._open = false;
-  }
-
-  static styles = [
-    haStyleScrollbar,
-    css`
-      wa-dialog {
-        --full-width: var(
-          --ha-dialog-width-full,
-          min(
-            95vw,
-            calc(
-              100vw - var(--safe-area-inset-left, var(--ha-space-0)) - var(
-                  --safe-area-inset-right,
-                  var(--ha-space-0)
-                )
-            )
-          )
-        );
-        --width: var(--ha-dialog-width-md, min(580px, var(--full-width)));
-        --spacing: var(--dialog-content-padding, var(--ha-space-6));
-        --show-duration: var(--ha-dialog-show-duration, 200ms);
-        --hide-duration: var(--ha-dialog-hide-duration, 200ms);
-        --ha-dialog-surface-background: var(
-          --card-background-color,
-          var(--ha-color-surface-default)
-        );
-        --wa-color-surface-raised: var(
-          --ha-dialog-surface-background,
-          var(--card-background-color, var(--ha-color-surface-default))
-        );
-        --wa-panel-border-radius: var(
-          --ha-dialog-border-radius,
-          var(--ha-border-radius-3xl)
-        );
-        max-width: var(--ha-dialog-max-width, 100vw);
-        max-width: var(--ha-dialog-max-width, 100svw);
-      }
-
-      :host([width="small"]) wa-dialog {
-        --width: var(--ha-dialog-width-sm, min(320px, var(--full-width)));
-      }
-
-      :host([width="large"]) wa-dialog {
-        --width: var(--ha-dialog-width-lg, min(720px, var(--full-width)));
-      }
-
-      :host([width="full"]) wa-dialog {
-        --width: var(--full-width);
-      }
-
-      wa-dialog::part(dialog) {
-        min-width: var(--width, var(--full-width));
-        max-width: var(--width, var(--full-width));
-        max-height: var(
-          --ha-dialog-max-height,
-          calc(100% - var(--ha-space-20))
-        );
-        position: var(--dialog-surface-position, relative);
-        margin-top: var(--dialog-surface-margin-top, auto);
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-
-      @media all and (max-width: 450px), all and (max-height: 500px) {
-        :host {
-          --ha-dialog-border-radius: var(--ha-space-0);
-        }
-
-        wa-dialog {
-          --full-width: var(--ha-dialog-width-full, 100vw);
-        }
-
-        wa-dialog::part(dialog) {
-          min-height: var(--ha-dialog-min-height, 100vh);
-          min-height: var(--ha-dialog-min-height, 100svh);
-          max-height: var(--ha-dialog-max-height, 100vh);
-          max-height: var(--ha-dialog-max-height, 100svh);
-          padding-top: var(--safe-area-inset-top, var(--ha-space-0));
-          padding-bottom: var(--safe-area-inset-bottom, var(--ha-space-0));
-          padding-left: var(--safe-area-inset-left, var(--ha-space-0));
-          padding-right: var(--safe-area-inset-right, var(--ha-space-0));
-        }
-      }
-
-      .header-title-container {
-        display: flex;
-        align-items: center;
-      }
-
-      .header-title {
-        margin: 0;
-        margin-bottom: 0;
-        color: var(
-          --ha-dialog-header-title-color,
-          var(--ha-color-on-surface-default, var(--primary-text-color))
-        );
-        font-size: var(
-          --ha-dialog-header-title-font-size,
-          var(--ha-font-size-2xl)
-        );
-        line-height: var(
-          --ha-dialog-header-title-line-height,
-          var(--ha-line-height-condensed)
-        );
-        font-weight: var(
-          --ha-dialog-header-title-font-weight,
-          var(--ha-font-weight-normal)
-        );
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin-right: var(--ha-space-3);
-      }
-
-      wa-dialog::part(body) {
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-        max-width: 100%;
-        overflow: hidden;
-      }
-
-      .body {
-        position: var(--dialog-content-position, relative);
-        padding: 0 var(--dialog-content-padding, var(--ha-space-6))
-          var(--dialog-content-padding, var(--ha-space-6))
-          var(--dialog-content-padding, var(--ha-space-6));
-        overflow: auto;
-        flex-grow: 1;
-      }
-      :host([flexcontent]) .body {
-        max-width: 100%;
-        display: flex;
-        flex-direction: column;
-      }
-
-      wa-dialog::part(footer) {
-        padding: var(--ha-space-0);
-      }
-
-      ::slotted([slot="footer"]) {
-        display: flex;
-        padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4)
-          var(--ha-space-4);
-        gap: var(--ha-space-3);
-        justify-content: flex-end;
-        align-items: center;
-        width: 100%;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-wa-dialog": HaWaDialog;
-  }
-
-  interface HASSDomEvents {
-    opened: undefined;
-    closed: undefined;
-  }
-}
--- a/src/components/ha-web-rtc-player.ts
+++ b/src/components/ha-web-rtc-player.ts
@@ -321,10 +321,6 @@ class HaWebRtcPlayer extends LitElement {
    if (!this._remoteStream) {
      return;
    }
-    // If the track is audio and the player is muted, we do not add it to the stream.
-    if (event.track.kind === "audio" && this.muted) {
-      return;
-    }
    this._remoteStream.addTrack(event.track);
    if (!this.hasUpdated) {
      await this.updateComplete;
--- a/src/components/media-player/dialog-media-player-browse.ts
+++ b/src/components/media-player/dialog-media-player-browse.ts
@@ -167,8 +167,6 @@ class DialogMediaPlayerBrowse extends LitElement {
          .accept=${this._params.accept}
          .defaultId=${this._params.defaultId}
          .defaultType=${this._params.defaultType}
-          .hideContentType=${this._params.hideContentType}
-          .contentIdHelper=${this._params.contentIdHelper}
          @close-dialog=${this.closeDialog}
          @media-picked=${this._mediaPicked}
          @media-browsed=${this._mediaBrowsed}
--- a/src/components/media-player/ha-browse-media-manual.ts
+++ b/src/components/media-player/ha-browse-media-manual.ts
@@ -19,12 +19,8 @@ class BrowseMediaManual extends LitElement {

  @property({ attribute: false }) public item!: MediaPlayerItemId;

-  @property({ attribute: false }) public hideContentType = false;
-
-  @property({ attribute: false }) public contentIdHelper?: string;
-
  private _schema = memoizeOne(
-    (hideContentType: boolean) =>
+    () =>
      [
        {
          name: "media_content_id",
@@ -33,17 +29,13 @@ class BrowseMediaManual extends LitElement {
            text: {},
          },
        },
-        ...(hideContentType
-          ? []
-          : [
-              {
-                name: "media_content_type",
-                required: false,
-                selector: {
-                  text: {},
-                },
-              },
-            ]),
+        {
+          name: "media_content_type",
+          required: false,
+          selector: {
+            text: {},
+          },
+        },
      ] as const
  );

@@ -53,7 +45,7 @@ class BrowseMediaManual extends LitElement {
        <div class="card-content">
          <ha-form
            .hass=${this.hass}
-            .schema=${this._schema(this.hideContentType)}
+            .schema=${this._schema()}
            .data=${this.item}
            .computeLabel=${this._computeLabel}
            .computeHelper=${this._computeHelper}
@@ -77,35 +69,13 @@ class BrowseMediaManual extends LitElement {

  private _computeLabel = (
    entry: SchemaUnion<ReturnType<typeof this._schema>>
-  ): string => {
-    switch (entry.name) {
-      case "media_content_id":
-      case "media_content_type":
-        return this.hass.localize(
-          `ui.components.selectors.media.${entry.name}`
-        );
-    }
-    return entry.name;
-  };
+  ): string =>
+    this.hass.localize(`ui.components.selectors.media.${entry.name}`);

  private _computeHelper = (
    entry: SchemaUnion<ReturnType<typeof this._schema>>
-  ): string => {
-    switch (entry.name) {
-      case "media_content_id":
-        return (
-          this.contentIdHelper ||
-          this.hass.localize(
-            `ui.components.selectors.media.${entry.name}_detail`
-          )
-        );
-      case "media_content_type":
-        return this.hass.localize(
-          `ui.components.selectors.media.${entry.name}_detail`
-        );
-    }
-    return "";
-  };
+  ): string =>
+    this.hass.localize(`ui.components.selectors.media.${entry.name}_detail`);

  private _mediaPicked() {
    fireEvent(this, "manual-media-picked", {
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -76,8 +76,8 @@ declare global {
 }

 export interface MediaPlayerItemId {
-  media_content_id?: string | undefined;
-  media_content_type?: string | undefined;
+  media_content_id: string | undefined;
+  media_content_type: string | undefined;
 }

 const MANUAL_ITEM: MediaPlayerItem = {
@@ -113,10 +113,6 @@ export class HaMediaPlayerBrowse extends LitElement {

  @property({ attribute: false }) public defaultType?: string;

-  @property({ attribute: false }) public hideContentType = false;
-
-  @property({ attribute: false }) public contentIdHelper?: string;
-
  // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
  @property({ type: Boolean, reflect: true }) public narrow = false;

@@ -525,8 +521,6 @@ export class HaMediaPlayerBrowse extends LitElement {
                        media_content_type: this.defaultType || "",
                      }}
                      .hass=${this.hass}
-                      .hideContentType=${this.hideContentType}
-                      .contentIdHelper=${this.contentIdHelper}
                      @manual-media-picked=${this._manualPicked}
                    ></ha-browse-media-manual>`
                  : isTTSMediaSource(currentItem.media_content_id)
--- a/src/components/media-player/show-media-browser-dialog.ts
+++ b/src/components/media-player/show-media-browser-dialog.ts
@@ -14,8 +14,6 @@ export interface MediaPlayerBrowseDialogParams {
  accept?: string[];
  defaultId?: string;
  defaultType?: string;
-  hideContentType?: boolean;
-  contentIdHelper?: string;
 }

 export const showMediaBrowserDialog = (
--- a/src/components/target-picker/dialog/dialog-target-details.ts
+++ b/src/components/target-picker/dialog/dialog-target-details.ts
@@ -1,104 +0,0 @@
-import { mdiClose } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
-import type { HassDialog } from "../../../dialogs/make-dialog-manager";
-import type { HomeAssistant } from "../../../types";
-import "../../ha-dialog-header";
-import "../../ha-icon-button";
-import "../../ha-icon-next";
-import "../../ha-md-dialog";
-import type { HaMdDialog } from "../../ha-md-dialog";
-import "../../ha-md-list";
-import "../../ha-md-list-item";
-import "../../ha-svg-icon";
-import "../ha-target-picker-item-row";
-import type { TargetDetailsDialogParams } from "./show-dialog-target-details";
-
-@customElement("ha-dialog-target-details")
-class DialogTargetDetails extends LitElement implements HassDialog {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _params?: TargetDetailsDialogParams;
-
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
-
-  public showDialog(params: TargetDetailsDialogParams): void {
-    this._params = params;
-  }
-
-  public closeDialog() {
-    this._dialog?.close();
-    return true;
-  }
-
-  private _dialogClosed() {
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-    this._params = undefined;
-  }
-
-  protected render() {
-    if (!this._params) {
-      return nothing;
-    }
-
-    return html`
-      <ha-md-dialog open @closed=${this._dialogClosed}>
-        <ha-dialog-header slot="headline">
-          <ha-icon-button
-            slot="navigationIcon"
-            @click=${this.closeDialog}
-            .label=${this.hass.localize("ui.common.close")}
-            .path=${mdiClose}
-          ></ha-icon-button>
-          <span slot="title"
-            >${this.hass.localize(
-              "ui.components.target-picker.target_details"
-            )}</span
-          >
-          <span slot="subtitle"
-            >${this.hass.localize(
-              `ui.components.target-picker.type.${this._params.type}`
-            )}:
-            ${this._params.title}</span
-          >
-        </ha-dialog-header>
-        <div slot="content">
-          <ha-target-picker-item-row
-            .hass=${this.hass}
-            .type=${this._params.type}
-            .itemId=${this._params.itemId}
-            .deviceFilter=${this._params.deviceFilter}
-            .entityFilter=${this._params.entityFilter}
-            .includeDomains=${this._params.includeDomains}
-            .includeDeviceClasses=${this._params.includeDeviceClasses}
-            expand
-          ></ha-target-picker-item-row>
-        </div>
-      </ha-md-dialog>
-    `;
-  }
-
-  static styles = css`
-    ha-md-dialog {
-      min-width: 400px;
-      max-height: 90%;
-      --dialog-content-padding: var(--ha-space-2) var(--ha-space-6)
-        max(var(--safe-area-inset-bottom, var(--ha-space-0)), var(--ha-space-8));
-    }
-
-    @media all and (max-width: 600px), all and (max-height: 500px) {
-      ha-md-dialog {
-        --md-dialog-container-shape: var(--ha-space-0);
-        min-width: 100%;
-        min-height: 100%;
-      }
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dialog-target-details": DialogTargetDetails;
-  }
-}
--- a/src/components/target-picker/dialog/show-dialog-target-details.ts
+++ b/src/components/target-picker/dialog/show-dialog-target-details.ts
@@ -1,28 +0,0 @@
-import { fireEvent } from "../../../common/dom/fire_event";
-import type { HaEntityPickerEntityFilterFunc } from "../../../data/entity";
-import type { TargetType } from "../../../data/target";
-import type { HaDevicePickerDeviceFilterFunc } from "../../device/ha-device-picker";
-
-export type NewBackupType = "automatic" | "manual";
-
-export interface TargetDetailsDialogParams {
-  title: string;
-  type: TargetType;
-  itemId: string;
-  deviceFilter?: HaDevicePickerDeviceFilterFunc;
-  entityFilter?: HaEntityPickerEntityFilterFunc;
-  includeDomains?: string[];
-  includeDeviceClasses?: string[];
-}
-
-export const loadTargetDetailsDialog = () => import("./dialog-target-details");
-
-export const showTargetDetailsDialog = (
-  element: HTMLElement,
-  params: TargetDetailsDialogParams
-) =>
-  fireEvent(element, "show-dialog", {
-    dialogTag: "ha-dialog-target-details",
-    dialogImport: loadTargetDetailsDialog,
-    dialogParams: params,
-  });
--- a/src/components/target-picker/ha-target-picker-item-group.ts
+++ b/src/components/target-picker/ha-target-picker-item-group.ts
@@ -1,113 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
-import type { TargetType, TargetTypeFloorless } from "../../data/target";
-import type { HomeAssistant } from "../../types";
-import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
-import "../ha-expansion-panel";
-import "../ha-md-list";
-import "./ha-target-picker-item-row";
-
-@customElement("ha-target-picker-item-group")
-export class HaTargetPickerItemGroup extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public type!: TargetTypeFloorless;
-
-  @property({ attribute: false }) public items!: Partial<
-    Record<TargetType, string[]>
-  >;
-
-  @property({ type: Boolean }) public collapsed = false;
-
-  @property({ attribute: false })
-  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
-
-  @property({ attribute: false })
-  public entityFilter?: HaEntityPickerEntityFilterFunc;
-
-  /**
-   * Show only targets with entities from specific domains.
-   * @type {Array}
-   * @attr include-domains
-   */
-  @property({ type: Array, attribute: "include-domains" })
-  public includeDomains?: string[];
-
-  /**
-   * Show only targets with entities of these device classes.
-   * @type {Array}
-   * @attr include-device-classes
-   */
-  @property({ type: Array, attribute: "include-device-classes" })
-  public includeDeviceClasses?: string[];
-
-  protected render() {
-    let count = 0;
-    Object.values(this.items).forEach((items) => {
-      if (items) {
-        count += items.length;
-      }
-    });
-
-    return html`<ha-expansion-panel
-      .expanded=${!this.collapsed}
-      left-chevron
-      @expanded-changed=${this._expandedChanged}
-    >
-      <div slot="header" class="heading">
-        ${this.hass.localize(
-          `ui.components.target-picker.selected.${this.type}`,
-          {
-            count,
-          }
-        )}
-      </div>
-      ${Object.entries(this.items).map(([type, items]) =>
-        items
-          ? items.map(
-              (item) =>
-                html`<ha-target-picker-item-row
-                  .hass=${this.hass}
-                  .type=${type as TargetTypeFloorless}
-                  .itemId=${item}
-                  .deviceFilter=${this.deviceFilter}
-                  .entityFilter=${this.entityFilter}
-                  .includeDomains=${this.includeDomains}
-                  .includeDeviceClasses=${this.includeDeviceClasses}
-                ></ha-target-picker-item-row>`
-            )
-          : nothing
-      )}
-    </ha-expansion-panel>`;
-  }
-
-  private _expandedChanged(ev: CustomEvent) {
-    this.collapsed = !ev.detail.expanded;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      --expansion-panel-content-padding: var(--ha-space-0);
-    }
-    ha-expansion-panel::part(summary) {
-      background-color: var(--ha-color-fill-neutral-quiet-resting);
-      padding: var(--ha-space-1) var(--ha-space-2);
-      font-weight: var(--ha-font-weight-bold);
-      color: var(--secondary-text-color);
-      display: flex;
-      justify-content: space-between;
-      min-height: unset;
-    }
-    ha-md-list {
-      padding: var(--ha-space-0);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-target-picker-item-group": HaTargetPickerItemGroup;
-  }
-}
--- a/src/components/target-picker/ha-target-picker-item-row.ts
+++ b/src/components/target-picker/ha-target-picker-item-row.ts
@@ -1,695 +0,0 @@
-import { consume } from "@lit/context";
-import {
-  mdiClose,
-  mdiDevices,
-  mdiHome,
-  mdiLabel,
-  mdiTextureBox,
-} from "@mdi/js";
-import { css, html, LitElement, nothing, type PropertyValues } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../common/dom/fire_event";
-import { computeAreaName } from "../../common/entity/compute_area_name";
-import {
-  computeDeviceName,
-  computeDeviceNameDisplay,
-} from "../../common/entity/compute_device_name";
-import { computeDomain } from "../../common/entity/compute_domain";
-import { computeEntityName } from "../../common/entity/compute_entity_name";
-import { getEntityContext } from "../../common/entity/context/get_entity_context";
-import { computeRTL } from "../../common/util/compute_rtl";
-import { getConfigEntry } from "../../data/config_entries";
-import { labelsContext } from "../../data/context";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
-import { domainToName } from "../../data/integration";
-import type { LabelRegistryEntry } from "../../data/label_registry";
-import {
-  areaMeetsFilter,
-  deviceMeetsFilter,
-  entityRegMeetsFilter,
-  extractFromTarget,
-  type ExtractFromTargetResult,
-  type ExtractFromTargetResultReferenced,
-  type TargetType,
-} from "../../data/target";
-import { buttonLinkStyle } from "../../resources/styles";
-import type { HomeAssistant } from "../../types";
-import { brandsUrl } from "../../util/brands-url";
-import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
-import { floorDefaultIconPath } from "../ha-floor-icon";
-import "../ha-icon-button";
-import "../ha-md-list";
-import type { HaMdList } from "../ha-md-list";
-import "../ha-md-list-item";
-import type { HaMdListItem } from "../ha-md-list-item";
-import "../ha-state-icon";
-import "../ha-svg-icon";
-import { showTargetDetailsDialog } from "./dialog/show-dialog-target-details";
-
-@customElement("ha-target-picker-item-row")
-export class HaTargetPickerItemRow extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ reflect: true }) public type!: TargetType;
-
-  @property({ attribute: "item-id" }) public itemId!: string;
-
-  @property({ type: Boolean }) public expand = false;
-
-  @property({ type: Boolean, attribute: "sub-entry", reflect: true })
-  public subEntry = false;
-
-  @property({ type: Boolean, attribute: "hide-context" })
-  public hideContext = false;
-
-  @property({ attribute: false })
-  public parentEntries?: ExtractFromTargetResultReferenced;
-
-  @property({ attribute: false })
-  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
-
-  @property({ attribute: false })
-  public entityFilter?: HaEntityPickerEntityFilterFunc;
-
-  /**
-   * Show only targets with entities from specific domains.
-   * @type {Array}
-   * @attr include-domains
-   */
-  @property({ type: Array, attribute: "include-domains" })
-  public includeDomains?: string[];
-
-  /**
-   * Show only targets with entities of these device classes.
-   * @type {Array}
-   * @attr include-device-classes
-   */
-  @property({ type: Array, attribute: "include-device-classes" })
-  public includeDeviceClasses?: string[];
-
-  @state() private _iconImg?: string;
-
-  @state() private _domainName?: string;
-
-  @state() private _entries?: ExtractFromTargetResult;
-
-  @state()
-  @consume({ context: labelsContext, subscribe: true })
-  _labelRegistry!: LabelRegistryEntry[];
-
-  @query("ha-md-list-item") public item?: HaMdListItem;
-
-  @query("ha-md-list") public list?: HaMdList;
-
-  @query("ha-target-picker-item-row") public itemRow?: HaTargetPickerItemRow;
-
-  protected willUpdate(changedProps: PropertyValues) {
-    if (!this.subEntry && changedProps.has("itemId")) {
-      this._updateItemData();
-    }
-  }
-
-  protected render() {
-    const { name, context, iconPath, fallbackIconPath, stateObject } =
-      this._itemData(this.type, this.itemId);
-
-    const showDevices = ["floor", "area", "label"].includes(this.type);
-    const showEntities = this.type !== "entity";
-
-    const entries = this.parentEntries || this._entries;
-
-    // Don't show sub entries that have no entities
-    if (
-      this.subEntry &&
-      this.type !== "entity" &&
-      (!entries || entries.referenced_entities.length === 0)
-    ) {
-      return nothing;
-    }
-
-    return html`
-      <ha-md-list-item type="text">
-        <div class="icon" slot="start">
-          ${this.subEntry
-            ? html`
-                <div class="horizontal-line-wrapper">
-                  <div class="horizontal-line"></div>
-                </div>
-              `
-            : nothing}
-          ${iconPath
-            ? html`<ha-icon .icon=${iconPath}></ha-icon>`
-            : this._iconImg
-              ? html`<img
-                  alt=${this._domainName || ""}
-                  crossorigin="anonymous"
-                  referrerpolicy="no-referrer"
-                  src=${this._iconImg}
-                />`
-              : fallbackIconPath
-                ? html`<ha-svg-icon .path=${fallbackIconPath}></ha-svg-icon>`
-                : stateObject
-                  ? html`
-                      <ha-state-icon
-                        .hass=${this.hass}
-                        .stateObj=${stateObject}
-                      >
-                      </ha-state-icon>
-                    `
-                  : nothing}
-        </div>
-
-        <div slot="headline">${name}</div>
-        ${context && !this.hideContext
-          ? html`<span slot="supporting-text">${context}</span>`
-          : this._domainName && this.subEntry
-            ? html`<span slot="supporting-text" class="domain"
-                >${this._domainName}</span
-              >`
-            : nothing}
-        ${!this.subEntry &&
-        ((entries && (showEntities || showDevices)) || this._domainName)
-          ? html`
-              <div slot="end" class="summary">
-                ${showEntities && !this.expand
-                  ? html`<button class="main link" @click=${this._openDetails}>
-                      ${this.hass.localize(
-                        "ui.components.target-picker.entities_count",
-                        {
-                          count: entries?.referenced_entities.length,
-                        }
-                      )}
-                    </button>`
-                  : showEntities
-                    ? html`<span class="main">
-                        ${this.hass.localize(
-                          "ui.components.target-picker.entities_count",
-                          {
-                            count: entries?.referenced_entities.length,
-                          }
-                        )}
-                      </span>`
-                    : nothing}
-                ${showDevices
-                  ? html`<span class="secondary"
-                      >${this.hass.localize(
-                        "ui.components.target-picker.devices_count",
-                        {
-                          count: entries?.referenced_devices.length,
-                        }
-                      )}</span
-                    >`
-                  : nothing}
-                ${this._domainName && !showDevices
-                  ? html`<span class="secondary domain"
-                      >${this._domainName}</span
-                    >`
-                  : nothing}
-              </div>
-            `
-          : nothing}
-        ${!this.expand && !this.subEntry
-          ? html`
-              <ha-icon-button
-                .path=${mdiClose}
-                slot="end"
-                @click=${this._removeItem}
-              ></ha-icon-button>
-            `
-          : nothing}
-      </ha-md-list-item>
-      ${this.expand && entries && entries.referenced_entities
-        ? this._renderEntries()
-        : nothing}
-    `;
-  }
-
-  private _renderEntries() {
-    const entries = this.parentEntries || this._entries;
-
-    let nextType: TargetType =
-      this.type === "floor"
-        ? "area"
-        : this.type === "area"
-          ? "device"
-          : "entity";
-
-    if (this.type === "label") {
-      if (entries?.referenced_areas.length) {
-        nextType = "area";
-      } else if (entries?.referenced_devices.length) {
-        nextType = "device";
-      }
-    }
-
-    const rows1 =
-      (nextType === "area"
-        ? entries?.referenced_areas
-        : nextType === "device"
-          ? entries?.referenced_devices
-          : entries?.referenced_entities) || [];
-
-    const devicesInAreas = [] as string[];
-
-    const rows1Entries =
-      nextType === "entity"
-        ? undefined
-        : rows1.map((rowItem) => {
-            const nextEntries = {
-              referenced_areas: [] as string[],
-              referenced_devices: [] as string[],
-              referenced_entities: [] as string[],
-            };
-
-            if (nextType === "area") {
-              nextEntries.referenced_devices =
-                entries?.referenced_devices.filter(
-                  (device_id) =>
-                    this.hass.devices?.[device_id]?.area_id === rowItem &&
-                    entries?.referenced_entities.some(
-                      (entity_id) =>
-                        this.hass.entities?.[entity_id]?.device_id === device_id
-                    )
-                ) || ([] as string[]);
-
-              devicesInAreas.push(...nextEntries.referenced_devices);
-
-              nextEntries.referenced_entities =
-                entries?.referenced_entities.filter((entity_id) => {
-                  const entity = this.hass.entities[entity_id];
-                  return (
-                    entity.area_id === rowItem ||
-                    !entity.device_id ||
-                    nextEntries.referenced_devices.includes(entity.device_id)
-                  );
-                }) || ([] as string[]);
-
-              return nextEntries;
-            }
-
-            nextEntries.referenced_entities =
-              entries?.referenced_entities.filter(
-                (entity_id) =>
-                  this.hass.entities?.[entity_id]?.device_id === rowItem
-              ) || ([] as string[]);
-
-            return nextEntries;
-          });
-
-    const entityRows =
-      this.type === "label" && entries
-        ? entries.referenced_entities.filter((entity_id) =>
-            this.hass.entities[entity_id].labels.includes(this.itemId)
-          )
-        : nextType === "device" && entries
-          ? entries.referenced_entities.filter(
-              (entity_id) =>
-                this.hass.entities[entity_id].area_id === this.itemId
-            )
-          : [];
-
-    const deviceRows =
-      this.type === "label" && entries
-        ? entries.referenced_devices.filter(
-            (device_id) =>
-              !devicesInAreas.includes(device_id) &&
-              this.hass.devices[device_id].labels.includes(this.itemId)
-          )
-        : [];
-
-    const deviceRowsEntries =
-      deviceRows.length === 0
-        ? undefined
-        : deviceRows.map((device_id) => ({
-            referenced_areas: [] as string[],
-            referenced_devices: [] as string[],
-            referenced_entities:
-              entries?.referenced_entities.filter(
-                (entity_id) =>
-                  this.hass.entities?.[entity_id]?.device_id === device_id
-              ) || ([] as string[]),
-          }));
-
-    return html`
-      <div class="entries-tree">
-        <div class="line-wrapper">
-          <div class="line"></div>
-        </div>
-        <ha-md-list class="entries">
-          ${rows1.map(
-            (itemId, index) => html`
-              <ha-target-picker-item-row
-                sub-entry
-                .hass=${this.hass}
-                .type=${nextType}
-                .itemId=${itemId}
-                .parentEntries=${rows1Entries?.[index]}
-                .hideContext=${this.hideContext || this.type !== "label"}
-                expand
-              ></ha-target-picker-item-row>
-            `
-          )}
-          ${deviceRows.map(
-            (itemId, index) => html`
-              <ha-target-picker-item-row
-                sub-entry
-                .hass=${this.hass}
-                type="device"
-                .itemId=${itemId}
-                .parentEntries=${deviceRowsEntries?.[index]}
-                .hideContext=${this.hideContext || this.type !== "label"}
-                expand
-              ></ha-target-picker-item-row>
-            `
-          )}
-          ${entityRows.map(
-            (itemId) => html`
-              <ha-target-picker-item-row
-                sub-entry
-                .hass=${this.hass}
-                type="entity"
-                .itemId=${itemId}
-                .hideContext=${this.hideContext || this.type !== "label"}
-              ></ha-target-picker-item-row>
-            `
-          )}
-        </ha-md-list>
-      </div>
-    `;
-  }
-
-  private async _updateItemData() {
-    if (this.type === "entity") {
-      this._entries = undefined;
-      return;
-    }
-    try {
-      const entries = await extractFromTarget(this.hass, {
-        [`${this.type}_id`]: [this.itemId],
-      });
-
-      const hiddenAreaIds: string[] = [];
-      if (this.type === "floor" || this.type === "label") {
-        entries.referenced_areas = entries.referenced_areas.filter(
-          (area_id) => {
-            const area = this.hass.areas[area_id];
-            if (
-              (this.type === "floor" || area.labels.includes(this.itemId)) &&
-              areaMeetsFilter(
-                area,
-                this.hass.devices,
-                this.hass.entities,
-                this.deviceFilter,
-                this.includeDomains,
-                this.includeDeviceClasses,
-                this.hass.states,
-                this.entityFilter
-              )
-            ) {
-              return true;
-            }
-
-            hiddenAreaIds.push(area_id);
-            return false;
-          }
-        );
-      }
-
-      const hiddenDeviceIds: string[] = [];
-      if (
-        this.type === "floor" ||
-        this.type === "area" ||
-        this.type === "label"
-      ) {
-        entries.referenced_devices = entries.referenced_devices.filter(
-          (device_id) => {
-            const device = this.hass.devices[device_id];
-            if (
-              !hiddenAreaIds.includes(device.area_id || "") &&
-              (this.type !== "label" || device.labels.includes(this.itemId)) &&
-              deviceMeetsFilter(
-                device,
-                this.hass.entities,
-                this.deviceFilter,
-                this.includeDomains,
-                this.includeDeviceClasses,
-                this.hass.states,
-                this.entityFilter
-              )
-            ) {
-              return true;
-            }
-
-            hiddenDeviceIds.push(device_id);
-            return false;
-          }
-        );
-      }
-
-      entries.referenced_entities = entries.referenced_entities.filter(
-        (entity_id) => {
-          const entity = this.hass.entities[entity_id];
-          if (hiddenDeviceIds.includes(entity.device_id || "")) {
-            return false;
-          }
-          if (
-            (this.type === "area" && entity.area_id === this.itemId) ||
-            (this.type === "label" && entity.labels.includes(this.itemId)) ||
-            entries.referenced_devices.includes(entity.device_id || "")
-          ) {
-            return entityRegMeetsFilter(
-              entity,
-              this.type === "label",
-              this.includeDomains,
-              this.includeDeviceClasses,
-              this.hass.states,
-              this.entityFilter
-            );
-          }
-          return false;
-        }
-      );
-
-      this._entries = entries;
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error("Failed to extract target", e);
-    }
-  }
-
-  private _itemData = memoizeOne((type: TargetType, item: string) => {
-    if (type === "floor") {
-      const floor = this.hass.floors?.[item];
-      return {
-        name: floor?.name || item,
-        iconPath: floor?.icon,
-        fallbackIconPath: floor ? floorDefaultIconPath(floor) : mdiHome,
-      };
-    }
-    if (type === "area") {
-      const area = this.hass.areas?.[item];
-      return {
-        name: area?.name || item,
-        context: area.floor_id && this.hass.floors?.[area.floor_id]?.name,
-        iconPath: area?.icon,
-        fallbackIconPath: mdiTextureBox,
-      };
-    }
-    if (type === "device") {
-      const device = this.hass.devices?.[item];
-
-      if (device.primary_config_entry) {
-        this._getDeviceDomain(device.primary_config_entry);
-      }
-
-      return {
-        name: device ? computeDeviceNameDisplay(device, this.hass) : item,
-        context: device?.area_id && this.hass.areas?.[device.area_id]?.name,
-        fallbackIconPath: mdiDevices,
-      };
-    }
-    if (type === "entity") {
-      this._setDomainName(computeDomain(item));
-
-      const stateObject = this.hass.states[item];
-      const entityName = computeEntityName(
-        stateObject,
-        this.hass.entities,
-        this.hass.devices
-      );
-      const { area, device } = getEntityContext(
-        stateObject,
-        this.hass.entities,
-        this.hass.devices,
-        this.hass.areas,
-        this.hass.floors
-      );
-      const deviceName = device ? computeDeviceName(device) : undefined;
-      const areaName = area ? computeAreaName(area) : undefined;
-      const context = [areaName, entityName ? deviceName : undefined]
-        .filter(Boolean)
-        .join(computeRTL(this.hass) ? " ◂ " : " ▸ ");
-      return {
-        name: entityName || deviceName || item,
-        context,
-        stateObject,
-      };
-    }
-
-    // type label
-    const label = this._labelRegistry.find((lab) => lab.label_id === item);
-    return {
-      name: label?.name || item,
-      iconPath: label?.icon,
-      fallbackIconPath: mdiLabel,
-    };
-  });
-
-  private _setDomainName(domain: string) {
-    this._domainName = domainToName(this.hass.localize, domain);
-  }
-
-  private _removeItem(ev) {
-    ev.stopPropagation();
-    fireEvent(this, "remove-target-item", {
-      type: this.type,
-      id: this.itemId,
-    });
-  }
-
-  private async _getDeviceDomain(configEntryId: string) {
-    try {
-      const data = await getConfigEntry(this.hass, configEntryId);
-      const domain = data.config_entry.domain;
-      this._iconImg = brandsUrl({
-        domain: domain,
-        type: "icon",
-        darkOptimized: this.hass.themes?.darkMode,
-      });
-
-      this._setDomainName(domain);
-    } catch {
-      // failed to load config entry -> ignore
-    }
-  }
-
-  private _openDetails() {
-    showTargetDetailsDialog(this, {
-      title: this._itemData(this.type, this.itemId).name,
-      type: this.type,
-      itemId: this.itemId,
-      deviceFilter: this.deviceFilter,
-      entityFilter: this.entityFilter,
-      includeDomains: this.includeDomains,
-      includeDeviceClasses: this.includeDeviceClasses,
-    });
-  }
-
-  static styles = [
-    buttonLinkStyle,
-    css`
-      :host {
-        --md-list-item-top-space: var(--ha-space-0);
-        --md-list-item-bottom-space: var(--ha-space-0);
-        --md-list-item-leading-space: var(--ha-space-2);
-        --md-list-item-trailing-space: var(--ha-space-2);
-        --md-list-item-two-line-container-height: 56px;
-      }
-
-      :host([expand]:not([sub-entry])) ha-md-list-item {
-        border: 2px solid var(--ha-color-border-neutral-loud);
-        background-color: var(--ha-color-fill-neutral-quiet-resting);
-        border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
-      }
-
-      state-badge {
-        color: var(--ha-color-on-neutral-quiet);
-      }
-
-      .icon {
-        display: flex;
-      }
-
-      img {
-        width: 24px;
-        height: 24px;
-      }
-      ha-icon-button {
-        --mdc-icon-button-size: 32px;
-      }
-      .summary {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        line-height: var(--ha-line-height-condensed);
-      }
-      :host([sub-entry]) .summary {
-        margin-right: var(--ha-space-12);
-      }
-      .summary .main {
-        font-weight: var(--ha-font-weight-medium);
-      }
-      .summary .secondary {
-        font-size: var(--ha-font-size-s);
-        color: var(--secondary-text-color);
-      }
-      .domain {
-        font-family: var(--ha-font-family-code);
-      }
-
-      .entries-tree {
-        display: flex;
-        position: relative;
-      }
-
-      .entries-tree .line-wrapper {
-        padding: var(--ha-space-5);
-      }
-
-      .entries-tree .line-wrapper .line {
-        border-left: 2px dashed var(--divider-color);
-        height: calc(100% - 28px);
-        position: absolute;
-        top: 0;
-      }
-
-      :host([sub-entry]) .entries-tree .line-wrapper .line {
-        height: calc(100% - 12px);
-        top: -18px;
-      }
-
-      .entries {
-        padding: 0;
-        --md-item-overflow: visible;
-      }
-
-      .horizontal-line-wrapper {
-        position: relative;
-      }
-      .horizontal-line-wrapper .horizontal-line {
-        position: absolute;
-        top: 11px;
-        margin-inline-start: -28px;
-        width: 29px;
-        border-top: 2px dashed var(--divider-color);
-      }
-
-      button.link {
-        text-decoration: none;
-        color: var(--primary-color);
-      }
-
-      button.link:hover,
-      button.link:focus {
-        text-decoration: underline;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-target-picker-item-row": HaTargetPickerItemRow;
-  }
-}
--- a/src/components/target-picker/ha-target-picker-selector.ts
+++ b/src/components/target-picker/ha-target-picker-selector.ts
--- a/src/components/target-picker/ha-target-picker-value-chip.ts
+++ b/src/components/target-picker/ha-target-picker-value-chip.ts
@@ -1,354 +0,0 @@
-import { consume } from "@lit/context";
-// @ts-ignore
-import chipStyles from "@material/chips/dist/mdc.chips.min.css";
-import {
-  mdiClose,
-  mdiDevices,
-  mdiHome,
-  mdiLabel,
-  mdiTextureBox,
-  mdiUnfoldMoreVertical,
-} from "@mdi/js";
-import { css, html, LitElement, nothing, unsafeCSS } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import memoizeOne from "memoize-one";
-import { computeCssColor } from "../../common/color/compute-color";
-import { hex2rgb } from "../../common/color/convert-color";
-import { fireEvent } from "../../common/dom/fire_event";
-import {
-  computeDeviceName,
-  computeDeviceNameDisplay,
-} from "../../common/entity/compute_device_name";
-import { computeDomain } from "../../common/entity/compute_domain";
-import { computeEntityName } from "../../common/entity/compute_entity_name";
-import { getEntityContext } from "../../common/entity/context/get_entity_context";
-import { getConfigEntry } from "../../data/config_entries";
-import { labelsContext } from "../../data/context";
-import { domainToName } from "../../data/integration";
-import type { LabelRegistryEntry } from "../../data/label_registry";
-import type { TargetType } from "../../data/target";
-import type { HomeAssistant } from "../../types";
-import { brandsUrl } from "../../util/brands-url";
-import { floorDefaultIconPath } from "../ha-floor-icon";
-import "../ha-icon";
-import "../ha-icon-button";
-import "../ha-md-list";
-import "../ha-md-list-item";
-import "../ha-state-icon";
-import "../ha-tooltip";
-
-@customElement("ha-target-picker-value-chip")
-export class HaTargetPickerValueChip extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public type!: TargetType;
-
-  @property({ attribute: "item-id" }) public itemId!: string;
-
-  @state() private _domainName?: string;
-
-  @state() private _iconImg?: string;
-
-  @state()
-  @consume({ context: labelsContext, subscribe: true })
-  _labelRegistry!: LabelRegistryEntry[];
-
-  protected render() {
-    const { name, iconPath, fallbackIconPath, stateObject, color } =
-      this._itemData(this.type, this.itemId);
-
-    return html`
-      <div
-        class="mdc-chip ${classMap({
-          [this.type]: true,
-        })}"
-        style=${color
-          ? `--color: rgb(${color}); --background-color: rgba(${color}, .5)`
-          : ""}
-      >
-        ${iconPath
-          ? html`<ha-icon
-              class="mdc-chip__icon mdc-chip__icon--leading"
-              .icon=${iconPath}
-            ></ha-icon>`
-          : this._iconImg
-            ? html`<img
-                class="mdc-chip__icon mdc-chip__icon--leading"
-                alt=${this._domainName || ""}
-                crossorigin="anonymous"
-                referrerpolicy="no-referrer"
-                src=${this._iconImg}
-              />`
-            : fallbackIconPath
-              ? html`<ha-svg-icon
-                  class="mdc-chip__icon mdc-chip__icon--leading"
-                  .path=${fallbackIconPath}
-                ></ha-svg-icon>`
-              : stateObject
-                ? html`<ha-state-icon
-                    class="mdc-chip__icon mdc-chip__icon--leading"
-                    .hass=${this.hass}
-                    .stateObj=${stateObject}
-                  ></ha-state-icon>`
-                : nothing}
-        <span role="gridcell">
-          <span role="button" tabindex="0" class="mdc-chip__primary-action">
-            <span id="title-${this.itemId}" class="mdc-chip__text"
-              >${name}</span
-            >
-          </span>
-        </span>
-        ${this.type === "entity"
-          ? nothing
-          : html`<span role="gridcell">
-              <ha-tooltip .for="expand-${this.itemId}"
-                >${this.hass.localize(
-                  `ui.components.target-picker.expand_${this.type}_id`
-                )}
-              </ha-tooltip>
-              <ha-icon-button
-                class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
-                .label=${this.hass.localize(
-                  "ui.components.target-picker.expand"
-                )}
-                .path=${mdiUnfoldMoreVertical}
-                hide-title
-                .id="expand-${this.itemId}"
-                .type=${this.type}
-                @click=${this._handleExpand}
-              ></ha-icon-button>
-            </span>`}
-        <span role="gridcell">
-          <ha-tooltip .for="remove-${this.itemId}">
-            ${this.hass.localize(
-              `ui.components.target-picker.remove_${this.type}_id`
-            )}
-          </ha-tooltip>
-          <ha-icon-button
-            class="mdc-chip__icon mdc-chip__icon--trailing"
-            .label=${this.hass.localize("ui.components.target-picker.remove")}
-            .path=${mdiClose}
-            hide-title
-            .id="remove-${this.itemId}"
-            .type=${this.type}
-            @click=${this._removeItem}
-          ></ha-icon-button>
-        </span>
-      </div>
-    `;
-  }
-
-  private _itemData = memoizeOne((type: TargetType, itemId: string) => {
-    if (type === "floor") {
-      const floor = this.hass.floors?.[itemId];
-      return {
-        name: floor?.name || itemId,
-        iconPath: floor?.icon,
-        fallbackIconPath: floor ? floorDefaultIconPath(floor) : mdiHome,
-      };
-    }
-    if (type === "area") {
-      const area = this.hass.areas?.[itemId];
-      return {
-        name: area?.name || itemId,
-        iconPath: area?.icon,
-        fallbackIconPath: mdiTextureBox,
-      };
-    }
-    if (type === "device") {
-      const device = this.hass.devices?.[itemId];
-
-      if (device.primary_config_entry) {
-        this._getDeviceDomain(device.primary_config_entry);
-      }
-
-      return {
-        name: device ? computeDeviceNameDisplay(device, this.hass) : itemId,
-        fallbackIconPath: mdiDevices,
-      };
-    }
-    if (type === "entity") {
-      this._setDomainName(computeDomain(itemId));
-
-      const stateObject = this.hass.states[itemId];
-      const entityName = computeEntityName(
-        stateObject,
-        this.hass.entities,
-        this.hass.devices
-      );
-      const { device } = getEntityContext(
-        stateObject,
-        this.hass.entities,
-        this.hass.devices,
-        this.hass.areas,
-        this.hass.floors
-      );
-      const deviceName = device ? computeDeviceName(device) : undefined;
-      return {
-        name: entityName || deviceName || itemId,
-        stateObject,
-      };
-    }
-
-    // type label
-    const label = this._labelRegistry.find((lab) => lab.label_id === itemId);
-    let color = label?.color ? computeCssColor(label.color) : undefined;
-    if (color?.startsWith("var(")) {
-      const computedStyles = getComputedStyle(this);
-      color = computedStyles.getPropertyValue(
-        color.substring(4, color.length - 1)
-      );
-    }
-    if (color?.startsWith("#")) {
-      color = hex2rgb(color).join(",");
-    }
-    return {
-      name: label?.name || itemId,
-      iconPath: label?.icon,
-      fallbackIconPath: mdiLabel,
-      color,
-    };
-  });
-
-  private _setDomainName(domain: string) {
-    this._domainName = domainToName(this.hass.localize, domain);
-  }
-
-  private async _getDeviceDomain(configEntryId: string) {
-    try {
-      const data = await getConfigEntry(this.hass, configEntryId);
-      const domain = data.config_entry.domain;
-      this._iconImg = brandsUrl({
-        domain: domain,
-        type: "icon",
-        darkOptimized: this.hass.themes?.darkMode,
-      });
-
-      this._setDomainName(domain);
-    } catch {
-      // failed to load config entry -> ignore
-    }
-  }
-
-  private _removeItem(ev) {
-    ev.stopPropagation();
-    fireEvent(this, "remove-target-item", {
-      type: this.type,
-      id: this.itemId,
-    });
-  }
-
-  private _handleExpand(ev) {
-    ev.stopPropagation();
-    fireEvent(this, "expand-target-item", {
-      type: this.type,
-      id: this.itemId,
-    });
-  }
-
-  static styles = css`
-    ${unsafeCSS(chipStyles)}
-    .mdc-chip {
-      color: var(--primary-text-color);
-    }
-    .mdc-chip.add {
-      color: rgba(0, 0, 0, 0.87);
-    }
-    .add-container {
-      position: relative;
-      display: inline-flex;
-    }
-    .mdc-chip:not(.add) {
-      cursor: default;
-    }
-    .mdc-chip ha-icon-button {
-      --mdc-icon-button-size: 24px;
-      display: flex;
-      align-items: center;
-      outline: none;
-    }
-    .mdc-chip ha-icon-button ha-svg-icon {
-      border-radius: 50%;
-      background: var(--secondary-text-color);
-    }
-    .mdc-chip__icon.mdc-chip__icon--trailing {
-      width: var(--ha-space-4);
-      height: var(--ha-space-4);
-      --mdc-icon-size: 14px;
-      color: var(--secondary-text-color);
-      margin-inline-start: var(--ha-space-1) !important;
-      margin-inline-end: calc(-1 * var(--ha-space-1)) !important;
-      direction: var(--direction);
-    }
-    .mdc-chip__icon--leading {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      --mdc-icon-size: 20px;
-      border-radius: var(--ha-border-radius-circle);
-      padding: 6px;
-      margin-left: -13px !important;
-      margin-inline-start: -13px !important;
-      margin-inline-end: var(--ha-space-1) !important;
-      direction: var(--direction);
-    }
-    .expand-btn {
-      margin-right: var(--ha-space-0);
-      margin-inline-end: var(--ha-space-0);
-      margin-inline-start: initial;
-    }
-    .mdc-chip.area:not(.add),
-    .mdc-chip.floor:not(.add) {
-      border: 1px solid #fed6a4;
-      background: var(--card-background-color);
-    }
-    .mdc-chip.area:not(.add) .mdc-chip__icon--leading,
-    .mdc-chip.area.add,
-    .mdc-chip.floor:not(.add) .mdc-chip__icon--leading,
-    .mdc-chip.floor.add {
-      background: #fed6a4;
-    }
-    .mdc-chip.device:not(.add) {
-      border: 1px solid #a8e1fb;
-      background: var(--card-background-color);
-    }
-    .mdc-chip.device:not(.add) .mdc-chip__icon--leading,
-    .mdc-chip.device.add {
-      background: #a8e1fb;
-    }
-    .mdc-chip.entity:not(.add) {
-      border: 1px solid #d2e7b9;
-      background: var(--card-background-color);
-    }
-    .mdc-chip.entity:not(.add) .mdc-chip__icon--leading,
-    .mdc-chip.entity.add {
-      background: #d2e7b9;
-    }
-    .mdc-chip.label:not(.add) {
-      border: 1px solid var(--color, #e0e0e0);
-      background: var(--card-background-color);
-    }
-    .mdc-chip.label:not(.add) .mdc-chip__icon--leading,
-    .mdc-chip.label.add {
-      background: var(--background-color, #e0e0e0);
-    }
-    .mdc-chip:hover {
-      z-index: 5;
-    }
-    :host([disabled]) .mdc-chip {
-      opacity: var(--light-disabled-opacity);
-      pointer-events: none;
-    }
-    .tooltip-icon-img {
-      width: 24px;
-      height: 24px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-target-picker-value-chip": HaTargetPickerValueChip;
-  }
-}
--- a/src/data/area_floor.ts
+++ b/src/data/area_floor.ts
@@ -1,259 +0,0 @@
-import { computeAreaName } from "../common/entity/compute_area_name";
-import { computeDomain } from "../common/entity/compute_domain";
-import { computeFloorName } from "../common/entity/compute_floor_name";
-import { stringCompare } from "../common/string/compare";
-import type { HaDevicePickerDeviceFilterFunc } from "../components/device/ha-device-picker";
-import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
-import type { HomeAssistant } from "../types";
-import type { AreaRegistryEntry } from "./area_registry";
-import {
-  getDeviceEntityDisplayLookup,
-  type DeviceEntityDisplayLookup,
-  type DeviceRegistryEntry,
-} from "./device_registry";
-import type { HaEntityPickerEntityFilterFunc } from "./entity";
-import type { EntityRegistryDisplayEntry } from "./entity_registry";
-import { getFloorAreaLookup, type FloorRegistryEntry } from "./floor_registry";
-
-export interface FloorComboBoxItem extends PickerComboBoxItem {
-  type: "floor" | "area";
-  floor?: FloorRegistryEntry;
-  area?: AreaRegistryEntry;
-}
-
-export interface AreaFloorValue {
-  id: string;
-  type: "floor" | "area";
-}
-
-export const getAreasAndFloors = (
-  states: HomeAssistant["states"],
-  haFloors: HomeAssistant["floors"],
-  haAreas: HomeAssistant["areas"],
-  haDevices: HomeAssistant["devices"],
-  haEntities: HomeAssistant["entities"],
-  formatId: (value: AreaFloorValue) => string,
-  includeDomains?: string[],
-  excludeDomains?: string[],
-  includeDeviceClasses?: string[],
-  deviceFilter?: HaDevicePickerDeviceFilterFunc,
-  entityFilter?: HaEntityPickerEntityFilterFunc,
-  excludeAreas?: string[],
-  excludeFloors?: string[]
-): FloorComboBoxItem[] => {
-  const floors = Object.values(haFloors);
-  const areas = Object.values(haAreas);
-  const devices = Object.values(haDevices);
-  const entities = Object.values(haEntities);
-
-  let deviceEntityLookup: DeviceEntityDisplayLookup = {};
-  let inputDevices: DeviceRegistryEntry[] | undefined;
-  let inputEntities: EntityRegistryDisplayEntry[] | undefined;
-
-  if (
-    includeDomains ||
-    excludeDomains ||
-    includeDeviceClasses ||
-    deviceFilter ||
-    entityFilter
-  ) {
-    deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
-    inputDevices = devices;
-    inputEntities = entities.filter((entity) => entity.area_id);
-
-    if (includeDomains) {
-      inputDevices = inputDevices!.filter((device) => {
-        const devEntities = deviceEntityLookup[device.id];
-        if (!devEntities || !devEntities.length) {
-          return false;
-        }
-        return deviceEntityLookup[device.id].some((entity) =>
-          includeDomains.includes(computeDomain(entity.entity_id))
-        );
-      });
-      inputEntities = inputEntities!.filter((entity) =>
-        includeDomains.includes(computeDomain(entity.entity_id))
-      );
-    }
-
-    if (excludeDomains) {
-      inputDevices = inputDevices!.filter((device) => {
-        const devEntities = deviceEntityLookup[device.id];
-        if (!devEntities || !devEntities.length) {
-          return true;
-        }
-        return entities.every(
-          (entity) => !excludeDomains.includes(computeDomain(entity.entity_id))
-        );
-      });
-      inputEntities = inputEntities!.filter(
-        (entity) => !excludeDomains.includes(computeDomain(entity.entity_id))
-      );
-    }
-
-    if (includeDeviceClasses) {
-      inputDevices = inputDevices!.filter((device) => {
-        const devEntities = deviceEntityLookup[device.id];
-        if (!devEntities || !devEntities.length) {
-          return false;
-        }
-        return deviceEntityLookup[device.id].some((entity) => {
-          const stateObj = states[entity.entity_id];
-          if (!stateObj) {
-            return false;
-          }
-          return (
-            stateObj.attributes.device_class &&
-            includeDeviceClasses.includes(stateObj.attributes.device_class)
-          );
-        });
-      });
-      inputEntities = inputEntities!.filter((entity) => {
-        const stateObj = states[entity.entity_id];
-        return (
-          stateObj.attributes.device_class &&
-          includeDeviceClasses.includes(stateObj.attributes.device_class)
-        );
-      });
-    }
-
-    if (deviceFilter) {
-      inputDevices = inputDevices!.filter((device) => deviceFilter!(device));
-    }
-
-    if (entityFilter) {
-      inputDevices = inputDevices!.filter((device) => {
-        const devEntities = deviceEntityLookup[device.id];
-        if (!devEntities || !devEntities.length) {
-          return false;
-        }
-        return deviceEntityLookup[device.id].some((entity) => {
-          const stateObj = states[entity.entity_id];
-          if (!stateObj) {
-            return false;
-          }
-          return entityFilter(stateObj);
-        });
-      });
-      inputEntities = inputEntities!.filter((entity) => {
-        const stateObj = states[entity.entity_id];
-        if (!stateObj) {
-          return false;
-        }
-        return entityFilter!(stateObj);
-      });
-    }
-  }
-
-  let outputAreas = areas;
-
-  let areaIds: string[] | undefined;
-
-  if (inputDevices) {
-    areaIds = inputDevices
-      .filter((device) => device.area_id)
-      .map((device) => device.area_id!);
-  }
-
-  if (inputEntities) {
-    areaIds = (areaIds ?? []).concat(
-      inputEntities
-        .filter((entity) => entity.area_id)
-        .map((entity) => entity.area_id!)
-    );
-  }
-
-  if (areaIds) {
-    outputAreas = outputAreas.filter((area) => areaIds!.includes(area.area_id));
-  }
-
-  if (excludeAreas) {
-    outputAreas = outputAreas.filter(
-      (area) => !excludeAreas!.includes(area.area_id)
-    );
-  }
-
-  if (excludeFloors) {
-    outputAreas = outputAreas.filter(
-      (area) => !area.floor_id || !excludeFloors!.includes(area.floor_id)
-    );
-  }
-
-  const floorAreaLookup = getFloorAreaLookup(outputAreas);
-  const unassignedAreas = Object.values(outputAreas).filter(
-    (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
-  );
-
-  // @ts-ignore
-  const floorAreaEntries: [
-    FloorRegistryEntry | undefined,
-    AreaRegistryEntry[],
-  ][] = Object.entries(floorAreaLookup)
-    .map(([floorId, floorAreas]) => {
-      const floor = floors.find((fl) => fl.floor_id === floorId)!;
-      return [floor, floorAreas] as const;
-    })
-    .sort(([floorA], [floorB]) => {
-      if (floorA.level !== floorB.level) {
-        return (floorA.level ?? 0) - (floorB.level ?? 0);
-      }
-      return stringCompare(floorA.name, floorB.name);
-    });
-
-  const items: FloorComboBoxItem[] = [];
-
-  floorAreaEntries.forEach(([floor, floorAreas]) => {
-    if (floor) {
-      const floorName = computeFloorName(floor);
-
-      const areaSearchLabels = floorAreas
-        .map((area) => {
-          const areaName = computeAreaName(area) || area.area_id;
-          return [area.area_id, areaName, ...area.aliases];
-        })
-        .flat();
-
-      items.push({
-        id: formatId({ id: floor.floor_id, type: "floor" }),
-        type: "floor",
-        primary: floorName,
-        floor: floor,
-        search_labels: [
-          floor.floor_id,
-          floorName,
-          ...floor.aliases,
-          ...areaSearchLabels,
-        ],
-      });
-    }
-    items.push(
-      ...floorAreas.map((area) => {
-        const areaName = computeAreaName(area) || area.area_id;
-        return {
-          id: formatId({ id: area.area_id, type: "area" }),
-          type: "area" as const,
-          primary: areaName,
-          area: area,
-          icon: area.icon || undefined,
-          search_labels: [area.area_id, areaName, ...area.aliases],
-        };
-      })
-    );
-  });
-
-  items.push(
-    ...unassignedAreas.map((area) => {
-      const areaName = computeAreaName(area) || area.area_id;
-      return {
-        id: formatId({ id: area.area_id, type: "area" }),
-        type: "area" as const,
-        primary: areaName,
-        area: area,
-        icon: area.icon || undefined,
-        search_labels: [area.area_id, areaName, ...area.aliases],
-      };
-    })
-  );
-
-  return items;
-};
--- a/src/data/data_entry_flow.ts
+++ b/src/data/data_entry_flow.ts
@@ -79,7 +79,6 @@ export interface DataEntryFlowStepAbort {
  reason: string;
  description_placeholders?: Record<string, string>;
  translation_domain?: string;
-  next_flow?: [FlowType, string]; // [flow_type, flow_id]
 }

 export interface DataEntryFlowStepProgress {
--- a/src/data/device_registry.ts
+++ b/src/data/device_registry.ts
@@ -1,20 +1,12 @@
-import { computeAreaName } from "../common/entity/compute_area_name";
-import { computeDeviceNameDisplay } from "../common/entity/compute_device_name";
-import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateName } from "../common/entity/compute_state_name";
-import { getDeviceContext } from "../common/entity/context/get_device_context";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
-import type { HaDevicePickerDeviceFilterFunc } from "../components/device/ha-device-picker";
-import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
 import type { HomeAssistant } from "../types";
 import type { ConfigEntry } from "./config_entries";
-import type { HaEntityPickerEntityFilterFunc } from "./entity";
 import type {
  EntityRegistryDisplayEntry,
  EntityRegistryEntry,
 } from "./entity_registry";
 import type { EntitySources } from "./entity_sources";
-import { domainToName } from "./integration";
 import type { RegistryEntry } from "./registry";

 export {
@@ -171,147 +163,3 @@ export const getDeviceIntegrationLookup = (
  }
  return deviceIntegrations;
 };
-
-export interface DevicePickerItem extends PickerComboBoxItem {
-  domain?: string;
-  domain_name?: string;
-}
-
-export const getDevices = (
-  hass: HomeAssistant,
-  configEntryLookup: Record<string, ConfigEntry>,
-  includeDomains?: string[],
-  excludeDomains?: string[],
-  includeDeviceClasses?: string[],
-  deviceFilter?: HaDevicePickerDeviceFilterFunc,
-  entityFilter?: HaEntityPickerEntityFilterFunc,
-  excludeDevices?: string[],
-  value?: string
-): DevicePickerItem[] => {
-  const devices = Object.values(hass.devices);
-  const entities = Object.values(hass.entities);
-
-  let deviceEntityLookup: DeviceEntityDisplayLookup = {};
-
-  if (
-    includeDomains ||
-    excludeDomains ||
-    includeDeviceClasses ||
-    entityFilter
-  ) {
-    deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
-  }
-
-  let inputDevices = devices.filter(
-    (device) => device.id === value || !device.disabled_by
-  );
-
-  if (includeDomains) {
-    inputDevices = inputDevices.filter((device) => {
-      const devEntities = deviceEntityLookup[device.id];
-      if (!devEntities || !devEntities.length) {
-        return false;
-      }
-      return deviceEntityLookup[device.id].some((entity) =>
-        includeDomains.includes(computeDomain(entity.entity_id))
-      );
-    });
-  }
-
-  if (excludeDomains) {
-    inputDevices = inputDevices.filter((device) => {
-      const devEntities = deviceEntityLookup[device.id];
-      if (!devEntities || !devEntities.length) {
-        return true;
-      }
-      return entities.every(
-        (entity) => !excludeDomains.includes(computeDomain(entity.entity_id))
-      );
-    });
-  }
-
-  if (excludeDevices) {
-    inputDevices = inputDevices.filter(
-      (device) => !excludeDevices!.includes(device.id)
-    );
-  }
-
-  if (includeDeviceClasses) {
-    inputDevices = inputDevices.filter((device) => {
-      const devEntities = deviceEntityLookup[device.id];
-      if (!devEntities || !devEntities.length) {
-        return false;
-      }
-      return deviceEntityLookup[device.id].some((entity) => {
-        const stateObj = hass.states[entity.entity_id];
-        if (!stateObj) {
-          return false;
-        }
-        return (
-          stateObj.attributes.device_class &&
-          includeDeviceClasses.includes(stateObj.attributes.device_class)
-        );
-      });
-    });
-  }
-
-  if (entityFilter) {
-    inputDevices = inputDevices.filter((device) => {
-      const devEntities = deviceEntityLookup[device.id];
-      if (!devEntities || !devEntities.length) {
-        return false;
-      }
-      return devEntities.some((entity) => {
-        const stateObj = hass.states[entity.entity_id];
-        if (!stateObj) {
-          return false;
-        }
-        return entityFilter(stateObj);
-      });
-    });
-  }
-
-  if (deviceFilter) {
-    inputDevices = inputDevices.filter(
-      (device) =>
-        // We always want to include the device of the current value
-        device.id === value || deviceFilter!(device)
-    );
-  }
-
-  const outputDevices = inputDevices.map<DevicePickerItem>((device) => {
-    const deviceName = computeDeviceNameDisplay(
-      device,
-      hass,
-      deviceEntityLookup[device.id]
-    );
-
-    const { area } = getDeviceContext(device, hass);
-
-    const areaName = area ? computeAreaName(area) : undefined;
-
-    const configEntry = device.primary_config_entry
-      ? configEntryLookup?.[device.primary_config_entry]
-      : undefined;
-
-    const domain = configEntry?.domain;
-    const domainName = domain ? domainToName(hass.localize, domain) : undefined;
-
-    return {
-      id: device.id,
-      label: "",
-      primary:
-        deviceName ||
-        hass.localize("ui.components.device-picker.unnamed_device"),
-      secondary: areaName,
-      domain: configEntry?.domain,
-      domain_name: domainName,
-      search_labels: [deviceName, areaName, domain, domainName].filter(
-        Boolean
-      ) as string[],
-      sorting_label: deviceName || "zzz",
-    };
-  });
-
-  return outputDevices;
-};
--- a/src/data/entity.ts
+++ b/src/data/entity.ts
@@ -1,4 +1,3 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import { arrayLiteralIncludes } from "../common/array/literal-includes";

 export const UNAVAILABLE = "unavailable";
@@ -11,5 +10,3 @@ export const OFF_STATES = [UNAVAILABLE, UNKNOWN, OFF] as const;

 export const isUnavailableState = arrayLiteralIncludes(UNAVAILABLE_STATES);
 export const isOffState = arrayLiteralIncludes(OFF_STATES);
-
-export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
--- a/src/data/entity_registry.ts
+++ b/src/data/entity_registry.ts
@@ -1,17 +1,12 @@
-import type { Connection, HassEntity } from "home-assistant-js-websocket";
+import type { Connection } from "home-assistant-js-websocket";
 import { createCollection } from "home-assistant-js-websocket";
 import type { Store } from "home-assistant-js-websocket/dist/store";
 import memoizeOne from "memoize-one";
 import { computeDomain } from "../common/entity/compute_domain";
-import { computeEntityNameList } from "../common/entity/compute_entity_name_display";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
-import { computeRTL } from "../common/util/compute_rtl";
 import { debounce } from "../common/util/debounce";
-import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
 import type { HomeAssistant } from "../types";
-import type { HaEntityPickerEntityFilterFunc } from "./entity";
-import { domainToName } from "./integration";
 import type { LightColor } from "./light";
 import type { RegistryEntry } from "./registry";

@@ -329,122 +324,3 @@ export const getAutomaticEntityIds = (
    type: "config/entity_registry/get_automatic_entity_ids",
    entity_ids,
  });
-
-export interface EntityComboBoxItem extends PickerComboBoxItem {
-  domain_name?: string;
-  stateObj?: HassEntity;
-}
-
-export const getEntities = (
-  hass: HomeAssistant,
-  includeDomains?: string[],
-  excludeDomains?: string[],
-  entityFilter?: HaEntityPickerEntityFilterFunc,
-  includeDeviceClasses?: string[],
-  includeUnitOfMeasurement?: string[],
-  includeEntities?: string[],
-  excludeEntities?: string[],
-  value?: string
-): EntityComboBoxItem[] => {
-  let items: EntityComboBoxItem[] = [];
-
-  let entityIds = Object.keys(hass.states);
-
-  if (includeEntities) {
-    entityIds = entityIds.filter((entityId) =>
-      includeEntities.includes(entityId)
-    );
-  }
-
-  if (excludeEntities) {
-    entityIds = entityIds.filter(
-      (entityId) => !excludeEntities.includes(entityId)
-    );
-  }
-
-  if (includeDomains) {
-    entityIds = entityIds.filter((eid) =>
-      includeDomains.includes(computeDomain(eid))
-    );
-  }
-
-  if (excludeDomains) {
-    entityIds = entityIds.filter(
-      (eid) => !excludeDomains.includes(computeDomain(eid))
-    );
-  }
-
-  items = entityIds.map<EntityComboBoxItem>((entityId) => {
-    const stateObj = hass.states[entityId];
-
-    const friendlyName = computeStateName(stateObj); // Keep this for search
-    const [entityName, deviceName, areaName] = computeEntityNameList(
-      stateObj,
-      [{ type: "entity" }, { type: "device" }, { type: "area" }],
-      hass.entities,
-      hass.devices,
-      hass.areas,
-      hass.floors
-    );
-
-    const domainName = domainToName(hass.localize, computeDomain(entityId));
-
-    const isRTL = computeRTL(hass);
-
-    const primary = entityName || deviceName || entityId;
-    const secondary = [areaName, entityName ? deviceName : undefined]
-      .filter(Boolean)
-      .join(isRTL ? " ◂ " : " ▸ ");
-    const a11yLabel = [deviceName, entityName].filter(Boolean).join(" - ");
-
-    return {
-      id: entityId,
-      primary: primary,
-      secondary: secondary,
-      domain_name: domainName,
-      sorting_label: [deviceName, entityName].filter(Boolean).join("_"),
-      search_labels: [
-        entityName,
-        deviceName,
-        areaName,
-        domainName,
-        friendlyName,
-        entityId,
-      ].filter(Boolean) as string[],
-      a11y_label: a11yLabel,
-      stateObj: stateObj,
-    };
-  });
-
-  if (includeDeviceClasses) {
-    items = items.filter(
-      (item) =>
-        // We always want to include the entity of the current value
-        item.id === value ||
-        (item.stateObj?.attributes.device_class &&
-          includeDeviceClasses.includes(item.stateObj.attributes.device_class))
-    );
-  }
-
-  if (includeUnitOfMeasurement) {
-    items = items.filter(
-      (item) =>
-        // We always want to include the entity of the current value
-        item.id === value ||
-        (item.stateObj?.attributes.unit_of_measurement &&
-          includeUnitOfMeasurement.includes(
-            item.stateObj.attributes.unit_of_measurement
-          ))
-    );
-  }
-
-  if (entityFilter) {
-    items = items.filter(
-      (item) =>
-        // We always want to include the entity of the current value
-        item.id === value || (item.stateObj && entityFilter!(item.stateObj))
-    );
-  }
-
-  return items;
-};
--- a/src/data/label_registry.ts
+++ b/src/data/label_registry.ts
@@ -1,20 +1,9 @@
-import { mdiLabel } from "@mdi/js";
 import type { Connection } from "home-assistant-js-websocket";
 import { createCollection } from "home-assistant-js-websocket";
 import type { Store } from "home-assistant-js-websocket/dist/store";
-import { computeDomain } from "../common/entity/compute_domain";
 import { stringCompare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
-import type { HaDevicePickerDeviceFilterFunc } from "../components/device/ha-device-picker";
-import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
 import type { HomeAssistant } from "../types";
-import {
-  getDeviceEntityDisplayLookup,
-  type DeviceEntityDisplayLookup,
-  type DeviceRegistryEntry,
-} from "./device_registry";
-import type { HaEntityPickerEntityFilterFunc } from "./entity";
-import type { EntityRegistryDisplayEntry } from "./entity_registry";
 import type { RegistryEntry } from "./registry";

 export interface LabelRegistryEntry extends RegistryEntry {
@@ -99,178 +88,3 @@ export const deleteLabelRegistryEntry = (
    type: "config/label_registry/delete",
    label_id: labelId,
  });
-
-export const getLabels = (
-  hass: HomeAssistant,
-  labels?: LabelRegistryEntry[],
-  includeDomains?: string[],
-  excludeDomains?: string[],
-  includeDeviceClasses?: string[],
-  deviceFilter?: HaDevicePickerDeviceFilterFunc,
-  entityFilter?: HaEntityPickerEntityFilterFunc,
-  excludeLabels?: string[]
-): PickerComboBoxItem[] => {
-  if (!labels || labels.length === 0) {
-    return [];
-  }
-
-  const devices = Object.values(hass.devices);
-  const entities = Object.values(hass.entities);
-
-  let deviceEntityLookup: DeviceEntityDisplayLookup = {};
-  let inputDevices: DeviceRegistryEntry[] | undefined;
-  let inputEntities: EntityRegistryDisplayEntry[] | undefined;
-
-  if (
-    includeDomains ||
-    excludeDomains ||
-    includeDeviceClasses ||
-    deviceFilter ||
-    entityFilter
-  ) {
-    deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
-    inputDevices = devices;
-    inputEntities = entities.filter((entity) => entity.labels.length > 0);
-
-    if (includeDomains) {
-      inputDevices = inputDevices!.filter((device) => {
-        const devEntities = deviceEntityLookup[device.id];
-        if (!devEntities || !devEntities.length) {
-          return false;
-        }
-        return deviceEntityLookup[device.id].some((entity) =>
-          includeDomains.includes(computeDomain(entity.entity_id))
-        );
-      });
-      inputEntities = inputEntities!.filter((entity) =>
-        includeDomains.includes(computeDomain(entity.entity_id))
-      );
-    }
-
-    if (excludeDomains) {
-      inputDevices = inputDevices!.filter((device) => {
-        const devEntities = deviceEntityLookup[device.id];
-        if (!devEntities || !devEntities.length) {
-          return true;
-        }
-        return entities.every(
-          (entity) => !excludeDomains.includes(computeDomain(entity.entity_id))
-        );
-      });
-      inputEntities = inputEntities!.filter(
-        (entity) => !excludeDomains.includes(computeDomain(entity.entity_id))
-      );
-    }
-
-    if (includeDeviceClasses) {
-      inputDevices = inputDevices!.filter((device) => {
-        const devEntities = deviceEntityLookup[device.id];
-        if (!devEntities || !devEntities.length) {
-          return false;
-        }
-        return deviceEntityLookup[device.id].some((entity) => {
-          const stateObj = hass.states[entity.entity_id];
-          if (!stateObj) {
-            return false;
-          }
-          return (
-            stateObj.attributes.device_class &&
-            includeDeviceClasses.includes(stateObj.attributes.device_class)
-          );
-        });
-      });
-      inputEntities = inputEntities!.filter((entity) => {
-        const stateObj = hass.states[entity.entity_id];
-        return (
-          stateObj.attributes.device_class &&
-          includeDeviceClasses.includes(stateObj.attributes.device_class)
-        );
-      });
-    }
-
-    if (deviceFilter) {
-      inputDevices = inputDevices!.filter((device) => deviceFilter!(device));
-    }
-
-    if (entityFilter) {
-      inputDevices = inputDevices!.filter((device) => {
-        const devEntities = deviceEntityLookup[device.id];
-        if (!devEntities || !devEntities.length) {
-          return false;
-        }
-        return deviceEntityLookup[device.id].some((entity) => {
-          const stateObj = hass.states[entity.entity_id];
-          if (!stateObj) {
-            return false;
-          }
-          return entityFilter(stateObj);
-        });
-      });
-      inputEntities = inputEntities!.filter((entity) => {
-        const stateObj = hass.states[entity.entity_id];
-        if (!stateObj) {
-          return false;
-        }
-        return entityFilter!(stateObj);
-      });
-    }
-  }
-
-  let outputLabels = labels;
-  const usedLabels = new Set<string>();
-
-  let areaIds: string[] | undefined;
-
-  if (inputDevices) {
-    areaIds = inputDevices
-      .filter((device) => device.area_id)
-      .map((device) => device.area_id!);
-
-    inputDevices.forEach((device) => {
-      device.labels.forEach((label) => usedLabels.add(label));
-    });
-  }
-
-  if (inputEntities) {
-    areaIds = (areaIds ?? []).concat(
-      inputEntities
-        .filter((entity) => entity.area_id)
-        .map((entity) => entity.area_id!)
-    );
-    inputEntities.forEach((entity) => {
-      entity.labels.forEach((label) => usedLabels.add(label));
-    });
-  }
-
-  if (areaIds) {
-    areaIds.forEach((areaId) => {
-      const area = hass.areas[areaId];
-      area.labels.forEach((label) => usedLabels.add(label));
-    });
-  }
-
-  if (excludeLabels) {
-    outputLabels = outputLabels.filter(
-      (label) => !excludeLabels!.includes(label.label_id)
-    );
-  }
-
-  if (inputDevices || inputEntities) {
-    outputLabels = outputLabels.filter((label) =>
-      usedLabels.has(label.label_id)
-    );
-  }
-
-  const items = outputLabels.map<PickerComboBoxItem>((label) => ({
-    id: label.label_id,
-    primary: label.name,
-    icon: label.icon || undefined,
-    icon_path: label.icon ? undefined : mdiLabel,
-    sorting_label: label.name,
-    search_labels: [label.name, label.label_id, label.description].filter(
-      (v): v is string => Boolean(v)
-    ),
-  }));
-
-  return items;
-};
--- a/src/data/media-player.ts
+++ b/src/data/media-player.ts
@@ -39,6 +39,8 @@ import type { HomeAssistant, TranslationDict } from "../types";
 import { isUnavailableState } from "./entity";
 import { isTTSMediaSource } from "./tts";

+import { generateEntityFilter } from "../common/entity/entity_filter";
+
 interface MediaPlayerEntityAttributes extends HassEntityAttributeBase {
  media_content_id?: string;
  media_content_type?: string;
@@ -522,3 +524,33 @@ export const mediaPlayerJoin = (

 export const mediaPlayerUnjoin = (hass: HomeAssistant, entity_id: string) =>
  hass.callService("media_player", "unjoin", {}, { entity_id });
+
+/**
+ * Compute active media player states in a specific area.
+ * @param hass Home Assistant object
+ * @param areaId Area ID to filter media players by
+ * @returns Array of playing media player entities
+ */
+export const computeActiveAreaMediaStates = (
+  hass: HomeAssistant,
+  areaId: string
+): MediaPlayerEntity[] => {
+  const area = hass.areas[areaId];
+  if (!area) {
+    return [];
+  }
+
+  // Get all media_player entities in this area
+  const mediaFilter = generateEntityFilter(hass, {
+    area: areaId,
+    domain: "media_player",
+  });
+
+  const mediaEntities = Object.keys(hass.entities).filter(mediaFilter);
+
+  return mediaEntities
+    .map((entityId) => hass.states[entityId] as MediaPlayerEntity | undefined)
+    .filter(
+      (stateObj): stateObj is MediaPlayerEntity => stateObj?.state === "playing"
+    );
+};
--- a/src/data/recorder.ts
+++ b/src/data/recorder.ts
@@ -95,9 +95,7 @@ export interface StatisticsValidationResultUnitsChanged {
  data: {
    statistic_id: string;
    state_unit: string;
-    state_unit_class: string | null;
    metadata_unit: string;
-    metadata_unit_class: string | null;
    supported_unit: string;
  };
 }
@@ -233,14 +231,12 @@ export const validateStatistics = (hass: HomeAssistant) =>
 export const updateStatisticsMetadata = (
  hass: HomeAssistant,
  statistic_id: string,
-  unit_of_measurement: string | null,
-  unit_class: string | null
+  unit_of_measurement: string | null
 ) =>
  hass.callWS<undefined>({
    type: "recorder/update_statistics_metadata",
    statistic_id,
    unit_of_measurement,
-    unit_class,
  });

 export const clearStatistics = (hass: HomeAssistant, statistic_ids: string[]) =>
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -18,7 +18,6 @@ import type {
  EntityRegistryEntry,
 } from "./entity_registry";
 import type { EntitySources } from "./entity_sources";
-import type { EntityNameItem } from "../common/entity/compute_entity_name_display";

 export type Selector =
  | ActionSelector
@@ -42,7 +41,6 @@ export type Selector =
  | LegacyDeviceSelector
  | DurationSelector
  | EntitySelector
-  | EntityNameSelector
  | LegacyEntitySelector
  | FileSelector
  | IconSelector
@@ -312,10 +310,6 @@ export interface LocationSelectorValue {
 export interface MediaSelector {
  media: {
    accept?: string[];
-    image_upload?: boolean;
-    clearable?: boolean;
-    hide_content_type?: boolean;
-    content_id_helper?: string;
  } | null;
 }

@@ -505,13 +499,6 @@ export interface UiStateContentSelector {
  } | null;
 }

-export interface EntityNameSelector {
-  entity_name: {
-    entity_id?: string;
-    default_name?: EntityNameItem | EntityNameItem[] | string;
-  } | null;
-}
-
 export const expandLabelTarget = (
  hass: HomeAssistant,
  labelId: string,
--- a/src/data/selector/format_selector_value.ts
+++ b/src/data/selector/format_selector_value.ts
@@ -76,10 +76,7 @@ export const formatSelectorValue = (
        if (!stateObj) {
          return entityId;
        }
-        const name = hass.formatEntityName(stateObj, [
-          { type: "device" },
-          { type: "entity" },
-        ]);
+        const name = hass.formatEntityName(stateObj, ["device", "entity"], " ");
        return name || entityId;
      })
      .join(", ");
--- a/src/data/target.ts
+++ b/src/data/target.ts
@@ -1,164 +0,0 @@
-import type { HassServiceTarget } from "home-assistant-js-websocket";
-import { computeDomain } from "../common/entity/compute_domain";
-import type { HaDevicePickerDeviceFilterFunc } from "../components/device/ha-device-picker";
-import type { HomeAssistant } from "../types";
-import type { AreaRegistryEntry } from "./area_registry";
-import type { DeviceRegistryEntry } from "./device_registry";
-import type { HaEntityPickerEntityFilterFunc } from "./entity";
-import type { EntityRegistryDisplayEntry } from "./entity_registry";
-
-export type TargetType = "entity" | "device" | "area" | "label" | "floor";
-export type TargetTypeFloorless = Exclude<TargetType, "floor">;
-
-export interface ExtractFromTargetResult {
-  missing_areas: string[];
-  missing_devices: string[];
-  missing_floors: string[];
-  missing_labels: string[];
-  referenced_areas: string[];
-  referenced_devices: string[];
-  referenced_entities: string[];
-}
-
-export interface ExtractFromTargetResultReferenced {
-  referenced_areas: string[];
-  referenced_devices: string[];
-  referenced_entities: string[];
-}
-
-export const extractFromTarget = async (
-  hass: HomeAssistant,
-  target: HassServiceTarget
-) =>
-  hass.callWS<ExtractFromTargetResult>({
-    type: "extract_from_target",
-    target,
-  });
-
-export const areaMeetsFilter = (
-  area: AreaRegistryEntry,
-  devices: HomeAssistant["devices"],
-  entities: HomeAssistant["entities"],
-  deviceFilter?: HaDevicePickerDeviceFilterFunc,
-  includeDomains?: string[],
-  includeDeviceClasses?: string[],
-  states?: HomeAssistant["states"],
-  entityFilter?: HaEntityPickerEntityFilterFunc
-): boolean => {
-  const areaDevices = Object.values(devices).filter(
-    (device) => device.area_id === area.area_id
-  );
-
-  if (
-    areaDevices.some((device) =>
-      deviceMeetsFilter(
-        device,
-        entities,
-        deviceFilter,
-        includeDomains,
-        includeDeviceClasses,
-        states,
-        entityFilter
-      )
-    )
-  ) {
-    return true;
-  }
-
-  const areaEntities = Object.values(entities).filter(
-    (entity) => entity.area_id === area.area_id
-  );
-
-  if (
-    areaEntities.some((entity) =>
-      entityRegMeetsFilter(
-        entity,
-        false,
-        includeDomains,
-        includeDeviceClasses,
-        states,
-        entityFilter
-      )
-    )
-  ) {
-    return true;
-  }
-
-  return false;
-};
-
-export const deviceMeetsFilter = (
-  device: DeviceRegistryEntry,
-  entities: HomeAssistant["entities"],
-  deviceFilter?: HaDevicePickerDeviceFilterFunc,
-  includeDomains?: string[],
-  includeDeviceClasses?: string[],
-  states?: HomeAssistant["states"],
-  entityFilter?: HaEntityPickerEntityFilterFunc
-): boolean => {
-  const devEntities = Object.values(entities).filter(
-    (entity) => entity.device_id === device.id
-  );
-
-  if (
-    !devEntities.some((entity) =>
-      entityRegMeetsFilter(
-        entity,
-        false,
-        includeDomains,
-        includeDeviceClasses,
-        states,
-        entityFilter
-      )
-    )
-  ) {
-    return false;
-  }
-
-  if (deviceFilter) {
-    return deviceFilter(device);
-  }
-
-  return true;
-};
-
-export const entityRegMeetsFilter = (
-  entity: EntityRegistryDisplayEntry,
-  includeSecondary = false,
-  includeDomains?: string[],
-  includeDeviceClasses?: string[],
-  states?: HomeAssistant["states"],
-  entityFilter?: HaEntityPickerEntityFilterFunc
-): boolean => {
-  if (entity.hidden || (entity.entity_category && !includeSecondary)) {
-    return false;
-  }
-
-  if (
-    includeDomains &&
-    !includeDomains.includes(computeDomain(entity.entity_id))
-  ) {
-    return false;
-  }
-  if (includeDeviceClasses) {
-    const stateObj = states?.[entity.entity_id];
-    if (!stateObj) {
-      return false;
-    }
-    if (
-      !stateObj.attributes.device_class ||
-      !includeDeviceClasses!.includes(stateObj.attributes.device_class)
-    ) {
-      return false;
-    }
-  }
-
-  if (entityFilter) {
-    const stateObj = states?.[entity.entity_id];
-    if (!stateObj) {
-      return false;
-    }
-    return entityFilter!(stateObj);
-  }
-  return true;
-};
--- a/src/data/weather.ts
+++ b/src/data/weather.ts
@@ -43,7 +43,7 @@ export type ModernForecastType = "hourly" | "daily" | "twice_daily";

 export type ForecastType = ModernForecastType | "legacy";

-export interface ForecastAttribute {
+interface ForecastAttribute {
  temperature: number;
  datetime: string;
  templow?: number;
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@@ -472,10 +472,7 @@ class DataEntryFlowDialog extends LitElement {
    this._step = undefined;
    await this.updateComplete;
    this._step = _step;
-    if (
-      (_step.type === "create_entry" || _step.type === "abort") &&
-      _step.next_flow
-    ) {
+    if (_step.type === "create_entry" && _step.next_flow) {
      // skip device rename if there is a chained flow
      this._step = undefined;
      this._handler = undefined;
@@ -489,36 +486,32 @@ class DataEntryFlowDialog extends LitElement {
          carryOverDevices: this._devices(
            this._params!.flowConfig.showDevices,
            Object.values(this.hass.devices),
-            _step.type === "create_entry" ? _step.result?.entry_id : undefined,
+            _step.result?.entry_id,
            this._params!.carryOverDevices
          ).map((device) => device.id),
          dialogClosedCallback: this._params!.dialogClosedCallback,
        });
      } else if (_step.next_flow[0] === "options_flow") {
-        if (_step.type === "create_entry") {
-          showOptionsFlowDialog(
-            this._params!.dialogParentElement!,
-            _step.result!,
-            {
-              continueFlowId: _step.next_flow[1],
-              navigateToResult: this._params!.navigateToResult,
-              dialogClosedCallback: this._params!.dialogClosedCallback,
-            }
-          );
-        }
+        showOptionsFlowDialog(
+          this._params!.dialogParentElement!,
+          _step.result!,
+          {
+            continueFlowId: _step.next_flow[1],
+            navigateToResult: this._params!.navigateToResult,
+            dialogClosedCallback: this._params!.dialogClosedCallback,
+          }
+        );
      } else if (_step.next_flow[0] === "config_subentries_flow") {
-        if (_step.type === "create_entry") {
-          showSubConfigFlowDialog(
-            this._params!.dialogParentElement!,
-            _step.result!,
-            _step.next_flow[0],
-            {
-              continueFlowId: _step.next_flow[1],
-              navigateToResult: this._params!.navigateToResult,
-              dialogClosedCallback: this._params!.dialogClosedCallback,
-            }
-          );
-        }
+        showSubConfigFlowDialog(
+          this._params!.dialogParentElement!,
+          _step.result!,
+          _step.next_flow[0],
+          {
+            continueFlowId: _step.next_flow[1],
+            navigateToResult: this._params!.navigateToResult,
+            dialogClosedCallback: this._params!.dialogClosedCallback,
+          }
+        );
      } else {
        this.closeDialog();
        showAlertDialog(this._params!.dialogParentElement!, {
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -77,80 +77,84 @@ class MoreInfoMediaPlayer extends LitElement {
      return nothing;
    }

+    if (!stateActive(this.stateObj)) {
+      return nothing;
+    }
+
    const supportsMute = supportsFeature(
      this.stateObj,
      MediaPlayerEntityFeature.VOLUME_MUTE
    );
-    const supportsSliding = supportsFeature(
+    const supportsSet = supportsFeature(
      this.stateObj,
      MediaPlayerEntityFeature.VOLUME_SET
    );

-    return html`${(supportsFeature(
-      this.stateObj!,
-      MediaPlayerEntityFeature.VOLUME_SET
-    ) ||
-      supportsFeature(this.stateObj!, MediaPlayerEntityFeature.VOLUME_STEP)) &&
-    stateActive(this.stateObj!)
-      ? html`
-          <div class="volume">
-            ${supportsMute
-              ? html`
-                  <ha-icon-button
-                    .path=${this.stateObj.attributes.is_volume_muted
-                      ? mdiVolumeOff
-                      : mdiVolumeHigh}
-                    .label=${this.hass.localize(
-                      `ui.card.media_player.${
-                        this.stateObj.attributes.is_volume_muted
-                          ? "media_volume_unmute"
-                          : "media_volume_mute"
-                      }`
-                    )}
-                    @click=${this._toggleMute}
-                  ></ha-icon-button>
-                `
-              : ""}
-            ${supportsFeature(
-              this.stateObj,
-              MediaPlayerEntityFeature.VOLUME_STEP
-            ) && !supportsSliding
-              ? html`
-                  <ha-icon-button
-                    action="volume_down"
-                    .path=${mdiVolumeMinus}
-                    .label=${this.hass.localize(
-                      "ui.card.media_player.media_volume_down"
-                    )}
-                    @click=${this._handleClick}
-                  ></ha-icon-button>
-                  <ha-icon-button
-                    action="volume_up"
-                    .path=${mdiVolumePlus}
-                    .label=${this.hass.localize(
-                      "ui.card.media_player.media_volume_up"
-                    )}
-                    @click=${this._handleClick}
-                  ></ha-icon-button>
-                `
-              : nothing}
-            ${supportsSliding
-              ? html`
-                  ${!supportsMute
-                    ? html`<ha-svg-icon .path=${mdiVolumeHigh}></ha-svg-icon>`
-                    : nothing}
-                  <ha-slider
-                    labeled
-                    id="input"
-                    .value=${Number(this.stateObj.attributes.volume_level) *
-                    100}
-                    @change=${this._selectedValueChanged}
-                  ></ha-slider>
-                `
-              : nothing}
-          </div>
-        `
-      : nothing}`;
+    const supportsStep = supportsFeature(
+      this.stateObj,
+      MediaPlayerEntityFeature.VOLUME_STEP
+    );
+
+    if (!supportsMute && !supportsSet && !supportsStep) {
+      return nothing;
+    }
+
+    return html`
+      <div class="volume">
+        ${supportsMute
+          ? html`
+              <ha-icon-button
+                .path=${this.stateObj.attributes.is_volume_muted
+                  ? mdiVolumeOff
+                  : mdiVolumeHigh}
+                .label=${this.hass.localize(
+                  `ui.card.media_player.${
+                    this.stateObj.attributes.is_volume_muted
+                      ? "media_volume_unmute"
+                      : "media_volume_mute"
+                  }`
+                )}
+                @click=${this._toggleMute}
+              ></ha-icon-button>
+            `
+          : nothing}
+        ${supportsStep
+          ? html` <ha-icon-button
+              action="volume_down"
+              .path=${mdiVolumeMinus}
+              .label=${this.hass.localize(
+                "ui.card.media_player.media_volume_down"
+              )}
+              @click=${this._handleClick}
+            ></ha-icon-button>`
+          : nothing}
+        ${supportsSet
+          ? html`
+              ${!supportsMute && !supportsStep
+                ? html`<ha-svg-icon .path=${mdiVolumeHigh}></ha-svg-icon>`
+                : nothing}
+              <ha-slider
+                labeled
+                id="input"
+                .value=${Number(this.stateObj.attributes.volume_level) * 100}
+                @change=${this._selectedValueChanged}
+              ></ha-slider>
+            `
+          : nothing}
+        ${supportsStep
+          ? html`
+              <ha-icon-button
+                action="volume_up"
+                .path=${mdiVolumePlus}
+                .label=${this.hass.localize(
+                  "ui.card.media_player.media_volume_up"
+                )}
+                @click=${this._handleClick}
+              ></ha-icon-button>
+            `
+          : nothing}
+      </div>
+    `;
  }

  protected _renderSourceControl() {
@@ -163,12 +167,15 @@ class MoreInfoMediaPlayer extends LitElement {
    }

    return html`<ha-md-button-menu positioning="popover">
-      <ha-icon-button
+      <ha-button
        slot="trigger"
-        .title=${this.hass.localize(`ui.card.media_player.source`)}
-        .path=${mdiLoginVariant}
+        appearance="plain"
+        variant="neutral"
+        size="small"
+        title=${this.hass.localize(`ui.card.media_player.source`)}
      >
-      </ha-icon-button>
+        <ha-svg-icon .path=${mdiLoginVariant}></ha-svg-icon>
+      </ha-button>
      ${this.stateObj.attributes.source_list!.map(
        (source) =>
          html`<ha-md-menu-item
@@ -196,12 +203,15 @@ class MoreInfoMediaPlayer extends LitElement {
    }

    return html`<ha-md-button-menu positioning="popover">
-      <ha-icon-button
+      <ha-button
        slot="trigger"
-        .title=${this.hass.localize(`ui.card.media_player.sound_mode`)}
-        .path=${mdiMusicNoteEighth}
+        appearance="plain"
+        variant="neutral"
+        size="small"
+        title=${this.hass.localize(`ui.card.media_player.sound_mode`)}
      >
-      </ha-icon-button>
+        <ha-svg-icon .path=${mdiMusicNoteEighth}></ha-svg-icon>
+      </ha-button>
      ${this.stateObj.attributes.sound_mode_list!.map(
        (soundMode) =>
          html`<ha-md-menu-item
@@ -227,17 +237,21 @@ class MoreInfoMediaPlayer extends LitElement {
    const groupMembers = this.stateObj.attributes.group_members;
    const hasMultipleMembers = groupMembers && groupMembers?.length > 1;

-    return html`<ha-icon-button
+    return html`<ha-button
+      class="grouping"
      @click=${this._showGroupMediaPlayers}
-      .title=${this.hass.localize("ui.card.media_player.join")}
+      appearance="plain"
+      variant="neutral"
+      size="small"
+      title=${this.hass.localize("ui.card.media_player.join")}
    >
-      <div class="grouping">
+      <div>
        <ha-svg-icon .path=${mdiSpeakerMultiple}></ha-svg-icon>
        ${hasMultipleMembers
-          ? html`<span class="badge">${groupMembers?.length || 4}</span>`
+          ? html`<span class="badge"> ${groupMembers?.length || 4} </span>`
          : nothing}
      </div>
-    </ha-icon-button>`;
+    </ha-button>`;
  }

  protected _renderEmptyCover(title: string, icon?: string) {
@@ -400,39 +414,48 @@ class MoreInfoMediaPlayer extends LitElement {
          ${!isUnavailableState(stateObj.state) &&
          supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA)
            ? html`
-                <ha-icon-button
+                <ha-button
                  @click=${this._showBrowseMedia}
-                  .title=${this.hass.localize(
+                  appearance="plain"
+                  variant="neutral"
+                  size="small"
+                  title=${this.hass.localize(
                    "ui.card.media_player.browse_media"
                  )}
-                  .path=${mdiPlayBoxMultiple}
                >
-                </ha-icon-button>
+                  <ha-svg-icon .path=${mdiPlayBoxMultiple}></ha-svg-icon>
+                </ha-button>
              `
            : nothing}
          ${this._renderGrouping()} ${this._renderSourceControl()}
          ${this._renderSoundMode()}
          ${turnOn
-            ? html`<ha-icon-button
+            ? html`<ha-button
                action=${turnOn.action}
                @click=${this._handleClick}
-                .title=${this.hass.localize(
+                appearance="plain"
+                variant="neutral"
+                size="small"
+                title=${this.hass.localize(
                  `ui.card.media_player.${turnOn.action}`
                )}
-                .path=${turnOn.icon}
              >
-              </ha-icon-button>`
+                <ha-svg-icon .path=${turnOn.icon}></ha-svg-icon>
+              </ha-button>`
            : nothing}
          ${turnOff
-            ? html`<ha-icon-button
+            ? html`<ha-button
                action=${turnOff.action}
                @click=${this._handleClick}
-                .title=${this.hass.localize(
+                appearance="plain"
+                variant="neutral"
+                size="small"
+                title=${this.hass.localize(
                  `ui.card.media_player.${turnOff.action}`
                )}
-                .path=${turnOff.icon}
              >
-              </ha-icon-button>`
+                <ha-svg-icon .path=${turnOff.icon}></ha-svg-icon>
+              </ha-button>`
            : nothing}
        </div>
      </div>
@@ -556,7 +579,7 @@ class MoreInfoMediaPlayer extends LitElement {
      font-size: var(--ha-font-size-xs);
      background-color: var(--primary-color);
      padding: 0 4px;
-      color: var(--text-primary-color);
+      color: var(--primary-text-color);
    }

    .position-bar {
@@ -593,15 +616,15 @@ class MoreInfoMediaPlayer extends LitElement {
      justify-content: space-around;
    }

-    .controls-row ha-icon-button {
-      color: var(--secondary-text-color);
+    .controls-row ha-button {
+      width: 32px;
    }

    .controls-row ha-svg-icon {
      color: var(--ha-color-on-neutral-quiet);
    }

-    .grouping {
+    .grouping::part(label) {
      position: relative;
    }

--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@@ -16,7 +16,6 @@ import "../../../components/ha-tab-group";
 import "../../../components/ha-tab-group-tab";
 import "../../../components/ha-tooltip";
 import type {
-  ForecastAttribute,
  ForecastEvent,
  ModernForecastType,
  WeatherEntity,
@@ -132,24 +131,6 @@ class MoreInfoWeather extends LitElement {
    getSupportedForecastTypes(stateObj)
  );

-  private _groupForecastByDay = memoizeOne((forecast: ForecastAttribute[]) => {
-    if (!forecast) return [];
-
-    const grouped = new Map<string, NonNullable<typeof forecast>>();
-
-    forecast.forEach((item) => {
-      const date = new Date(item.datetime);
-      const dateKey = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
-
-      if (!grouped.has(dateKey)) {
-        grouped.set(dateKey, []);
-      }
-      grouped.get(dateKey)!.push(item);
-    });
-
-    return Array.from(grouped.values());
-  });
-
  protected render() {
    if (!this.hass || !this.stateObj) {
      return nothing;
@@ -333,90 +314,78 @@ class MoreInfoWeather extends LitElement {
        : nothing}
      <div class="forecast">
        ${forecast?.length
-          ? this._groupForecastByDay(forecast).map((dayForecast) => {
-              const showDayHeader = hourly || dayNight;
-              return html`
-                <div class="forecast-day">
-                  ${showDayHeader
-                    ? html`<div class="forecast-day-header">
-                        ${formatDateWeekdayShort(
-                          new Date(dayForecast[0].datetime),
-                          this.hass!.locale,
-                          this.hass!.config
-                        )}
-                      </div>`
-                    : nothing}
-                  <div class="forecast-day-content">
-                    ${dayForecast.map((item) =>
-                      this._showValue(item.templow) ||
-                      this._showValue(item.temperature)
+          ? forecast.map((item) =>
+              this._showValue(item.templow) || this._showValue(item.temperature)
+                ? html`
+                    <div>
+                      <div>
+                        ${dayNight
+                          ? html`
+                              ${formatDateWeekdayShort(
+                                new Date(item.datetime),
+                                this.hass!.locale,
+                                this.hass!.config
+                              )}
+                              <div class="daynight">
+                                ${item.is_daytime !== false
+                                  ? this.hass!.localize("ui.card.weather.day")
+                                  : this.hass!.localize(
+                                      "ui.card.weather.night"
+                                    )}<br />
+                              </div>
+                            `
+                          : hourly
+                            ? html`
+                                ${formatTime(
+                                  new Date(item.datetime),
+                                  this.hass!.locale,
+                                  this.hass!.config
+                                )}
+                              `
+                            : html`
+                                ${formatDateWeekdayShort(
+                                  new Date(item.datetime),
+                                  this.hass!.locale,
+                                  this.hass!.config
+                                )}
+                              `}
+                      </div>
+                      ${this._showValue(item.condition)
                        ? html`
-                            <div class="forecast-item">
-                              <div
-                                class="forecast-item-label ${showDayHeader
-                                  ? ""
-                                  : "no-header"}"
-                              >
-                                ${hourly
-                                  ? formatTime(
-                                      new Date(item.datetime),
-                                      this.hass!.locale,
-                                      this.hass!.config
-                                    )
-                                  : dayNight
-                                    ? html`<div class="daynight">
-                                        ${item.is_daytime !== false
-                                          ? this.hass!.localize(
-                                              "ui.card.weather.day"
-                                            )
-                                          : this.hass!.localize(
-                                              "ui.card.weather.night"
-                                            )}
-                                      </div>`
-                                    : formatDateWeekdayShort(
-                                        new Date(item.datetime),
-                                        this.hass!.locale,
-                                        this.hass!.config
-                                      )}
-                              </div>
-                              ${this._showValue(item.condition)
-                                ? html`
-                                    <div class="forecast-image-icon">
-                                      ${getWeatherStateIcon(
-                                        item.condition!,
-                                        this,
-                                        !(
-                                          item.is_daytime ||
-                                          item.is_daytime === undefined
-                                        )
-                                      )}
-                                    </div>
-                                  `
-                                : nothing}
-                              <div class="temp">
-                                ${this._showValue(item.temperature)
-                                  ? html`${formatNumber(
-                                      item.temperature,
-                                      this.hass!.locale
-                                    )}°`
-                                  : "—"}
-                              </div>
-                              <div class="templow">
-                                ${this._showValue(item.templow)
-                                  ? html`${formatNumber(
-                                      item.templow!,
-                                      this.hass!.locale
-                                    )}°`
-                                  : nothing}
-                              </div>
+                            <div class="forecast-image-icon">
+                              ${getWeatherStateIcon(
+                                item.condition!,
+                                this,
+                                !(
+                                  item.is_daytime ||
+                                  item.is_daytime === undefined
+                                )
+                              )}
                            </div>
                          `
-                        : nothing
-                    )}
-                  </div>
-                </div>
-              `;
-            })
+                        : nothing}
+                      <div class="temp">
+                        ${this._showValue(item.temperature)
+                          ? html`${formatNumber(
+                              item.temperature,
+                              this.hass!.locale
+                            )}°`
+                          : "—"}
+                      </div>
+                      <div class="templow">
+                        ${this._showValue(item.templow)
+                          ? html`${formatNumber(
+                              item.templow!,
+                              this.hass!.locale
+                            )}°`
+                          : hourly
+                            ? nothing
+                            : "—"}
+                      </div>
+                    </div>
+                  `
+                : nothing
+            )
          : html`<ha-spinner size="medium"></ha-spinner>`}
      </div>

@@ -587,46 +556,14 @@ class MoreInfoWeather extends LitElement {
          user-select: none;
        }

-        .forecast-day {
-          display: flex;
-          flex-direction: column;
-        }
-
-        .forecast-day-header {
-          position: sticky;
-          top: 0;
-          left: 0;
-          color: var(--primary-text-color);
-          z-index: 1;
-          padding: 0 var(--ha-space-3) var(--ha-space-1) var(--ha-space-3);
-          width: fit-content;
-          width: 40px;
+        .forecast > div {
          text-align: center;
-          font-weight: var(--ha-font-weight-semi-bold);
-        }
-
-        .forecast-day-content {
-          display: flex;
-          flex-direction: row;
-        }
-
-        .forecast-item {
-          text-align: center;
-          padding: 0 var(--ha-space-3);
-        }
-
-        .forecast-item-label {
-          font-size: var(--ha-font-size-m);
-          color: var(--secondary-text-color);
-        }
-
-        .forecast-item-label.no-header {
-          color: var(--primary-text-color);
+          padding: 0 10px;
        }

        .forecast .icon,
        .forecast .temp {
-          margin: var(--ha-space-1) 0;
+          margin: 4px 0;
        }

        .forecast .temp {
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -15,6 +15,7 @@ import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
+import { join } from "lit/directives/join";
 import { keyed } from "lit/directives/keyed";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -22,17 +23,10 @@ import { stopPropagation } from "../../common/dom/stop_propagation";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { computeDomain } from "../../common/entity/compute_domain";
-import {
-  computeEntityEntryName,
-  computeEntityName,
-} from "../../common/entity/compute_entity_name";
-import {
-  getEntityContext,
-  getEntityEntryContext,
-} from "../../common/entity/context/get_entity_context";
+import { computeEntityEntryName } from "../../common/entity/compute_entity_name";
+import { getEntityEntryContext } from "../../common/entity/context/get_entity_context";
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
 import { navigate } from "../../common/navigate";
-import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/ha-button-menu";
 import "../../components/ha-dialog";
 import "../../components/ha-dialog-header";
@@ -327,42 +321,34 @@ export class MoreInfoDialog extends LitElement {
      (isDefaultView && this._parentEntityIds.length === 0) ||
      isSpecificInitialView;

-    const context = stateObj
-      ? getEntityContext(
-          stateObj,
-          this.hass.entities,
-          this.hass.devices,
-          this.hass.areas,
-          this.hass.floors
-        )
-      : this._entry
-        ? getEntityEntryContext(
-            this._entry,
-            this.hass.entities,
-            this.hass.devices,
-            this.hass.areas,
-            this.hass.floors
-          )
-        : undefined;
+    let entityName: string | undefined;
+    let deviceName: string | undefined;
+    let areaName: string | undefined;

-    const entityName = stateObj
-      ? computeEntityName(stateObj, this.hass.entities, this.hass.devices)
-      : this._entry
-        ? computeEntityEntryName(this._entry, this.hass.devices)
-        : entityId;
-
-    const deviceName = context?.device
-      ? computeDeviceName(context.device)
-      : undefined;
-    const areaName = context?.area ? computeAreaName(context.area) : undefined;
+    if (stateObj) {
+      entityName = this.hass.formatEntityName(stateObj, "entity");
+      deviceName = this.hass.formatEntityName(stateObj, "device");
+      areaName = this.hass.formatEntityName(stateObj, "area");
+    } else if (this._entry) {
+      const { device, area } = getEntityEntryContext(
+        this._entry,
+        this.hass.entities,
+        this.hass.devices,
+        this.hass.areas,
+        this.hass.floors
+      );
+      entityName = computeEntityEntryName(this._entry, this.hass.devices);
+      deviceName = device ? computeDeviceName(device) : undefined;
+      areaName = area ? computeAreaName(area) : undefined;
+    } else {
+      entityName = entityId;
+    }

    const breadcrumb = [areaName, deviceName, entityName].filter(
      (v): v is string => Boolean(v)
    );
    const title = this._childView?.viewTitle || breadcrumb.pop() || entityId;

-    const isRTL = computeRTL(this.hass);
-
    return html`
      <ha-dialog
        open
@@ -396,13 +382,17 @@ export class MoreInfoDialog extends LitElement {
            ${breadcrumb.length > 0
              ? !__DEMO__ && isAdmin
                ? html`
-                    <button class="breadcrumb" @click=${this._breadcrumbClick}>
-                      ${breadcrumb.join(isRTL ? " ◂ " : " ▸ ")}
+                    <button
+                      class="breadcrumb"
+                      @click=${this._breadcrumbClick}
+                      aria-label=${breadcrumb.join(" > ")}
+                    >
+                      ${join(breadcrumb, html`<ha-icon-next></ha-icon-next>`)}
                    </button>
                  `
                : html`
                    <p class="breadcrumb">
-                      ${breadcrumb.join(isRTL ? " ◂ " : " ▸ ")}
+                      ${join(breadcrumb, html`<ha-icon-next></ha-icon-next>`)}
                    </p>
                  `
              : nothing}
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -23,7 +23,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceNameDisplay } from "../../common/entity/compute_device_name";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { entityUseDeviceName } from "../../common/entity/compute_entity_name";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { getDeviceContext } from "../../common/entity/context/get_device_context";
 import { navigate } from "../../common/navigate";
@@ -31,9 +30,9 @@ import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import type { ScorableTextItem } from "../../common/string/filter/sequence-matching";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
-import "../../components/ha-button";
 import "../../components/ha-icon-button";
 import "../../components/ha-label";
+import "../../components/ha-button";
 import "../../components/ha-list";
 import "../../components/ha-md-list-item";
 import "../../components/ha-spinner";
@@ -632,29 +631,14 @@ export class QuickBar extends LitElement {
        const stateObj = this.hass.states[entityId];

        const friendlyName = computeStateName(stateObj); // Keep this for search
+        const entityName = this.hass.formatEntityName(stateObj, "entity");
+        const deviceName = this.hass.formatEntityName(stateObj, "device");
+        const areaName = this.hass.formatEntityName(stateObj, "area");

-        const useDeviceName = entityUseDeviceName(
-          stateObj,
-          this.hass.entities,
-          this.hass.devices
-        );
-
-        const name = this.hass.formatEntityName(
-          stateObj,
-          useDeviceName ? { type: "device" } : { type: "entity" }
-        );
-
-        const primary = name || entityId;
-
-        const secondary = this.hass.formatEntityName(
-          stateObj,
-          useDeviceName
-            ? [{ type: "area" }]
-            : [{ type: "area" }, { type: "device" }],
-          {
-            separator: isRTL ? " ◂ " : " ▸ ",
-          }
-        );
+        const primary = entityName || deviceName || entityId;
+        const secondary = [areaName, entityName ? deviceName : undefined]
+          .filter(Boolean)
+          .join(isRTL ? " ◂ " : " ▸ ");

        const translatedDomain = domainToName(
          this.hass.localize,
--- a/src/dialogs/restart/dialog-restart-wait.ts
+++ b/src/dialogs/restart/dialog-restart-wait.ts
@@ -1,10 +1,14 @@
+import { mdiClose } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
-import { LitElement, css, html } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-alert";
-import "../../components/ha-wa-dialog";
+import "../../components/ha-dialog-header";
+import "../../components/ha-icon-button";
+import "../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../components/ha-md-dialog";
 import "../../components/ha-spinner";
 import {
  subscribeBackupEvents,
@@ -33,6 +37,8 @@ class DialogRestartWait extends LitElement {

  private _backupEventsSubscription?: Promise<UnsubscribeFunc>;

+  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+
  public async showDialog(params: RestartWaitDialogParams): Promise<void> {
    this._open = true;
    this._loadBackupState();
@@ -43,11 +49,9 @@ class DialogRestartWait extends LitElement {
    this._actionOnIdle = params.action;
  }

-  public closeDialog(): void {
-    this._open = false;
-  }
-
  private _dialogClosed(): void {
+    this._open = false;
+
    if (this._backupEventsSubscription) {
      this._backupEventsSubscription.then((unsub) => {
        unsub();
@@ -58,6 +62,10 @@ class DialogRestartWait extends LitElement {
    fireEvent(this, "dialog-closed", { dialog: this.localName });
  }

+  public closeDialog(): void {
+    this._dialog?.close();
+  }
+
  private _getWaitMessage() {
    switch (this._backupState) {
      case "create_backup":
@@ -72,17 +80,28 @@ class DialogRestartWait extends LitElement {
  }

  protected render() {
+    if (!this._open) {
+      return nothing;
+    }
+
    const waitMessage = this._getWaitMessage();

    return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        .headerTitle=${this._title}
-        width="medium"
+      <ha-md-dialog
+        open
        @closed=${this._dialogClosed}
+        .disableCancelAction=${true}
      >
-        <div class="content">
+        <ha-dialog-header slot="headline">
+          <ha-icon-button
+            slot="navigationIcon"
+            .label=${this.hass.localize("ui.common.cancel")}
+            .path=${mdiClose}
+            @click=${this.closeDialog}
+          ></ha-icon-button>
+          <span slot="title" .title=${this._title}> ${this._title} </span>
+        </ha-dialog-header>
+        <div slot="content" class="content">
          ${this._error
            ? html`<ha-alert alert-type="error"
                >${this.hass.localize("ui.dialogs.restart.error_backup_state", {
@@ -94,7 +113,7 @@ class DialogRestartWait extends LitElement {
                ${waitMessage}
              `}
        </div>
-      </ha-wa-dialog>
+      </ha-md-dialog>
    `;
  }

@@ -120,9 +139,15 @@ class DialogRestartWait extends LitElement {
      haStyle,
      haStyleDialog,
      css`
-        ha-wa-dialog {
+        ha-md-dialog {
          --dialog-content-padding: 0;
        }
+        @media all and (min-width: 550px) {
+          ha-md-dialog {
+            min-width: 500px;
+            max-width: 500px;
+          }
+        }
        .content {
          display: flex;
          flex-direction: column;
--- a/src/dialogs/restart/dialog-restart.ts
+++ b/src/dialogs/restart/dialog-restart.ts
@@ -1,6 +1,7 @@
 import "@material/mwc-linear-progress/mwc-linear-progress";
 import {
  mdiAutoFix,
+  mdiClose,
  mdiLifebuoy,
  mdiPower,
  mdiPowerCycle,
@@ -8,14 +9,16 @@ import {
 } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-alert";
 import "../../components/ha-expansion-panel";
 import "../../components/ha-fade-in";
+import "../../components/ha-icon-button";
 import "../../components/ha-icon-next";
-import "../../components/ha-wa-dialog";
+import "../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../components/ha-md-dialog";
 import "../../components/ha-md-list";
 import "../../components/ha-md-list-item";
 import "../../components/ha-spinner";
@@ -55,14 +58,12 @@ class DialogRestart extends LitElement {
  @state()
  private _hostInfo?: HassioHostInfo;

-  @state()
-  private _dialogOpen = false;
+  @query("ha-md-dialog") private _dialog?: HaMdDialog;

  public async showDialog(): Promise<void> {
    const isHassioLoaded = isComponentLoaded(this.hass, "hassio");

    this._open = true;
-    this._dialogOpen = true;

    if (isHassioLoaded && !this._hostInfo) {
      this._loadHostInfo();
@@ -91,13 +92,16 @@ class DialogRestart extends LitElement {
  }

  private _dialogClosed(): void {
-    this._dialogOpen = false;
    this._open = false;
    this._loadingHostInfo = false;
    this._loadingBackupInfo = false;
    fireEvent(this, "dialog-closed", { dialog: this.localName });
  }

+  public closeDialog(): void {
+    this._dialog?.close();
+  }
+
  protected render() {
    if (!this._open) {
      return nothing;
@@ -109,13 +113,17 @@ class DialogRestart extends LitElement {
    const dialogTitle = this.hass.localize("ui.dialogs.restart.heading");

    return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._dialogOpen}
-        header-title=${dialogTitle}
-        @closed=${this._dialogClosed}
-      >
-        <div class="content">
+      <ha-md-dialog open @closed=${this._dialogClosed}>
+        <ha-dialog-header slot="headline">
+          <ha-icon-button
+            slot="navigationIcon"
+            .label=${this.hass.localize("ui.common.close") ?? "Close"}
+            .path=${mdiClose}
+            @click=${this.closeDialog}
+          ></ha-icon-button>
+          <span slot="title" .title=${dialogTitle}> ${dialogTitle} </span>
+        </ha-dialog-header>
+        <div slot="content" class="content">
          <div class="action-loader">
            ${this._loadingBackupInfo
              ? html`<ha-fade-in .delay=${250}>
@@ -257,12 +265,12 @@ class DialogRestart extends LitElement {
                </ha-expansion-panel>
              `}
        </div>
-      </ha-wa-dialog>
+      </ha-md-dialog>
    `;
  }

  private async _reload() {
-    this._dialogOpen = false;
+    this.closeDialog();

    showToast(this, {
      message: this.hass.localize("ui.dialogs.restart.reload.reloading"),
@@ -366,7 +374,7 @@ class DialogRestart extends LitElement {
      return;
    }

-    this._dialogOpen = false;
+    this.closeDialog();

    let actionFunc;

@@ -405,9 +413,15 @@ class DialogRestart extends LitElement {
      haStyle,
      haStyleDialog,
      css`
-        ha-wa-dialog {
+        ha-md-dialog {
          --dialog-content-padding: 0;
        }
+        @media all and (min-width: 550px) {
+          ha-md-dialog {
+            min-width: 500px;
+            max-width: 500px;
+          }
+        }

        ha-expansion-panel {
          border-top: 1px solid var(--divider-color);
--- a/src/layouts/partial-panel-resolver.ts
+++ b/src/layouts/partial-panel-resolver.ts
@@ -33,7 +33,7 @@ const COMPONENTS = {
  "media-browser": () =>
    import("../panels/media-browser/ha-panel-media-browser"),
  light: () => import("../panels/light/ha-panel-light"),
-  safety: () => import("../panels/safety/ha-panel-safety"),
+  security: () => import("../panels/security/ha-panel-security"),
  climate: () => import("../panels/climate/ha-panel-climate"),
 };

--- a/src/panels/config/automation/ha-automation-sidebar.ts
+++ b/src/panels/config/automation/ha-automation-sidebar.ts
@@ -1,6 +1,5 @@
-import { css, html, LitElement, nothing, type PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { tinykeys } from "tinykeys";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-resizable-bottom-sheet";
@@ -45,27 +44,11 @@ export default class HaAutomationSidebar extends LitElement {
  @query("ha-resizable-bottom-sheet")
  private _bottomSheetElement?: HaResizableBottomSheet;

-  @query(".handle")
-  private _handleElement?: HTMLDivElement;
-
  private _resizeStartX = 0;

-  private _tinykeysUnsub?: () => void;
-
-  protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-    if (changedProperties.has("config") || changedProperties.has("narrow")) {
-      if (!this.config || this.narrow) {
-        this._tinykeysUnsub?.();
-        this._tinykeysUnsub = undefined;
-      }
-    }
-  }
-
  disconnectedCallback() {
    super.disconnectedCallback();
    this._unregisterResizeHandlers();
-    this._tinykeysUnsub?.();
  }

  private _renderContent() {
@@ -187,9 +170,6 @@ export default class HaAutomationSidebar extends LitElement {
        class="handle ${this._resizing ? "resizing" : ""}"
        @mousedown=${this._handleMouseDown}
        @touchstart=${this._handleMouseDown}
-        @focus=${this._startKeyboardResizing}
-        @blur=${this._stopKeyboardResizing}
-        tabindex="0"
      >
        <div class="indicator ${this._resizing ? "" : "hidden"}"></div>
      </div>
@@ -308,44 +288,6 @@ export default class HaAutomationSidebar extends LitElement {
    document.removeEventListener("touchcancel", this._endResizing);
  }

-  private _startKeyboardResizing = (ev: KeyboardEvent) => {
-    ev.stopPropagation();
-    this._resizing = true;
-    this._resizeStartX = 0;
-    this._tinykeysUnsub = tinykeys(this._handleElement!, {
-      ArrowLeft: this._increaseSize,
-      ArrowRight: this._decreaseSize,
-    });
-  };
-
-  private _stopKeyboardResizing = (ev: KeyboardEvent) => {
-    ev.stopPropagation();
-    this._resizing = false;
-    fireEvent(this, "sidebar-resizing-stopped");
-    this._tinykeysUnsub?.();
-    this._tinykeysUnsub = undefined;
-  };
-
-  private _increaseSize = (ev: KeyboardEvent) => {
-    ev.stopPropagation();
-
-    this._resizeStartX -= computeRTL(this.hass) ? 10 : -10;
-    this._keyboardResize();
-  };
-
-  private _decreaseSize = (ev: KeyboardEvent) => {
-    ev.stopPropagation();
-
-    this._resizeStartX += computeRTL(this.hass) ? 10 : -10;
-    this._keyboardResize();
-  };
-
-  private _keyboardResize() {
-    fireEvent(this, "sidebar-resized", {
-      deltaInPx: this._resizeStartX,
-    });
-  }
-
  static styles = css`
    :host {
      z-index: 6;
@@ -360,8 +302,6 @@ export default class HaAutomationSidebar extends LitElement {
      --ha-bottom-sheet-border-style: solid;
      --ha-bottom-sheet-border-color: var(--primary-color);
      margin-top: var(--safe-area-inset-top);
-
-      --ha-bottom-sheet-surface-background: var(--card-background-color);
    }

    @media all and (max-width: 870px) {
@@ -400,10 +340,6 @@ export default class HaAutomationSidebar extends LitElement {
      transform: scale3d(0, 1, 1);
      opacity: 0;
    }
-
-    .handle:focus-visible {
-      outline: none;
-    }
  `;
 }

--- a/src/panels/config/backup/components/config/ha-backup-config-data.ts
+++ b/src/panels/config/backup/components/config/ha-backup-config-data.ts
@@ -2,7 +2,6 @@ import {
  mdiChartBox,
  mdiCog,
  mdiFolder,
-  mdiInformation,
  mdiPlayBoxMultiple,
  mdiPuzzle,
 } from "@mdi/js";
@@ -12,7 +11,6 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-alert";
 import "../../../../../components/ha-button";
 import "../../../../../components/ha-expansion-panel";
 import "../../../../../components/ha-md-list";
@@ -20,15 +18,10 @@ import "../../../../../components/ha-md-list-item";
 import "../../../../../components/ha-md-select";
 import type { HaMdSelect } from "../../../../../components/ha-md-select";
 import "../../../../../components/ha-md-select-option";
-import "../../../../../components/ha-spinner";
 import "../../../../../components/ha-switch";
 import type { HaSwitch } from "../../../../../components/ha-switch";
-import "../../../../../components/ha-tooltip";
 import { fetchHassioAddonsInfo } from "../../../../../data/hassio/addon";
-import type { HostDisksUsage } from "../../../../../data/hassio/host";
-import { fetchHostDisksUsage } from "../../../../../data/hassio/host";
 import type { HomeAssistant } from "../../../../../types";
-import { bytesToString } from "../../../../../util/bytes-to-string";
 import "../ha-backup-addons-picker";
 import type { BackupAddonItem } from "../ha-backup-addons-picker";
 import { getRecorderInfo } from "../../../../../data/recorder";
@@ -85,14 +78,11 @@ class HaBackupConfigData extends LitElement {

  @state() private _showDbOption = true;

-  @state() private _storageInfo?: HostDisksUsage | null;
-
  protected firstUpdated(changedProperties: PropertyValues): void {
    super.firstUpdated(changedProperties);
    this._checkDbOption();
    if (isComponentLoaded(this.hass, "hassio")) {
      this._fetchAddons();
-      this._fetchStorageInfo();
    }
  }

@@ -124,68 +114,10 @@ class HaBackupConfigData extends LitElement {
    }
  }

-  private async _fetchStorageInfo() {
-    try {
-      this._storageInfo = await fetchHostDisksUsage(this.hass);
-    } catch (_err: any) {
-      this._storageInfo = null;
-    }
-  }
-
  private _hasLocalAddons(addons: BackupAddonItem[]): boolean {
    return addons.some((addon) => addon.slug === "local");
  }

-  private _estimateBackupSize = memoizeOne(
-    (
-      data: FormData,
-      storageInfo: HostDisksUsage | null | undefined,
-      addonsLength: number
-    ): {
-      compressedBytes: number;
-      addonsNotAccurate: boolean;
-    } | null => {
-      if (!storageInfo?.children) {
-        return null;
-      }
-
-      let totalBytes = 0;
-
-      const segments: Record<string, number> = {};
-      storageInfo.children.forEach((child) => {
-        segments[child.id] = child.used_bytes;
-      });
-
-      if (data.homeassistant) {
-        totalBytes += segments.homeassistant ?? 0;
-      }
-      if (data.media) {
-        totalBytes += segments.media ?? 0;
-      }
-      if (data.share) {
-        totalBytes += segments.share ?? 0;
-      }
-
-      if (
-        data.addons_mode === "all" ||
-        (data.addons_mode === "custom" && data.addons.length > 0)
-      ) {
-        // It would be better if we could receive individual addon sizes in the WS request instead
-        totalBytes +=
-          (segments.addons_data ?? 0) + (segments.addons_config ?? 0);
-      }
-
-      return {
-        // Estimate compressed size (40% reduction typical for gzip)
-        compressedBytes: Math.round(totalBytes * 0.6),
-        addonsNotAccurate:
-          data.addons_mode === "custom" &&
-          data.addons.length > 0 &&
-          data.addons.length !== addonsLength,
-      };
-    }
-  );
-
  private _getData = memoizeOne(
    (value: BackupConfigData | undefined, showAddon: boolean): FormData => {
      if (!value) {
@@ -239,7 +171,6 @@ class HaBackupConfigData extends LitElement {
    const isHassio = isComponentLoaded(this.hass, "hassio");

    return html`
-      ${this._renderSizeEstimate()}
      <ha-md-list>
        <ha-md-list-item>
          <ha-svg-icon slot="start" .path=${mdiCog}></ha-svg-icon>
@@ -450,103 +381,7 @@ class HaBackupConfigData extends LitElement {
    });
  }

-  private _renderSizeEstimate() {
-    if (!isComponentLoaded(this.hass, "hassio")) {
-      return nothing;
-    }
-
-    const data = this._getData(this.value, this._showAddons);
-
-    if (
-      !(
-        data.homeassistant ||
-        data.database ||
-        data.media ||
-        data.share ||
-        data.local_addons ||
-        data.addons_mode === "all" ||
-        (data.addons_mode === "custom" && data.addons.length > 0)
-      )
-    ) {
-      return nothing;
-    }
-
-    if (this._storageInfo === undefined) {
-      return html`
-        <ha-alert alert-type="info">
-          <ha-spinner slot="icon"></ha-spinner>
-          ${this.hass.localize(
-            "ui.panel.config.backup.data.estimated_size_loading"
-          )}
-        </ha-alert>
-      `;
-    }
-
-    if (!this._storageInfo || !this._storageInfo.children) {
-      return nothing;
-    }
-
-    const result = this._estimateBackupSize(
-      data,
-      this._storageInfo,
-      this._addons.length
-    );
-    if (result === null) {
-      return nothing;
-    }
-
-    const { compressedBytes, addonsNotAccurate } = result;
-
-    return html`
-      <span class="estimated-size">
-        <span class="estimated-size-heading">
-          ${this.hass.localize("ui.panel.config.backup.data.estimated_size")}
-          <ha-svg-icon
-            id="estimated-size-info"
-            .path=${mdiInformation}
-          ></ha-svg-icon>
-          <ha-tooltip for="estimated-size-info" placement="right">
-            ${this.hass.localize(
-              "ui.panel.config.backup.data.estimated_size_disclaimer"
-            )}
-            ${addonsNotAccurate
-              ? html`<br /><br />${this.hass.localize(
-                    "ui.panel.config.backup.data.estimated_size_disclaimer_addons_custom"
-                  )}`
-              : nothing}
-          </ha-tooltip>
-        </span>
-        <span class="estimated-size-value">
-          ${bytesToString(compressedBytes)}
-        </span>
-      </span>
-    `;
-  }
-
  static styles = css`
-    .estimated-size {
-      display: block;
-      margin-top: var(--ha-space-2);
-      font-size: var(--ha-font-size-m);
-    }
-    .estimated-size-heading {
-      font-size: var(--ha-font-size-m);
-      line-height: var(--ha-line-height-expanded);
-    }
-    .estimated-size-heading ha-svg-icon {
-      --mdc-icon-size: 16px;
-      color: var(--secondary-text-color);
-      margin-inline-start: var(--ha-space-1);
-      vertical-align: middle;
-    }
-    .estimated-size-value {
-      display: block;
-      font-size: var(--ha-font-size-s);
-      color: var(--secondary-text-color);
-    }
-    ha-spinner {
-      --ha-spinner-size: 24px;
-    }
    ha-md-list {
      background: none;
      --md-list-item-leading-space: 0;
--- a/src/panels/config/backup/dialogs/dialog-generate-backup.ts
+++ b/src/panels/config/backup/dialogs/dialog-generate-backup.ts
@@ -1,7 +1,7 @@
 import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
@@ -9,9 +9,9 @@ import "../../../../components/ha-button";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-icon-button-prev";
-import "../../../../components/ha-wa-dialog";
+import "../../../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 import "../../../../components/ha-md-list";
 import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-md-select";
@@ -73,13 +73,12 @@ class DialogGenerateBackup extends LitElement implements HassDialog {

  @state() private _formData?: FormData;

-  @state() private _open = false;
+  @query("ha-md-dialog") private _dialog?: HaMdDialog;

  public showDialog(_params: GenerateBackupDialogParams): void {
    this._step = STEPS[0];
    this._formData = INITIAL_DATA;
    this._params = _params;
-    this._open = true;

    this._fetchAgents();
    this._fetchBackupConfig();
@@ -89,7 +88,6 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
    if (this._params!.cancel) {
      this._params!.cancel();
    }
-    this._open = false;
    this._step = undefined;
    this._formData = undefined;
    this._agents = [];
@@ -116,7 +114,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
  }

  public closeDialog() {
-    this._open = false;
+    this._dialog?.close();
    return true;
  }

@@ -181,19 +179,15 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
    const selectedAgents = this._formData.agent_ids;

    return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        @closed=${this._dialogClosed}
-      >
-        <ha-dialog-header slot="header">
+      <ha-md-dialog open disable-cancel-action @closed=${this._dialogClosed}>
+        <ha-dialog-header slot="headline">
          ${isFirstStep
            ? html`
                <ha-icon-button
                  slot="navigationIcon"
-                  data-dialog="close"
                  .label=${this.hass.localize("ui.common.close")}
                  .path=${mdiClose}
+                  @click=${this.closeDialog}
                ></ha-icon-button>
              `
            : html`
@@ -204,17 +198,13 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
              `}
          <span slot="title" .title=${dialogTitle}> ${dialogTitle} </span>
        </ha-dialog-header>
-        <div class="content">
+        <div slot="content" class="content">
          ${this._step === "data" ? this._renderData() : this._renderSync()}
        </div>
-        <ha-dialog-footer slot="footer">
+        <div slot="actions">
          ${isFirstStep
            ? html`
-                <ha-button
-                  slot="secondaryAction"
-                  @click=${this.closeDialog}
-                  appearance="plain"
-                >
+                <ha-button @click=${this.closeDialog} appearance="plain">
                  ${this.hass.localize("ui.common.cancel")}
                </ha-button>
              `
@@ -222,7 +212,6 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
          ${isLastStep
            ? html`
                <ha-button
-                  slot="primaryAction"
                  @click=${this._submit}
                  .disabled=${this._formData.agents_mode === "custom" &&
                  !selectedAgents.length}
@@ -234,15 +223,14 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
              `
            : html`
                <ha-button
-                  slot="primaryAction"
                  @click=${this._nextStep}
                  .disabled=${this._step === "data" && this._noDataSelected}
                >
                  ${this.hass.localize("ui.common.next")}
                </ha-button>
              `}
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        </div>
+      </ha-md-dialog>
    `;
  }

@@ -448,8 +436,9 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
      haStyle,
      haStyleDialog,
      css`
-        ha-wa-dialog {
+        ha-md-dialog {
          --dialog-content-padding: 24px;
+          max-height: calc(100vh - 48px);
        }
        ha-md-list {
          background: none;
--- a/src/panels/config/backup/dialogs/dialog-new-backup.ts
+++ b/src/panels/config/backup/dialogs/dialog-new-backup.ts
@@ -1,11 +1,14 @@
-import { mdiCalendarSync, mdiGestureTap } from "@mdi/js";
+import { mdiCalendarSync, mdiClose, mdiGestureTap } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-dialog-header";
+import "../../../../components/ha-icon-button";
 import "../../../../components/ha-icon-next";
+import "../../../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 import "../../../../components/ha-md-list";
-import "../../../../components/ha-wa-dialog";
 import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-svg-icon";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
@@ -21,80 +24,92 @@ class DialogNewBackup extends LitElement implements HassDialog {

  @state() private _params?: NewBackupDialogParams;

+  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+
  public showDialog(params: NewBackupDialogParams): void {
    this._opened = true;
    this._params = params;
  }

  public closeDialog() {
-    this._opened = false;
+    this._dialog?.close();
    return true;
  }

  private _dialogClosed() {
-    if (this._params?.cancel) {
-      this._params.cancel();
+    if (this._params!.cancel) {
+      this._params!.cancel();
    }
+    if (this._opened) {
+      fireEvent(this, "dialog-closed", { dialog: this.localName });
+    }
+    this._opened = false;
    this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
  }

  protected render() {
-    if (!this._params) {
+    if (!this._opened || !this._params) {
      return nothing;
    }

    return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._opened}
-        header-title=${this.hass.localize(
-          "ui.panel.config.backup.dialogs.new.title"
-        )}
-        @closed=${this._dialogClosed}
-      >
-        <ha-md-list
-          innerRole="listbox"
-          itemRoles="option"
-          .innerAriaLabel=${this.hass.localize(
-            "ui.panel.config.backup.dialogs.new.options"
-          )}
-          rootTabbable
-        >
-          <ha-md-list-item
-            @click=${this._automatic}
-            type="button"
-            .disabled=${!this._params.config.create_backup.password}
+      <ha-md-dialog open @closed=${this._dialogClosed}>
+        <ha-dialog-header slot="headline">
+          <ha-icon-button
+            slot="navigationIcon"
+            @click=${this.closeDialog}
+            .label=${this.hass.localize("ui.common.close")}
+            .path=${mdiClose}
+          ></ha-icon-button>
+          <span slot="title">
+            ${this.hass.localize("ui.panel.config.backup.dialogs.new.title")}
+          </span>
+        </ha-dialog-header>
+        <div slot="content">
+          <ha-md-list
+            innerRole="listbox"
+            itemRoles="option"
+            .innerAriaLabel=${this.hass.localize(
+              "ui.panel.config.backup.dialogs.new.options"
+            )}
+            rootTabbable
+            dialogInitialFocus
          >
-            <ha-svg-icon slot="start" .path=${mdiCalendarSync}></ha-svg-icon>
-            <span slot="headline">
-              ${this.hass.localize(
-                "ui.panel.config.backup.dialogs.new.automatic.title"
-              )}
-            </span>
-            <span slot="supporting-text">
-              ${this.hass.localize(
-                "ui.panel.config.backup.dialogs.new.automatic.description"
-              )}
-            </span>
-            <ha-icon-next slot="end"></ha-icon-next>
-          </ha-md-list-item>
-          <ha-md-list-item @click=${this._manual} type="button">
-            <ha-svg-icon slot="start" .path=${mdiGestureTap}></ha-svg-icon>
-            <span slot="headline">
-              ${this.hass.localize(
-                "ui.panel.config.backup.dialogs.new.manual.title"
-              )}
-            </span>
-            <span slot="supporting-text">
-              ${this.hass.localize(
-                "ui.panel.config.backup.dialogs.new.manual.description"
-              )}
-            </span>
-            <ha-icon-next slot="end"></ha-icon-next>
-          </ha-md-list-item>
-        </ha-md-list>
-      </ha-wa-dialog>
+            <ha-md-list-item
+              @click=${this._automatic}
+              type="button"
+              .disabled=${!this._params.config.create_backup.password}
+            >
+              <ha-svg-icon slot="start" .path=${mdiCalendarSync}></ha-svg-icon>
+              <span slot="headline">
+                ${this.hass.localize(
+                  "ui.panel.config.backup.dialogs.new.automatic.title"
+                )}
+              </span>
+              <span slot="supporting-text">
+                ${this.hass.localize(
+                  "ui.panel.config.backup.dialogs.new.automatic.description"
+                )}
+              </span>
+              <ha-icon-next slot="end"></ha-icon-next>
+            </ha-md-list-item>
+            <ha-md-list-item @click=${this._manual} type="button">
+              <ha-svg-icon slot="start" .path=${mdiGestureTap}></ha-svg-icon>
+              <span slot="headline">
+                ${this.hass.localize(
+                  "ui.panel.config.backup.dialogs.new.manual.title"
+                )}
+              </span>
+              <span slot="supporting-text">
+                ${this.hass.localize(
+                  "ui.panel.config.backup.dialogs.new.manual.description"
+                )}
+              </span>
+              <ha-icon-next slot="end"></ha-icon-next>
+            </ha-md-list-item>
+          </ha-md-list>
+        </div>
+      </ha-md-dialog>
    `;
  }

@@ -113,13 +128,24 @@ class DialogNewBackup extends LitElement implements HassDialog {
      haStyle,
      haStyleDialog,
      css`
-        ha-wa-dialog {
+        ha-md-dialog {
          --dialog-content-padding: 0;
+          max-width: 500px;
+        }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          ha-md-dialog {
+            max-width: none;
+          }
+          div[slot="content"] {
+            margin-top: 0;
+          }
        }

        ha-md-list {
          background: none;
        }
+        ha-md-list-item {
+        }
        ha-icon-next {
          width: 24px;
        }
--- a/src/panels/config/hardware/ha-config-hardware.ts
+++ b/src/panels/config/hardware/ha-config-hardware.ts
@@ -31,7 +31,7 @@ import { showOptionsFlowDialog } from "../../../dialogs/config-flow/show-dialog-
 import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart";
 import "../../../layouts/hass-subpage";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import type { ECOption } from "../../../resources/echarts/echarts";
+import type { ECOption } from "../../../resources/echarts";
 import { haStyle } from "../../../resources/styles";
 import { DefaultPrimaryColor } from "../../../resources/theme/color/color.globals";
 import type { HomeAssistant } from "../../../types";
--- a/src/panels/config/integrations/ha-config-entry-row.ts
+++ b/src/panels/config/integrations/ha-config-entry-row.ts
@@ -2,7 +2,6 @@ import {
  mdiAlertCircle,
  mdiChevronDown,
  mdiCogOutline,
-  mdiContentCopy,
  mdiDelete,
  mdiDevices,
  mdiDotsVertical,
@@ -72,8 +71,6 @@ import {
 import "./ha-config-entry-device-row";
 import { renderConfigEntryError } from "./ha-config-integration-page";
 import "./ha-config-sub-entry-row";
-import { copyToClipboard } from "../../../common/util/copy-clipboard";
-import { showToast } from "../../../util/toast";

@customElement("ha-config-entry-row")
 class HaConfigEntryRow extends LitElement {
@@ -318,13 +315,6 @@ class HaConfigEntryRow extends LitElement {
            )}
          </ha-md-menu-item>

-          <ha-md-menu-item @click=${this._handleCopy} graphic="icon">
-            <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.panel.config.integrations.config_entry.copy"
-            )}
-          </ha-md-menu-item>
-
          ${Object.keys(item.supported_subentry_types).map(
            (flowType) =>
              html`<ha-md-menu-item
@@ -633,15 +623,6 @@ class HaConfigEntryRow extends LitElement {
    });
  }

-  private async _handleCopy() {
-    await copyToClipboard(this.entry.entry_id);
-    showToast(this, {
-      message:
-        this.hass?.localize("ui.common.copied_clipboard") ||
-        "Copied to clipboard",
-    });
-  }
-
  private async _handleRename() {
    const newName = await showPromptDialog(this, {
      title: this.hass.localize("ui.panel.config.integrations.rename_dialog"),
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
@@ -128,10 +128,11 @@ class ZHAAddDevicesPage extends LitElement {
                              this.hass,
                              "/integrations/zha#adding-devices"
                            )}
-                            >${this.hass.localize(
-                              "ui.panel.config.zha.add_device_page.pairing_mode_link"
-                            )}</a
                          >
+                            ${this.hass.localize(
+                              "ui.panel.config.zha.add_device_page.pairing_mode_link"
+                            )}
+                          </a>
                        `,
                      }
                    )}
--- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
@@ -110,200 +110,191 @@ class ZHAConfigDashboard extends LitElement {
        back-path="/config/integrations"
        has-fab
      >
-        <div class="container">
-          <ha-card class="content network-status">
-            ${this._error
-              ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-              : nothing}
-            <div class="card-content">
-              <div class="heading">
-                <div class="icon">
-                  <ha-svg-icon
-                    .path=${deviceOnline ? mdiCheckCircle : mdiAlertCircle}
-                    class=${deviceOnline ? "online" : "offline"}
-                  ></ha-svg-icon>
-                </div>
-                <div class="details">
-                  ZHA
+        <ha-card class="content network-status">
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : nothing}
+          <div class="card-content">
+            <div class="heading">
+              <div class="icon">
+                <ha-svg-icon
+                  .path=${deviceOnline ? mdiCheckCircle : mdiAlertCircle}
+                  class=${deviceOnline ? "online" : "offline"}
+                ></ha-svg-icon>
+              </div>
+              <div class="details">
+                ZHA
+                ${this.hass.localize(
+                  "ui.panel.config.zha.configuration_page.status_title"
+                )}:
+                ${this.hass.localize(
+                  `ui.panel.config.zha.configuration_page.status_${deviceOnline ? "online" : "offline"}`
+                )}<br />
+                <small>
                  ${this.hass.localize(
-                    "ui.panel.config.zha.configuration_page.status_title"
-                  )}:
-                  ${this.hass.localize(
-                    `ui.panel.config.zha.configuration_page.status_${deviceOnline ? "online" : "offline"}`
-                  )}<br />
-                  <small>
-                    ${this.hass.localize(
-                      "ui.panel.config.zha.configuration_page.devices",
-                      { count: this._totalDevices }
-                    )}
-                  </small>
-                  <small class="offline">
-                    ${this._offlineDevices > 0
-                      ? html`(${this.hass.localize(
-                          "ui.panel.config.zha.configuration_page.devices_offline",
-                          { count: this._offlineDevices }
-                        )})`
-                      : nothing}
-                  </small>
-                </div>
+                    "ui.panel.config.zha.configuration_page.devices",
+                    { count: this._totalDevices }
+                  )}
+                </small>
+                <small class="offline">
+                  ${this._offlineDevices > 0
+                    ? html`(${this.hass.localize(
+                        "ui.panel.config.zha.configuration_page.devices_offline",
+                        { count: this._offlineDevices }
+                      )})`
+                    : nothing}
+                </small>
              </div>
            </div>
-            ${this.configEntryId
-              ? html`<div class="card-actions">
-                  <ha-button
-                    href=${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
-                    appearance="plain"
-                    size="small"
+          </div>
+          ${this.configEntryId
+            ? html`<div class="card-actions">
+                <ha-button
+                  href=${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
+                  appearance="plain"
+                  size="small"
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.devices.caption"
+                  )}</ha-button
+                >
+                <ha-button
+                  appearance="plain"
+                  size="small"
+                  href=${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.entities.caption"
+                  )}</ha-button
+                >
+              </div>`
+            : ""}
+        </ha-card>
+        <ha-card
+          class="network-settings"
+          header=${this.hass.localize(
+            "ui.panel.config.zha.configuration_page.network_settings_title"
+          )}
+        >
+          ${this._networkSettings
+            ? html`<div class="card-content">
+                <ha-settings-row>
+                  <span slot="description">PAN ID</span>
+                  <span slot="heading"
+                    >${this._networkSettings.settings.network_info.pan_id}</span
                  >
-                    ${this.hass.localize(
-                      "ui.panel.config.devices.caption"
-                    )}</ha-button
+                </ha-settings-row>
+
+                <ha-settings-row>
+                  <span slot="heading"
+                    >${this._networkSettings.settings.network_info
+                      .extended_pan_id}</span
                  >
-                  <ha-button
-                    appearance="plain"
-                    size="small"
-                    href=${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
+                  <span slot="description">Extended PAN ID</span>
+                </ha-settings-row>
+
+                <ha-settings-row>
+                  <span slot="description">Channel</span>
+                  <span slot="heading"
+                    >${this._networkSettings.settings.network_info
+                      .channel}</span
                  >
-                    ${this.hass.localize(
-                      "ui.panel.config.entities.caption"
-                    )}</ha-button
-                  >
-                </div>`
-              : ""}
-          </ha-card>
-          <ha-card
-            class="network-settings"
-            header=${this.hass.localize(
-              "ui.panel.config.zha.configuration_page.network_settings_title"
-            )}
-          >
-            ${this._networkSettings
-              ? html`<div class="card-content">
-                  <ha-settings-row>
-                    <span slot="description">PAN ID</span>
-                    <span slot="heading"
-                      >${this._networkSettings.settings.network_info
-                        .pan_id}</span
-                    >
-                  </ha-settings-row>

-                  <ha-settings-row>
-                    <span slot="heading"
-                      >${this._networkSettings.settings.network_info
-                        .extended_pan_id}</span
-                    >
-                    <span slot="description">Extended PAN ID</span>
-                  </ha-settings-row>
-
-                  <ha-settings-row>
-                    <span slot="description">Channel</span>
-                    <span slot="heading"
-                      >${this._networkSettings.settings.network_info
-                        .channel}</span
-                    >
-
-                    <ha-icon-button
-                      .label=${this.hass.localize(
-                        "ui.panel.config.zha.configuration_page.change_channel"
-                      )}
-                      .path=${mdiPencil}
-                      @click=${this._showChannelMigrationDialog}
-                    >
-                    </ha-icon-button>
-                  </ha-settings-row>
-
-                  <ha-settings-row>
-                    <span slot="description">Coordinator IEEE</span>
-                    <span slot="heading"
-                      >${this._networkSettings.settings.node_info.ieee}</span
-                    >
-                  </ha-settings-row>
-
-                  <ha-settings-row>
-                    <span slot="description">Radio type</span>
-                    <span slot="heading"
-                      >${this._networkSettings.radio_type}</span
-                    >
-                  </ha-settings-row>
-
-                  <ha-settings-row>
-                    <span slot="description">Serial port</span>
-                    <span slot="heading"
-                      >${this._networkSettings.device.path}</span
-                    >
-                  </ha-settings-row>
-
-                  ${this._networkSettings.device.baudrate &&
-                  !this._networkSettings.device.path.startsWith("socket://")
-                    ? html`
-                        <ha-settings-row>
-                          <span slot="description">Baudrate</span>
-                          <span slot="heading"
-                            >${this._networkSettings.device.baudrate}</span
-                          >
-                        </ha-settings-row>
-                      `
-                    : nothing}
-                </div>`
-              : nothing}
-            <div class="card-actions">
-              <ha-progress-button
-                appearance="plain"
-                @click=${this._createAndDownloadBackup}
-                .progress=${this._generatingBackup}
-                .disabled=${!this._networkSettings || this._generatingBackup}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.zha.configuration_page.download_backup"
-                )}
-              </ha-progress-button>
-              <ha-button
-                appearance="filled"
-                variant="brand"
-                @click=${this._openOptionFlow}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.zha.configuration_page.migrate_radio"
-                )}
-              </ha-button>
-            </div>
-          </ha-card>
-          ${this._configuration
-            ? Object.entries(this._configuration.schemas).map(
-                ([section, schema]) =>
-                  html`<ha-card
-                    header=${this.hass.localize(
-                      `component.zha.config_panel.${section}.title`
+                  <ha-icon-button
+                    .label=${this.hass.localize(
+                      "ui.panel.config.zha.configuration_page.change_channel"
                    )}
+                    .path=${mdiPencil}
+                    @click=${this._showChannelMigrationDialog}
                  >
-                    <div class="card-content">
-                      <ha-form
-                        .hass=${this.hass}
-                        .schema=${schema}
-                        .data=${this._configuration!.data[section]}
-                        @value-changed=${this._dataChanged}
-                        .section=${section}
-                        .computeLabel=${this._computeLabelCallback(
-                          this.hass.localize,
-                          section
-                        )}
-                      ></ha-form>
-                    </div>
-                    <div class="card-actions">
-                      <ha-button
-                        appearance="filled"
-                        variant="brand"
-                        @click=${this._updateConfiguration}
-                      >
-                        ${this.hass.localize(
-                          "ui.panel.config.zha.configuration_page.update_button"
-                        )}
-                      </ha-button>
-                    </div>
-                  </ha-card>`
-              )
-            : nothing}
-        </div>
+                  </ha-icon-button>
+                </ha-settings-row>
+
+                <ha-settings-row>
+                  <span slot="description">Coordinator IEEE</span>
+                  <span slot="heading"
+                    >${this._networkSettings.settings.node_info.ieee}</span
+                  >
+                </ha-settings-row>
+
+                <ha-settings-row>
+                  <span slot="description">Radio type</span>
+                  <span slot="heading"
+                    >${this._networkSettings.radio_type}</span
+                  >
+                </ha-settings-row>
+
+                <ha-settings-row>
+                  <span slot="description">Serial port</span>
+                  <span slot="heading"
+                    >${this._networkSettings.device.path}</span
+                  >
+                </ha-settings-row>
+
+                ${this._networkSettings.device.baudrate &&
+                !this._networkSettings.device.path.startsWith("socket://")
+                  ? html`
+                      <ha-settings-row>
+                        <span slot="description">Baudrate</span>
+                        <span slot="heading"
+                          >${this._networkSettings.device.baudrate}</span
+                        >
+                      </ha-settings-row>
+                    `
+                  : ""}
+              </div>`
+            : ""}
+          <div class="card-actions">
+            <ha-progress-button
+              appearance="plain"
+              @click=${this._createAndDownloadBackup}
+              .progress=${this._generatingBackup}
+              .disabled=${!this._networkSettings || this._generatingBackup}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.zha.configuration_page.download_backup"
+              )}
+            </ha-progress-button>
+            <ha-button variant="danger" @click=${this._openOptionFlow}>
+              ${this.hass.localize(
+                "ui.panel.config.zha.configuration_page.migrate_radio"
+              )}
+            </ha-button>
+          </div>
+        </ha-card>
+        ${this._configuration
+          ? Object.entries(this._configuration.schemas).map(
+              ([section, schema]) =>
+                html`<ha-card
+                  header=${this.hass.localize(
+                    `component.zha.config_panel.${section}.title`
+                  )}
+                >
+                  <div class="card-content">
+                    <ha-form
+                      .hass=${this.hass}
+                      .schema=${schema}
+                      .data=${this._configuration!.data[section]}
+                      @value-changed=${this._dataChanged}
+                      .section=${section}
+                      .computeLabel=${this._computeLabelCallback(
+                        this.hass.localize,
+                        section
+                      )}
+                    ></ha-form>
+                  </div>
+                </ha-card>`
+            )
+          : ""}
+        <ha-card>
+          <div class="card-actions">
+            <ha-button @click=${this._updateConfiguration}>
+              ${this.hass.localize(
+                "ui.panel.config.zha.configuration_page.update_button"
+              )}
+            </ha-button>
+          </div>
+        </ha-card>

        <a href="/config/zha/add" slot="fab">
          <ha-fab
@@ -498,10 +489,6 @@ class ZHAConfigDashboard extends LitElement {
        .network-status .offline {
          color: var(--error-color, var(--error-color));
        }
-
-        .container {
-          padding: var(--ha-space-2) var(--ha-space-4) var(--ha-space-4);
-        }
      `,
    ];
  }
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
@@ -999,7 +999,6 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
          display: flex;
          gap: var(--ha-space-2);
          margin-left: auto;
-          flex-wrap: wrap;
        }

        .container {
--- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
+++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
@@ -318,13 +318,13 @@ export class HaConfigLovelaceDashboards extends LitElement {
        });
      }

-      if (this.hass.panels.safety) {
+      if (this.hass.panels.security) {
        result.push({
          icon: "mdi:security",
-          title: this.hass.localize("panel.safety"),
+          title: this.hass.localize("panel.security"),
          show_in_sidebar: false,
          mode: "storage",
-          url_path: "safety",
+          url_path: "security",
          filename: "",
          iconColor: "var(--blue-grey-color)",
          default: false,
--- a/src/panels/config/storage/dialog-move-datadisk.ts
+++ b/src/panels/config/storage/dialog-move-datadisk.ts
@@ -110,7 +110,7 @@ class MoveDatadiskDialog extends LitElement {
      >
        ${this._moving
          ? html`
-              <ha-spinner aria-label="Moving" size="large"></ha-spinner>
+              <ha-spinner aria-label="Moving" size="large"> </ha-spinner>
              <p class="progress-text">
                ${this.hass.localize(
                  "ui.panel.config.storage.datadisk.moving_desc"
@@ -206,7 +206,8 @@ class MoveDatadiskDialog extends LitElement {
        }
        ha-spinner {
          display: block;
-          margin: 32px auto;
+          margin: 32px;
+          text-align: center;
        }

        .progress-text {
--- a/src/panels/developer-tools/statistics/dialog-statistics-fix-units-changed.ts
+++ b/src/panels/developer-tools/statistics/dialog-statistics-fix-units-changed.ts
@@ -139,8 +139,7 @@ export class DialogStatisticsFixUnitsChanged extends LitElement {
      await updateStatisticsMetadata(
        this.hass,
        this._params!.issue.data.statistic_id,
-        this._params!.issue.data.state_unit,
-        this._params!.issue.data.state_unit_class
+        this._params!.issue.data.state_unit
      );
    }
    this._params?.fixedCallback!();
--- a/src/panels/history/ha-panel-history.ts
+++ b/src/panels/history/ha-panel-history.ts
@@ -1,10 +1,10 @@
-import type { ActionDetail } from "@material/mwc-list";
 import {
  mdiDotsVertical,
  mdiDownload,
  mdiFilterRemove,
  mdiImagePlus,
 } from "@mdi/js";
+import type { ActionDetail } from "@material/mwc-list";
 import { differenceInHours } from "date-fns";
 import type {
  HassServiceTarget,
@@ -27,21 +27,21 @@ import {
 import { MIN_TIME_BETWEEN_UPDATES } from "../../components/chart/ha-chart-base";
 import "../../components/chart/state-history-charts";
 import type { StateHistoryCharts } from "../../components/chart/state-history-charts";
-import "../../components/ha-button-menu";
+import "../../components/ha-spinner";
 import "../../components/ha-date-range-picker";
 import "../../components/ha-icon-button";
-import "../../components/ha-icon-button-arrow-prev";
+import "../../components/ha-button-menu";
 import "../../components/ha-list-item";
+import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-menu-button";
-import "../../components/ha-spinner";
 import "../../components/ha-target-picker";
 import "../../components/ha-top-app-bar-fixed";
 import type { HistoryResult } from "../../data/history";
 import {
  computeHistory,
-  convertStatisticsToHistory,
-  mergeHistoryResults,
  subscribeHistory,
+  mergeHistoryResults,
+  convertStatisticsToHistory,
 } from "../../data/history";
 import { fetchStatistics } from "../../data/recorder";
 import { resolveEntityIDs } from "../../data/selector";
@@ -182,7 +182,6 @@ class HaPanelHistory extends LitElement {
              .disabled=${this._isLoading}
              add-on-top
              @value-changed=${this._targetsChanged}
-              compact
            ></ha-target-picker>
          </div>
          ${this._isLoading
@@ -650,10 +649,6 @@ class HaPanelHistory extends LitElement {
          direction: var(--direction);
        }

-        ha-target-picker {
-          flex: 1;
-        }
-
        @media all and (max-width: 1025px) {
          .filters {
            flex-direction: column;
--- a/src/panels/logbook/ha-panel-logbook.ts
+++ b/src/panels/logbook/ha-panel-logbook.ts
@@ -1,11 +1,9 @@
 import { mdiRefresh } from "@mdi/js";
-import type { HassServiceTarget } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import type { HassServiceTarget } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
-import { ensureArray } from "../../common/array/ensure-array";
-import { storage } from "../../common/decorators/storage";
 import { goBack, navigate } from "../../common/navigate";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
 import {
@@ -18,15 +16,17 @@ import "../../components/ha-date-range-picker";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-menu-button";
-import "../../components/ha-target-picker";
 import "../../components/ha-top-app-bar-fixed";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
+import "../../components/ha-target-picker";
 import { filterLogbookCompatibleEntities } from "../../data/logbook";
-import { resolveEntityIDs } from "../../data/selector";
-import { getSensorNumericDeviceClasses } from "../../data/sensor";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "./ha-logbook";
+import { storage } from "../../common/decorators/storage";
+import { ensureArray } from "../../common/array/ensure-array";
+import { resolveEntityIDs } from "../../data/selector";
+import { getSensorNumericDeviceClasses } from "../../data/sensor";
+import type { HaEntityPickerEntityFilterFunc } from "../../components/entity/ha-entity-picker";

@customElement("ha-panel-logbook")
 export class HaPanelLogbook extends LitElement {
@@ -108,7 +108,6 @@ export class HaPanelLogbook extends LitElement {
              .value=${this._targetPickerValue}
              add-on-top
              @value-changed=${this._targetsChanged}
-              compact
            ></ha-target-picker>
          </div>

@@ -364,10 +363,6 @@ export class HaPanelLogbook extends LitElement {
          max-width: 400px;
        }

-        ha-target-picker {
-          flex: 1;
-        }
-
        :host([narrow]) ha-entity-picker {
          max-width: none;
          width: 100%;
--- a/src/panels/lovelace/badges/hui-entity-badge.ts
+++ b/src/panels/lovelace/badges/hui-entity-badge.ts
@@ -9,9 +9,9 @@ import { computeCssColor } from "../../../common/color/compute-color";
 import { hsv2rgb, rgb2hex, rgb2hsv } from "../../../common/color/convert-color";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
+import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
-import { computeLovelaceEntityName } from "../common/entity/compute-lovelace-entity-name";
 import "../../../components/ha-badge";
 import "../../../components/ha-ripple";
 import "../../../components/ha-state-icon";
@@ -189,11 +189,7 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
      </state-display>
    `;

-    const name = computeLovelaceEntityName(
-      this.hass,
-      stateObj,
-      this._config.name
-    );
+    const name = this._config.name || computeStateName(stateObj);

    const showState = this._config.show_state;
    const showName = this._config.show_name;
--- a/src/panels/lovelace/badges/types.ts
+++ b/src/panels/lovelace/badges/types.ts
@@ -1,4 +1,3 @@
-import type { EntityNameItem } from "../../../common/entity/compute_entity_name_display";
 import type { ActionConfig } from "../../../data/lovelace/config/action";
 import type { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";
 import type { LegacyStateFilter } from "../common/evaluate-filter";
@@ -32,7 +31,7 @@ export interface StateLabelBadgeConfig extends LovelaceBadgeConfig {
 export interface EntityBadgeConfig extends LovelaceBadgeConfig {
  type: "entity";
  entity?: string;
-  name?: string | EntityNameItem | EntityNameItem[];
+  name?: string;
  icon?: string;
  color?: string;
  show_name?: boolean;
--- a/src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts
@@ -43,8 +43,6 @@ class HuiHistoryChartCardFeature

  @state() private _coordinates?: [number, number][];

-  @state() private _yAxisOrigin?: number;
-
  private _interval?: number;

  static getStubConfig(): TrendGraphCardFeatureConfig {
@@ -107,10 +105,7 @@ class HuiHistoryChartCardFeature
      `;
    }
    return html`
-      <hui-graph-base
-        .coordinates=${this._coordinates}
-        .yAxisOrigin=${this._yAxisOrigin}
-      ></hui-graph-base>
+      <hui-graph-base .coordinates=${this._coordinates}></hui-graph-base>
    `;
  }

@@ -128,15 +123,14 @@ class HuiHistoryChartCardFeature
    return subscribeHistoryStatesTimeWindow(
      this.hass!,
      (historyStates) => {
-        const { points, yAxisOrigin } =
+        this._coordinates =
          coordinatesMinimalResponseCompressedState(
            historyStates[this.context!.entity_id!],
-            this.clientWidth,
-            this.clientHeight,
-            this.clientWidth / 5 // sample to 1 point per 5 pixels
-          );
-        this._coordinates = points;
-        this._yAxisOrigin = yAxisOrigin;
+            hourToShow,
+            500,
+            2,
+            undefined
+          ) || [];
      },
      hourToShow,
      [this.context!.entity_id!]
--- a/src/panels/lovelace/cards/clock/hui-clock-card-analog.ts
+++ b/src/panels/lovelace/cards/clock/hui-clock-card-analog.ts
@@ -34,12 +34,16 @@ export class HuiClockCardAnalog extends LitElement {

  @state() private _dateTimeFormat?: Intl.DateTimeFormat;

+  @state() private _dateFormat?: Intl.DateTimeFormat;
+
  @state() private _hourOffsetSec?: number;

  @state() private _minuteOffsetSec?: number;

  @state() private _secondOffsetSec?: number;

+  @state() private _date?: string;
+
  private _initDate() {
    if (!this.config || !this.hass) {
      return;
@@ -60,6 +64,17 @@ export class HuiClockCardAnalog extends LitElement {
        resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
    });

+    if (this.config.date_format === "day") {
+      this._dateFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
+        day: "2-digit",
+        timeZone:
+          this.config.time_zone ||
+          resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
+      });
+    } else {
+      this._dateFormat = undefined;
+    }
+
    this._computeOffsets();
  }

@@ -111,6 +126,13 @@ export class HuiClockCardAnalog extends LitElement {
    this._secondOffsetSec = secondsWithMs;
    this._minuteOffsetSec = minute * 60 + secondsWithMs;
    this._hourOffsetSec = hour12 * 3600 + minute * 60 + secondsWithMs;
+
+    if (this._dateFormat) {
+      const dateParts = this._dateFormat.formatToParts();
+      this._date = dateParts.find((part) => part.type === "day")?.value;
+    } else {
+      this._date = undefined;
+    }
  }

  render() {
@@ -231,6 +253,9 @@ export class HuiClockCardAnalog extends LitElement {
                }s;`}
              ></div>`
            : nothing}
+          ${this._date !== undefined
+            ? html`<div class="date ${sizeClass}">${this._date}</div>`
+            : nothing}
        </div>
      </div>
    `;
@@ -399,6 +424,36 @@ export class HuiClockCardAnalog extends LitElement {
      animation-timing-function: steps(60, end);
    }

+    .date {
+      position: absolute;
+      top: 50%;
+      right: 25%;
+      transform: translate(50%, -50%);
+      font-size: var(--ha-font-size-m);
+      font-weight: var(--ha-font-weight-medium);
+      color: var(--primary-text-color);
+      opacity: 0.6;
+      z-index: 0;
+      pointer-events: none;
+      padding: 1px 3px;
+      border-radius: 2px;
+      box-shadow:
+        inset 0 1px 2px rgba(0, 0, 0, 0.15),
+        inset 0 -1px 1px rgba(0, 0, 0, 0.1);
+    }
+
+    .date.size-medium {
+      font-size: var(--ha-font-size-l);
+      padding: 2px 4px;
+      border-radius: 2px;
+    }
+
+    .date.size-large {
+      font-size: var(--ha-font-size-xl);
+      padding: 2px 5px;
+      border-radius: 3px;
+    }
+
    @keyframes ha-clock-rotate {
      from {
        transform: translate(-50%, 0) rotate(0deg);
--- a/src/panels/lovelace/cards/clock/hui-clock-card-digital.ts
+++ b/src/panels/lovelace/cards/clock/hui-clock-card-digital.ts
@@ -16,6 +16,8 @@ export class HuiClockCardDigital extends LitElement {

  @state() private _dateTimeFormat?: Intl.DateTimeFormat;

+  @state() private _dateFormat?: Intl.DateTimeFormat;
+
  @state() private _timeHour?: string;

  @state() private _timeMinute?: string;
@@ -24,6 +26,8 @@ export class HuiClockCardDigital extends LitElement {

  @state() private _timeAmPm?: string;

+  @state() private _date?: string;
+
  private _tickInterval?: undefined | number;

  private _initDate() {
@@ -48,6 +52,17 @@ export class HuiClockCardDigital extends LitElement {
        resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
    });

+    if (this.config?.date_format === "day") {
+      this._dateFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
+        day: "2-digit",
+        timeZone:
+          this.config?.time_zone ||
+          resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
+      });
+    } else {
+      this._dateFormat = undefined;
+    }
+
    this._tick();
  }

@@ -93,6 +108,13 @@ export class HuiClockCardDigital extends LitElement {
      ? parts.find((part) => part.type === "second")?.value
      : undefined;
    this._timeAmPm = parts.find((part) => part.type === "dayPeriod")?.value;
+
+    if (this._dateFormat) {
+      const dateParts = this._dateFormat.formatToParts();
+      this._date = dateParts.find((part) => part.type === "day")?.value;
+    } else {
+      this._date = undefined;
+    }
  }

  render() {
@@ -113,6 +135,9 @@ export class HuiClockCardDigital extends LitElement {
          ? html`<div class="time-part am-pm">${this._timeAmPm}</div>`
          : nothing}
      </div>
+      ${this._date !== undefined
+        ? html`<div class="date ${sizeClass}">${this._date}</div>`
+        : nothing}
    `;
  }

@@ -121,6 +146,26 @@ export class HuiClockCardDigital extends LitElement {
      display: block;
    }

+    .date {
+      font-size: var(--ha-font-size-m);
+      font-weight: var(--ha-font-weight-medium);
+      opacity: 0.6;
+      text-align: center;
+      direction: ltr;
+      margin-top: 4px;
+      align-self: center;
+    }
+
+    .date.size-medium {
+      font-size: var(--ha-font-size-l);
+      margin-top: 6px;
+    }
+
+    .date.size-large {
+      font-size: var(--ha-font-size-xl);
+      margin-top: 8px;
+    }
+
    .time-parts {
      align-items: center;
      display: grid;
--- a/src/panels/lovelace/cards/energy/common/energy-chart-options.ts
+++ b/src/panels/lovelace/cards/energy/common/energy-chart-options.ts
@@ -26,8 +26,7 @@ import {
  formatDateVeryShort,
 } from "../../../../../common/datetime/format_date";
 import { formatTime } from "../../../../../common/datetime/format_time";
-import type { ECOption } from "../../../../../resources/echarts/echarts";
-import { filterXSS } from "../../../../../common/util/xss";
+import type { ECOption } from "../../../../../resources/echarts";

 export function getSuggestedMax(dayDifference: number, end: Date): number {
  let suggestedMax = new Date(end);
@@ -202,7 +201,7 @@ function formatTooltip(
          countNegative++;
        }
      }
-      return `${param.marker} ${filterXSS(param.seriesName!)}: ${value} ${unit}`;
+      return `${param.marker} ${param.seriesName}: ${value} ${unit}`;
    })
    .filter(Boolean);
  let footer = "";
--- a/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts
@@ -36,7 +36,7 @@ import {
  getCompareTransform,
 } from "./common/energy-chart-options";
 import { storage } from "../../../../common/decorators/storage";
-import type { ECOption } from "../../../../resources/echarts/echarts";
+import type { ECOption } from "../../../../resources/echarts";
 import { formatNumber } from "../../../../common/number/format_number";
 import type { CustomLegendOption } from "../../../../components/chart/ha-chart-base";

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aidan Timson	a6a83258ab	Add	2025-10-08 09:38:17 +01:00
Aidan Timson	01889de462	Add date option	2025-10-08 09:30:56 +01:00