Improve new section button

2026-06-30 04:02:17 +00:00 · 2025-02-19 12:50:30 +01:00
551 changed files with 8326 additions and 16569 deletions
@@ -26,7 +26,7 @@ jobs:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -62,7 +62,7 @@ jobs:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -26,7 +26,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -37,7 +37,7 @@ jobs:
      - name: Build resources
        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
      - name: Setup lint cache
-        uses: actions/cache@v4.2.3
+        uses: actions/cache@v4.2.0
        with:
          path: |
            node_modules/.cache/prettier
@@ -60,7 +60,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -78,7 +78,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -89,7 +89,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: frontend-bundle-stats
          path: build/stats/*.json
@@ -102,7 +102,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -113,7 +113,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: supervisor-bundle-stats
          path: build/stats/*.json
@@ -27,7 +27,7 @@ jobs:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -63,7 +63,7 @@ jobs:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -19,7 +19,7 @@ jobs:
        uses: actions/checkout@v4.2.2

      - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -24,7 +24,7 @@ jobs:
        uses: actions/checkout@v4.2.2

      - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -28,7 +28,7 @@ jobs:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -57,14 +57,14 @@ jobs:
        run: tar -czvf translations.tar.gz translations

      - name: Upload build artifacts
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: wheels
          path: dist/home_assistant_frontend*.whl
          if-no-files-found: error

      - name: Upload translations
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: translations
          path: translations.tar.gz
@@ -17,7 +17,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@v2.2.0
+        uses: relative-ci/agent-action@v2.1.14
        with:
          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
          token: ${{ github.token }}
@@ -34,7 +34,7 @@ jobs:
        uses: home-assistant/actions/helpers/verify-version@master

      - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -74,7 +74,7 @@ jobs:
          echo "home-assistant-frontend==$version" > ./requirements.txt

      - name: Build wheels
-        uses: home-assistant/wheels@2025.02.0
+        uses: home-assistant/wheels@2024.11.0
        with:
          abi: cp313
          tag: musllinux_1_2
@@ -92,7 +92,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -121,7 +121,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -6,4 +6,4 @@ enableGlobalCache: false

 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.7.0.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs
@@ -18,7 +18,7 @@ module.exports.sourceMapURL = () => {
 module.exports.ignorePackages = () => [];

 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ isHassioBuild }) =>
+module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
  [
    // Contains all color definitions for all material color sets.
    // We don't use it
@@ -28,6 +28,12 @@ module.exports.emptyPackages = ({ isHassioBuild }) =>
    require.resolve("@polymer/font-roboto/roboto.js"),
    require.resolve("@vaadin/vaadin-material-styles/typography.js"),
    require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
+    // Compatibility not needed for latest builds
+    latestBuild &&
+      // wrapped in require.resolve so it blows up if file no longer exists
+      require.resolve(
+        path.resolve(paths.polymer_dir, "src/resources/compatibility.ts")
+      ),
    // Icons in supervisor conflict with icons in HA so we don't load.
    isHassioBuild &&
      require.resolve(
@@ -49,7 +55,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
  __STATIC_PATH__: "/static/",
  __HASS_URL__: `\`${
    "HASS_URL" in process.env
-      ? process.env.HASS_URL
+      ? process.env["HASS_URL"]
      : "${location.protocol}//${location.host}"
  }\``,
  "process.env.NODE_ENV": JSON.stringify(
@@ -56,7 +56,6 @@ const getCommonTemplateVars = () => {
  );
  return {
    modernRegex: compileRegex(browserRegexes.concat(haMacOSRegex)).toString(),
-    hassUrl: process.env.HASS_URL || "",
  };
 };

@@ -59,11 +59,6 @@ function copyPolyfills(staticDir) {
    npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js.map"),
    staticPath("polyfills/")
  );
-  // Lit polyfill support
-  fs.copySync(
-    npmPath("lit/polyfill-support.js"),
-    path.join(staticPath("polyfills/"), "lit-polyfill-support.js")
-  );

  // dialog-polyfill css
  copyFileDir(
@@ -99,6 +94,10 @@ function copyMapPanel(staticDir) {
    npmPath("leaflet.markercluster/dist/MarkerCluster.css"),
    staticPath("images/leaflet/")
  );
+  copyFileDir(
+    npmPath("leaflet.markercluster/dist/MarkerCluster.Default.css"),
+    staticPath("images/leaflet/")
+  );
  fs.copySync(
    npmPath("leaflet/dist/images"),
    staticPath("images/leaflet/images/")
@@ -40,17 +40,20 @@ class CustomJSON extends Transform {
    this._reviver = reviver;
  }

-  // eslint-disable-next-line @typescript-eslint/naming-convention
  async _transform(file, _, callback) {
-    let obj = JSON.parse(file.contents.toString(), this._reviver);
-    if (this._func) obj = this._func(obj, file.path);
-    for (const [outObj, dir] of Array.isArray(obj) ? obj : [[obj, ""]]) {
-      const outFile = file.clone({ contents: false });
-      outFile.contents = Buffer.from(JSON.stringify(outObj));
-      outFile.dirname += `/${dir}`;
-      this.push(outFile);
+    try {
+      let obj = JSON.parse(file.contents.toString(), this._reviver);
+      if (this._func) obj = this._func(obj, file.path);
+      for (const [outObj, dir] of Array.isArray(obj) ? obj : [[obj, ""]]) {
+        const outFile = file.clone({ contents: false });
+        outFile.contents = Buffer.from(JSON.stringify(outObj));
+        outFile.dirname += `/${dir}`;
+        this.push(outFile);
+      }
+      callback(null);
+    } catch (err) {
+      callback(err);
    }
-    callback(null);
  }
 }

@@ -65,19 +68,25 @@ class MergeJSON extends Transform {
    this._reviver = reviver;
  }

-  // eslint-disable-next-line @typescript-eslint/naming-convention
  async _transform(file, _, callback) {
-    this._objects.push(JSON.parse(file.contents.toString(), this._reviver));
-    if (!this._outFile) this._outFile = file.clone({ contents: false });
-    callback(null);
+    try {
+      this._objects.push(JSON.parse(file.contents.toString(), this._reviver));
+      if (!this._outFile) this._outFile = file.clone({ contents: false });
+      callback(null);
+    } catch (err) {
+      callback(err);
+    }
  }

-  // eslint-disable-next-line @typescript-eslint/naming-convention
  async _flush(callback) {
-    const mergedObj = merge(this._startObj, ...this._objects);
-    this._outFile.contents = Buffer.from(JSON.stringify(mergedObj));
-    this._outFile.stem = this._stem;
-    callback(null, this._outFile);
+    try {
+      const mergedObj = merge(this._startObj, ...this._objects);
+      this._outFile.contents = Buffer.from(JSON.stringify(mergedObj));
+      this._outFile.stem = this._stem;
+      callback(null, this._outFile);
+    } catch (err) {
+      callback(err);
+    }
  }
 }

@@ -1,17 +1,12 @@
 const { existsSync } = require("fs");
 const path = require("path");
 const rspack = require("@rspack/core");
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const { RsdoctorRspackPlugin } = require("@rsdoctor/rspack-plugin");
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const { StatsWriterPlugin } = require("webpack-stats-plugin");
-const filterStats = require("@bundle-stats/plugin-webpack-filter");
-// eslint-disable-next-line @typescript-eslint/naming-convention
+const filterStats = require("@bundle-stats/plugin-webpack-filter").default;
 const TerserPlugin = require("terser-webpack-plugin");
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const { WebpackManifestPlugin } = require("rspack-manifest-plugin");
 const log = require("fancy-log");
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const WebpackBar = require("webpackbar/rspack");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");
@@ -160,7 +155,9 @@ const createRspackConfig = ({
        },
      }),
      new rspack.NormalModuleReplacementPlugin(
-        new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
+        new RegExp(
+          bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
+        ),
        path.resolve(paths.polymer_dir, "src/util/empty.js")
      ),
      !isProdBuild && new LogStartCompilePlugin(),
@@ -195,7 +192,6 @@ const createRspackConfig = ({
        "lit/directives/if-defined$": "lit/directives/if-defined.js",
        "lit/directives/guard$": "lit/directives/guard.js",
        "lit/directives/cache$": "lit/directives/cache.js",
-        "lit/directives/join$": "lit/directives/join.js",
        "lit/directives/repeat$": "lit/directives/repeat.js",
        "lit/directives/live$": "lit/directives/live.js",
        "lit/directives/keyed$": "lit/directives/keyed.js",
@@ -309,7 +309,7 @@ export class HcMain extends HassElement {
              "../../../../src/panels/lovelace/strategies/get-strategy"
            );
            const config = await generateLovelaceDashboardStrategy(
-              rawConfig,
+              rawConfig.strategy,
              this.hass!
            );
            this._handleNewLovelaceConfig(config);
@@ -351,7 +351,10 @@ export class HcMain extends HassElement {
      "../../../../src/panels/lovelace/strategies/get-strategy"
    );
    this._handleNewLovelaceConfig(
-      await generateLovelaceDashboardStrategy(DEFAULT_CONFIG, this.hass!)
+      await generateLovelaceDashboardStrategy(
+        DEFAULT_CONFIG.strategy,
+        this.hass!
+      )
    );
  }

@@ -5,7 +5,7 @@ import { until } from "lit/directives/until";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-button";
-import "../../../src/components/ha-spinner";
+import "../../../src/components/ha-circular-progress";
 import type { LovelaceCardConfig } from "../../../src/data/lovelace/config/card";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import type {
@@ -44,7 +44,9 @@ export class HADemoCard extends LitElement implements LovelaceCard {
        <div class="picker">
          <div class="label">
            ${this._switching
-              ? html`<ha-spinner></ha-spinner>`
+              ? html`
+                  <ha-circular-progress indeterminate></ha-circular-progress>
+                `
              : until(
                  selectedDemoConfig.then(
                    (conf) => html`
@@ -1,3 +1,5 @@
+// Compat needs to be first import
+import "../../src/resources/compatibility";
 import { customElement } from "lit/decorators";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
@@ -1,10 +1,9 @@
-import type { validateConfig } from "../../../src/data/config";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockConfig = (hass: MockHomeAssistant) => {
-  hass.mockWS<typeof validateConfig>("validate_config", () => ({
-    actions: { valid: true, error: null },
-    conditions: { valid: true, error: null },
-    triggers: { valid: true, error: null },
+  hass.mockWS("validate_config", () => ({
+    actions: { valid: true },
+    conditions: { valid: true },
+    triggers: { valid: true },
  }));
 };
@@ -1,26 +1,20 @@
-import type { getConfigEntries } from "../../../src/data/config_entries";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockConfigEntries = (hass: MockHomeAssistant) => {
-  hass.mockWS<typeof getConfigEntries>("config_entries/get", () => [
-    {
-      entry_id: "mock-entry-co2signal",
-      domain: "co2signal",
-      title: "Electricity Maps",
-      source: "user",
-      state: "loaded",
-      supports_options: false,
-      supports_remove_device: false,
-      supports_unload: true,
-      supports_reconfigure: true,
-      supported_subentry_types: {},
-      pref_disable_new_entities: false,
-      pref_disable_polling: false,
-      disabled_by: null,
-      reason: null,
-      num_subentries: 0,
-      error_reason_translation_key: null,
-      error_reason_translation_placeholders: null,
-    },
-  ]);
+  hass.mockWS("config_entries/get", () => ({
+    entry_id: "co2signal",
+    domain: "co2signal",
+    title: "Electricity Maps",
+    source: "user",
+    state: "loaded",
+    supports_options: false,
+    supports_remove_device: false,
+    supports_unload: true,
+    supports_reconfigure: true,
+    supported_subentry_types: {},
+    pref_disable_new_entities: false,
+    pref_disable_polling: false,
+    disabled_by: null,
+    reason: null,
+  }));
 };
@@ -1,10 +0,0 @@
-<svg width="94" height="64" viewBox="0 0 94 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="64" rx="8" fill="white"/>
-<rect x="0.5" y="0.5" width="93" height="63" rx="7.5" stroke="black" stroke-opacity="0.12"/>
-<path d="M8 14C8 10.6863 10.6863 8 14 8H33C36.3137 8 39 10.6863 39 14C39 17.3137 36.3137 20 33 20H14C10.6863 20 8 17.3137 8 14Z" fill="black" fill-opacity="0.32"/>
-<path d="M8 27C8 25.3431 9.34315 24 11 24H31C32.6569 24 34 25.3431 34 27V29C34 30.6569 32.6569 32 31 32H11C9.34315 32 8 30.6569 8 29V27Z" fill="black" fill-opacity="0.12"/>
-<path d="M38 27C38 25.3431 39.3431 24 41 24H83C84.6569 24 86 25.3431 86 27V29C86 30.6569 84.6569 32 83 32H41C39.3431 32 38 30.6569 38 29V27Z" fill="black" fill-opacity="0.12"/>
-<path d="M8 39C8 37.3431 9.34315 36 11 36H53C54.6569 36 56 37.3431 56 39V41C56 42.6569 54.6569 44 53 44H11C9.34315 44 8 42.6569 8 41V39Z" fill="black" fill-opacity="0.12"/>
-<path d="M60 39C60 37.3431 61.3431 36 63 36H83C84.6569 36 86 37.3431 86 39V41C86 42.6569 84.6569 44 83 44H63C61.3431 44 60 42.6569 60 41V39Z" fill="black" fill-opacity="0.12"/>
-<path d="M8 51C8 49.3431 9.34315 48 11 48H31C32.6569 48 34 49.3431 34 51V53C34 54.6569 32.6569 56 31 56H11C9.34315 56 8 54.6569 8 53V51Z" fill="black" fill-opacity="0.12"/>
-</svg>
@@ -1,7 +0,0 @@
-<svg width="94" height="48" viewBox="0 0 94 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 11C0 9.34315 1.34315 8 3 8H23C24.6569 8 26 9.34315 26 11V13C26 14.6569 24.6569 16 23 16H3C1.34315 16 0 14.6569 0 13V11Z" fill="black" fill-opacity="0.12"/>
-<path d="M30 11C30 9.34315 31.3431 8 33 8H91C92.6569 8 94 9.34315 94 11V13C94 14.6569 92.6569 16 91 16H33C31.3431 16 30 14.6569 30 13V11Z" fill="black" fill-opacity="0.12"/>
-<path d="M0 23C0 21.3431 1.34315 20 3 20H61C62.6569 20 64 21.3431 64 23V25C64 26.6569 62.6569 28 61 28H3C1.34315 28 0 26.6569 0 25V23Z" fill="black" fill-opacity="0.12"/>
-<path d="M68 23C68 21.3431 69.3431 20 71 20H91C92.6569 20 94 21.3431 94 23V25C94 26.6569 92.6569 28 91 28H71C69.3431 28 68 26.6569 68 25V23Z" fill="black" fill-opacity="0.12"/>
-<path d="M0 35C0 33.3431 1.34315 32 3 32H23C24.6569 32 26 33.3431 26 35V37C26 38.6569 24.6569 40 23 40H3C1.34315 40 0 38.6569 0 37V35Z" fill="black" fill-opacity="0.12"/>
-</svg>
@@ -1,4 +1,4 @@
 ---
-title: Spinner
+title: Circular Progress
 subtitle: Can be used to indicate an ongoing task.
 ---
@@ -0,0 +1,63 @@
+import type { TemplateResult } from "lit";
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../../src/components/ha-bar";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-circular-progress";
+import "@material/web/progress/circular-progress";
+import type { HomeAssistant } from "../../../../src/types";
+
+@customElement("demo-components-ha-circular-progress")
+export class DemoHaCircularProgress extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    return html`<ha-card header="Basic circular progress">
+        <div class="card-content">
+          <ha-circular-progress indeterminate></ha-circular-progress></div
+      ></ha-card>
+      <ha-card header="Different circular progress sizes">
+        <div class="card-content">
+          <ha-circular-progress
+            indeterminate
+            size="tiny"
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            size="small"
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            size="medium"
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            size="large"
+          ></ha-circular-progress></div
+      ></ha-card>
+      <ha-card header="Circular progress with an aria-label">
+        <div class="card-content">
+          <ha-circular-progress
+            indeterminate
+            aria-label="Doing something..."
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            .ariaLabel=${"Doing something..."}
+          ></ha-circular-progress></div
+      ></ha-card>`;
+  }
+
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-circular-progress": DemoHaCircularProgress;
+  }
+}
@@ -1,4 +1,4 @@
-import { mdiLightbulbOn, mdiPacMan } from "@mdi/js";
+import { mdiPacMan } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
@@ -125,23 +125,6 @@ const SAMPLES: {
      `;
    },
  },
-  {
-    template(slot, leftChevron) {
-      return html`
-        <ha-expansion-panel
-          slot=${slot}
-          .leftChevron=${leftChevron}
-          header="Attr Header with actions"
-        >
-          <ha-svg-icon
-            slot="leading-icon"
-            .path=${mdiLightbulbOn}
-          ></ha-svg-icon>
-          ${SHORT_TEXT}
-        </ha-expansion-panel>
-      `;
-    },
-  },
 ];

@customElement("demo-components-ha-expansion-panel")
@@ -1,3 +0,0 @@
---
-title: Select box
---
@@ -1,152 +0,0 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-select-box";
-import type { SelectBoxOption } from "../../../../src/components/ha-select-box";
-
-const basicOptions: SelectBoxOption[] = [
-  {
-    value: "text-only",
-    label: "Text only",
-  },
-  {
-    value: "card",
-    label: "Card",
-  },
-  {
-    value: "disabled",
-    label: "Disabled option",
-    disabled: true,
-  },
-];
-
-const fullOptions: SelectBoxOption[] = [
-  {
-    value: "text-only",
-    label: "Text only",
-    description: "Only text, no border and background",
-    image: "/images/select_box/text_only.svg",
-  },
-  {
-    value: "card",
-    label: "Card",
-    description: "With border and background",
-    image: "/images/select_box/card.svg",
-  },
-  {
-    value: "disabled",
-    label: "Disabled",
-    description: "Option that can not be selected",
-    disabled: true,
-  },
-];
-
-const selects: {
-  id: string;
-  label: string;
-  class?: string;
-  options: SelectBoxOption[];
-  disabled?: boolean;
-}[] = [
-  {
-    id: "basic",
-    label: "Basic",
-    options: basicOptions,
-  },
-  {
-    id: "full",
-    label: "With description and image",
-    options: fullOptions,
-  },
-];
-
-@customElement("demo-components-ha-select-box")
-export class DemoHaSelectBox extends LitElement {
-  @state() private value?: string = "off";
-
-  handleValueChanged(e: CustomEvent) {
-    this.value = e.detail.value as string;
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      ${repeat(selects, (select) => {
-        const { id, label, options } = select;
-        return html`
-          <ha-card>
-            <div class="card-content">
-              <label id=${id}>${label}</label>
-              <ha-select-box
-                .value=${this.value}
-                .options=${options}
-                @value-changed=${this.handleValueChanged}
-              >
-              </ha-select-box>
-            </div>
-          </ha-card>
-        `;
-      })}
-      <ha-card>
-        <div class="card-content">
-          <p class="title"><b>Column layout</b></p>
-          <div class="vertical-selects">
-            ${repeat(selects, (select) => {
-              const { options } = select;
-              return html`
-                <ha-select-box
-                  .value=${this.value}
-                  .options=${options}
-                  .maxColumns=${1}
-                  @value-changed=${this.handleValueChanged}
-                >
-                </ha-select-box>
-              `;
-            })}
-          </div>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    pre {
-      margin-top: 0;
-      margin-bottom: 8px;
-    }
-    p {
-      margin: 0;
-    }
-    label {
-      font-weight: 600;
-      margin-bottom: 8px;
-      display: block;
-    }
-    .custom {
-      --mdc-icon-size: 24px;
-      --control-select-color: var(--state-fan-active-color);
-      --control-select-thickness: 130px;
-      --control-select-border-radius: 36px;
-    }
-
-    p.title {
-      margin-bottom: 12px;
-    }
-
-    .vertical-selects ha-select-box {
-      display: block;
-      margin-bottom: 24px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-select-box": DemoHaSelectBox;
-  }
-}
@@ -1,44 +0,0 @@
-import type { TemplateResult } from "lit";
-import { html, css, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../../src/components/ha-bar";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-spinner";
-import type { HomeAssistant } from "../../../../src/types";
-
-@customElement("demo-components-ha-spinner")
-export class DemoHaSpinner extends LitElement {
-  @property({ attribute: false }) hass!: HomeAssistant;
-
-  protected render(): TemplateResult {
-    return html`<ha-card header="Basic spinner">
-        <div class="card-content">
-          <ha-spinner></ha-spinner></div
-      ></ha-card>
-      <ha-card header="Different spinner sizes">
-        <div class="card-content">
-          <ha-spinner size="tiny"></ha-spinner>
-          <ha-spinner size="small"></ha-spinner>
-          <ha-spinner size="medium"></ha-spinner>
-          <ha-spinner size="large"></ha-spinner></div
-      ></ha-card>
-      <ha-card header="Spinner with an aria-label">
-        <div class="card-content">
-          <ha-spinner aria-label="Doing something..."></ha-spinner>
-          <ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner></div
-      ></ha-card>`;
-  }
-
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-spinner": DemoHaSpinner;
-  }
-}
@@ -1,30 +0,0 @@
---
-title: Tooltip
---
-
-A tooltip's target is its _first child element_, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.
-
-Tooltips use `display: contents` so they won't interfere with how elements are positioned in a flex or grid layout.
-
-<ha-tooltip content="This is a tooltip">
-  <ha-button>Hover Me</ha-button>
-</ha-tooltip>
-
-```
-<ha-tooltip content="This is a tooltip">
-  <ha-button>Hover Me</ha-button>
-</ha-tooltip>
-```
-
-## Documentation
-
-This element is based on sholace `sl-tooltip` it only sets some css tokens and has a custom show/hide animation.
-
-<a href="https://shoelace.style/components/tooltip" target="_blank" rel="noopener noreferrer">Shoelace documentation</a>
-
-### HA style tokens
-
-In your theme settings use this without the prefixed `--`.
-
- `--ha-tooltip-border-radius` (Default: 4px)
- `--ha-tooltip-arrow-size` (Default: 8px)
@@ -1,2 +0,0 @@
-import "../../../../src/components/ha-tooltip";
-import "../../../../src/components/ha-button";
@@ -1,7 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../src/components/ha-spinner";
+import "../../../../src/components/ha-circular-progress";
 import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
@@ -21,7 +21,7 @@ class HassioAddonConfigDashboard extends LitElement {

  protected render(): TemplateResult {
    if (!this.addon) {
-      return html`<ha-spinner></ha-spinner>`;
+      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
    }
    const hasConfiguration =
      (this.addon.options && Object.keys(this.addon.options).length) ||
@@ -113,9 +113,8 @@ class HassioAddonConfig extends LitElement {
                  required: entry.required,
                  selector: {
                    text: {
-                      type: entry.format
-                        ? entry.format
-                        : MASKED_FIELDS.includes(entry.name)
+                      type:
+                        entry.format || MASKED_FIELDS.includes(entry.name)
                          ? "password"
                          : "text",
                    },
@@ -2,7 +2,7 @@ import "../../../../src/components/ha-card";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-spinner";
+import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-markdown";
 import { customElement, property, state } from "lit/decorators";
 import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
@@ -33,7 +33,7 @@ class HassioAddonDocumentationDashboard extends LitElement {

  protected render(): TemplateResult {
    if (!this.addon) {
-      return html`<ha-spinner></ha-spinner>`;
+      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
    }
    return html`
      <div class="content">
@@ -11,6 +11,7 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";
 import { extractSearchParam } from "../../../src/common/url/search-params";
+import "../../../src/components/ha-circular-progress";
 import type { HassioAddonDetails } from "../../../src/data/hassio/addon";
 import {
  fetchAddonInfo,
@@ -1,7 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../src/components/ha-spinner";
+import "../../../../src/components/ha-circular-progress";
 import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
@@ -23,7 +23,7 @@ class HassioAddonInfoDashboard extends LitElement {

  protected render(): TemplateResult {
    if (!this.addon) {
-      return html`<ha-spinner></ha-spinner>`;
+      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
    }

    return html`
@@ -1331,12 +1331,6 @@ class HassioAddonInfo extends LitElement {
        ha-alert mwc-button {
          --mdc-theme-primary: var(--primary-text-color);
        }
-
-        :host > ha-alert {
-          display: block;
-          margin-bottom: 16px;
-        }
-
        a {
          text-decoration: none;
        }
@@ -6,7 +6,7 @@ import {
  type TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../../src/components/ha-spinner";
+import "../../../../src/components/ha-circular-progress";
 import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
@@ -28,7 +28,9 @@ class HassioAddonLogDashboard extends LitElement {

  protected render(): TemplateResult {
    if (!this.addon) {
-      return html` <ha-spinner></ha-spinner> `;
+      return html`
+        <ha-circular-progress indeterminate></ha-circular-progress>
+      `;
    }
    return html`
      <div class="search">
@@ -253,9 +253,13 @@ export class HassioBackups extends LitElement {
                          "backup.delete_selected"
                        )}
                        .path=${mdiDelete}
+                        id="delete-btn"
                        class="warning"
                        @click=${this._deleteSelected}
                      ></ha-icon-button>
+                      <simple-tooltip animation-delay="0" for="delete-btn">
+                        ${this.supervisor.localize("backup.delete_selected")}
+                      </simple-tooltip>
                    `}
              </div>
            </div> `
@@ -3,6 +3,7 @@ import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
+import "../../../src/components/ha-circular-progress";
 import "../../../src/components/ha-file-upload";
 import type { HassioBackup } from "../../../src/data/hassio/backup";
 import { uploadBackup } from "../../../src/data/hassio/backup";
@@ -12,7 +12,6 @@ import "../../../../src/components/ha-md-dialog";
 import "../../../../src/components/ha-dialog-header";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-header-bar";
@@ -139,7 +138,7 @@ class HassioBackupDialog
            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
            : this._restoringBackup
              ? html`<div class="loading">
-                  <ha-spinner></ha-spinner>
+                  <ha-circular-progress indeterminate></ha-circular-progress>
                </div>`
              : html`
                  <supervisor-backup-content
@@ -311,6 +310,10 @@ class HassioBackupDialog
      haStyle,
      haStyleDialog,
      css`
+        ha-circular-progress {
+          display: block;
+          text-align: center;
+        }
        ha-header-bar {
          --mdc-theme-on-primary: var(--primary-text-color);
          --mdc-theme-primary: var(--mdc-theme-surface);
@@ -5,7 +5,6 @@ import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-spinner";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import {
  createHassioFullBackup,
@@ -59,7 +58,7 @@ class HassioCreateBackupDialog extends LitElement {
        )}
      >
        ${this._creatingBackup
-          ? html`<ha-spinner></ha-spinner>`
+          ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
          : html`<supervisor-backup-content
              .hass=${this.hass}
              .supervisor=${this._dialogParams.supervisor}
@@ -143,6 +142,10 @@ class HassioCreateBackupDialog extends LitElement {
        :host {
          direction: var(--direction);
        }
+        ha-circular-progress {
+          display: block;
+          text-align: center;
+        }
      `,
    ];
  }
@@ -4,7 +4,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-spinner";
+import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-select";
 import "../../../../src/components/ha-dialog";
 import {
@@ -69,7 +69,12 @@ class HassioDatadiskDialog extends LitElement {
        ?hideActions=${this.moving}
      >
        ${this.moving
-          ? html`<ha-spinner aria-label="Moving" size="large"></ha-spinner>
+          ? html` <ha-circular-progress
+                aria-label="Moving"
+                size="large"
+                indeterminate
+              >
+              </ha-circular-progress>
              <p class="progress-text">
                ${this.dialogParams.supervisor.localize(
                  "dialog.datadisk_move.moving_desc"
@@ -161,7 +166,7 @@ class HassioDatadiskDialog extends LitElement {
        ha-select {
          width: 100%;
        }
-        ha-spinner {
+        ha-circular-progress {
          display: block;
          margin: 32px;
          text-align: center;
@@ -10,7 +10,7 @@ import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-spinner";
+import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
 import "../../../../src/components/ha-formfield";
@@ -161,8 +161,12 @@ export class DialogHassioNetwork
                  .disabled=${this._scanning}
                >
                  ${this._scanning
-                    ? html`<ha-spinner aria-label="Scanning" size="small">
-                      </ha-spinner>`
+                    ? html`<ha-circular-progress
+                        aria-label="Scanning"
+                        indeterminate
+                        size="small"
+                      >
+                      </ha-circular-progress>`
                    : this.supervisor.localize("dialog.network.scan_ap")}
                </mwc-button>
                ${this._accessPoints &&
@@ -278,7 +282,8 @@ export class DialogHassioNetwork
        </mwc-button>
        <mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
          ${this._processing
-            ? html`<ha-spinner size="small"> </ha-spinner>`
+            ? html`<ha-circular-progress indeterminate size="small">
+              </ha-circular-progress>`
            : this.supervisor.localize("common.save")}
        </mwc-button>
      </div>`;
@@ -1,5 +1,6 @@
 import "@material/mwc-button/mwc-button";
 import { mdiDelete, mdiDeleteOff } from "@mdi/js";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -7,8 +8,7 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-tooltip";
-import "../../../../src/components/ha-spinner";
+import "../../../../src/components/ha-circular-progress";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-icon-button";
 import type {
@@ -118,27 +118,28 @@ class HassioRepositoriesDialog extends LitElement {
                        <div>${repo.maintainer}</div>
                        <div>${repo.url}</div>
                      </div>
-                      <ha-tooltip
-                        class="delete"
-                        slot="end"
-                        .content=${this._dialogParams!.supervisor.localize(
-                          usedRepositories.includes(repo.slug)
-                            ? "dialog.repositories.used"
-                            : "dialog.repositories.remove"
-                        )}
-                      >
-                        <div>
-                          <ha-icon-button
-                            .disabled=${usedRepositories.includes(repo.slug)}
-                            .slug=${repo.slug}
-                            .path=${usedRepositories.includes(repo.slug)
-                              ? mdiDeleteOff
-                              : mdiDelete}
-                            @click=${this._removeRepository}
-                          >
-                          </ha-icon-button>
-                        </div>
-                      </ha-tooltip>
+                      <div class="delete" slot="end">
+                        <ha-icon-button
+                          .disabled=${usedRepositories.includes(repo.slug)}
+                          .slug=${repo.slug}
+                          .path=${usedRepositories.includes(repo.slug)
+                            ? mdiDeleteOff
+                            : mdiDelete}
+                          @click=${this._removeRepository}
+                        >
+                        </ha-icon-button>
+                        <simple-tooltip
+                          animation-delay="0"
+                          position="bottom"
+                          offset="1"
+                        >
+                          ${this._dialogParams!.supervisor.localize(
+                            usedRepositories.includes(repo.slug)
+                              ? "dialog.repositories.used"
+                              : "dialog.repositories.remove"
+                          )}
+                        </simple-tooltip>
+                      </div>
                    </ha-md-list-item>
                  `
                )
@@ -161,7 +162,10 @@ class HassioRepositoriesDialog extends LitElement {
            ></ha-textfield>
            <mwc-button @click=${this._addRepository}>
              ${this._processing
-                ? html`<ha-spinner size="small"></ha-spinner>`
+                ? html`<ha-circular-progress
+                    indeterminate
+                    size="small"
+                  ></ha-circular-progress>`
                : this._dialogParams!.supervisor.localize(
                    "dialog.repositories.add"
                  )}
@@ -199,7 +203,7 @@ class HassioRepositoriesDialog extends LitElement {
          margin-inline-start: 8px;
          margin-inline-end: initial;
        }
-        ha-spinner {
+        ha-circular-progress {
          display: block;
          margin: 32px;
          text-align: center;
@@ -1,3 +1,5 @@
+// Compat needs to be first import
+import "../../src/resources/compatibility";
 import "./hassio-main";

 import("../../src/resources/ha-style");
@@ -15,7 +15,6 @@ import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-alert";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
-import "../../../src/components/ha-spinner";
 import "../../../src/components/ha-checkbox";
 import "../../../src/components/ha-faded";
 import "../../../src/components/ha-icon-button";
@@ -193,10 +192,12 @@ class UpdateAvailableCard extends LitElement {
                      `
                    : nothing}
                `
-              : html`<ha-spinner
+              : html`<ha-circular-progress
                    aria-label="Updating"
                    size="large"
-                  ></ha-spinner>
+                    indeterminate
+                  >
+                  </ha-circular-progress>
                  <p class="progress-text">
                    ${this.supervisor.localize("update_available.updating", {
                      name: this._name,
@@ -464,7 +465,7 @@ class UpdateAvailableCard extends LitElement {
          justify-content: space-between;
        }

-        ha-spinner {
+        ha-circular-progress {
          display: block;
          margin: 32px;
          text-align: center;
@@ -22,8 +22,6 @@ import {
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import { fileDownload } from "../../../src/util/file_download";
 import { getSupervisorLogs, getSupervisorLogsFollow } from "../data/supervisor";
-import { waitForSeconds } from "../../../src/common/util/wait";
-import { ASSUME_CORE_START_SECONDS } from "../ha-landing-page";

 const ERROR_CHECK = /^[\d\s-:]+(ERROR|CRITICAL)(.*)/gm;
 declare global {
@@ -218,7 +216,7 @@ class LandingPageLogs extends LitElement {
      // eslint-disable-next-line no-console
      console.error(err);

-      // fallback to observer logs if there is a problem with supervisor
+      // fallback to observerlogs if there is a problem with supervisor
      this._loadObserverLogs();
    }
  }
@@ -253,9 +251,6 @@ class LandingPageLogs extends LitElement {

      this._scheduleObserverLogs();
    } catch (err) {
-      // wait because there is a moment where landingpage is down and core is not up yet
-      await waitForSeconds(ASSUME_CORE_START_SECONDS);
-
      // eslint-disable-next-line no-console
      console.error(err);
      this._error = true;
@@ -1,7 +1,13 @@
 import "@material/mwc-linear-progress/mwc-linear-progress";
-import memoizeOne from "memoize-one";
-import { type CSSResultGroup, LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import {
+  type CSSResultGroup,
+  LitElement,
+  type PropertyValues,
+  css,
+  html,
+  nothing,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import type {
  LandingPageKeys,
  LocalizeFunc,
@@ -10,24 +16,33 @@ import "../../../src/components/ha-button";
 import "../../../src/components/ha-alert";
 import {
  ALTERNATIVE_DNS_SERVERS,
+  getSupervisorNetworkInfo,
  setSupervisorNetworkDns,
-  type NetworkInfo,
 } from "../data/supervisor";
-import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
-import type { NetworkInterface } from "../../../src/data/hassio/network";
 import { fireEvent } from "../../../src/common/dom/fire_event";
+import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
+
+const SCHEDULE_FETCH_NETWORK_INFO_SECONDS = 5;

@customElement("landing-page-network")
 class LandingPageNetwork extends LitElement {
  @property({ attribute: false })
  public localize!: LocalizeFunc<LandingPageKeys>;

-  @property({ attribute: false }) public networkInfo?: NetworkInfo;
+  @state() private _networkIssue = false;

-  @property({ type: Boolean }) public error = false;
+  @state() private _getNetworkInfoError = false;
+
+  @state() private _dnsPrimaryInterfaceNameservers?: string;
+
+  @state() private _dnsPrimaryInterface?: string;

  protected render() {
-    if (this.error) {
+    if (!this._networkIssue && !this._getNetworkInfoError) {
+      return nothing;
+    }
+
+    if (this._getNetworkInfoError) {
      return html`
        <ha-alert alert-type="error">
          <p>${this.localize("network_issue.error_get_network_info")}</p>
@@ -35,16 +50,6 @@ class LandingPageNetwork extends LitElement {
      `;
    }

-    let dnsPrimaryInterfaceNameservers: string | undefined;
-
-    const primaryInterface = this._getPrimaryInterface(
-      this.networkInfo?.interfaces
-    );
-    if (primaryInterface) {
-      dnsPrimaryInterfaceNameservers =
-        this._getPrimaryNameservers(primaryInterface);
-    }
-
    return html`
      <ha-alert
        alert-type="warning"
@@ -52,11 +57,11 @@ class LandingPageNetwork extends LitElement {
      >
        <p>
          ${this.localize("network_issue.description", {
-            dns: dnsPrimaryInterfaceNameservers || "?",
+            dns: this._dnsPrimaryInterfaceNameservers || "?",
          })}
        </p>
        <p>${this.localize("network_issue.resolve_different")}</p>
-        ${!dnsPrimaryInterfaceNameservers
+        ${!this._dnsPrimaryInterfaceNameservers
          ? html`
              <p>
                <b>${this.localize("network_issue.no_primary_interface")} </b>
@@ -68,7 +73,7 @@ class LandingPageNetwork extends LitElement {
            ({ translationKey }, key) =>
              html`<ha-button
                .index=${key}
-                .disabled=${!dnsPrimaryInterfaceNameservers}
+                .disabled=${!this._dnsPrimaryInterfaceNameservers}
                @click=${this._setDns}
                >${this.localize(translationKey)}</ha-button
              >`
@@ -78,40 +83,76 @@ class LandingPageNetwork extends LitElement {
    `;
  }

-  private _getPrimaryInterface = memoizeOne((interfaces?: NetworkInterface[]) =>
-    interfaces?.find((intf) => intf.primary && intf.enabled)
-  );
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+    this._fetchSupervisorInfo();
+  }

-  private _getPrimaryNameservers = memoizeOne(
-    (primaryInterface: NetworkInterface) =>
-      [
-        ...(primaryInterface.ipv4?.nameservers || []),
-        ...(primaryInterface.ipv6?.nameservers || []),
-      ].join(", ")
-  );
-
-  private async _setDns(ev) {
-    const primaryInterface = this._getPrimaryInterface(
-      this.networkInfo?.interfaces
+  private _scheduleFetchSupervisorInfo() {
+    setTimeout(
+      () => this._fetchSupervisorInfo(),
+      SCHEDULE_FETCH_NETWORK_INFO_SECONDS * 1000
    );
+  }

-    const index = ev.target?.index;
+  private async _fetchSupervisorInfo() {
+    let data;
    try {
-      const dnsPrimaryInterface = primaryInterface?.interface;
-      if (!dnsPrimaryInterface) {
-        throw new Error("No primary interface found");
+      const response = await getSupervisorNetworkInfo();
+      if (!response.ok) {
+        throw new Error("Failed to fetch network info");
      }

+      ({ data } = await response.json());
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+      this._getNetworkInfoError = true;
+      this._dnsPrimaryInterfaceNameservers = undefined;
+      this._dnsPrimaryInterface = undefined;
+      return;
+    }
+
+    this._getNetworkInfoError = false;
+
+    const primaryInterface = data.interfaces.find(
+      (intf) => intf.primary && intf.enabled
+    );
+    if (primaryInterface) {
+      this._dnsPrimaryInterfaceNameservers = [
+        ...(primaryInterface.ipv4?.nameservers || []),
+        ...(primaryInterface.ipv6?.nameservers || []),
+      ].join(", ");
+
+      this._dnsPrimaryInterface = primaryInterface.interface;
+    } else {
+      this._dnsPrimaryInterfaceNameservers = undefined;
+      this._dnsPrimaryInterface = undefined;
+    }
+
+    if (!data.host_internet) {
+      this._networkIssue = true;
+    } else {
+      this._networkIssue = false;
+    }
+
+    fireEvent(this, "value-changed", {
+      value: this._networkIssue,
+    });
+    this._scheduleFetchSupervisorInfo();
+  }
+
+  private async _setDns(ev) {
+    const index = ev.target?.index;
+    try {
      const response = await setSupervisorNetworkDns(
        index,
-        dnsPrimaryInterface
+        this._dnsPrimaryInterface!
      );
      if (!response.ok) {
        throw new Error("Failed to set DNS");
      }
-
-      // notify landing page to trigger a network info reload
-      fireEvent(this, "dns-set");
+      this._networkIssue = false;
    } catch (err: any) {
      // eslint-disable-next-line no-console
      console.error(err);
@@ -142,7 +183,4 @@ declare global {
  interface HTMLElementTagNameMap {
    "landing-page-network": LandingPageNetwork;
  }
-  interface HASSDomEvents {
-    "dns-set": undefined;
-  }
 }
@@ -1,17 +1,4 @@
 import type { LandingPageKeys } from "../../../src/common/translations/localize";
-import type { HassioResponse } from "../../../src/data/hassio/common";
-import type {
-  DockerNetwork,
-  NetworkInterface,
-} from "../../../src/data/hassio/network";
-import { handleFetchPromise } from "../../../src/util/hass-call-api";
-
-export interface NetworkInfo {
-  interfaces: NetworkInterface[];
-  docker: DockerNetwork;
-  host_internet: boolean;
-  supervisor_internet: boolean;
-}

 export const ALTERNATIVE_DNS_SERVERS: {
  ipv4: string[];
@@ -31,7 +18,7 @@ export const ALTERNATIVE_DNS_SERVERS: {
 ];

 export async function getSupervisorLogs(lines = 100) {
-  return fetch(`/supervisor-api/supervisor/logs?lines=${lines}`, {
+  return fetch(`/supervisor/supervisor/logs?lines=${lines}`, {
    headers: {
      Accept: "text/plain",
    },
@@ -39,29 +26,22 @@ export async function getSupervisorLogs(lines = 100) {
 }

 export async function getSupervisorLogsFollow(lines = 500) {
-  return fetch(`/supervisor-api/supervisor/logs/follow?lines=${lines}`, {
+  return fetch(`/supervisor/supervisor/logs/follow?lines=${lines}`, {
    headers: {
      Accept: "text/plain",
    },
  });
 }

-export async function pingSupervisor() {
-  return fetch("/supervisor-api/supervisor/ping");
-}
-
-export async function getSupervisorNetworkInfo(): Promise<NetworkInfo> {
-  const responseData = await handleFetchPromise<HassioResponse<NetworkInfo>>(
-    fetch("/supervisor-api/network/info")
-  );
-  return responseData?.data;
+export async function getSupervisorNetworkInfo() {
+  return fetch("/supervisor/network/info");
 }

 export const setSupervisorNetworkDns = async (
  dnsServerIndex: number,
  primaryInterface: string
 ) =>
-  fetch(`/supervisor-api/network/interface/${primaryInterface}/update`, {
+  fetch(`/supervisor/network/interface/${primaryInterface}/update`, {
    method: "POST",
    body: JSON.stringify({
      ipv4: {
@@ -10,56 +10,36 @@ import { extractSearchParam } from "../../src/common/url/search-params";
 import { onBoardingStyles } from "../../src/onboarding/styles";
 import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
 import { LandingPageBaseElement } from "./landing-page-base-element";
-import {
-  getSupervisorNetworkInfo,
-  pingSupervisor,
-  type NetworkInfo,
-} from "./data/supervisor";

-export const ASSUME_CORE_START_SECONDS = 60;
-const SCHEDULE_CORE_CHECK_SECONDS = 1;
-const SCHEDULE_FETCH_NETWORK_INFO_SECONDS = 5;
+const SCHEDULE_CORE_CHECK_SECONDS = 5;

@customElement("ha-landing-page")
 class HaLandingPage extends LandingPageBaseElement {
  @property({ attribute: false }) public translationFragment = "landing-page";

+  @state() private _networkIssue = false;
+
  @state() private _supervisorError = false;

-  @state() private _networkInfo?: NetworkInfo;
-
-  @state() private _coreStatusChecked = false;
-
-  @state() private _networkInfoError = false;
-
-  @state() private _coreCheckActive = false;
-
  private _mobileApp =
    extractSearchParam("redirect_uri") === "homeassistant://auth-callback";

  render() {
-    const networkIssue = this._networkInfo && !this._networkInfo.host_internet;
-
    return html`
      <ha-card>
        <div class="card-content">
          <h1>${this.localize("header")}</h1>
-          ${!networkIssue && !this._supervisorError
+          ${!this._networkIssue && !this._supervisorError
            ? html`
                <p>${this.localize("subheader")}</p>
                <mwc-linear-progress indeterminate></mwc-linear-progress>
              `
            : nothing}
-          ${networkIssue || this._networkInfoError
-            ? html`
-                <landing-page-network
-                  .localize=${this.localize}
-                  .networkInfo=${this._networkInfo}
-                  .error=${this._networkInfoError}
-                  @dns-set=${this._fetchSupervisorInfo}
-                ></landing-page-network>
-              `
-            : nothing}
+          <landing-page-network
+            @value-changed=${this._networkInfoChanged}
+            .localize=${this.localize}
+          ></landing-page-network>
+
          ${this._supervisorError
            ? html`
                <ha-alert
@@ -108,66 +88,24 @@ class HaLandingPage extends LandingPageBaseElement {
    }
    import("../../src/components/ha-language-picker");

-    this._fetchSupervisorInfo(true);
+    this._scheduleCoreCheck();
  }

-  private _scheduleFetchSupervisorInfo() {
+  private _scheduleCoreCheck() {
    setTimeout(
-      () => this._fetchSupervisorInfo(true),
-      // on assumed core start check every second, otherwise every 5 seconds
-      (this._coreCheckActive
-        ? SCHEDULE_CORE_CHECK_SECONDS
-        : SCHEDULE_FETCH_NETWORK_INFO_SECONDS) * 1000
+      () => this._checkCoreAvailability(),
+      SCHEDULE_CORE_CHECK_SECONDS * 1000
    );
  }

-  private _scheduleTurnOffCoreCheck() {
-    setTimeout(() => {
-      this._coreCheckActive = false;
-    }, ASSUME_CORE_START_SECONDS * 1000);
-  }
-
-  private async _fetchSupervisorInfo(schedule = false) {
-    try {
-      const response = await pingSupervisor();
-      if (!response.ok) {
-        throw new Error("ping-failed");
-      }
-
-      this._networkInfo = await getSupervisorNetworkInfo();
-      this._networkInfoError = false;
-      this._coreStatusChecked = false;
-    } catch (err: any) {
-      if (!this._coreStatusChecked) {
-        // wait before show errors, because we assume that core is starting
-        this._coreCheckActive = true;
-        this._scheduleTurnOffCoreCheck();
-      }
-      await this._checkCoreAvailability();
-
-      // assume supervisor update if ping fails -> don't show an error
-      if (!this._coreCheckActive && err.message !== "ping-failed") {
-        // eslint-disable-next-line no-console
-        console.error(err);
-        this._networkInfoError = true;
-      }
-    }
-
-    if (schedule) {
-      this._scheduleFetchSupervisorInfo();
-    }
-  }
-
  private async _checkCoreAvailability() {
    try {
      const response = await fetch("/manifest.json");
      if (response.ok) {
        location.reload();
-      } else {
-        throw new Error("Failed to fetch manifest");
      }
-    } catch (_err) {
-      this._coreStatusChecked = true;
+    } finally {
+      this._scheduleCoreCheck();
    }
  }

@@ -175,6 +113,10 @@ class HaLandingPage extends LandingPageBaseElement {
    this._supervisorError = true;
  }

+  private _networkInfoChanged(ev: CustomEvent) {
+    this._networkIssue = ev.detail.value;
+  }
+
  private _languageChanged(ev: CustomEvent) {
    const language = ev.detail.value;
    if (language !== this.language && language) {
@@ -26,25 +26,25 @@
  "license": "Apache-2.0",
  "type": "module",
  "dependencies": {
-    "@babel/runtime": "7.26.10",
+    "@babel/runtime": "7.26.9",
    "@braintree/sanitize-url": "7.1.1",
    "@codemirror/autocomplete": "6.18.6",
    "@codemirror/commands": "6.8.0",
-    "@codemirror/language": "6.11.0",
-    "@codemirror/legacy-modes": "6.5.0",
-    "@codemirror/search": "6.5.10",
+    "@codemirror/language": "6.10.8",
+    "@codemirror/legacy-modes": "6.4.3",
+    "@codemirror/search": "6.5.9",
    "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.36.4",
+    "@codemirror/view": "6.36.2",
    "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.17.4",
-    "@formatjs/intl-displaynames": "6.8.11",
-    "@formatjs/intl-durationformat": "0.7.4",
-    "@formatjs/intl-getcanonicallocales": "2.5.5",
-    "@formatjs/intl-listformat": "7.7.11",
-    "@formatjs/intl-locale": "4.2.11",
-    "@formatjs/intl-numberformat": "8.15.4",
-    "@formatjs/intl-pluralrules": "5.4.4",
-    "@formatjs/intl-relativetimeformat": "11.4.11",
+    "@formatjs/intl-datetimeformat": "6.17.3",
+    "@formatjs/intl-displaynames": "6.8.10",
+    "@formatjs/intl-durationformat": "0.7.3",
+    "@formatjs/intl-getcanonicallocales": "2.5.4",
+    "@formatjs/intl-listformat": "7.7.10",
+    "@formatjs/intl-locale": "4.2.10",
+    "@formatjs/intl-numberformat": "8.15.3",
+    "@formatjs/intl-pluralrules": "5.4.3",
+    "@formatjs/intl-relativetimeformat": "11.4.10",
    "@fullcalendar/core": "6.1.15",
    "@fullcalendar/daygrid": "6.1.15",
    "@fullcalendar/interaction": "6.1.15",
@@ -56,6 +56,7 @@
    "@lit-labs/motion": "1.0.8",
    "@lit-labs/observers": "2.0.5",
    "@lit-labs/virtualizer": "2.1.0",
+    "@lrnwebcomponents/simple-tooltip": "8.0.2",
    "@material/chips": "=14.0.0-canary.53b3cad2f.0",
    "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
    "@material/mwc-base": "0.27.0",
@@ -89,21 +90,18 @@
    "@polymer/paper-tabs": "3.1.0",
    "@polymer/polymer": "3.5.2",
    "@replit/codemirror-indentation-markers": "6.5.3",
-    "@shoelace-style/shoelace": "2.20.1",
    "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "3.8.1",
-    "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.7.1",
-    "@vaadin/vaadin-themable-mixin": "24.7.1",
+    "@vaadin/combo-box": "24.6.5",
+    "@vaadin/vaadin-themable-mixin": "24.6.5",
    "@vibrant/color": "4.0.0",
    "@vue/web-component-wrapper": "1.3.0",
-    "@webcomponents/scoped-custom-element-registry": "0.0.10",
+    "@webcomponents/scoped-custom-element-registry": "0.0.9",
    "@webcomponents/webcomponentsjs": "2.8.0",
    "app-datepicker": "5.1.1",
-    "barcode-detector": "3.0.1",
+    "barcode-detector": "3.0.0",
    "color-name": "2.0.0",
    "comlink": "4.4.2",
-    "core-js": "3.41.0",
+    "core-js": "3.40.0",
    "cropperjs": "1.6.2",
    "date-fns": "4.1.0",
    "date-fns-tz": "3.2.0",
@@ -111,14 +109,14 @@
    "deep-freeze": "0.0.1",
    "dialog-polyfill": "0.5.6",
    "echarts": "5.6.0",
-    "element-internals-polyfill": "3.0.1",
+    "element-internals-polyfill": "1.3.13",
    "fuse.js": "7.1.0",
    "google-timezones-json": "1.2.0",
    "gulp-zopfli-green": "6.0.2",
    "hls.js": "patch:hls.js@npm%3A1.5.7#~/.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch",
    "home-assistant-js-websocket": "9.4.0",
    "idb-keyval": "6.2.1",
-    "intl-messageformat": "10.7.16",
+    "intl-messageformat": "10.7.15",
    "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",
@@ -139,7 +137,9 @@
    "stacktrace-js": "2.0.2",
    "superstruct": "2.0.2",
    "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.3",
+    "tsparticles-engine": "2.12.0",
+    "tsparticles-preset-links": "2.12.0",
+    "ua-parser-js": "2.0.2",
    "vis-data": "7.1.9",
    "vis-network": "9.1.9",
    "vue": "2.7.16",
@@ -154,20 +154,20 @@
    "xss": "1.0.15"
  },
  "devDependencies": {
-    "@babel/core": "7.26.10",
-    "@babel/helper-define-polyfill-provider": "0.6.4",
+    "@babel/core": "7.26.9",
+    "@babel/helper-define-polyfill-provider": "0.6.3",
    "@babel/plugin-proposal-decorators": "7.25.9",
-    "@babel/plugin-transform-runtime": "7.26.10",
+    "@babel/plugin-transform-runtime": "7.26.9",
    "@babel/preset-env": "7.26.9",
    "@babel/preset-typescript": "7.26.0",
-    "@bundle-stats/plugin-webpack-filter": "4.19.1",
-    "@lokalise/node-api": "14.2.0",
-    "@octokit/auth-oauth-device": "7.1.4",
-    "@octokit/plugin-retry": "7.2.0",
+    "@bundle-stats/plugin-webpack-filter": "4.18.2",
+    "@lokalise/node-api": "13.1.0",
+    "@octokit/auth-oauth-device": "7.1.3",
+    "@octokit/plugin-retry": "7.1.4",
    "@octokit/rest": "21.1.1",
-    "@rsdoctor/rspack-plugin": "1.0.0",
-    "@rspack/cli": "1.2.8",
-    "@rspack/core": "1.2.8",
+    "@rsdoctor/rspack-plugin": "0.4.13",
+    "@rspack/cli": "1.2.3",
+    "@rspack/core": "1.2.3",
    "@types/babel__plugin-transform-runtime": "7.9.5",
    "@types/chromecast-caf-receiver": "6.0.21",
    "@types/chromecast-caf-sender": "1.0.11",
@@ -175,7 +175,7 @@
    "@types/glob": "8.1.0",
    "@types/html-minifier-terser": "7.0.2",
    "@types/js-yaml": "4.0.9",
-    "@types/leaflet": "1.9.17",
+    "@types/leaflet": "1.9.16",
    "@types/leaflet-draw": "1.0.11",
    "@types/leaflet.markercluster": "1.5.5",
    "@types/lodash.merge": "4.6.9",
@@ -186,20 +186,20 @@
    "@types/tar": "6.1.13",
    "@types/ua-parser-js": "0.7.39",
    "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "3.0.9",
-    "babel-loader": "10.0.0",
+    "@vitest/coverage-v8": "3.0.5",
+    "babel-loader": "9.2.1",
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.3",
    "del": "8.0.0",
-    "eslint": "9.23.0",
+    "eslint": "9.20.1",
    "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-prettier": "10.1.1",
+    "eslint-config-prettier": "10.0.1",
    "eslint-import-resolver-webpack": "0.13.10",
    "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-lit": "2.0.0",
+    "eslint-plugin-lit": "1.15.0",
    "eslint-plugin-lit-a11y": "4.1.4",
    "eslint-plugin-unused-imports": "4.1.4",
-    "eslint-plugin-wc": "3.0.0",
+    "eslint-plugin-wc": "2.2.0",
    "fancy-log": "2.0.0",
    "fs-extra": "11.3.0",
    "glob": "11.0.1",
@@ -211,23 +211,22 @@
    "husky": "9.1.7",
    "jsdom": "26.0.0",
    "jszip": "3.10.1",
-    "lint-staged": "15.5.0",
+    "lint-staged": "15.4.3",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
    "lodash.template": "4.5.0",
    "map-stream": "0.0.7",
    "pinst": "3.0.0",
-    "prettier": "3.5.3",
+    "prettier": "3.5.1",
    "rspack-manifest-plugin": "5.0.3",
    "serve": "14.2.4",
-    "sinon": "19.0.4",
+    "sinon": "19.0.2",
    "tar": "7.4.3",
-    "terser-webpack-plugin": "5.3.14",
+    "terser-webpack-plugin": "5.3.11",
    "ts-lit-plugin": "2.0.2",
-    "typescript": "5.8.2",
-    "typescript-eslint": "8.27.0",
-    "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.0.9",
+    "typescript": "5.7.3",
+    "typescript-eslint": "8.24.1",
+    "vitest": "3.0.5",
    "webpack-stats-plugin": "1.1.3",
    "webpackbar": "7.0.0",
    "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
@@ -241,8 +240,8 @@
    "clean-css": "5.3.3",
    "@lit/reactive-element": "1.6.3",
    "@fullcalendar/daygrid": "6.1.15",
-    "globals": "16.0.0",
+    "globals": "15.15.0",
    "tslib": "2.8.1"
  },
-  "packageManager": "yarn@4.7.0"
+  "packageManager": "yarn@4.6.0"
 }
@@ -1,10 +0,0 @@
-<svg width="94" height="64" viewBox="0 0 94 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="64" rx="8" fill="white"/>
-<rect x="0.5" y="0.5" width="93" height="63" rx="7.5" stroke="black" stroke-opacity="0.12"/>
-<path d="M8 14C8 10.6863 10.6863 8 14 8H33C36.3137 8 39 10.6863 39 14C39 17.3137 36.3137 20 33 20H14C10.6863 20 8 17.3137 8 14Z" fill="black" fill-opacity="0.32"/>
-<path d="M8 27C8 25.3431 9.34315 24 11 24H31C32.6569 24 34 25.3431 34 27V29C34 30.6569 32.6569 32 31 32H11C9.34315 32 8 30.6569 8 29V27Z" fill="black" fill-opacity="0.12"/>
-<path d="M38 27C38 25.3431 39.3431 24 41 24H83C84.6569 24 86 25.3431 86 27V29C86 30.6569 84.6569 32 83 32H41C39.3431 32 38 30.6569 38 29V27Z" fill="black" fill-opacity="0.12"/>
-<path d="M8 39C8 37.3431 9.34315 36 11 36H53C54.6569 36 56 37.3431 56 39V41C56 42.6569 54.6569 44 53 44H11C9.34315 44 8 42.6569 8 41V39Z" fill="black" fill-opacity="0.12"/>
-<path d="M60 39C60 37.3431 61.3431 36 63 36H83C84.6569 36 86 37.3431 86 39V41C86 42.6569 84.6569 44 83 44H63C61.3431 44 60 42.6569 60 41V39Z" fill="black" fill-opacity="0.12"/>
-<path d="M8 51C8 49.3431 9.34315 48 11 48H31C32.6569 48 34 49.3431 34 51V53C34 54.6569 32.6569 56 31 56H11C9.34315 56 8 54.6569 8 53V51Z" fill="black" fill-opacity="0.12"/>
-</svg>
@@ -1,10 +0,0 @@
-<svg width="94" height="64" viewBox="0 0 94 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 8C0 3.58172 3.58172 0 8 0H86C90.4183 0 94 3.58172 94 8V56C94 60.4183 90.4183 64 86 64H8C3.58172 64 0 60.4183 0 56V8Z" fill="#1C1C1C"/>
-<path d="M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5H86C90.1421 0.5 93.5 3.85786 93.5 8V56C93.5 60.1421 90.1421 63.5 86 63.5H8C3.85786 63.5 0.5 60.1421 0.5 56V8Z" stroke="white" stroke-opacity="0.24"/>
-<path d="M8 14C8 10.6863 10.6863 8 14 8H33C36.3137 8 39 10.6863 39 14C39 17.3137 36.3137 20 33 20H14C10.6863 20 8 17.3137 8 14Z" fill="white" fill-opacity="0.48"/>
-<path d="M8 27C8 25.3431 9.34315 24 11 24H31C32.6569 24 34 25.3431 34 27V29C34 30.6569 32.6569 32 31 32H11C9.34315 32 8 30.6569 8 29V27Z" fill="white" fill-opacity="0.24"/>
-<path d="M38 27C38 25.3431 39.3431 24 41 24H83C84.6569 24 86 25.3431 86 27V29C86 30.6569 84.6569 32 83 32H41C39.3431 32 38 30.6569 38 29V27Z" fill="white" fill-opacity="0.24"/>
-<path d="M8 39C8 37.3431 9.34315 36 11 36H53C54.6569 36 56 37.3431 56 39V41C56 42.6569 54.6569 44 53 44H11C9.34315 44 8 42.6569 8 41V39Z" fill="white" fill-opacity="0.24"/>
-<path d="M60 39C60 37.3431 61.3431 36 63 36H83C84.6569 36 86 37.3431 86 39V41C86 42.6569 84.6569 44 83 44H63C61.3431 44 60 42.6569 60 41V39Z" fill="white" fill-opacity="0.24"/>
-<path d="M8 51C8 49.3431 9.34315 48 11 48H31C32.6569 48 34 49.3431 34 51V53C34 54.6569 32.6569 56 31 56H11C9.34315 56 8 54.6569 8 53V51Z" fill="white" fill-opacity="0.24"/>
-</svg>
@@ -1,7 +0,0 @@
-<svg width="94" height="48" viewBox="0 0 94 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 11C0 9.34315 1.34315 8 3 8H23C24.6569 8 26 9.34315 26 11V13C26 14.6569 24.6569 16 23 16H3C1.34315 16 0 14.6569 0 13V11Z" fill="black" fill-opacity="0.12"/>
-<path d="M30 11C30 9.34315 31.3431 8 33 8H91C92.6569 8 94 9.34315 94 11V13C94 14.6569 92.6569 16 91 16H33C31.3431 16 30 14.6569 30 13V11Z" fill="black" fill-opacity="0.12"/>
-<path d="M0 23C0 21.3431 1.34315 20 3 20H61C62.6569 20 64 21.3431 64 23V25C64 26.6569 62.6569 28 61 28H3C1.34315 28 0 26.6569 0 25V23Z" fill="black" fill-opacity="0.12"/>
-<path d="M68 23C68 21.3431 69.3431 20 71 20H91C92.6569 20 94 21.3431 94 23V25C94 26.6569 92.6569 28 91 28H71C69.3431 28 68 26.6569 68 25V23Z" fill="black" fill-opacity="0.12"/>
-<path d="M0 35C0 33.3431 1.34315 32 3 32H23C24.6569 32 26 33.3431 26 35V37C26 38.6569 24.6569 40 23 40H3C1.34315 40 0 38.6569 0 37V35Z" fill="black" fill-opacity="0.12"/>
-</svg>
@@ -1,7 +0,0 @@
-<svg width="94" height="48" viewBox="0 0 94 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 11C0 9.34315 1.34315 8 3 8H23C24.6569 8 26 9.34315 26 11V13C26 14.6569 24.6569 16 23 16H3C1.34315 16 0 14.6569 0 13V11Z" fill="white" fill-opacity="0.24"/>
-<path d="M30 11C30 9.34315 31.3431 8 33 8H91C92.6569 8 94 9.34315 94 11V13C94 14.6569 92.6569 16 91 16H33C31.3431 16 30 14.6569 30 13V11Z" fill="white" fill-opacity="0.24"/>
-<path d="M0 23C0 21.3431 1.34315 20 3 20H61C62.6569 20 64 21.3431 64 23V25C64 26.6569 62.6569 28 61 28H3C1.34315 28 0 26.6569 0 25V23Z" fill="white" fill-opacity="0.24"/>
-<path d="M68 23C68 21.3431 69.3431 20 71 20H91C92.6569 20 94 21.3431 94 23V25C94 26.6569 92.6569 28 91 28H71C69.3431 28 68 26.6569 68 25V23Z" fill="white" fill-opacity="0.24"/>
-<path d="M0 35C0 33.3431 1.34315 32 3 32H23C24.6569 32 26 33.3431 26 35V37C26 38.6569 24.6569 40 23 40H3C1.34315 40 0 38.6569 0 37V35Z" fill="white" fill-opacity="0.24"/>
-</svg>
@@ -1,7 +0,0 @@
-<svg width="94" height="40" viewBox="0 0 94 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="40" rx="8" fill="white"/>
-<rect x="0.5" y="0.5" width="93" height="39" rx="7.5" stroke="black" stroke-opacity="0.12"/>
-<circle cx="20" cy="20" r="12" fill="black" fill-opacity="0.12"/>
-<path d="M40 14C40 10.6863 42.6863 8 46 8H65C68.3137 8 71 10.6863 71 14C71 17.3137 68.3137 20 65 20H46C42.6863 20 40 17.3137 40 14Z" fill="black" fill-opacity="0.32"/>
-<path d="M40 28C40 25.7909 41.7909 24 44 24H77C79.2091 24 81 25.7909 81 28C81 30.2091 79.2091 32 77 32H44C41.7909 32 40 30.2091 40 28Z" fill="black" fill-opacity="0.32"/>
-</svg>
@@ -1,7 +0,0 @@
-<svg width="94" height="40" viewBox="0 0 94 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="40" rx="8" fill="#1C1C1C"/>
-<rect x="0.5" y="0.5" width="93" height="39" rx="7.5" stroke="white" stroke-opacity="0.24"/>
-<circle cx="20" cy="20" r="12" fill="white" fill-opacity="0.24"/>
-<path d="M40 14C40 10.6863 42.6863 8 46 8H65C68.3137 8 71 10.6863 71 14C71 17.3137 68.3137 20 65 20H46C42.6863 20 40 17.3137 40 14Z" fill="white" fill-opacity="0.48"/>
-<path d="M40 28C40 25.7909 41.7909 24 44 24H77C79.2091 24 81 25.7909 81 28C81 30.2091 79.2091 32 77 32H44C41.7909 32 40 30.2091 40 28Z" fill="white" fill-opacity="0.48"/>
-</svg>
@@ -1,7 +0,0 @@
-<svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="72" rx="8" fill="white"/>
-<rect x="0.5" y="0.5" width="93" height="71" rx="7.5" stroke="black" stroke-opacity="0.12"/>
-<circle cx="47" cy="20" r="12" fill="black" fill-opacity="0.12"/>
-<path d="M31.5 46C31.5 42.6863 34.1863 40 37.5 40H56.5C59.8137 40 62.5 42.6863 62.5 46C62.5 49.3137 59.8137 52 56.5 52H37.5C34.1863 52 31.5 49.3137 31.5 46Z" fill="black" fill-opacity="0.32"/>
-<path d="M26.5 60C26.5 57.7909 28.2909 56 30.5 56H63.5C65.7091 56 67.5 57.7909 67.5 60C67.5 62.2091 65.7091 64 63.5 64H30.5C28.2909 64 26.5 62.2091 26.5 60Z" fill="black" fill-opacity="0.32"/>
-</svg>
@@ -1,7 +0,0 @@
-<svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="72" rx="8" fill="#1C1C1C"/>
-<rect x="0.5" y="0.5" width="93" height="71" rx="7.5" stroke="white" stroke-opacity="0.24"/>
-<circle cx="47" cy="20" r="12" fill="white" fill-opacity="0.24"/>
-<path d="M31.5 46C31.5 42.6863 34.1863 40 37.5 40H56.5C59.8137 40 62.5 42.6863 62.5 46C62.5 49.3137 59.8137 52 56.5 52H37.5C34.1863 52 31.5 49.3137 31.5 46Z" fill="white" fill-opacity="0.48"/>
-<path d="M26.5 60C26.5 57.7909 28.2909 56 30.5 56H63.5C65.7091 56 67.5 57.7909 67.5 60C67.5 62.2091 65.7091 64 63.5 64H30.5C28.2909 64 26.5 62.2091 26.5 60Z" fill="white" fill-opacity="0.48"/>
-</svg>
@@ -1,6 +0,0 @@
-<svg width="94" height="48" viewBox="0 0 94 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="48" rx="8" fill="white"/>
-<rect x="0.5" y="0.5" width="93" height="47" rx="7.5" stroke="black" stroke-opacity="0.12"/>
-<rect x="8" y="8" width="78" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<rect x="8" y="28" width="78" height="12" rx="3" fill="black" fill-opacity="0.32"/>
-</svg>
@@ -1,6 +0,0 @@
-<svg width="94" height="48" viewBox="0 0 94 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="48" rx="8" fill="#1C1C1C"/>
-<rect x="0.5" y="0.5" width="93" height="47" rx="7.5" stroke="white" stroke-opacity="0.24"/>
-<rect x="8" y="8" width="78" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<rect x="8" y="28" width="78" height="12" rx="3" fill="white" fill-opacity="0.48"/>
-</svg>
@@ -1,6 +0,0 @@
-<svg width="94" height="28" viewBox="0 0 94 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="28" rx="8" fill="white"/>
-<rect x="0.5" y="0.5" width="93" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
-<rect x="8" y="8" width="35" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<rect x="51" y="8" width="35" height="12" rx="3" fill="black" fill-opacity="0.32"/>
-</svg>
@@ -1,6 +0,0 @@
-<svg width="94" height="28" viewBox="0 0 94 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="28" rx="8" fill="#1C1C1C"/>
-<rect x="0.5" y="0.5" width="93" height="27" rx="7.5" stroke="white" stroke-opacity="0.24"/>
-<rect x="8" y="8" width="35" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<rect x="51" y="8" width="35" height="12" rx="3" fill="white" fill-opacity="0.48"/>
-</svg>
@@ -1,11 +0,0 @@
-<svg width="94" height="56" viewBox="0 0 94 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="56" rx="8" fill="white"/>
-<rect x="0.5" y="0.5" width="93" height="55" rx="7.5" stroke="black" stroke-opacity="0.12" stroke-dasharray="4 4"/>
-<path d="M8 14C8 10.6863 10.6863 8 14 8H33C36.3137 8 39 10.6863 39 14C39 17.3137 36.3137 20 33 20H14C10.6863 20 8 17.3137 8 14Z" fill="black" fill-opacity="0.12"/>
-<path d="M8 27C8 25.3431 9.34315 24 11 24H83C84.6569 24 86 25.3431 86 27V29C86 30.6569 84.6569 32 83 32H11C9.34315 32 8 30.6569 8 29V27Z" fill="black" fill-opacity="0.12"/>
-<path d="M8 44C8 46.2091 9.79086 48 12 48H16C18.2091 48 20 46.2091 20 44C20 41.7909 18.2091 40 16 40H12C9.79086 40 8 41.7909 8 44Z" fill="black" fill-opacity="0.32"/>
-<path d="M24.5 44C24.5 46.2091 26.2909 48 28.5 48H32.5C34.7091 48 36.5 46.2091 36.5 44C36.5 41.7909 34.7091 40 32.5 40H28.5C26.2909 40 24.5 41.7909 24.5 44Z" fill="black" fill-opacity="0.32"/>
-<path d="M41 44C41 46.2091 42.7909 48 45 48H49C51.2091 48 53 46.2091 53 44C53 41.7909 51.2091 40 49 40H45C42.7909 40 41 41.7909 41 44Z" fill="black" fill-opacity="0.32"/>
-<path d="M57.5 44C57.5 46.2091 59.2909 48 61.5 48H65.5C67.7091 48 69.5 46.2091 69.5 44C69.5 41.7909 67.7091 40 65.5 40H61.5C59.2909 40 57.5 41.7909 57.5 44Z" fill="black" fill-opacity="0.32"/>
-<path d="M74 44C74 46.2091 75.7909 48 78 48H82C84.2091 48 86 46.2091 86 44C86 41.7909 84.2091 40 82 40H78C75.7909 40 74 41.7909 74 44Z" fill="black" fill-opacity="0.32"/>
-</svg>
@@ -1,11 +0,0 @@
-<svg width="94" height="56" viewBox="0 0 94 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 8C0 3.58172 3.58172 0 8 0H86C90.4183 0 94 3.58172 94 8V48C94 52.4183 90.4183 56 86 56H8C3.58172 56 0 52.4183 0 48V8Z" fill="#1C1C1C"/>
-<path d="M1.34748 52.4449C0.772837 51.5866 0.359906 50.6109 0.152272 49.5613L0.642766 49.4643C0.549158 48.9911 0.5 48.5015 0.5 48V46H0V42H0.5V38H0V34H0.5V30H0V26H0.5V22H0V18H0.5V14H0V10H0.5V8C0.5 7.49847 0.549158 7.00892 0.642766 6.53574L0.152272 6.4387C0.359906 5.38915 0.772837 4.41341 1.34748 3.55508L1.76296 3.83324C2.31067 3.01513 3.01513 2.31067 3.83323 1.76296L3.55507 1.34748C4.41341 0.772837 5.38915 0.359906 6.4387 0.152272L6.53574 0.642766C7.00892 0.549158 7.49847 0.5 8 0.5H9.94999V0H13.85V0.5H17.75V0H21.65V0.5H25.55V0H29.45V0.5H33.35V0H37.25V0.5H41.15V0H45.05V0.5H48.95V0H52.85V0.5H56.75V0H60.65V0.5H64.55V0H68.45V0.5H72.35V0H76.25V0.5H80.15V0H84.05V0.5H86C86.5015 0.5 86.9911 0.549158 87.4643 0.642766L87.5613 0.152273C88.6108 0.359907 89.5866 0.772837 90.4449 1.34747L90.1668 1.76296C90.9849 2.31067 91.6893 3.01513 92.237 3.83323L92.6525 3.55507C93.2272 4.41341 93.6401 5.38915 93.8477 6.4387L93.3572 6.53574C93.4508 7.00892 93.5 7.49847 93.5 8V10H94V14H93.5V18H94V22H93.5V26H94V30H93.5V34H94V38H93.5V42H94V46H93.5V48C93.5 48.5015 93.4508 48.9911 93.3572 49.4643L93.8477 49.5613C93.6401 50.6109 93.2272 51.5866 92.6525 52.4449L92.237 52.1668C91.6893 52.9849 90.9849 53.6893 90.1668 54.237L90.4449 54.6525C89.5866 55.2272 88.6108 55.6401 87.5613 55.8477L87.4643 55.3572C86.9911 55.4508 86.5015 55.5 86 55.5H84.05V56H80.15V55.5H76.25V56H72.35V55.5H68.45V56H64.55V55.5H60.65V56H56.75V55.5H52.85V56H48.95V55.5H45.05V56H41.15V55.5H37.25V56H33.35V55.5H29.45V56H25.55V55.5H21.65V56H17.75V55.5H13.85V56H9.95V55.5H8C7.49847 55.5 7.00892 55.4508 6.53574 55.3572L6.4387 55.8477C5.38915 55.6401 4.41341 55.2272 3.55508 54.6525L3.83323 54.237C3.01513 53.6893 2.31067 52.9849 1.76296 52.1668L1.34748 52.4449Z" stroke="white" stroke-opacity="0.24" stroke-dasharray="4 4"/>
-<path d="M8 14C8 10.6863 10.6863 8 14 8H33C36.3137 8 39 10.6863 39 14C39 17.3137 36.3137 20 33 20H14C10.6863 20 8 17.3137 8 14Z" fill="white" fill-opacity="0.24"/>
-<path d="M8 27C8 25.3431 9.34315 24 11 24H83C84.6569 24 86 25.3431 86 27V29C86 30.6569 84.6569 32 83 32H11C9.34315 32 8 30.6569 8 29V27Z" fill="white" fill-opacity="0.24"/>
-<path d="M8 44C8 46.2091 9.79086 48 12 48H16C18.2091 48 20 46.2091 20 44C20 41.7909 18.2091 40 16 40H12C9.79086 40 8 41.7909 8 44Z" fill="white" fill-opacity="0.48"/>
-<path d="M24.5 44C24.5 46.2091 26.2909 48 28.5 48H32.5C34.7091 48 36.5 46.2091 36.5 44C36.5 41.7909 34.7091 40 32.5 40H28.5C26.2909 40 24.5 41.7909 24.5 44Z" fill="white" fill-opacity="0.48"/>
-<path d="M41 44C41 46.2091 42.7909 48 45 48H49C51.2091 48 53 46.2091 53 44C53 41.7909 51.2091 40 49 40H45C42.7909 40 41 41.7909 41 44Z" fill="white" fill-opacity="0.48"/>
-<path d="M57.5 44C57.5 46.2091 59.2909 48 61.5 48H65.5C67.7091 48 69.5 46.2091 69.5 44C69.5 41.7909 67.7091 40 65.5 40H61.5C59.2909 40 57.5 41.7909 57.5 44Z" fill="white" fill-opacity="0.48"/>
-<path d="M74 44C74 46.2091 75.7909 48 78 48H82C84.2091 48 86 46.2091 86 44C86 41.7909 84.2091 40 82 40H78C75.7909 40 74 41.7909 74 44Z" fill="white" fill-opacity="0.48"/>
-</svg>
@@ -1,11 +0,0 @@
-<svg width="94" height="56" viewBox="0 0 94 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="56" rx="8" fill="white"/>
-<rect x="0.5" y="0.5" width="93" height="55" rx="7.5" stroke="black" stroke-opacity="0.12" stroke-dasharray="4 4"/>
-<path d="M8 12C8 14.2091 9.79086 16 12 16H16C18.2091 16 20 14.2091 20 12C20 9.79086 18.2091 8 16 8H12C9.79086 8 8 9.79086 8 12Z" fill="black" fill-opacity="0.32"/>
-<path d="M24.5 12C24.5 14.2091 26.2909 16 28.5 16H32.5C34.7091 16 36.5 14.2091 36.5 12C36.5 9.79086 34.7091 8 32.5 8H28.5C26.2909 8 24.5 9.79086 24.5 12Z" fill="black" fill-opacity="0.32"/>
-<path d="M41 12C41 14.2091 42.7909 16 45 16H49C51.2091 16 53 14.2091 53 12C53 9.79086 51.2091 8 49 8H45C42.7909 8 41 9.79086 41 12Z" fill="black" fill-opacity="0.32"/>
-<path d="M57.5 12C57.5 14.2091 59.2909 16 61.5 16H65.5C67.7091 16 69.5 14.2091 69.5 12C69.5 9.79086 67.7091 8 65.5 8H61.5C59.2909 8 57.5 9.79086 57.5 12Z" fill="black" fill-opacity="0.32"/>
-<path d="M74 12C74 14.2091 75.7909 16 78 16H82C84.2091 16 86 14.2091 86 12C86 9.79086 84.2091 8 82 8H78C75.7909 8 74 9.79086 74 12Z" fill="black" fill-opacity="0.32"/>
-<path d="M8 30C8 26.6863 10.6863 24 14 24H33C36.3137 24 39 26.6863 39 30C39 33.3137 36.3137 36 33 36H14C10.6863 36 8 33.3137 8 30Z" fill="black" fill-opacity="0.12"/>
-<path d="M8 43C8 41.3431 9.34315 40 11 40H83C84.6569 40 86 41.3431 86 43V45C86 46.6569 84.6569 48 83 48H11C9.34315 48 8 46.6569 8 45V43Z" fill="black" fill-opacity="0.12"/>
-</svg>
@@ -1,11 +0,0 @@
-<svg width="94" height="56" viewBox="0 0 94 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 8C0 3.58172 3.58172 0 8 0H86C90.4183 0 94 3.58172 94 8V48C94 52.4183 90.4183 56 86 56H8C3.58172 56 0 52.4183 0 48V8Z" fill="#1C1C1C"/>
-<path d="M1.34748 52.4449C0.772837 51.5866 0.359906 50.6109 0.152272 49.5613L0.642766 49.4643C0.549158 48.9911 0.5 48.5015 0.5 48V46H0V42H0.5V38H0V34H0.5V30H0V26H0.5V22H0V18H0.5V14H0V10H0.5V8C0.5 7.49847 0.549158 7.00892 0.642766 6.53574L0.152272 6.4387C0.359906 5.38915 0.772837 4.41341 1.34748 3.55508L1.76296 3.83324C2.31067 3.01513 3.01513 2.31067 3.83323 1.76296L3.55507 1.34748C4.41341 0.772837 5.38915 0.359906 6.4387 0.152272L6.53574 0.642766C7.00892 0.549158 7.49847 0.5 8 0.5H9.94999V0H13.85V0.5H17.75V0H21.65V0.5H25.55V0H29.45V0.5H33.35V0H37.25V0.5H41.15V0H45.05V0.5H48.95V0H52.85V0.5H56.75V0H60.65V0.5H64.55V0H68.45V0.5H72.35V0H76.25V0.5H80.15V0H84.05V0.5H86C86.5015 0.5 86.9911 0.549158 87.4643 0.642766L87.5613 0.152273C88.6108 0.359907 89.5866 0.772837 90.4449 1.34747L90.1668 1.76296C90.9849 2.31067 91.6893 3.01513 92.237 3.83323L92.6525 3.55507C93.2272 4.41341 93.6401 5.38915 93.8477 6.4387L93.3572 6.53574C93.4508 7.00892 93.5 7.49847 93.5 8V10H94V14H93.5V18H94V22H93.5V26H94V30H93.5V34H94V38H93.5V42H94V46H93.5V48C93.5 48.5015 93.4508 48.9911 93.3572 49.4643L93.8477 49.5613C93.6401 50.6109 93.2272 51.5866 92.6525 52.4449L92.237 52.1668C91.6893 52.9849 90.9849 53.6893 90.1668 54.237L90.4449 54.6525C89.5866 55.2272 88.6108 55.6401 87.5613 55.8477L87.4643 55.3572C86.9911 55.4508 86.5015 55.5 86 55.5H84.05V56H80.15V55.5H76.25V56H72.35V55.5H68.45V56H64.55V55.5H60.65V56H56.75V55.5H52.85V56H48.95V55.5H45.05V56H41.15V55.5H37.25V56H33.35V55.5H29.45V56H25.55V55.5H21.65V56H17.75V55.5H13.85V56H9.95V55.5H8C7.49847 55.5 7.00892 55.4508 6.53574 55.3572L6.4387 55.8477C5.38915 55.6401 4.41341 55.2272 3.55508 54.6525L3.83323 54.237C3.01513 53.6893 2.31067 52.9849 1.76296 52.1668L1.34748 52.4449Z" stroke="white" stroke-opacity="0.24" stroke-dasharray="4 4"/>
-<path d="M8 12C8 14.2091 9.79086 16 12 16H16C18.2091 16 20 14.2091 20 12C20 9.79086 18.2091 8 16 8H12C9.79086 8 8 9.79086 8 12Z" fill="white" fill-opacity="0.48"/>
-<path d="M24.5 12C24.5 14.2091 26.2909 16 28.5 16H32.5C34.7091 16 36.5 14.2091 36.5 12C36.5 9.79086 34.7091 8 32.5 8H28.5C26.2909 8 24.5 9.79086 24.5 12Z" fill="white" fill-opacity="0.48"/>
-<path d="M41 12C41 14.2091 42.7909 16 45 16H49C51.2091 16 53 14.2091 53 12C53 9.79086 51.2091 8 49 8H45C42.7909 8 41 9.79086 41 12Z" fill="white" fill-opacity="0.48"/>
-<path d="M57.5 12C57.5 14.2091 59.2909 16 61.5 16H65.5C67.7091 16 69.5 14.2091 69.5 12C69.5 9.79086 67.7091 8 65.5 8H61.5C59.2909 8 57.5 9.79086 57.5 12Z" fill="white" fill-opacity="0.48"/>
-<path d="M74 12C74 14.2091 75.7909 16 78 16H82C84.2091 16 86 14.2091 86 12C86 9.79086 84.2091 8 82 8H78C75.7909 8 74 9.79086 74 12Z" fill="white" fill-opacity="0.48"/>
-<path d="M8 30C8 26.6863 10.6863 24 14 24H33C36.3137 24 39 26.6863 39 30C39 33.3137 36.3137 36 33 36H14C10.6863 36 8 33.3137 8 30Z" fill="white" fill-opacity="0.24"/>
-<path d="M8 43C8 41.3431 9.34315 40 11 40H83C84.6569 40 86 41.3431 86 43V45C86 46.6569 84.6569 48 83 48H11C9.34315 48 8 46.6569 8 45V43Z" fill="white" fill-opacity="0.24"/>
-</svg>
@@ -1,11 +0,0 @@
-<svg width="94" height="56" viewBox="0 0 94 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="56" rx="8" fill="white"/>
-<rect x="0.5" y="0.5" width="93" height="55" rx="7.5" stroke="black" stroke-opacity="0.12" stroke-dasharray="4 4"/>
-<path d="M31.5 14C31.5 10.6863 34.1863 8 37.5 8H56.5C59.8137 8 62.5 10.6863 62.5 14C62.5 17.3137 59.8137 20 56.5 20H37.5C34.1863 20 31.5 17.3137 31.5 14Z" fill="black" fill-opacity="0.32"/>
-<path d="M23 27C23 25.3431 24.3431 24 26 24H68C69.6569 24 71 25.3431 71 27V29C71 30.6569 69.6569 32 68 32H26C24.3431 32 23 30.6569 23 29V27Z" fill="black" fill-opacity="0.12"/>
-<path d="M9 44C9 41.7909 10.7909 40 13 40H17C19.2091 40 21 41.7909 21 44C21 46.2091 19.2091 48 17 48H13C10.7909 48 9 46.2091 9 44Z" fill="black" fill-opacity="0.32"/>
-<path d="M25 44C25 41.7909 26.7909 40 29 40H33C35.2091 40 37 41.7909 37 44C37 46.2091 35.2091 48 33 48H29C26.7909 48 25 46.2091 25 44Z" fill="black" fill-opacity="0.12"/>
-<path d="M41 44C41 41.7909 42.7909 40 45 40H49C51.2091 40 53 41.7909 53 44C53 46.2091 51.2091 48 49 48H45C42.7909 48 41 46.2091 41 44Z" fill="black" fill-opacity="0.12"/>
-<path d="M57 44C57 41.7909 58.7909 40 61 40H65C67.2091 40 69 41.7909 69 44C69 46.2091 67.2091 48 65 48H61C58.7909 48 57 46.2091 57 44Z" fill="black" fill-opacity="0.12"/>
-<path d="M73 44C73 41.7909 74.7909 40 77 40H81C83.2091 40 85 41.7909 85 44C85 46.2091 83.2091 48 81 48H77C74.7909 48 73 46.2091 73 44Z" fill="black" fill-opacity="0.12"/>
-</svg>
@@ -1,11 +0,0 @@
-<svg width="94" height="56" viewBox="0 0 94 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 8C0 3.58172 3.58172 0 8 0H86C90.4183 0 94 3.58172 94 8V48C94 52.4183 90.4183 56 86 56H8C3.58172 56 0 52.4183 0 48V8Z" fill="#1C1C1C"/>
-<path d="M1.34748 52.4449C0.772837 51.5866 0.359906 50.6109 0.152272 49.5613L0.642766 49.4643C0.549158 48.9911 0.5 48.5015 0.5 48V46H0V42H0.5V38H0V34H0.5V30H0V26H0.5V22H0V18H0.5V14H0V10H0.5V8C0.5 7.49847 0.549158 7.00892 0.642766 6.53574L0.152272 6.4387C0.359906 5.38915 0.772837 4.41341 1.34748 3.55508L1.76296 3.83324C2.31067 3.01513 3.01513 2.31067 3.83323 1.76296L3.55507 1.34748C4.41341 0.772837 5.38915 0.359906 6.4387 0.152272L6.53574 0.642766C7.00892 0.549158 7.49847 0.5 8 0.5H9.94999V0H13.85V0.5H17.75V0H21.65V0.5H25.55V0H29.45V0.5H33.35V0H37.25V0.5H41.15V0H45.05V0.5H48.95V0H52.85V0.5H56.75V0H60.65V0.5H64.55V0H68.45V0.5H72.35V0H76.25V0.5H80.15V0H84.05V0.5H86C86.5015 0.5 86.9911 0.549158 87.4643 0.642766L87.5613 0.152273C88.6108 0.359907 89.5866 0.772837 90.4449 1.34747L90.1668 1.76296C90.9849 2.31067 91.6893 3.01513 92.237 3.83323L92.6525 3.55507C93.2272 4.41341 93.6401 5.38915 93.8477 6.4387L93.3572 6.53574C93.4508 7.00892 93.5 7.49847 93.5 8V10H94V14H93.5V18H94V22H93.5V26H94V30H93.5V34H94V38H93.5V42H94V46H93.5V48C93.5 48.5015 93.4508 48.9911 93.3572 49.4643L93.8477 49.5613C93.6401 50.6109 93.2272 51.5866 92.6525 52.4449L92.237 52.1668C91.6893 52.9849 90.9849 53.6893 90.1668 54.237L90.4449 54.6525C89.5866 55.2272 88.6108 55.6401 87.5613 55.8477L87.4643 55.3572C86.9911 55.4508 86.5015 55.5 86 55.5H84.05V56H80.15V55.5H76.25V56H72.35V55.5H68.45V56H64.55V55.5H60.65V56H56.75V55.5H52.85V56H48.95V55.5H45.05V56H41.15V55.5H37.25V56H33.35V55.5H29.45V56H25.55V55.5H21.65V56H17.75V55.5H13.85V56H9.95V55.5H8C7.49847 55.5 7.00892 55.4508 6.53574 55.3572L6.4387 55.8477C5.38915 55.6401 4.41341 55.2272 3.55508 54.6525L3.83323 54.237C3.01513 53.6893 2.31067 52.9849 1.76296 52.1668L1.34748 52.4449Z" stroke="white" stroke-opacity="0.24" stroke-dasharray="4 4"/>
-<path d="M31.5 14C31.5 10.6863 34.1863 8 37.5 8H56.5C59.8137 8 62.5 10.6863 62.5 14C62.5 17.3137 59.8137 20 56.5 20H37.5C34.1863 20 31.5 17.3137 31.5 14Z" fill="white" fill-opacity="0.48"/>
-<path d="M23 27C23 25.3431 24.3431 24 26 24H68C69.6569 24 71 25.3431 71 27V29C71 30.6569 69.6569 32 68 32H26C24.3431 32 23 30.6569 23 29V27Z" fill="white" fill-opacity="0.24"/>
-<path d="M9 44C9 41.7909 10.7909 40 13 40H17C19.2091 40 21 41.7909 21 44C21 46.2091 19.2091 48 17 48H13C10.7909 48 9 46.2091 9 44Z" fill="white" fill-opacity="0.48"/>
-<rect x="25" y="40" width="12" height="8" rx="4" fill="white" fill-opacity="0.24"/>
-<rect x="41" y="40" width="12" height="8" rx="4" fill="white" fill-opacity="0.24"/>
-<rect x="57" y="40" width="12" height="8" rx="4" fill="white" fill-opacity="0.24"/>
-<rect x="73" y="40" width="12" height="8" rx="4" fill="white" fill-opacity="0.24"/>
-</svg>
@@ -1,24 +0,0 @@
-<svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_887_2968)">
-<path d="M0 39H55V64C55 68.4183 51.4183 72 47 72H8C3.58172 72 0 68.4183 0 64V39Z" fill="white"/>
-<path d="M1.34748 68.4449C0.772837 67.5866 0.359906 66.6109 0.152272 65.5613L0.642766 65.4643C0.549158 64.9911 0.5 64.5015 0.5 64V61.9167H0V57.75H0.5V53.5833H0V49.4167H0.5V45.25H0V41.0833H0.5V39.5H1.96429V39H5.89286V39.5H9.82143V39H13.75V39.5H17.6786V39H21.6071V39.5H25.5357V39H29.4643V39.5H33.3929V39H37.3214V39.5H41.25V39H45.1786V39.5H49.1071V39H53.0357V39.5H54.5V41.0833H55V45.25H54.5V49.4167H55V53.5833H54.5V57.75H55V61.9167H54.5V64C54.5 64.5015 54.4508 64.9911 54.3572 65.4643L54.8477 65.5613C54.6401 66.6109 54.2272 67.5866 53.6525 68.4449L53.237 68.1668C52.6893 68.9849 51.9849 69.6893 51.1668 70.237L51.4449 70.6525C50.5866 71.2272 49.6109 71.6401 48.5613 71.8477L48.4643 71.3572C47.9911 71.4508 47.5015 71.5 47 71.5H45.05V72H41.15V71.5H37.25V72H33.35V71.5H29.45V72H25.55V71.5H21.65V72H17.75V71.5H13.85V72H9.95V71.5H8C7.49847 71.5 7.00892 71.4508 6.53574 71.3572L6.4387 71.8477C5.38915 71.6401 4.41341 71.2272 3.55507 70.6525L3.83323 70.237C3.01513 69.6893 2.31067 68.9849 1.76296 68.1668L1.34748 68.4449Z" stroke="black" stroke-opacity="0.12" stroke-dasharray="4 4"/>
-<rect x="8" y="47" width="12" height="8" rx="4" fill="black" fill-opacity="0.32"/>
-<rect x="24" y="47" width="12" height="8" rx="4" fill="black" fill-opacity="0.12"/>
-<rect x="8" y="59" width="12" height="8" rx="4" fill="black" fill-opacity="0.12"/>
-<path d="M54 0H86C90.4183 0 94 3.58172 94 8V32C94 36.4183 90.4183 40 86 40H54V0Z" fill="white"/>
-<path d="M84 39.5V40H80V39.5H76V40H72V39.5H68V40H64V39.5H60V40H56V39.5H54.5V38H54V34H54.5V30H54V26H54.5V22H54V18H54.5V14H54V10H54.5V6H54V2H54.5V0.5H56V0H60V0.5H64V0H68V0.5H72V0H76V0.5H80V0H84V0.5H86C86.5015 0.5 86.9911 0.549158 87.4643 0.642766L87.5613 0.152272C88.6109 0.359906 89.5866 0.772836 90.4449 1.34748L90.1668 1.76296C90.9849 2.31067 91.6893 3.01513 92.237 3.83323L92.6525 3.55507C93.2272 4.41341 93.6401 5.38915 93.8477 6.4387L93.3572 6.53574C93.4508 7.00892 93.5 7.49847 93.5 8V10H94V14H93.5V18H94V22H93.5V26H94V30H93.5V32C93.5 32.5015 93.4508 32.9911 93.3572 33.4643L93.8477 33.5613C93.6401 34.6109 93.2272 35.5866 92.6525 36.4449L92.237 36.1668C91.6893 36.9849 90.9849 37.6893 90.1668 38.237L90.4449 38.6525C89.5866 39.2272 88.6109 39.6401 87.5613 39.8477L87.4643 39.3572C86.9911 39.4508 86.5015 39.5 86 39.5H84Z" stroke="black" stroke-opacity="0.12" stroke-dasharray="4 4"/>
-<path d="M58 28C58 30.2091 59.7909 32 62 32H66C68.2091 32 70 30.2091 70 28C70 25.7909 68.2091 24 66 24H62C59.7909 24 58 25.7909 58 28Z" fill="black" fill-opacity="0.12"/>
-<path d="M74 28C74 30.2091 75.7909 32 78 32H82C84.2091 32 86 30.2091 86 28C86 25.7909 84.2091 24 82 24H78C75.7909 24 74 25.7909 74 28Z" fill="black" fill-opacity="0.12"/>
-<path d="M74 16C74 18.2091 75.7909 20 78 20H82C84.2091 20 86 18.2091 86 16C86 13.7909 84.2091 12 82 12H78C75.7909 12 74 13.7909 74 16Z" fill="black" fill-opacity="0.32"/>
-<path d="M0 8C0 3.58172 3.58172 0 8 0H55V40H0V8Z" fill="white"/>
-<path d="M3.55507 1.34748C4.41341 0.772837 5.38915 0.359906 6.4387 0.152272L6.53574 0.642766C7.00892 0.549158 7.49847 0.5 8 0.5H9.95833V0H13.875V0.5H17.7917V0H21.7083V0.5H25.625V0H29.5417V0.5H33.4583V0H37.375V0.5H41.2917V0H45.2083V0.5H49.125V0H53.0417V0.5H54.5V2H55V6H54.5V10H55V14H54.5V18H55V22H54.5V26H55V30H54.5V34H55V38H54.5V39.5H53.0357V40H49.1071V39.5H45.1786V40H41.25V39.5H37.3214V40H33.3929V39.5H29.4643V40H25.5357V39.5H21.6071V40H17.6786V39.5H13.75V40H9.82143V39.5H5.89286V40H1.96429V39.5H0.5V38H0V34H0.5V30H0V26H0.5V22H0V18H0.5V14H0V10H0.5V8C0.5 7.49847 0.549158 7.00892 0.642766 6.53574L0.152272 6.4387C0.359906 5.38915 0.772837 4.41341 1.34748 3.55508L1.76296 3.83324C2.31067 3.01513 3.01513 2.31067 3.83323 1.76296L3.55507 1.34748Z" stroke="black" stroke-opacity="0.12" stroke-dasharray="4 4"/>
-<path d="M8 14C8 10.6863 10.6863 8 14 8H33C36.3137 8 39 10.6863 39 14C39 17.3137 36.3137 20 33 20H14C10.6863 20 8 17.3137 8 14Z" fill="black" fill-opacity="0.32"/>
-<path d="M8 27C8 25.3431 9.34315 24 11 24H44C45.6569 24 47 25.3431 47 27V29C47 30.6569 45.6569 32 44 32H11C9.34315 32 8 30.6569 8 29V27Z" fill="black" fill-opacity="0.12"/>
-<path d="M79 48V54.5C79 58.09 76.09 61 72.5 61H66.83L69.92 64.09L68.5 65.5L63 60L68.5 54.5L69.91 55.91L66.83 59H72.5C75 59 77 57 77 54.5V48H79Z" fill="black" fill-opacity="0.32"/>
-</g>
-<defs>
-<clipPath id="clip0_887_2968">
-<rect width="94" height="72" fill="white"/>
-</clipPath>
-</defs>
-</svg>
@@ -1,17 +0,0 @@
-<svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 39H55V64C55 68.4183 51.4183 72 47 72H8C3.58172 72 0 68.4183 0 64V39Z" fill="#1C1C1C"/>
-<path d="M1.34748 68.4449C0.772837 67.5866 0.359906 66.6109 0.152272 65.5613L0.642766 65.4643C0.549158 64.9911 0.5 64.5015 0.5 64V61.9167H0V57.75H0.5V53.5833H0V49.4167H0.5V45.25H0V41.0833H0.5V39.5H1.96429V39H5.89286V39.5H9.82143V39H13.75V39.5H17.6786V39H21.6071V39.5H25.5357V39H29.4643V39.5H33.3929V39H37.3214V39.5H41.25V39H45.1786V39.5H49.1071V39H53.0357V39.5H54.5V41.0833H55V45.25H54.5V49.4167H55V53.5833H54.5V57.75H55V61.9167H54.5V64C54.5 64.5015 54.4508 64.9911 54.3572 65.4643L54.8477 65.5613C54.6401 66.6109 54.2272 67.5866 53.6525 68.4449L53.237 68.1668C52.6893 68.9849 51.9849 69.6893 51.1668 70.237L51.4449 70.6525C50.5866 71.2272 49.6109 71.6401 48.5613 71.8477L48.4643 71.3572C47.9911 71.4508 47.5015 71.5 47 71.5H45.05V72H41.15V71.5H37.25V72H33.35V71.5H29.45V72H25.55V71.5H21.65V72H17.75V71.5H13.85V72H9.95V71.5H8C7.49847 71.5 7.00892 71.4508 6.53574 71.3572L6.4387 71.8477C5.38915 71.6401 4.41341 71.2272 3.55507 70.6525L3.83323 70.237C3.01513 69.6893 2.31067 68.9849 1.76296 68.1668L1.34748 68.4449Z" stroke="white" stroke-opacity="0.24" stroke-dasharray="4 4"/>
-<path d="M8 51C8 48.7909 9.79086 47 12 47H16C18.2091 47 20 48.7909 20 51C20 53.2091 18.2091 55 16 55H12C9.79086 55 8 53.2091 8 51Z" fill="white" fill-opacity="0.48"/>
-<path d="M24 51C24 48.7909 25.7909 47 28 47H32C34.2091 47 36 48.7909 36 51C36 53.2091 34.2091 55 32 55H28C25.7909 55 24 53.2091 24 51Z" fill="white" fill-opacity="0.24"/>
-<path d="M8 63C8 60.7909 9.79086 59 12 59H16C18.2091 59 20 60.7909 20 63C20 65.2091 18.2091 67 16 67H12C9.79086 67 8 65.2091 8 63Z" fill="white" fill-opacity="0.24"/>
-<path d="M54 0H86C90.4183 0 94 3.58172 94 8V32C94 36.4183 90.4183 40 86 40H54V0Z" fill="#1C1C1C"/>
-<path d="M84 39.5V40H80V39.5H76V40H72V39.5H68V40H64V39.5H60V40H56V39.5H54.5V38H54V34H54.5V30H54V26H54.5V22H54V18H54.5V14H54V10H54.5V6H54V2H54.5V0.5H56V0H60V0.5H64V0H68V0.5H72V0H76V0.5H80V0H84V0.5H86C86.5015 0.5 86.9911 0.549158 87.4643 0.642766L87.5613 0.152272C88.6109 0.359906 89.5866 0.772836 90.4449 1.34748L90.1668 1.76296C90.9849 2.31067 91.6893 3.01513 92.237 3.83323L92.6525 3.55507C93.2272 4.41341 93.6401 5.38915 93.8477 6.4387L93.3572 6.53574C93.4508 7.00892 93.5 7.49847 93.5 8V10H94V14H93.5V18H94V22H93.5V26H94V30H93.5V32C93.5 32.5015 93.4508 32.9911 93.3572 33.4643L93.8477 33.5613C93.6401 34.6109 93.2272 35.5866 92.6525 36.4449L92.237 36.1668C91.6893 36.9849 90.9849 37.6893 90.1668 38.237L90.4449 38.6525C89.5866 39.2272 88.6109 39.6401 87.5613 39.8477L87.4643 39.3572C86.9911 39.4508 86.5015 39.5 86 39.5H84Z" stroke="white" stroke-opacity="0.24" stroke-dasharray="4 4"/>
-<path d="M58 28C58 30.2091 59.7909 32 62 32H66C68.2091 32 70 30.2091 70 28C70 25.7909 68.2091 24 66 24H62C59.7909 24 58 25.7909 58 28Z" fill="white" fill-opacity="0.24"/>
-<path d="M74 28C74 30.2091 75.7909 32 78 32H82C84.2091 32 86 30.2091 86 28C86 25.7909 84.2091 24 82 24H78C75.7909 24 74 25.7909 74 28Z" fill="white" fill-opacity="0.24"/>
-<path d="M74 16C74 18.2091 75.7909 20 78 20H82C84.2091 20 86 18.2091 86 16C86 13.7909 84.2091 12 82 12H78C75.7909 12 74 13.7909 74 16Z" fill="white" fill-opacity="0.48"/>
-<path d="M0 8C0 3.58172 3.58172 0 8 0H55V40H0V8Z" fill="#1C1C1C"/>
-<path d="M3.55507 1.34748C4.41341 0.772837 5.38915 0.359906 6.4387 0.152272L6.53574 0.642766C7.00892 0.549158 7.49847 0.5 8 0.5H9.95833V0H13.875V0.5H17.7917V0H21.7083V0.5H25.625V0H29.5417V0.5H33.4583V0H37.375V0.5H41.2917V0H45.2083V0.5H49.125V0H53.0417V0.5H54.5V2H55V6H54.5V10H55V14H54.5V18H55V22H54.5V26H55V30H54.5V34H55V38H54.5V39.5H53.0357V40H49.1071V39.5H45.1786V40H41.25V39.5H37.3214V40H33.3929V39.5H29.4643V40H25.5357V39.5H21.6071V40H17.6786V39.5H13.75V40H9.82143V39.5H5.89286V40H1.96429V39.5H0.5V38H0V34H0.5V30H0V26H0.5V22H0V18H0.5V14H0V10H0.5V8C0.5 7.49847 0.549158 7.00892 0.642766 6.53574L0.152272 6.4387C0.359906 5.38915 0.772837 4.41341 1.34748 3.55508L1.76296 3.83324C2.31067 3.01513 3.01513 2.31067 3.83323 1.76296L3.55507 1.34748Z" stroke="white" stroke-opacity="0.24" stroke-dasharray="4 4"/>
-<path d="M8 14C8 10.6863 10.6863 8 14 8H33C36.3137 8 39 10.6863 39 14C39 17.3137 36.3137 20 33 20H14C10.6863 20 8 17.3137 8 14Z" fill="white" fill-opacity="0.48"/>
-<path d="M8 27C8 25.3431 9.34315 24 11 24H44C45.6569 24 47 25.3431 47 27V29C47 30.6569 45.6569 32 44 32H11C9.34315 32 8 30.6569 8 29V27Z" fill="white" fill-opacity="0.24"/>
-<path d="M79 48V54.5C79 58.09 76.09 61 72.5 61H66.83L69.92 64.09L68.5 65.5L63 60L68.5 54.5L69.91 55.91L66.83 59H72.5C75 59 77 57 77 54.5V48H79Z" fill="white" fill-opacity="0.48"/>
-</svg>
@@ -1,9 +0,0 @@
-<svg width="94" height="56" viewBox="0 0 94 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="56" rx="8" fill="white"/>
-<rect x="0.5" y="0.5" width="93" height="55" rx="7.5" stroke="black" stroke-opacity="0.12" stroke-dasharray="4 4"/>
-<path d="M8 14C8 10.6863 10.6863 8 14 8H33C36.3137 8 39 10.6863 39 14C39 17.3137 36.3137 20 33 20H14C10.6863 20 8 17.3137 8 14Z" fill="black" fill-opacity="0.32"/>
-<path d="M8 27C8 25.3431 9.34315 24 11 24H53C54.6569 24 56 25.3431 56 27V29C56 30.6569 54.6569 32 53 32H11C9.34315 32 8 30.6569 8 29V27Z" fill="black" fill-opacity="0.12"/>
-<path d="M8 44C8 41.7909 9.79086 40 12 40H16C18.2091 40 20 41.7909 20 44C20 46.2091 18.2091 48 16 48H12C9.79086 48 8 46.2091 8 44Z" fill="black" fill-opacity="0.32"/>
-<path d="M24 44C24 41.7909 25.7909 40 28 40H32C34.2091 40 36 41.7909 36 44C36 46.2091 34.2091 48 32 48H28C25.7909 48 24 46.2091 24 44Z" fill="black" fill-opacity="0.12"/>
-<path d="M40 44C40 41.7909 41.7909 40 44 40H48C50.2091 40 52 41.7909 52 44C52 46.2091 50.2091 48 48 48H44C41.7909 48 40 46.2091 40 44Z" fill="black" fill-opacity="0.12"/>
-</svg>
@@ -1,11 +0,0 @@
-<svg width="94" height="56" viewBox="0 0 94 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 8C0 3.58172 3.58172 0 8 0H86C90.4183 0 94 3.58172 94 8V48C94 52.4183 90.4183 56 86 56H8C3.58172 56 0 52.4183 0 48V8Z" fill="#1C1C1C"/>
-<path d="M1.34748 52.4449C0.772837 51.5866 0.359906 50.6109 0.152272 49.5613L0.642766 49.4643C0.549158 48.9911 0.5 48.5015 0.5 48V46H0V42H0.5V38H0V34H0.5V30H0V26H0.5V22H0V18H0.5V14H0V10H0.5V8C0.5 7.49847 0.549158 7.00892 0.642766 6.53574L0.152272 6.4387C0.359906 5.38915 0.772837 4.41341 1.34748 3.55508L1.76296 3.83324C2.31067 3.01513 3.01513 2.31067 3.83323 1.76296L3.55507 1.34748C4.41341 0.772837 5.38915 0.359906 6.4387 0.152272L6.53574 0.642766C7.00892 0.549158 7.49847 0.5 8 0.5H9.94999V0H13.85V0.5H17.75V0H21.65V0.5H25.55V0H29.45V0.5H33.35V0H37.25V0.5H41.15V0H45.05V0.5H48.95V0H52.85V0.5H56.75V0H60.65V0.5H64.55V0H68.45V0.5H72.35V0H76.25V0.5H80.15V0H84.05V0.5H86C86.5015 0.5 86.9911 0.549158 87.4643 0.642766L87.5613 0.152273C88.6108 0.359907 89.5866 0.772837 90.4449 1.34747L90.1668 1.76296C90.9849 2.31067 91.6893 3.01513 92.237 3.83323L92.6525 3.55507C93.2272 4.41341 93.6401 5.38915 93.8477 6.4387L93.3572 6.53574C93.4508 7.00892 93.5 7.49847 93.5 8V10H94V14H93.5V18H94V22H93.5V26H94V30H93.5V34H94V38H93.5V42H94V46H93.5V48C93.5 48.5015 93.4508 48.9911 93.3572 49.4643L93.8477 49.5613C93.6401 50.6109 93.2272 51.5866 92.6525 52.4449L92.237 52.1668C91.6893 52.9849 90.9849 53.6893 90.1668 54.237L90.4449 54.6525C89.5866 55.2272 88.6108 55.6401 87.5613 55.8477L87.4643 55.3572C86.9911 55.4508 86.5015 55.5 86 55.5H84.05V56H80.15V55.5H76.25V56H72.35V55.5H68.45V56H64.55V55.5H60.65V56H56.75V55.5H52.85V56H48.95V55.5H45.05V56H41.15V55.5H37.25V56H33.35V55.5H29.45V56H25.55V55.5H21.65V56H17.75V55.5H13.85V56H9.95V55.5H8C7.49847 55.5 7.00892 55.4508 6.53574 55.3572L6.4387 55.8477C5.38915 55.6401 4.41341 55.2272 3.55508 54.6525L3.83323 54.237C3.01513 53.6893 2.31067 52.9849 1.76296 52.1668L1.34748 52.4449Z" stroke="white" stroke-opacity="0.24" stroke-dasharray="4 4"/>
-<path d="M8 14C8 10.6863 10.6863 8 14 8H33C36.3137 8 39 10.6863 39 14C39 17.3137 36.3137 20 33 20H14C10.6863 20 8 17.3137 8 14Z" fill="white" fill-opacity="0.48"/>
-<path d="M8 27C8 25.3431 9.34315 24 11 24H53C54.6569 24 56 25.3431 56 27V29C56 30.6569 54.6569 32 53 32H11C9.34315 32 8 30.6569 8 29V27Z" fill="white" fill-opacity="0.24"/>
-<path d="M8 44C8 41.7909 9.79086 40 12 40H16C18.2091 40 20 41.7909 20 44C20 46.2091 18.2091 48 16 48H12C9.79086 48 8 46.2091 8 44Z" fill="white" fill-opacity="0.48"/>
-<rect x="24" y="40" width="12" height="8" rx="4" fill="white" fill-opacity="0.24"/>
-<rect x="40" y="40" width="12" height="8" rx="4" fill="white" fill-opacity="0.24"/>
-<rect x="56" y="40" width="12" height="8" rx="4" fill="white" fill-opacity="0.24"/>
-<rect x="72" y="40" width="12" height="8" rx="4" fill="white" fill-opacity="0.24"/>
-</svg>
@@ -1,12 +1,11 @@
 [build-system]
-requires = ["setuptools~=77.0"]
+requires = ["setuptools~=75.1"]
 build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20250401.0"
-license      = "Apache-2.0"
-license-files = ["LICENSE*"]
+version      = "20250205.0"
+license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"
 authors      = [
@@ -18,6 +17,8 @@ requires-python = ">=3.13.0"
 "Homepage" = "https://github.com/home-assistant/frontend"

 [tool.setuptools]
+platforms = ["any"]
+zip-safe  = false
 include-package-data = true

 [tool.setuptools.packages.find]
@@ -37,7 +37,7 @@
    {
      "description": "Group tsparticles engine and presets",
      "groupName": "tsparticles",
-      "matchPackageNames": ["@tsparticles/engine", "@tsparticles/preset-{/,}**"]
+      "matchPackageNames": ["tsparticles-engine", "tsparticles-preset-{/,}**"]
    },
    {
      "description": "Group date-fns with dependent timezone package",
@@ -132,15 +132,6 @@ export const hs2rgb = (hs: [number, number]): [number, number, number] =>

 export function theme2hex(themeColor: string): string {
  if (themeColor.startsWith("#")) {
-    if (themeColor.length === 4 || themeColor.length === 5) {
-      const c = themeColor;
-      // Convert short-form hex (#abc) to 6 digit (#aabbcc). Ignore alpha channel.
-      return `#${c[1]}${c[1]}${c[2]}${c[2]}${c[3]}${c[3]}`;
-    }
-    if (themeColor.length === 9) {
-      // Ignore alpha channel.
-      return themeColor.substring(0, 7);
-    }
    return themeColor;
  }

@@ -6,10 +6,6 @@ import {
  differenceInMilliseconds,
  differenceInMonths,
  endOfMonth,
-  startOfDay,
-  endOfDay,
-  differenceInDays,
-  addDays,
 } from "date-fns";
 import { toZonedTime, fromZonedTime } from "date-fns-tz";
 import type { HassConfig } from "home-assistant-js-websocket";
@@ -104,32 +100,6 @@ export const shiftDateRange = (
      locale,
      config
    );
-  } else if (
-    calcDateProperty(
-      startDate,
-      (date) => startOfDay(date).getMilliseconds() === date.getMilliseconds(),
-      locale,
-      config
-    ) &&
-    calcDateProperty(
-      endDate,
-      (date) => endOfDay(date).getMilliseconds() === date.getMilliseconds(),
-      locale,
-      config
-    )
-  ) {
-    const difference =
-      ((calcDateDifferenceProperty(
-        endDate,
-        startDate,
-        differenceInDays,
-        locale,
-        config
-      ) as number) +
-        1) *
-      (forward ? 1 : -1);
-    start = calcDate(startDate, addDays, locale, config, difference);
-    end = calcDate(endDate, addDays, locale, config, difference);
  } else {
    const difference =
      ((calcDateDifferenceProperty(
@@ -1,116 +0,0 @@
-import {
-  addDays,
-  subHours,
-  endOfDay,
-  endOfMonth,
-  endOfWeek,
-  endOfYear,
-  startOfDay,
-  startOfMonth,
-  startOfWeek,
-  startOfYear,
-  startOfQuarter,
-  endOfQuarter,
-  subDays,
-  subMonths,
-} from "date-fns";
-import type { HomeAssistant } from "../../types";
-import { calcDate } from "./calc_date";
-import { firstWeekdayIndex } from "./first_weekday";
-
-export type DateRange =
-  | "today"
-  | "yesterday"
-  | "this_week"
-  | "this_month"
-  | "this_quarter"
-  | "this_year"
-  | "now-7d"
-  | "now-30d"
-  | "now-12m"
-  | "now-1h"
-  | "now-12h"
-  | "now-24h";
-
-export const calcDateRange = (
-  hass: HomeAssistant,
-  range: DateRange
-): [Date, Date] => {
-  const today = new Date();
-  const weekStartsOn = firstWeekdayIndex(hass.locale);
-  switch (range) {
-    case "today":
-      return [
-        calcDate(today, startOfDay, hass.locale, hass.config, {
-          weekStartsOn,
-        }),
-        calcDate(today, endOfDay, hass.locale, hass.config, {
-          weekStartsOn,
-        }),
-      ];
-    case "yesterday":
-      return [
-        calcDate(addDays(today, -1), startOfDay, hass.locale, hass.config, {
-          weekStartsOn,
-        }),
-        calcDate(addDays(today, -1), endOfDay, hass.locale, hass.config, {
-          weekStartsOn,
-        }),
-      ];
-    case "this_week":
-      return [
-        calcDate(today, startOfWeek, hass.locale, hass.config, {
-          weekStartsOn,
-        }),
-        calcDate(today, endOfWeek, hass.locale, hass.config, {
-          weekStartsOn,
-        }),
-      ];
-    case "this_month":
-      return [
-        calcDate(today, startOfMonth, hass.locale, hass.config),
-        calcDate(today, endOfMonth, hass.locale, hass.config),
-      ];
-    case "this_quarter":
-      return [
-        calcDate(today, startOfQuarter, hass.locale, hass.config),
-        calcDate(today, endOfQuarter, hass.locale, hass.config),
-      ];
-    case "this_year":
-      return [
-        calcDate(today, startOfYear, hass.locale, hass.config),
-        calcDate(today, endOfYear, hass.locale, hass.config),
-      ];
-    case "now-7d":
-      return [
-        calcDate(today, subDays, hass.locale, hass.config, 7),
-        calcDate(today, subDays, hass.locale, hass.config, 1),
-      ];
-    case "now-30d":
-      return [
-        calcDate(today, subDays, hass.locale, hass.config, 30),
-        calcDate(today, subDays, hass.locale, hass.config, 1),
-      ];
-    case "now-12m":
-      return [
-        calcDate(subMonths(today, 12), startOfMonth, hass.locale, hass.config),
-        calcDate(subMonths(today, 1), endOfMonth, hass.locale, hass.config),
-      ];
-    case "now-1h":
-      return [
-        calcDate(today, subHours, hass.locale, hass.config, 1),
-        calcDate(today, subHours, hass.locale, hass.config, 0),
-      ];
-    case "now-12h":
-      return [
-        calcDate(today, subHours, hass.locale, hass.config, 12),
-        calcDate(today, subHours, hass.locale, hass.config, 0),
-      ];
-    case "now-24h":
-      return [
-        calcDate(today, subHours, hass.locale, hass.config, 24),
-        calcDate(today, subHours, hass.locale, hass.config, 0),
-      ];
-  }
-  return [today, today];
-};
@@ -32,6 +32,14 @@ export const setupLeafletMap = async (
  markerClusterStyle.setAttribute("rel", "stylesheet");
  mapElement.parentNode.appendChild(markerClusterStyle);

+  const defaultMarkerClusterStyle = document.createElement("link");
+  defaultMarkerClusterStyle.setAttribute(
+    "href",
+    "/static/images/leaflet/MarkerCluster.Default.css"
+  );
+  defaultMarkerClusterStyle.setAttribute("rel", "stylesheet");
+  mapElement.parentNode.appendChild(defaultMarkerClusterStyle);
+
  map.setView([52.3731339, 4.8903147], 13);

  const tileLayer = createTileLayer(Leaflet).addTo(map);
@@ -1,4 +0,0 @@
-import type { AreaRegistryEntry } from "../../data/area_registry";
-
-export const computeAreaName = (area: AreaRegistryEntry): string | undefined =>
-  area.name?.trim();
@@ -34,7 +34,7 @@ export const computeAttributeValueDisplay = (
    value !== undefined ? value : stateObj.attributes[attribute];

  // Null value, the state is unknown
-  if (attributeValue === null || attributeValue === undefined) {
+  if (attributeValue === null) {
    return localize("state.default.unknown");
  }

@@ -1,38 +0,0 @@
-import type { DeviceRegistryEntry } from "../../data/device_registry";
-import type {
-  EntityRegistryDisplayEntry,
-  EntityRegistryEntry,
-} from "../../data/entity_registry";
-import type { HomeAssistant } from "../../types";
-import { computeStateName } from "./compute_state_name";
-
-export const computeDeviceName = (
-  device: DeviceRegistryEntry
-): string | undefined => (device.name_by_user || device.name)?.trim();
-
-export const computeDeviceNameDisplay = (
-  device: DeviceRegistryEntry,
-  hass: HomeAssistant,
-  entities?: EntityRegistryEntry[] | EntityRegistryDisplayEntry[] | string[]
-) =>
-  computeDeviceName(device) ||
-  (entities && fallbackDeviceName(hass, entities)) ||
-  hass.localize("ui.panel.config.devices.unnamed_device", {
-    type: hass.localize(
-      `ui.panel.config.devices.type.${device.entry_type || "device"}`
-    ),
-  });
-
-export const fallbackDeviceName = (
-  hass: HomeAssistant,
-  entities: EntityRegistryEntry[] | EntityRegistryDisplayEntry[] | string[]
-) => {
-  for (const entity of entities || []) {
-    const entityId = typeof entity === "string" ? entity : entity.entity_id;
-    const stateObj = hass.states[entityId];
-    if (stateObj) {
-      return computeStateName(stateObj);
-    }
-  }
-  return undefined;
-};
@@ -1,2 +1,2 @@
 export const computeDomain = (entityId: string): string =>
-  entityId.substring(0, entityId.indexOf("."));
+  entityId.substr(0, entityId.indexOf("."));
@@ -1,59 +0,0 @@
-import type { HassEntity } from "home-assistant-js-websocket";
-import type {
-  EntityRegistryDisplayEntry,
-  EntityRegistryEntry,
-} from "../../data/entity_registry";
-import type { HomeAssistant } from "../../types";
-import { computeDeviceName } from "./compute_device_name";
-import { computeStateName } from "./compute_state_name";
-import { stripPrefixFromEntityName } from "./strip_prefix_from_entity_name";
-
-export const computeEntityName = (
-  stateObj: HassEntity,
-  hass: HomeAssistant
-): string | undefined => {
-  const entry = hass.entities[stateObj.entity_id] as
-    | EntityRegistryDisplayEntry
-    | undefined;
-
-  if (!entry) {
-    // Fall back to state name if not in the entity registry (friendly name)
-    return computeStateName(stateObj);
-  }
-  return computeEntityEntryName(entry, hass);
-};
-
-export const computeEntityEntryName = (
-  entry: EntityRegistryDisplayEntry | EntityRegistryEntry,
-  hass: HomeAssistant
-): string | undefined => {
-  const name =
-    entry.name || ("original_name" in entry ? entry.original_name : undefined);
-
-  const device = entry.device_id ? hass.devices[entry.device_id] : undefined;
-
-  if (!device) {
-    if (name) {
-      return name;
-    }
-    const stateObj = hass.states[entry.entity_id] as HassEntity | undefined;
-    if (stateObj) {
-      return computeStateName(stateObj);
-    }
-    return undefined;
-  }
-
-  const deviceName = computeDeviceName(device);
-
-  // If the device name is the same as the entity name, consider empty entity name
-  if (deviceName === name) {
-    return undefined;
-  }
-
-  // Remove the device name from the entity name if it starts with it
-  if (deviceName && name) {
-    return stripPrefixFromEntityName(name, deviceName) || name;
-  }
-
-  return name;
-};
@@ -1,4 +0,0 @@
-import type { FloorRegistryEntry } from "../../data/floor_registry";
-
-export const computeFloorName = (floor: FloorRegistryEntry): string =>
-  floor.name?.trim();
@@ -120,6 +120,11 @@ export const computeStateDisplayFromEntityAttributes = (
    return value;
  }

+  if (domain === "datetime") {
+    const time = new Date(state);
+    return formatDateTime(time, locale, config);
+  }
+
  if (["date", "input_datetime", "time"].includes(domain)) {
    // If trying to display an explicit state, need to parse the explicit state to `Date` then format.
    // Attributes aren't available, we have to use `state`.
@@ -176,7 +181,6 @@ export const computeStateDisplayFromEntityAttributes = (
      "tag",
      "tts",
      "wake_word",
-      "datetime",
    ].includes(domain) ||
    (domain === "sensor" && attributes.device_class === "timestamp")
  ) {
@@ -1,30 +0,0 @@
-import type { AreaRegistryEntry } from "../../../data/area_registry";
-import type { FloorRegistryEntry } from "../../../data/floor_registry";
-import type { HomeAssistant } from "../../../types";
-
-interface AreaContext {
-  area: AreaRegistryEntry | null;
-  floor: FloorRegistryEntry | null;
-}
-
-export const getAreaContext = (
-  areaId: string,
-  hass: HomeAssistant
-): AreaContext => {
-  const area = (hass.areas[areaId] as AreaRegistryEntry | undefined) || null;
-
-  if (!area) {
-    return {
-      area: null,
-      floor: null,
-    };
-  }
-
-  const floorId = area?.floor_id;
-  const floor = floorId ? hass.floors[floorId] : null;
-
-  return {
-    area: area,
-    floor: floor,
-  };
-};
@@ -1,43 +0,0 @@
-import type { AreaRegistryEntry } from "../../../data/area_registry";
-import type { DeviceRegistryEntry } from "../../../data/device_registry";
-import type { EntityRegistryDisplayEntry } from "../../../data/entity_registry";
-import type { FloorRegistryEntry } from "../../../data/floor_registry";
-import type { HomeAssistant } from "../../../types";
-
-interface EntityContext {
-  entity: EntityRegistryDisplayEntry | null;
-  device: DeviceRegistryEntry | null;
-  area: AreaRegistryEntry | null;
-  floor: FloorRegistryEntry | null;
-}
-
-export const getEntityContext = (
-  entityId: string,
-  hass: HomeAssistant
-): EntityContext => {
-  const entity =
-    (hass.entities[entityId] as EntityRegistryDisplayEntry | undefined) || null;
-
-  if (!entity) {
-    return {
-      entity: null,
-      device: null,
-      area: null,
-      floor: null,
-    };
-  }
-
-  const deviceId = entity?.device_id;
-  const device = deviceId ? hass.devices[deviceId] : null;
-  const areaId = entity?.area_id || device?.area_id;
-  const area = areaId ? hass.areas[areaId] : null;
-  const floorId = area?.floor_id;
-  const floor = floorId ? hass.floors[floorId] : null;
-
-  return {
-    entity: entity,
-    device: device,
-    area: area,
-    floor: floor,
-  };
-};
@@ -1,78 +0,0 @@
-import { computeDomain } from "./compute_domain";
-
-export type EntityDomainFilterFunc = (entityId: string) => boolean;
-
-export interface EntityDomainFilter {
-  include_domains: string[];
-  include_entities: string[];
-  exclude_domains: string[];
-  exclude_entities: string[];
-}
-
-export const isEmptyEntityDomainFilter = (filter: EntityDomainFilter) =>
-  filter.include_domains.length +
-    filter.include_entities.length +
-    filter.exclude_domains.length +
-    filter.exclude_entities.length ===
-  0;
-
-export const generateEntityDomainFilter = (
-  includeDomains?: string[],
-  includeEntities?: string[],
-  excludeDomains?: string[],
-  excludeEntities?: string[]
-): EntityDomainFilterFunc => {
-  const includeDomainsSet = new Set(includeDomains);
-  const includeEntitiesSet = new Set(includeEntities);
-  const excludeDomainsSet = new Set(excludeDomains);
-  const excludeEntitiesSet = new Set(excludeEntities);
-
-  const haveInclude = includeDomainsSet.size > 0 || includeEntitiesSet.size > 0;
-  const haveExclude = excludeDomainsSet.size > 0 || excludeEntitiesSet.size > 0;
-
-  // Case 1 - no includes or excludes - pass all entities
-  if (!haveInclude && !haveExclude) {
-    return () => true;
-  }
-
-  // Case 2 - includes, no excludes - only include specified entities
-  if (haveInclude && !haveExclude) {
-    return (entityId) =>
-      includeEntitiesSet.has(entityId) ||
-      includeDomainsSet.has(computeDomain(entityId));
-  }
-
-  // Case 3 - excludes, no includes - only exclude specified entities
-  if (!haveInclude && haveExclude) {
-    return (entityId) =>
-      !excludeEntitiesSet.has(entityId) &&
-      !excludeDomainsSet.has(computeDomain(entityId));
-  }
-
-  // Case 4 - both includes and excludes specified
-  // Case 4a - include domain specified
-  //  - if domain is included, pass if entity not excluded
-  //  - if domain is not included, pass if entity is included
-  // note: if both include and exclude domains specified,
-  //   the exclude domains are ignored
-  if (includeDomainsSet.size) {
-    return (entityId) =>
-      includeDomainsSet.has(computeDomain(entityId))
-        ? !excludeEntitiesSet.has(entityId)
-        : includeEntitiesSet.has(entityId);
-  }
-
-  // Case 4b - exclude domain specified
-  //  - if domain is excluded, pass if entity is included
-  //  - if domain is not excluded, pass if entity not excluded
-  if (excludeDomainsSet.size) {
-    return (entityId) =>
-      excludeDomainsSet.has(computeDomain(entityId))
-        ? includeEntitiesSet.has(entityId)
-        : !excludeEntitiesSet.has(entityId);
-  }
-
-  // Case 4c - neither include or exclude domain specified
-  //  - Only pass if entity is included.  Ignore entity excludes.
-  return (entityId) => includeEntitiesSet.has(entityId);
-};
@@ -1,121 +1,78 @@
-import type { HassEntity } from "home-assistant-js-websocket";
-import type { HomeAssistant } from "../../types";
-import { ensureArray } from "../array/ensure-array";
 import { computeDomain } from "./compute_domain";
-import { getEntityContext } from "./context/get_entity_context";

-type EntityCategory = "none" | "config" | "diagnostic";
+export type FilterFunc = (entityId: string) => boolean;

 export interface EntityFilter {
-  domain?: string | string[];
-  device_class?: string | string[];
-  device?: string | string[];
-  area?: string | string[];
-  floor?: string | string[];
-  label?: string | string[];
-  entity_category?: EntityCategory | EntityCategory[];
-  hidden_platform?: string | string[];
+  include_domains: string[];
+  include_entities: string[];
+  exclude_domains: string[];
+  exclude_entities: string[];
 }

-export type EntityFilterFunc = (entityId: string) => boolean;
+export const isEmptyFilter = (filter: EntityFilter) =>
+  filter.include_domains.length +
+    filter.include_entities.length +
+    filter.exclude_domains.length +
+    filter.exclude_entities.length ===
+  0;

-export const generateEntityFilter = (
-  hass: HomeAssistant,
-  filter: EntityFilter
-): EntityFilterFunc => {
-  const domains = filter.domain
-    ? new Set(ensureArray(filter.domain))
-    : undefined;
-  const deviceClasses = filter.device_class
-    ? new Set(ensureArray(filter.device_class))
-    : undefined;
-  const floors = filter.floor ? new Set(ensureArray(filter.floor)) : undefined;
-  const areas = filter.area ? new Set(ensureArray(filter.area)) : undefined;
-  const devices = filter.device
-    ? new Set(ensureArray(filter.device))
-    : undefined;
-  const entityCategories = filter.entity_category
-    ? new Set(ensureArray(filter.entity_category))
-    : undefined;
-  const labels = filter.label ? new Set(ensureArray(filter.label)) : undefined;
-  const hiddenPlatforms = filter.hidden_platform
-    ? new Set(ensureArray(filter.hidden_platform))
-    : undefined;
+export const generateFilter = (
+  includeDomains?: string[],
+  includeEntities?: string[],
+  excludeDomains?: string[],
+  excludeEntities?: string[]
+): FilterFunc => {
+  const includeDomainsSet = new Set(includeDomains);
+  const includeEntitiesSet = new Set(includeEntities);
+  const excludeDomainsSet = new Set(excludeDomains);
+  const excludeEntitiesSet = new Set(excludeEntities);

-  return (entityId: string) => {
-    const stateObj = hass.states[entityId] as HassEntity | undefined;
-    if (!stateObj) {
-      return false;
-    }
-    if (domains) {
-      const domain = computeDomain(entityId);
-      if (!domains.has(domain)) {
-        return false;
-      }
-    }
-    if (deviceClasses) {
-      const dc = stateObj.attributes.device_class || "none";
-      if (!deviceClasses.has(dc)) {
-        return false;
-      }
-    }
+  const haveInclude = includeDomainsSet.size > 0 || includeEntitiesSet.size > 0;
+  const haveExclude = excludeDomainsSet.size > 0 || excludeEntitiesSet.size > 0;

-    const { area, floor, device, entity } = getEntityContext(entityId, hass);
+  // Case 1 - no includes or excludes - pass all entities
+  if (!haveInclude && !haveExclude) {
+    return () => true;
+  }

-    if (entity && entity.hidden) {
-      return false;
-    }
+  // Case 2 - includes, no excludes - only include specified entities
+  if (haveInclude && !haveExclude) {
+    return (entityId) =>
+      includeEntitiesSet.has(entityId) ||
+      includeDomainsSet.has(computeDomain(entityId));
+  }

-    if (floors) {
-      if (!floor) {
-        return false;
-      }
-      if (!floors) {
-        return false;
-      }
-    }
-    if (areas) {
-      if (!area) {
-        return false;
-      }
-      if (!areas.has(area.area_id)) {
-        return false;
-      }
-    }
-    if (devices) {
-      if (!device) {
-        return false;
-      }
-      if (!devices.has(device.id)) {
-        return false;
-      }
-    }
-    if (labels) {
-      if (!entity) {
-        return false;
-      }
-      if (!entity.labels.some((label) => labels.has(label))) {
-        return false;
-      }
-    }
-    if (entityCategories) {
-      if (!entity) {
-        return false;
-      }
-      const category = entity?.entity_category || "none";
-      if (!entityCategories.has(category)) {
-        return false;
-      }
-    }
-    if (hiddenPlatforms) {
-      if (!entity) {
-        return false;
-      }
-      if (entity.platform && hiddenPlatforms.has(entity.platform)) {
-        return false;
-      }
-    }
+  // Case 3 - excludes, no includes - only exclude specified entities
+  if (!haveInclude && haveExclude) {
+    return (entityId) =>
+      !excludeEntitiesSet.has(entityId) &&
+      !excludeDomainsSet.has(computeDomain(entityId));
+  }

-    return true;
-  };
+  // Case 4 - both includes and excludes specified
+  // Case 4a - include domain specified
+  //  - if domain is included, pass if entity not excluded
+  //  - if domain is not included, pass if entity is included
+  // note: if both include and exclude domains specified,
+  //   the exclude domains are ignored
+  if (includeDomainsSet.size) {
+    return (entityId) =>
+      includeDomainsSet.has(computeDomain(entityId))
+        ? !excludeEntitiesSet.has(entityId)
+        : includeEntitiesSet.has(entityId);
+  }
+
+  // Case 4b - exclude domain specified
+  //  - if domain is excluded, pass if entity is included
+  //  - if domain is not excluded, pass if entity not excluded
+  if (excludeDomainsSet.size) {
+    return (entityId) =>
+      excludeDomainsSet.has(computeDomain(entityId))
+        ? includeEntitiesSet.has(entityId)
+        : !excludeEntitiesSet.has(entityId);
+  }
+
+  // Case 4c - neither include or exclude domain specified
+  //  - Only pass if entity is included.  Ignore entity excludes.
+  return (entityId) => includeEntitiesSet.has(entityId);
 };
@@ -1,18 +0,0 @@
-import type { AreaRegistryEntry } from "../../data/area_registry";
-import type { FloorRegistryEntry } from "../../data/floor_registry";
-import type { HomeAssistant } from "../../types";
-
-interface AreaContext {
-  floor: FloorRegistryEntry | null;
-}
-export const getAreaContext = (
-  area: AreaRegistryEntry,
-  hass: HomeAssistant
-): AreaContext => {
-  const floorId = area.floor_id;
-  const floor = floorId ? hass.floors[floorId] : null;
-
-  return {
-    floor: floor,
-  };
-};
@@ -1,24 +0,0 @@
-import type { AreaRegistryEntry } from "../../data/area_registry";
-import type { DeviceRegistryEntry } from "../../data/device_registry";
-import type { FloorRegistryEntry } from "../../data/floor_registry";
-import type { HomeAssistant } from "../../types";
-
-interface DeviceContext {
-  area: AreaRegistryEntry | null;
-  floor: FloorRegistryEntry | null;
-}
-
-export const getDeviceContext = (
-  device: DeviceRegistryEntry,
-  hass: HomeAssistant
-): DeviceContext => {
-  const areaId = device.area_id;
-  const area = areaId ? hass.areas[areaId] : null;
-  const floorId = area?.floor_id;
-  const floor = floorId ? hass.floors[floorId] : null;
-
-  return {
-    area: area,
-    floor: floor,
-  };
-};
@@ -1,55 +0,0 @@
-import type { HassEntity } from "home-assistant-js-websocket";
-import type { AreaRegistryEntry } from "../../data/area_registry";
-import type { DeviceRegistryEntry } from "../../data/device_registry";
-import type {
-  EntityRegistryDisplayEntry,
-  EntityRegistryEntry,
-  ExtEntityRegistryEntry,
-} from "../../data/entity_registry";
-import type { FloorRegistryEntry } from "../../data/floor_registry";
-import type { HomeAssistant } from "../../types";
-
-interface EntityContext {
-  device: DeviceRegistryEntry | null;
-  area: AreaRegistryEntry | null;
-  floor: FloorRegistryEntry | null;
-}
-
-export const getEntityContext = (
-  stateObj: HassEntity,
-  hass: HomeAssistant
-): EntityContext => {
-  const entry = hass.entities[stateObj.entity_id] as
-    | EntityRegistryDisplayEntry
-    | undefined;
-
-  if (!entry) {
-    return {
-      device: null,
-      area: null,
-      floor: null,
-    };
-  }
-  return getEntityEntryContext(entry, hass);
-};
-
-export const getEntityEntryContext = (
-  entry:
-    | EntityRegistryDisplayEntry
-    | EntityRegistryEntry
-    | ExtEntityRegistryEntry,
-  hass: HomeAssistant
-): EntityContext => {
-  const deviceId = entry?.device_id;
-  const device = deviceId ? hass.devices[deviceId] : null;
-  const areaId = entry?.area_id || device?.area_id;
-  const area = areaId ? hass.areas[areaId] : null;
-  const floorId = area?.floor_id;
-  const floor = floorId ? hass.floors[floorId] : null;
-
-  return {
-    device: device,
-    area: area,
-    floor: floor,
-  };
-};
@@ -1,17 +1,17 @@
-const SUFFIXES = [" ", ": ", " - "];
+const SUFFIXES = [" ", ": "];

 /**
 * Strips a device name from an entity name.
 * @param entityName the entity name
- * @param prefix the prefix to strip
+ * @param lowerCasedPrefix the prefix to strip, lower cased
 * @returns
 */
 export const stripPrefixFromEntityName = (
  entityName: string,
-  prefix: string
+  lowerCasedPrefix: string
 ) => {
  const lowerCasedEntityName = entityName.toLowerCase();
-  const lowerCasedPrefix = prefix.toLowerCase();
+
  for (const suffix of SUFFIXES) {
    const lowerCasedPrefixWithSuffix = `${lowerCasedPrefix}${suffix}`;

@@ -1 +1,2 @@
-export const webComponentsSupported = "attachShadow" in Element.prototype;
+export const webComponentsSupported =
+  "customElements" in window && "content" in document.createElement("template");
@@ -45,22 +45,3 @@ export const caseInsensitiveStringCompare = (

  return fallbackStringCompare(a.toLowerCase(), b.toLowerCase());
 };
-
-export const orderCompare = (order: string[]) => (a: string, b: string) => {
-  const idxA = order.indexOf(a);
-  const idxB = order.indexOf(b);
-
-  if (idxA === idxB) {
-    return 0;
-  }
-
-  if (idxA === -1) {
-    return 1;
-  }
-
-  if (idxB === -1) {
-    return -1;
-  }
-
-  return idxA - idxB;
-};
@@ -1,6 +0,0 @@
-export const waitForMs = (ms: number) =>
-  new Promise((resolve) => {
-    setTimeout(resolve, ms);
-  });
-
-export const waitForSeconds = (seconds: number) => waitForMs(seconds * 1000);
@@ -1,38 +1,31 @@
+import "@material/mwc-button";
 import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../ha-button";
-import "../ha-spinner";
+import "../ha-circular-progress";
 import "../ha-svg-icon";

@customElement("ha-progress-button")
 export class HaProgressButton extends LitElement {
-  @property() public label?: string;
-
  @property({ type: Boolean }) public disabled = false;

  @property({ type: Boolean }) public progress = false;

  @property({ type: Boolean }) public raised = false;

-  @property({ type: Boolean }) public unelevated = false;
-
  @state() private _result?: "success" | "error";

  public render(): TemplateResult {
    const overlay = this._result || this.progress;
    return html`
-      <ha-button
-        .raised=${this.raised}
-        .label=${this.label}
-        .unelevated=${this.unelevated}
+      <mwc-button
+        ?raised=${this.raised}
        .disabled=${this.disabled || this.progress}
        class=${this._result || ""}
      >
-        <slot name="icon" slot="icon"></slot>
        <slot></slot>
-      </ha-button>
+      </mwc-button>
      ${!overlay
        ? nothing
        : html`
@@ -42,7 +35,12 @@ export class HaProgressButton extends LitElement {
                : this._result === "error"
                  ? html`<ha-svg-icon .path=${mdiAlertOctagram}></ha-svg-icon>`
                  : this.progress
-                    ? html`<ha-spinner size="small"></ha-spinner>`
+                    ? html`
+                        <ha-circular-progress
+                          size="small"
+                          indeterminate
+                        ></ha-circular-progress>
+                      `
                    : nothing}
            </div>
          `}
@@ -72,12 +70,12 @@ export class HaProgressButton extends LitElement {
      pointer-events: none;
    }

-    ha-button {
+    mwc-button {
      transition: all 1s;
      pointer-events: initial;
    }

-    ha-button.success {
+    mwc-button.success {
      --mdc-theme-primary: white;
      background-color: var(--success-color);
      transition: none;
@@ -85,13 +83,12 @@ export class HaProgressButton extends LitElement {
      pointer-events: none;
    }

-    ha-button[unelevated].success,
-    ha-button[raised].success {
+    mwc-button[raised].success {
      --mdc-theme-primary: var(--success-color);
      --mdc-theme-on-primary: white;
    }

-    ha-button.error {
+    mwc-button.error {
      --mdc-theme-primary: white;
      background-color: var(--error-color);
      transition: none;
@@ -99,8 +96,7 @@ export class HaProgressButton extends LitElement {
      pointer-events: none;
    }

-    ha-button[unelevated].error,
-    ha-button[raised].error {
+    mwc-button[raised].error {
      --mdc-theme-primary: var(--error-color);
      --mdc-theme-on-primary: white;
    }
@@ -117,8 +113,8 @@ export class HaProgressButton extends LitElement {
      color: white;
    }

-    ha-button.success slot,
-    ha-button.error slot {
+    mwc-button.success slot,
+    mwc-button.error slot {
      visibility: hidden;
    }
    :host([destructive]) {
@@ -1,12 +1,11 @@
 import { consume } from "@lit-labs/context";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
-import { mdiChevronDown, mdiChevronUp, mdiRestart } from "@mdi/js";
+import { mdiRestart } from "@mdi/js";
 import { differenceInMinutes } from "date-fns";
 import type { DataZoomComponentOption } from "echarts/components";
 import type { EChartsType } from "echarts/core";
 import type {
  ECElementEvent,
-  LegendComponentOption,
  XAXisOption,
  YAXisOption,
 } from "echarts/types/dist/shared";
@@ -26,12 +25,8 @@ import { isMac } from "../../util/is_mac";
 import "../ha-icon-button";
 import { formatTimeLabel } from "./axis-label";
 import { ensureArray } from "../../common/array/ensure-array";
-import "../chips/ha-assist-chip";

 export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
-const LEGEND_OVERFLOW_LIMIT = 10;
-const LEGEND_OVERFLOW_LIMIT_MOBILE = 6;
-const DOUBLE_TAP_TIME = 300;

@customElement("ha-chart-base")
 export class HaChartBase extends LitElement {
@@ -45,10 +40,8 @@ export class HaChartBase extends LitElement {

  @property({ type: String }) public height?: string;

-  @property({ attribute: "expand-legend", type: Boolean })
-  public expandLegend?: boolean;
-
-  @property({ attribute: false }) public extraComponents?: any[];
+  @property({ attribute: "external-hidden", type: Boolean })
+  public externalHidden = false;

  @state()
  @consume({ context: themesContext, subscribe: true })
@@ -60,14 +53,10 @@ export class HaChartBase extends LitElement {

  @state() private _minutesDifference = 24 * 60;

-  @state() private _hiddenDatasets = new Set<string>();
-
  private _modifierPressed = false;

  private _isTouchDevice = "ontouchstart" in window;

-  private _lastTapTime?: number;
-
  // @ts-ignore
  private _resizeController = new ResizeController(this, {
    callback: () => this.chart?.resize(),
@@ -108,37 +97,20 @@ export class HaChartBase extends LitElement {

    // Add keyboard event listeners
    const handleKeyDown = (ev: KeyboardEvent) => {
-      if (
-        !this._modifierPressed &&
-        ((isMac && ev.key === "Meta") || (!isMac && ev.key === "Control"))
-      ) {
+      if ((isMac && ev.key === "Meta") || (!isMac && ev.key === "Control")) {
        this._modifierPressed = true;
        if (!this.options?.dataZoom) {
          this._setChartOptions({ dataZoom: this._getDataZoomConfig() });
        }
-        // drag to zoom
-        this.chart?.dispatchAction({
-          type: "takeGlobalCursor",
-          key: "dataZoomSelect",
-          dataZoomSelectActive: true,
-        });
      }
    };

    const handleKeyUp = (ev: KeyboardEvent) => {
-      if (
-        this._modifierPressed &&
-        ((isMac && ev.key === "Meta") || (!isMac && ev.key === "Control"))
-      ) {
+      if ((isMac && ev.key === "Meta") || (!isMac && ev.key === "Control")) {
        this._modifierPressed = false;
        if (!this.options?.dataZoom) {
          this._setChartOptions({ dataZoom: this._getDataZoomConfig() });
        }
-        this.chart?.dispatchAction({
-          type: "takeGlobalCursor",
-          key: "dataZoomSelect",
-          dataZoomSelectActive: false,
-        });
      }
    };

@@ -163,8 +135,8 @@ export class HaChartBase extends LitElement {
      return;
    }
    let chartOptions: ECOption = {};
-    if (changedProps.has("data") || changedProps.has("_hiddenDatasets")) {
-      chartOptions.series = this._getSeries();
+    if (changedProps.has("data")) {
+      chartOptions.series = this.data;
    }
    if (changedProps.has("options")) {
      chartOptions = { ...chartOptions, ...this._createOptions() };
@@ -179,18 +151,15 @@ export class HaChartBase extends LitElement {
  protected render() {
    return html`
      <div
-        class="container ${classMap({ "has-height": !!this.height })}"
-        style=${styleMap({ height: this.height })}
+        class=${classMap({
+          "chart-container": true,
+          "has-legend": !!this.options?.legend,
+        })}
+        style=${styleMap({
+          height: this.height ?? `${this._getDefaultHeight()}px`,
+        })}
      >
-        <div
-          class="chart-container"
-          style=${styleMap({
-            height: this.height ? undefined : `${this._getDefaultHeight()}px`,
-          })}
-        >
-          <div class="chart"></div>
-        </div>
-        ${this._renderLegend()}
+        <div class="chart"></div>
        ${this._isZoomed
          ? html`<ha-icon-button
              class="zoom-reset"
@@ -205,83 +174,6 @@ export class HaChartBase extends LitElement {
    `;
  }

-  private _renderLegend() {
-    if (!this.options?.legend || !this.data) {
-      return nothing;
-    }
-    const legend = ensureArray(this.options.legend)[0] as LegendComponentOption;
-    if (!legend.show) {
-      return nothing;
-    }
-    const datasets = ensureArray(this.data);
-    const items = (legend.data ||
-      datasets
-        .filter((d) => (d.data as any[])?.length && (d.id || d.name))
-        .map((d) => d.name ?? d.id) ||
-      []) as string[];
-
-    const isMobile = window.matchMedia(
-      "all and (max-width: 450px), all and (max-height: 500px)"
-    ).matches;
-    const overflowLimit = isMobile
-      ? LEGEND_OVERFLOW_LIMIT_MOBILE
-      : LEGEND_OVERFLOW_LIMIT;
-    return html`<div
-      class=${classMap({
-        "chart-legend": true,
-        "multiple-items": items.length > 1,
-      })}
-    >
-      <ul>
-        ${items.map((item: string, index: number) => {
-          if (!this.expandLegend && index >= overflowLimit) {
-            return nothing;
-          }
-          const dataset = datasets.find(
-            (d) => d.id === item || d.name === item
-          );
-          const color = dataset?.color as string;
-          const borderColor = dataset?.itemStyle?.borderColor as string;
-          return html`<li
-            .name=${item}
-            @click=${this._legendClick}
-            class=${classMap({ hidden: this._hiddenDatasets.has(item) })}
-            .title=${item}
-          >
-            <div
-              class="bullet"
-              style=${styleMap({
-                backgroundColor: color,
-                borderColor: borderColor || color,
-              })}
-            ></div>
-            <div class="label">${item}</div>
-          </li>`;
-        })}
-        ${items.length > overflowLimit
-          ? html`<li>
-              <ha-assist-chip
-                @click=${this._toggleExpandedLegend}
-                filled
-                label=${this.expandLegend
-                  ? this.hass.localize(
-                      "ui.components.history_charts.collapse_legend"
-                    )
-                  : `${this.hass.localize(
-                      "ui.components.history_charts.expand_legend"
-                    )} (${items.length - overflowLimit})`}
-              >
-                <ha-svg-icon
-                  slot="trailing-icon"
-                  .path=${this.expandLegend ? mdiChevronUp : mdiChevronDown}
-                ></ha-svg-icon>
-              </ha-assist-chip>
-            </li>`
-          : nothing}
-      </ul>
-    </div>`;
-  }
-
  private _formatTimeLabel = (value: number | Date) =>
    formatTimeLabel(
      value,
@@ -300,13 +192,19 @@ export class HaChartBase extends LitElement {
      }
      const echarts = (await import("../../resources/echarts")).default;

-      if (this.extraComponents?.length) {
-        echarts.use(this.extraComponents);
-      }
-
      echarts.registerTheme("custom", this._createTheme());

      this.chart = echarts.init(container, "custom");
+      this.chart.on("legendselectchanged", (params: any) => {
+        if (this.externalHidden) {
+          const isSelected = params.selected[params.name];
+          if (isSelected) {
+            fireEvent(this, "dataset-unhidden", { name: params.name });
+          } else {
+            fireEvent(this, "dataset-hidden", { name: params.name });
+          }
+        }
+      });
      this.chart.on("datazoom", (e: any) => {
        const { start, end } = e.batch?.[0] ?? e;
        this._isZoomed = start !== 0 || end !== 100;
@@ -315,49 +213,24 @@ export class HaChartBase extends LitElement {
      this.chart.on("click", (e: ECElementEvent) => {
        fireEvent(this, "chart-click", e);
      });
-      this.chart.getZr().on("dblclick", this._handleClickZoom);
-      if (this._isTouchDevice) {
-        this.chart.getZr().on("click", (e: ECElementEvent) => {
-          if (!e.zrByTouch) {
-            return;
-          }
-          if (
-            this._lastTapTime &&
-            Date.now() - this._lastTapTime < DOUBLE_TAP_TIME
-          ) {
-            this._handleClickZoom(e);
-          } else {
-            this._lastTapTime = Date.now();
-          }
-        });
-      }
-
-      const legend = ensureArray(this.options?.legend || [])[0] as
-        | LegendComponentOption
-        | undefined;
-      Object.entries(legend?.selected || {}).forEach(([stat, selected]) => {
-        if (selected === false) {
-          this._hiddenDatasets.add(stat);
+      this.chart.on("mousemove", (e: ECElementEvent) => {
+        if (e.componentType === "series" && e.componentSubType === "custom") {
+          // custom series do not support cursor style so we need to set it manually
+          this.chart?.getZr()?.setCursorStyle("default");
        }
      });
-
-      this.chart.setOption({
-        ...this._createOptions(),
-        series: this._getSeries(),
-      });
+      this.chart.setOption({ ...this._createOptions(), series: this.data });
    } finally {
      this._loading = false;
    }
  }

  private _getDataZoomConfig(): DataZoomComponentOption | undefined {
-    const xAxis = (this.options?.xAxis?.[0] ?? this.options?.xAxis) as
-      | XAXisOption
-      | undefined;
-    const yAxis = (this.options?.yAxis?.[0] ?? this.options?.yAxis) as
-      | YAXisOption
-      | undefined;
-    if (xAxis?.type === "value" && yAxis?.type === "category") {
+    const xAxis = (this.options?.xAxis?.[0] ??
+      this.options?.xAxis) as XAXisOption;
+    const yAxis = (this.options?.yAxis?.[0] ??
+      this.options?.yAxis) as YAXisOption;
+    if (xAxis.type === "value" && yAxis.type === "category") {
      // vertical data zoom doesn't work well in this case and horizontal is pointless
      return undefined;
    }
@@ -397,12 +270,20 @@ export class HaChartBase extends LitElement {
                : undefined;
        }
        return {
-          axisLine: { show: false },
-          splitLine: { show: true },
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+          },
          ...axis,
          axisLabel: {
            formatter: this._formatTimeLabel,
-            rich: { bold: { fontWeight: "bold" } },
+            rich: {
+              bold: {
+                fontWeight: "bold",
+              },
+            },
            hideOverlap: true,
            ...axis.axisLabel,
          },
@@ -413,18 +294,11 @@ export class HaChartBase extends LitElement {
    const options = {
      animation: !this._reducedMotion,
      darkMode: this._themes.darkMode ?? false,
-      aria: { show: true },
-      dataZoom: this._getDataZoomConfig(),
-      toolbox: {
-        top: Infinity,
-        left: Infinity,
-        feature: {
-          dataZoom: { show: true, yAxisIndex: false, filterMode: "none" },
-        },
-        iconStyle: { opacity: 0 },
+      aria: {
+        show: true,
      },
+      dataZoom: this._getDataZoomConfig(),
      ...this.options,
-      legend: { show: false },
      xAxis,
    };

@@ -456,28 +330,42 @@ export class HaChartBase extends LitElement {
        fontFamily: "Roboto, Noto, sans-serif",
      },
      title: {
-        textStyle: { color: style.getPropertyValue("--primary-text-color") },
+        textStyle: {
+          color: style.getPropertyValue("--primary-text-color"),
+        },
        subtextStyle: {
          color: style.getPropertyValue("--secondary-text-color"),
        },
      },
      line: {
-        lineStyle: { width: 1.5 },
+        lineStyle: {
+          width: 1.5,
+        },
        symbolSize: 1,
        symbol: "circle",
        smooth: false,
      },
-      bar: { itemStyle: { barBorderWidth: 1.5 } },
+      bar: {
+        itemStyle: {
+          barBorderWidth: 1.5,
+        },
+      },
      categoryAxis: {
-        axisLine: { show: false },
-        axisTick: { show: false },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
        axisLabel: {
          show: true,
          color: style.getPropertyValue("--primary-text-color"),
        },
        splitLine: {
          show: false,
-          lineStyle: { color: style.getPropertyValue("--divider-color") },
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
        },
        splitArea: {
          show: false,
@@ -492,11 +380,15 @@ export class HaChartBase extends LitElement {
      valueAxis: {
        axisLine: {
          show: true,
-          lineStyle: { color: style.getPropertyValue("--divider-color") },
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
        },
        axisTick: {
          show: true,
-          lineStyle: { color: style.getPropertyValue("--divider-color") },
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
        },
        axisLabel: {
          show: true,
@@ -504,7 +396,9 @@ export class HaChartBase extends LitElement {
        },
        splitLine: {
          show: true,
-          lineStyle: { color: style.getPropertyValue("--divider-color") },
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
        },
        splitArea: {
          show: false,
@@ -519,11 +413,15 @@ export class HaChartBase extends LitElement {
      logAxis: {
        axisLine: {
          show: true,
-          lineStyle: { color: style.getPropertyValue("--divider-color") },
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
        },
        axisTick: {
          show: true,
-          lineStyle: { color: style.getPropertyValue("--divider-color") },
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
        },
        axisLabel: {
          show: true,
@@ -531,7 +429,9 @@ export class HaChartBase extends LitElement {
        },
        splitLine: {
          show: true,
-          lineStyle: { color: style.getPropertyValue("--divider-color") },
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
        },
        splitArea: {
          show: false,
@@ -546,11 +446,15 @@ export class HaChartBase extends LitElement {
      timeAxis: {
        axisLine: {
          show: true,
-          lineStyle: { color: style.getPropertyValue("--divider-color") },
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
        },
        axisTick: {
          show: true,
-          lineStyle: { color: style.getPropertyValue("--divider-color") },
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
        },
        axisLabel: {
          show: true,
@@ -558,7 +462,9 @@ export class HaChartBase extends LitElement {
        },
        splitLine: {
          show: true,
-          lineStyle: { color: style.getPropertyValue("--divider-color") },
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
        },
        splitArea: {
          show: false,
@@ -571,7 +477,9 @@ export class HaChartBase extends LitElement {
        },
      },
      legend: {
-        textStyle: { color: style.getPropertyValue("--primary-text-color") },
+        textStyle: {
+          color: style.getPropertyValue("--primary-text-color"),
+        },
        inactiveColor: style.getPropertyValue("--disabled-text-color"),
        pageIconColor: style.getPropertyValue("--primary-text-color"),
        pageIconInactiveColor: style.getPropertyValue("--disabled-text-color"),
@@ -587,23 +495,18 @@ export class HaChartBase extends LitElement {
          fontSize: 12,
        },
        axisPointer: {
-          lineStyle: { color: style.getPropertyValue("--info-color") },
-          crossStyle: { color: style.getPropertyValue("--info-color") },
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
+          crossStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
        },
      },
      timeline: {},
    };
  }

-  private _getSeries() {
-    if (!Array.isArray(this.data)) {
-      return this.data;
-    }
-    return this.data.filter(
-      (d) => !this._hiddenDatasets.has(String(d.name ?? d.id))
-    );
-  }
-
  private _getDefaultHeight() {
    return Math.max(this.clientWidth / 2, 200);
  }
@@ -614,18 +517,18 @@ export class HaChartBase extends LitElement {
    }
    if (!this._originalZrFlush) {
      const dataSize = ensureArray(this.data).reduce(
-        (acc, series) => acc + ((series.data as any[]) || []).length,
+        (acc, series) => acc + (series.data as any[]).length,
        0
      );
      if (dataSize > 10000) {
-        // delay the last bit of the render to avoid blocking the main thread
-        // this is not that impactful with sampling enabled but it doesn't hurt to have it
+        // for large datasets zr.flush takes 30-40% of the render time
+        // so we delay it a bit to avoid blocking the main thread
        const zr = this.chart.getZr();
-        this._originalZrFlush = zr.flush;
+        this._originalZrFlush = zr.flush.bind(zr);
        zr.flush = () => {
          setTimeout(() => {
-            this._originalZrFlush?.call(zr);
-          }, 5);
+            this._originalZrFlush?.();
+          }, 10);
        };
      }
    }
@@ -633,73 +536,23 @@ export class HaChartBase extends LitElement {
    this.chart.setOption(options, { replaceMerge });
  }

-  private _handleClickZoom = (e: ECElementEvent) => {
-    if (!this.chart) {
-      return;
-    }
-    const range = this._isZoomed
-      ? [0, 100]
-      : [
-          (e.offsetX / this.chart.getWidth()) * 100 - 15,
-          (e.offsetX / this.chart.getWidth()) * 100 + 15,
-        ];
-    this.chart.dispatchAction({
-      type: "dataZoom",
-      start: range[0],
-      end: range[1],
-    });
-  };
-
  private _handleZoomReset() {
    this.chart?.dispatchAction({ type: "dataZoom", start: 0, end: 100 });
  }

-  private _legendClick(ev: any) {
-    if (!this.chart) {
-      return;
-    }
-    const name = ev.currentTarget?.name;
-    if (this._hiddenDatasets.has(name)) {
-      this._hiddenDatasets.delete(name);
-      fireEvent(this, "dataset-unhidden", { name });
-    } else {
-      this._hiddenDatasets.add(name);
-      fireEvent(this, "dataset-hidden", { name });
-    }
-    this.requestUpdate("_hiddenDatasets");
-  }
-
-  private _toggleExpandedLegend() {
-    this.expandLegend = !this.expandLegend;
-    setTimeout(() => {
-      this.chart?.resize();
-    });
-  }
-
  static styles = css`
    :host {
      display: block;
      position: relative;
      letter-spacing: normal;
    }
-    .container {
-      display: flex;
-      flex-direction: column;
-      position: relative;
-    }
-    .container.has-height {
-      max-height: var(--chart-max-height, 350px);
-    }
    .chart-container {
-      width: 100%;
+      position: relative;
      max-height: var(--chart-max-height, 350px);
    }
-    .has-height .chart-container {
-      flex: 1;
-    }
    .chart {
-      height: 100%;
      width: 100%;
+      height: 100%;
    }
    .zoom-reset {
      position: absolute;
@@ -711,66 +564,8 @@ export class HaChartBase extends LitElement {
      color: var(--primary-color);
      border: 1px solid var(--divider-color);
    }
-    .chart-legend {
-      max-height: 60%;
-      overflow-y: auto;
-      padding: 12px 0 0;
-      font-size: 12px;
-      color: var(--primary-text-color);
-    }
-    .chart-legend ul {
-      margin: 0;
-      padding: 0;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      gap: 8px;
-    }
-    .chart-legend li {
-      height: 24px;
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
-      padding: 0 2px;
-      box-sizing: border-box;
-      overflow: hidden;
-    }
-    .chart-legend.multiple-items li {
-      max-width: 220px;
-    }
-    .chart-legend .hidden {
-      color: var(--secondary-text-color);
-    }
-    .chart-legend .label {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-    .chart-legend .bullet {
-      border-width: 1px;
-      border-style: solid;
-      border-radius: 50%;
-      display: block;
-      height: 16px;
-      width: 16px;
-      margin-right: 4px;
-      flex-shrink: 0;
-      box-sizing: border-box;
-      margin-inline-end: 4px;
-      margin-inline-start: initial;
-      direction: var(--direction);
-    }
-    .chart-legend .hidden .bullet {
-      border-color: var(--secondary-text-color) !important;
-      background-color: transparent !important;
-    }
-    ha-assist-chip {
-      height: 100%;
-      --_label-text-weight: 500;
-      --_leading-space: 8px;
-      --_trailing-space: 8px;
-      --_icon-label-space: 4px;
+    .has-legend .zoom-reset {
+      top: 64px;
    }
  `;
 }
@@ -1,17 +1,9 @@
-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 { SankeyChart } from "echarts/charts";
-import memoizeOne from "memoize-one";
+import { customElement, property } from "lit/decorators";
+import { LitElement, html, css, svg, nothing } from "lit";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
+import memoizeOne from "memoize-one";
 import type { HomeAssistant } from "../../types";
-import type { ECOption } from "../../resources/echarts";
 import { measureTextWidth } from "../../util/text";
-import "./ha-chart-base";
-import { NODE_SIZE } from "../trace/hat-graph-const";
-import "../ha-alert";

 export interface Node {
  id: string;
@@ -33,14 +25,34 @@ export interface SankeyChartData {
  links: Link[];
 }

-type ProcessedLink = Link & {
-  value: number;
+type ProcessedNode = Node & {
+  x: number;
+  y: number;
+  size: number;
 };

-const OVERFLOW_MARGIN = 5;
+type ProcessedLink = Link & {
+  value: number;
+  offset: {
+    source: number;
+    target: number;
+  };
+  passThroughNodeIds: string[];
+};
+
+interface Section {
+  nodes: ProcessedNode[];
+  offset: number;
+  index: number;
+  totalValue: number;
+  statePerPixel: number;
+}
+
+const MIN_SIZE = 3;
+const DEFAULT_COLOR = "var(--primary-color)";
+const NODE_WIDTH = 15;
 const FONT_SIZE = 12;
-const NODE_GAP = 8;
-const LABEL_DISTANCE = 5;
+const MIN_DISTANCE = FONT_SIZE / 2;

@customElement("ha-sankey-chart")
 export class HaSankeyChart extends LitElement {
@@ -53,144 +65,141 @@ export class HaSankeyChart extends LitElement {

  @property({ type: Boolean }) public vertical = false;

-  @property({ type: String, attribute: false }) public valueFormatter?: (
-    value: number
-  ) => string;
+  @property({ attribute: false }) public loadingText?: string;

-  public chart?: EChartsType;
+  private _statePerPixel = 0;

-  @state() private _sizeController = new ResizeController(this, {
+  private _sizeController = new ResizeController(this, {
    callback: (entries) => entries[0]?.contentRect,
  });

-  render() {
-    const options = {
-      grid: {
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-      },
-      tooltip: {
-        trigger: "item",
-        formatter: this._renderTooltip,
-        appendTo: document.body,
-      },
-    } as ECOption;
-
-    return html`<ha-chart-base
-      .data=${this._createData(this.data, this._sizeController.value?.width)}
-      .options=${options}
-      height="100%"
-      .extraComponents=${[SankeyChart]}
-    ></ha-chart-base>`;
+  disconnectedCallback() {
+    super.disconnectedCallback();
  }

-  private _renderTooltip = (params: CallbackDataParams) => {
-    const data = params.data as Record<string, any>;
-    const value = this.valueFormatter
-      ? this.valueFormatter(data.value)
-      : data.value;
-    if (data.id) {
-      const node = this.data.nodes.find((n) => n.id === data.id);
-      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 `${source?.label ?? data.source} → ${target?.label ?? data.target}<br>${value}`;
-    }
-    return null;
-  };
+  willUpdate() {
+    this._statePerPixel = 0;
+  }

-  private _createData = memoizeOne((data: SankeyChartData, width = 0) => {
-    const filteredNodes = data.nodes.filter((n) => n.value > 0);
-    const indexes = [...new Set(filteredNodes.map((n) => n.index))];
-    const links = this._processLinks(filteredNodes, data.links);
-    const sectionWidth = width / indexes.length;
-    const labelSpace = sectionWidth - NODE_SIZE - LABEL_DISTANCE;
+  render() {
+    if (!this._sizeController.value) {
+      return this.loadingText ?? nothing;
+    }

-    return {
-      id: "sankey",
-      type: "sankey",
-      nodes: filteredNodes.map((node) => ({
-        id: node.id,
-        value: node.value,
-        itemStyle: {
-          color: node.color,
-        },
-        depth: node.index,
-      })),
-      links,
-      draggable: false,
-      orient: this.vertical ? "vertical" : "horizontal",
-      nodeWidth: 15,
-      nodeGap: NODE_GAP,
-      lineStyle: {
-        color: "gradient",
-        opacity: 0.4,
-      },
-      layoutIterations: 0,
-      label: {
-        formatter: (params) =>
-          data.nodes.find((node) => node.id === (params.data as Node).id)
-            ?.label ?? (params.data as Node).id,
-        position: this.vertical ? "bottom" : "right",
-        distance: LABEL_DISTANCE,
-        minMargin: 5,
-        overflow: "break",
-      },
-      labelLayout: (params) => {
-        if (this.vertical) {
-          // reduce the label font size so the longest word fits on one line
-          const longestWord = params.text
-            .split(" ")
-            .reduce(
-              (longest, current) =>
-                longest.length > current.length ? longest : current,
-              ""
+    const { width, height } = this._sizeController.value;
+    const { nodes, paths } = this._processNodesAndPaths(
+      this.data.nodes,
+      this.data.links
+    );
+
+    return html`
+      <svg
+        width=${width}
+        height=${height}
+        viewBox="0 0 ${width} ${height}"
+        preserveAspectRatio="none"
+      >
+        <defs>
+          ${paths.map(
+            (path, i) => svg`
+            <linearGradient id="gradient${path.sourceNode.id}.${path.targetNode.id}.${i}" gradientTransform="${
+              this.vertical ? "rotate(90)" : ""
+            }">
+              <stop offset="0%" stop-color="${path.sourceNode.color}"></stop>
+              <stop offset="100%" stop-color="${path.targetNode.color}"></stop>
+            </linearGradient>
+          `
+          )}
+        </defs>
+        ${paths.map(
+          (path, i) =>
+            svg`
+            <path d="${path.path.map(([cmd, x, y]) => `${cmd}${x},${y}`).join(" ")} Z"
+                fill="url(#gradient${path.sourceNode.id}.${path.targetNode.id}.${i})" fill-opacity="0.4" />
+          `
+        )}
+        ${nodes.map((node) =>
+          node.passThrough
+            ? nothing
+            : svg`
+              <g transform="translate(${node.x},${node.y})">
+                <rect
+                  class="node"
+                  width=${this.vertical ? node.size : NODE_WIDTH}
+                  height=${this.vertical ? NODE_WIDTH : node.size}
+                  style="fill: ${node.color}"
+                >
+                  <title>${node.tooltip}</title>
+                </rect>
+                ${
+                  this.vertical
+                    ? nothing
+                    : svg`
+                      <text 
+                        class="node-label" 
+                        x=${NODE_WIDTH + 5}
+                        y=${node.size / 2}
+                        text-anchor="start" 
+                        dominant-baseline="middle"
+                      >${node.label}</text>
+                    `
+                }
+              </g>
+            `
+        )}
+      </svg>
+      ${this.vertical
+        ? nodes.map((node) => {
+            if (!node.label) {
+              return nothing;
+            }
+            const labelWidth = MIN_DISTANCE + node.size;
+            const fontSize = this._getVerticalLabelFontSize(
+              node.label,
+              labelWidth
            );
-          const wordWidth = measureTextWidth(longestWord, FONT_SIZE);
-          const fontSize = Math.min(
-            FONT_SIZE,
-            (params.rect.width / wordWidth) * FONT_SIZE
-          );
-          return {
-            fontSize: fontSize > 1 ? fontSize : 0,
-            width: params.rect.width,
-            align: "center",
-          };
-        }
+            return html`<div
+              class="node-label vertical"
+              style="
+                    left: ${node.x - MIN_DISTANCE / 2}px; 
+                    top: ${node.y + NODE_WIDTH}px; 
+                    width: ${labelWidth}px; 
+                    height: ${FONT_SIZE * 3}px;
+                    font-size: ${fontSize}px;
+                    line-height: ${fontSize}px;
+                  "
+              title=${node.label}
+            >
+              ${node.label}
+            </div>`;
+          })
+        : nothing}
+    `;
+  }

-        // estimate the number of lines after the label is wrapped
-        // this is a very rough estimate, but it works for now
-        const lineCount = Math.ceil(params.labelRect.width / labelSpace);
-        // `overflow: "break"` allows the label to overflow outside its height, so we need to account for that
-        const fontSize = Math.min(
-          (params.rect.height / lineCount) * FONT_SIZE,
-          FONT_SIZE
-        );
-        return {
-          fontSize,
-          lineHeight: fontSize,
-          width: labelSpace,
-          height: params.rect.height,
-        };
-      },
-      top: this.vertical ? 0 : OVERFLOW_MARGIN,
-      bottom: this.vertical ? 25 : OVERFLOW_MARGIN,
-      left: this.vertical ? OVERFLOW_MARGIN : 0,
-      right: this.vertical ? OVERFLOW_MARGIN : labelSpace + LABEL_DISTANCE,
-      emphasis: {
-        focus: "adjacency",
-      },
-    } as SankeySeriesOption;
-  });
+  private _processNodesAndPaths = memoizeOne(
+    (rawNodes: Node[], rawLinks: Link[]) => {
+      const filteredNodes = rawNodes.filter((n) => n.value > 0);
+      const indexes = [...new Set(filteredNodes.map((n) => n.index))].sort();
+      const { links, passThroughNodes } = this._processLinks(
+        filteredNodes,
+        indexes,
+        rawLinks
+      );
+      const nodes = this._processNodes(
+        [...filteredNodes, ...passThroughNodes],
+        indexes
+      );
+      const paths = this._processPaths(nodes, links);
+      return { nodes, paths };
+    }
+  );

-  private _processLinks(nodes: Node[], rawLinks: Link[]) {
+  private _processLinks(nodes: Node[], indexes: number[], rawLinks: Link[]) {
    const accountedIn = new Map<string, number>();
    const accountedOut = new Map<string, number>();
    const links: ProcessedLink[] = [];
+    const passThroughNodes: Node[] = [];
    rawLinks.forEach((link) => {
      const sourceNode = nodes.find((n) => n.id === link.source);
      const targetNode = nodes.find((n) => n.id === link.target);
@@ -213,25 +222,307 @@ export class HaSankeyChart extends LitElement {
      accountedIn.set(targetNode.id, targetAccounted + value);
      accountedOut.set(sourceNode.id, sourceAccounted + value);

+      // handle links across sections
+      const sourceIndex = indexes.findIndex((i) => i === sourceNode.index);
+      const targetIndex = indexes.findIndex((i) => i === targetNode.index);
+      const passThroughSections = indexes.slice(sourceIndex + 1, targetIndex);
+      // create pass-through nodes to reserve space
+      const passThroughNodeIds = passThroughSections.map((index) => {
+        const node = {
+          passThrough: true,
+          id: `${sourceNode.id}-${targetNode.id}-${index}`,
+          value,
+          index,
+        };
+        passThroughNodes.push(node);
+        return node.id;
+      });
+
      if (value > 0) {
        links.push({
          ...link,
          value,
+          offset: {
+            source: sourceAccounted / (sourceNode.value || 1),
+            target: targetAccounted / (targetNode.value || 1),
+          },
+          passThroughNodeIds,
        });
      }
    });
-    return links;
+    return { links, passThroughNodes };
+  }
+
+  private _processNodes(filteredNodes: Node[], indexes: number[]) {
+    // add MIN_DISTANCE as padding
+    const sectionSize = this.vertical
+      ? this._sizeController.value!.width - MIN_DISTANCE * 2
+      : this._sizeController.value!.height - MIN_DISTANCE * 2;
+
+    const nodesPerSection: Record<number, Node[]> = {};
+    filteredNodes.forEach((node) => {
+      if (!nodesPerSection[node.index]) {
+        nodesPerSection[node.index] = [node];
+      } else {
+        nodesPerSection[node.index].push(node);
+      }
+    });
+
+    const sectionFlexSize = this._getSectionFlexSize(
+      Object.values(nodesPerSection)
+    );
+
+    const sections: Section[] = indexes.map((index, i) => {
+      const nodes: ProcessedNode[] = nodesPerSection[index].map(
+        (node: Node) => ({
+          ...node,
+          color: node.color || DEFAULT_COLOR,
+          x: 0,
+          y: 0,
+          size: 0,
+        })
+      );
+      const availableSpace =
+        sectionSize - (nodes.length * MIN_DISTANCE - MIN_DISTANCE);
+      const totalValue = nodes.reduce(
+        (acc: number, node: Node) => acc + node.value,
+        0
+      );
+      const { nodes: sizedNodes, statePerPixel } = this._setNodeSizes(
+        nodes,
+        availableSpace,
+        totalValue
+      );
+      return {
+        nodes: sizedNodes,
+        offset: sectionFlexSize * i,
+        index,
+        totalValue,
+        statePerPixel,
+      };
+    });
+
+    sections.forEach((section) => {
+      // calc sizes again with the best statePerPixel
+      let totalSize = 0;
+      if (section.statePerPixel !== this._statePerPixel) {
+        section.nodes.forEach((node) => {
+          const size = Math.max(
+            MIN_SIZE,
+            Math.floor(node.value / this._statePerPixel)
+          );
+          totalSize += size;
+          node.size = size;
+        });
+      } else {
+        totalSize = section.nodes.reduce((sum, b) => sum + b.size, 0);
+      }
+      // calc margin between boxes
+      const emptySpace = sectionSize - totalSize;
+      const spacerSize = emptySpace / (section.nodes.length - 1);
+
+      // account for MIN_DISTANCE padding and center single node sections
+      let offset =
+        section.nodes.length > 1 ? MIN_DISTANCE : emptySpace / 2 + MIN_DISTANCE;
+      // calc positions - swap x/y for vertical layout
+      section.nodes.forEach((node) => {
+        if (this.vertical) {
+          node.x = offset;
+          node.y = section.offset;
+        } else {
+          node.x = section.offset;
+          node.y = offset;
+        }
+        offset += node.size + spacerSize;
+      });
+    });
+
+    return sections.flatMap((section) => section.nodes);
+  }
+
+  private _processPaths(nodes: ProcessedNode[], links: ProcessedLink[]) {
+    const flowDirection = this.vertical ? "y" : "x";
+    const orthDirection = this.vertical ? "x" : "y"; // orthogonal to the flow
+    const nodesById = new Map(nodes.map((n) => [n.id, n]));
+    return links.map((link) => {
+      const { source, target, value, offset, passThroughNodeIds } = link;
+      const pathNodes = [source, ...passThroughNodeIds, target].map(
+        (id) => nodesById.get(id)!
+      );
+      const offsets = [
+        offset.source,
+        ...link.passThroughNodeIds.map(() => 0),
+        offset.target,
+      ];
+
+      const sourceNode = pathNodes[0];
+      const targetNode = pathNodes[pathNodes.length - 1];
+
+      let path: [string, number, number][] = [
+        [
+          "M",
+          sourceNode[flowDirection] + NODE_WIDTH,
+          sourceNode[orthDirection] + offset.source * sourceNode.size,
+        ],
+      ]; // starting point
+
+      // traverse the path forwards. stop before the last node
+      for (let i = 0; i < pathNodes.length - 1; i++) {
+        const node = pathNodes[i];
+        const nextNode = pathNodes[i + 1];
+        const flowMiddle =
+          (nextNode[flowDirection] - node[flowDirection]) / 2 +
+          node[flowDirection];
+        const orthStart = node[orthDirection] + offsets[i] * node.size;
+        const orthEnd =
+          nextNode[orthDirection] + offsets[i + 1] * nextNode.size;
+        path.push(
+          ["L", node[flowDirection] + NODE_WIDTH, orthStart],
+          ["C", flowMiddle, orthStart],
+          ["", flowMiddle, orthEnd],
+          ["", nextNode[flowDirection], orthEnd]
+        );
+      }
+      // traverse the path backwards. stop before the first node
+      for (let i = pathNodes.length - 1; i > 0; i--) {
+        const node = pathNodes[i];
+        const prevNode = pathNodes[i - 1];
+        const flowMiddle =
+          (node[flowDirection] - prevNode[flowDirection]) / 2 +
+          prevNode[flowDirection];
+        const orthStart =
+          node[orthDirection] +
+          offsets[i] * node.size +
+          Math.max((value / (node.value || 1)) * node.size, 0);
+        const orthEnd =
+          prevNode[orthDirection] +
+          offsets[i - 1] * prevNode.size +
+          Math.max((value / (prevNode.value || 1)) * prevNode.size, 0);
+        path.push(
+          ["L", node[flowDirection], orthStart],
+          ["C", flowMiddle, orthStart],
+          ["", flowMiddle, orthEnd],
+          ["", prevNode[flowDirection] + NODE_WIDTH, orthEnd]
+        );
+      }
+
+      if (this.vertical) {
+        // Just swap x and y coordinates for vertical layout
+        path = path.map((c) => [c[0], c[2], c[1]]);
+      }
+      return {
+        sourceNode,
+        targetNode,
+        value,
+        path,
+      };
+    });
+  }
+
+  private _setNodeSizes(
+    nodes: ProcessedNode[],
+    availableSpace: number,
+    totalValue: number
+  ): { nodes: ProcessedNode[]; statePerPixel: number } {
+    const statePerPixel = totalValue / availableSpace;
+    if (statePerPixel > this._statePerPixel) {
+      this._statePerPixel = statePerPixel;
+    }
+    let deficitHeight = 0;
+    const result = nodes.map((node) => {
+      if (node.size === MIN_SIZE) {
+        return node;
+      }
+      let size = Math.floor(node.value / this._statePerPixel);
+      if (size < MIN_SIZE) {
+        deficitHeight += MIN_SIZE - size;
+        size = MIN_SIZE;
+      }
+      return {
+        ...node,
+        size,
+      };
+    });
+    if (deficitHeight > 0) {
+      return this._setNodeSizes(
+        result,
+        availableSpace - deficitHeight,
+        totalValue
+      );
+    }
+    return { nodes: result, statePerPixel: this._statePerPixel };
+  }
+
+  private _getSectionFlexSize(nodesPerSection: Node[][]): number {
+    const fullSize = this.vertical
+      ? this._sizeController.value!.height
+      : this._sizeController.value!.width;
+    if (nodesPerSection.length < 2) {
+      return fullSize;
+    }
+    let lastSectionFlexSize: number;
+    if (this.vertical) {
+      lastSectionFlexSize = FONT_SIZE * 2 + NODE_WIDTH; // estimated based on the font size + some margin
+    } else {
+      // Estimate the width needed for the last section based on label length
+      const lastIndex = nodesPerSection.length - 1;
+      const lastSectionNodes = nodesPerSection[lastIndex];
+      const TEXT_PADDING = 5; // Padding between node and text
+      lastSectionFlexSize =
+        lastSectionNodes.length > 0
+          ? Math.max(
+              ...lastSectionNodes.map(
+                (node) =>
+                  NODE_WIDTH +
+                  TEXT_PADDING +
+                  (node.label ? measureTextWidth(node.label, FONT_SIZE) : 0)
+              )
+            )
+          : 0;
+    }
+    // Calculate the flex size for other sections
+    const remainingSize = fullSize - lastSectionFlexSize;
+    const flexSize = remainingSize / (nodesPerSection.length - 1);
+    // if the last section is bigger than the others, we make them all the same size
+    // this is to prevent the last section from squishing the others
+    return lastSectionFlexSize < flexSize
+      ? flexSize
+      : fullSize / nodesPerSection.length;
+  }
+
+  private _getVerticalLabelFontSize(label: string, labelWidth: number): number {
+    // reduce the label font size so the longest word fits on one line
+    const longestWord = label
+      .split(" ")
+      .reduce(
+        (longest, current) =>
+          longest.length > current.length ? longest : current,
+        ""
+      );
+    const wordWidth = measureTextWidth(longestWord, FONT_SIZE);
+    return Math.min(FONT_SIZE, (labelWidth / wordWidth) * FONT_SIZE);
  }

  static styles = css`
    :host {
      display: block;
      flex: 1;
-      background: var(--ha-card-background, var(--card-background-color));
+      background: var(--ha-card-background, var(--card-background-color, #000));
+      overflow: hidden;
+      position: relative;
    }
-    ha-chart-base {
-      width: 100%;
-      height: 100%;
+    svg {
+      overflow: visible;
+      position: absolute;
+    }
+    .node-label {
+      font-size: ${FONT_SIZE}px;
+      fill: var(--primary-text-color, white);
+    }
+    .node-label.vertical {
+      position: absolute;
+      text-align: center;
+      overflow: hidden;
    }
  `;
 }
--- a/Show More
+++ b/Show More