Keep number

Stop propogation of event
Use type
2026-05-18 15:17:09 +00:00 · 2025-09-04 14:04:07 +01:00 · 2025-09-04 13:54:05 +01:00 · 2025-09-04 13:49:49 +01:00 · 2025-09-04 13:46:58 +01:00 · 2025-09-04 13:29:03 +01:00
695 changed files with 25990 additions and 9450 deletions
@@ -310,7 +310,11 @@ export class DialogMyFeature
        .heading=${createCloseHeading(this.hass, this._params.title)}
      >
        <!-- Dialog content -->
-        <ha-button @click=${this.closeDialog} slot="secondaryAction">
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="secondaryAction"
+        >
          ${this.hass.localize("ui.common.cancel")}
        </ha-button>
        <ha-button @click=${this._submit} slot="primaryAction">
@@ -21,7 +21,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          ref: dev

@@ -56,7 +56,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          ref: master

@@ -24,7 +24,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
        uses: actions/setup-node@v4.4.0
        with:
@@ -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.4
        with:
          path: |
            node_modules/.cache/prettier
@@ -58,7 +58,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
        uses: actions/setup-node@v4.4.0
        with:
@@ -76,7 +76,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
        uses: actions/setup-node@v4.4.0
        with:
@@ -100,7 +100,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
        uses: actions/setup-node@v4.4.0
        with:
@@ -23,7 +23,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          # We must fetch at least the immediate parents so that if this is
          # a pull request then we can checkout the head.
@@ -22,7 +22,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          ref: dev

@@ -57,7 +57,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          ref: master

@@ -16,7 +16,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Setup Node
        uses: actions/setup-node@v4.4.0
@@ -21,7 +21,7 @@ jobs:
    if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Setup Node
        uses: actions/setup-node@v4.4.0
@@ -20,7 +20,7 @@ jobs:
      contents: write
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Set up Python ${{ env.PYTHON_VERSION }}
        uses: actions/setup-python@v5
@@ -17,7 +17,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@v3.0.0
+        uses: relative-ci/agent-action@v3.0.1
        with:
          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
          token: ${{ github.token }}
@@ -23,7 +23,7 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Set up Python ${{ env.PYTHON_VERSION }}
        uses: actions/setup-python@v5
@@ -74,7 +74,7 @@ jobs:
          echo "home-assistant-frontend==$version" > ./requirements.txt

      - name: Build wheels
-        uses: home-assistant/wheels@2025.03.0
+        uses: home-assistant/wheels@2025.07.0
        with:
          abi: cp313
          tag: musllinux_1_2
@@ -90,7 +90,7 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
        uses: actions/setup-node@v4.4.0
        with:
@@ -119,7 +119,7 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
        uses: actions/setup-node@v4.4.0
        with:
@@ -9,7 +9,7 @@ jobs:
  check-authorization:
    runs-on: ubuntu-latest
    # Only run if this is a Task issue type (from the issue form)
-    if: github.event.issue.issue_type == 'Task'
+    if: github.event.issue.type.name == 'Task'
    steps:
      - name: Check if user is authorized
        uses: actions/github-script@v7
@@ -1,6 +1,7 @@
 name: Translations

 on:
+  workflow_dispatch:
  push:
    branches:
      - dev
@@ -13,7 +14,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Upload Translations
        run: |
@@ -6,4 +6,4 @@ enableGlobalCache: false

 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.9.2.cjs
+yarnPath: .yarn/releases/yarn-4.9.4.cjs
@@ -0,0 +1,8 @@
+# People marked here will be automatically requested for a review
+# when the code that they own is touched.
+# https://github.com/blog/2392-introducing-code-owners
+# https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners
+
+# Part of the frontend that mobile developper should review
+src/external_app/ @bgoncal @TimoPtr
+test/external_app/ @bgoncal @TimoPtr
@@ -14,5 +14,5 @@
  "name": "Home Assistant Cast",
  "short_name": "HA Cast",
  "start_url": "/?homescreen=1",
-  "theme_color": "#03A9F4"
+  "theme_color": "#009ac7"
 }
@@ -1,5 +1,3 @@
-import "@material/mwc-button/mwc-button";
-
 import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
@@ -20,6 +18,7 @@ import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
 import "../../../../src/components/ha-icon";
 import "../../../../src/components/ha-list";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";
 import {
@@ -63,12 +62,20 @@ class HcCast extends LitElement {
              <p class="question action-item">
                Stay logged in?
                <span>
-                  <mwc-button @click=${this._handleSaveTokens}>
+                  <ha-button
+                    appearance="plain"
+                    size="small"
+                    @click=${this._handleSaveTokens}
+                  >
                    YES
-                  </mwc-button>
-                  <mwc-button @click=${this._handleSkipSaveTokens}>
+                  </ha-button>
+                  <ha-button
+                    appearance="plain"
+                    size="small"
+                    @click=${this._handleSkipSaveTokens}
+                  >
                    NO
-                  </mwc-button>
+                  </ha-button>
                </span>
              </p>
            `
@@ -78,10 +85,10 @@ class HcCast extends LitElement {
          : !this.castManager.status
            ? html`
                <p class="center-item">
-                  <mwc-button raised @click=${this._handleLaunch}>
-                    <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
+                  <ha-button @click=${this._handleLaunch}>
+                    <ha-svg-icon slot="start" .path=${mdiCast}></ha-svg-icon>
                    Start Casting
-                  </mwc-button>
+                  </ha-button>
                </p>
              `
            : html`
@@ -121,14 +128,22 @@ class HcCast extends LitElement {
        <div class="card-actions">
          ${this.castManager.status
            ? html`
-                <mwc-button @click=${this._handleLaunch}>
-                  <ha-svg-icon .path=${mdiCastConnected}></ha-svg-icon>
+                <ha-button appearance="plain" @click=${this._handleLaunch}>
+                  <ha-svg-icon
+                    slot="start"
+                    .path=${mdiCastConnected}
+                  ></ha-svg-icon>
                  Manage
-                </mwc-button>
+                </ha-button>
              `
            : ""}
          <div class="spacer"></div>
-          <mwc-button @click=${this._handleLogout}>Log out</mwc-button>
+          <ha-button
+            variant="danger"
+            appearance="plain"
+            @click=${this._handleLogout}
+            >Log out</ha-button
+          >
        </div>
      </hc-layout>
    `;
@@ -245,13 +260,6 @@ class HcCast extends LitElement {
      color: var(--secondary-text-color);
    }

-    mwc-button ha-svg-icon {
-      margin-right: 8px;
-      margin-inline-end: 8px;
-      margin-inline-start: initial;
-      height: 18px;
-    }
-
    ha-list-item ha-icon,
    ha-list-item ha-svg-icon {
      padding: 12px;
@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { mdiCastConnected, mdiCast } from "@mdi/js";
 import type {
  Auth,
@@ -28,6 +27,7 @@ import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
 import "../../../../src/components/ha-textfield";
+import "../../../../src/components/ha-button";

 const seeFAQ = (qid) => html`
  See <a href="./faq.html${qid ? `#${qid}` : ""}">the FAQ</a> for more
@@ -83,11 +83,14 @@ export class HcConnect extends LitElement {
            Unable to connect to ${tokens!.hassUrl}.
          </div>
          <div class="card-actions">
-            <a href="/">
-              <mwc-button> Retry </mwc-button>
-            </a>
+            <ha-button appearance="plain" href="/">Retry</ha-button>
            <div class="spacer"></div>
-            <mwc-button @click=${this._handleLogout}>Log out</mwc-button>
+            <ha-button
+              appearance="plain"
+              variant="danger"
+              @click=${this._handleLogout}
+              >Log out</ha-button
+            >
          </div>
        </hc-layout>
      `;
@@ -128,16 +131,19 @@ export class HcConnect extends LitElement {
            ${this.error ? html` <p class="error">${this.error}</p> ` : ""}
          </div>
          <div class="card-actions">
-            <mwc-button @click=${this._handleDemo}>
+            <ha-button appearance="plain" @click=${this._handleDemo}>
              Show Demo
              <ha-svg-icon
+                slot="end"
                .path=${this.castManager.castState === "CONNECTED"
                  ? mdiCastConnected
                  : mdiCast}
              ></ha-svg-icon>
-            </mwc-button>
+            </ha-button>
            <div class="spacer"></div>
-            <mwc-button @click=${this._handleConnect}>Authorize</mwc-button>
+            <ha-button appearance="plain" @click=${this._handleConnect}
+              >Authorize</ha-button
+            >
          </div>
        </hc-layout>
      `;
@@ -309,10 +315,6 @@ export class HcConnect extends LitElement {
      color: darkred;
    }

-    mwc-button ha-svg-icon {
-      margin-left: 8px;
-    }
-
    .spacer {
      flex: 1;
    }
@@ -5,17 +5,17 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();

 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
  (loadRequestData) => {
    const media = loadRequestData.media;
    // Special handling if it came from Google Assistant
    if (media.entity) {
      media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
      media.contentType = "application/vnd.apple.mpegurl";
      // @ts-ignore
      media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
    }
    return loadRequestData;
  }
@@ -40,7 +40,8 @@ const playDummyMedia = (viewTitle?: string) => {
  loadRequestData.media.contentId =
    "https://cast.home-assistant.io/images/google-nest-hub.png";
  loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
+  loadRequestData.media.streamType =
+    "NONE" as framework.messages.StreamType.NONE;
  const metadata = new framework.messages.GenericMediaMetadata();
  metadata.title = viewTitle;
  loadRequestData.media.metadata = metadata;
@@ -89,7 +90,7 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: framework.system.MessageType.JSON,
+  [CAST_NS]: "json" as framework.system.MessageType.JSON,
 };

 castContext.addCustomMessageListener(
@@ -97,9 +98,7 @@ castContext.addCustomMessageListener(
  // @ts-ignore
  (ev: ReceivedMessage<HassMessage>) => {
    // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
-    if (
-      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
-    ) {
+    if (playerManager.getPlayerState() !== "IDLE") {
      playerManager.stop();
    } else {
      showLovelaceController();
@@ -113,7 +112,7 @@ castContext.addCustomMessageListener(
 const playerManager = castContext.getPlayerManager();

 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
  (loadRequestData) => {
    if (
      loadRequestData.media.contentId ===
@@ -127,24 +126,23 @@ playerManager.setMessageInterceptor(
    // Special handling if it came from Google Assistant
    if (media.entity) {
      media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
      media.contentType = "application/vnd.apple.mpegurl";
      // @ts-ignore
      media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
    }
    return loadRequestData;
  }
 );

 playerManager.addEventListener(
-  framework.events.EventType.MEDIA_STATUS,
+  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
  (event) => {
    if (
-      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
+      event.mediaStatus?.playerState === "IDLE" &&
      event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !==
-        framework.messages.IdleReason.INTERRUPTED
+      event.mediaStatus?.idleReason !== "INTERRUPTED"
    ) {
      // media finished or stopped, return to default Lovelace
      showLovelaceController();
@@ -75,5 +75,5 @@
  "name": "Home Assistant Demo",
  "short_name": "HA Demo",
  "start_url": "/?homescreen=1",
-  "theme_color": "#03A9F4"
+  "theme_color": "#009ac7"
 }
@@ -89,11 +89,14 @@ export class HADemoCard extends LitElement implements LovelaceCard {
          )}
        </div>
        <div class="actions small-hidden">
-          <a href="https://www.home-assistant.io" target="_blank">
-            <ha-button>
-              ${this.hass.localize("ui.panel.page-demo.cards.demo.learn_more")}
-            </ha-button>
-          </a>
+          <ha-button
+            appearance="plain"
+            size="small"
+            href="https://www.home-assistant.io"
+            target="_blank"
+          >
+            ${this.hass.localize("ui.panel.page-demo.cards.demo.learn_more")}
+          </ha-button>
        </div>
      </ha-card>
    `;
@@ -68,7 +68,7 @@
      }
      #ha-launch-screen .ha-launch-screen-spacer-top {
        flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
        padding-top: 48px;
      }
      #ha-launch-screen .ha-launch-screen-spacer-bottom {
@@ -76,7 +76,7 @@
        padding-top: 48px;
      }
      .ohf-logo {
-        margin: max(var(--safe-area-inset-bottom), 48px) 0;
+        margin: max(var(--safe-area-inset-bottom, 0px), 48px) 0;
        display: flex;
        flex-direction: column;
        align-items: center;
@@ -1,11 +1,11 @@
-import "@material/mwc-button/mwc-button";
-import type { Button } from "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { html, LitElement, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-button";
+import type { HaButton } from "../../../src/components/ha-button";

@customElement("demo-black-white-row")
 class DemoBlackWhiteRow extends LitElement {
@@ -25,12 +25,9 @@ class DemoBlackWhiteRow extends LitElement {
              <slot name="light"></slot>
            </div>
            <div class="card-actions">
-              <mwc-button
-                .disabled=${this.disabled}
-                @click=${this.handleSubmit}
-              >
+              <ha-button .disabled=${this.disabled} @click=${this.handleSubmit}>
                Submit
-              </mwc-button>
+              </ha-button>
            </div>
          </ha-card>
        </div>
@@ -40,12 +37,9 @@ class DemoBlackWhiteRow extends LitElement {
              <slot name="dark"></slot>
            </div>
            <div class="card-actions">
-              <mwc-button
-                .disabled=${this.disabled}
-                @click=${this.handleSubmit}
-              >
+              <ha-button .disabled=${this.disabled} @click=${this.handleSubmit}>
                Submit
-              </mwc-button>
+              </ha-button>
            </div>
          </ha-card>
          ${this.value
@@ -74,7 +68,7 @@ class DemoBlackWhiteRow extends LitElement {
  }

  handleSubmit(ev) {
-    const content = (ev.target as Button).closest(".content")!;
+    const content = (ev.target as HaButton).closest(".content")!;
    fireEvent(this, "submitted" as any, {
      slot: content.classList.contains("light") ? "light" : "dark",
    });
@@ -1106,7 +1106,7 @@ export default {
      friendly_name: "Philips Hue",
      entity_picture: null,
      description:
-        "Press the button on the bridge to register Philips Hue with Home Assistant.\n\n![Description image](/static/images/config_philips_hue.jpg)",
+        "Press the button on the bridge to register Philips Hue with Home Assistant.",
      submit_caption: "I have pressed the button",
    },
    last_changed: "2018-07-19T10:44:46.515160+00:00",
@@ -18,7 +18,6 @@ import { HaDeviceAction } from "../../../../src/panels/config/automation/action/
 import { HaEventAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-event";
 import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
 import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
-import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media";
 import { HaRepeatAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
 import { HaSequenceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-sequence";
 import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service";
@@ -32,7 +31,6 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
  { name: "Service", actions: [HaServiceAction.defaultConfig] },
  { name: "Condition", actions: [HaConditionAction.defaultConfig] },
  { name: "Delay", actions: [HaDelayAction.defaultConfig] },
-  { name: "Play media", actions: [HaPlayMediaAction.defaultConfig] },
  { name: "Wait", actions: [HaWaitAction.defaultConfig] },
  { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
  { name: "Repeat", actions: [HaRepeatAction.defaultConfig] },
@@ -147,13 +147,13 @@ The `title ` option should not be used without a description.

 <ha-alert alert-type="success">
  This is a success alert — check it out!
-  <mwc-button slot="action" label="Undo"></mwc-button>
+  <ha-button slot="action">Undo</ha-button>
 </ha-alert>

 ```html
 <ha-alert alert-type="success">
  This is a success alert — check it out!
-  <mwc-button slot="action" label="Undo"></mwc-button>
+  <ha-button slot="action">Undo</ha-button>
 </ha-alert>
 ```

@@ -1,10 +1,10 @@
-import "@material/mwc-button/mwc-button";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-logo-svg";

 const alerts: {
@@ -78,13 +78,13 @@ const alerts: {
    title: "Error with action",
    description: "This is a test error alert with action",
    type: "error",
-    actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
+    actionSlot: html`<ha-button size="small" slot="action">restart</ha-button>`,
  },
  {
    title: "Unsaved data",
    description: "You have unsaved data",
    type: "warning",
-    actionSlot: html`<mwc-button slot="action" label="save"></mwc-button>`,
+    actionSlot: html`<ha-button size="small" slot="action">save</ha-button>`,
  },
  {
    title: "Slotted icon",
@@ -108,7 +108,7 @@ const alerts: {
    title: "Slotted action",
    description: "Alert with slotted action",
    type: "info",
-    actionSlot: html`<mwc-button slot="action" label="action"></mwc-button>`,
+    actionSlot: html`<ha-button slot="action">action</ha-button>`,
  },
  {
    description: "Dismissable information (RTL)",
@@ -120,7 +120,7 @@ const alerts: {
    title: "Error with action",
    description: "This is a test error alert with action (RTL)",
    type: "error",
-    actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
+    actionSlot: html`<ha-button slot="action">restart</ha-button>`,
    rtl: true,
  },
  {
@@ -211,7 +211,7 @@ export class DemoHaAlert extends LitElement {
      max-height: 24px;
      width: 24px;
    }
-    mwc-button {
+    ha-button {
      --mdc-theme-primary: var(--primary-text-color);
    }
  `;
@@ -0,0 +1,67 @@
+---
+title: Button
+---
+
+<style>
+  .wrapper {
+    display: flex;
+    gap: 24px;
+  }
+</style>
+
+# Button `<ha-button>`
+
+## Implementation
+
+### Example Usage
+
+<div class="wrapper">
+  <ha-button>
+    simple button
+  </ha-button>
+  <ha-button appearance="plain">
+    plain button
+  </ha-button>
+  <ha-button appearance="filled">
+    filled button
+  </ha-button>
+
+  <ha-button size="small">
+    small
+  </ha-button>
+</div>
+
+```html
+<ha-button> simple button </ha-button>
+
+<ha-button size="small"> small </ha-button>
+```
+
+### API
+
+This component is based on the webawesome button component.
+Check the [webawesome documentation](https://webawesome.com/docs/components/button/) for more details.
+
+**Slots**
+
+- default slot: Label of the button
+  ` - no default
+- `start`: The prefix container (usually for icons).
+  ` - no default
+- `end`: The suffix container (usually for icons).
+  ` - no default
+
+**Properties/Attributes**
+
+| Name       | Type                                           | Default  | Description                                                                       |
+| ---------- | ---------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
+| appearance | "accent"/"filled"/"plain"                      | "accent" | Sets the button appearance.                                                       |
+| variants   | "brand"/"danger"/"neutral"/"warning"/"success" | "brand"  | Sets the button color variant. "brand" is default.                                |
+| size       | "small"/"medium"                               | "medium" | Sets the button size.                                                             |
+| loading    | Boolean                                        | false    | Shows a loading indicator instead of the buttons label and disable buttons click. |
+| disabled   | Boolean                                        | false    | Disables the button and prevents user interaction.                                |
+
+**CSS Custom Properties**
+
+- `--ha-button-height` - Height of the button.
+- `--ha-button-border-radius` - Border radius of the button. Defaults to `var(--ha-border-radius-pill)`.
@@ -0,0 +1,171 @@
+import { mdiHome } from "@mdi/js";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import { titleCase } from "../../../../src/common/string/title-case";
+import "../../../../src/components/ha-button";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-svg-icon";
+import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
+
+const appearances = ["accent", "filled", "plain"];
+const variants = ["brand", "danger", "neutral", "warning", "success"];
+
+@customElement("demo-components-ha-button")
+export class DemoHaButton extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-button in ${mode}">
+              <div class="card-content">
+                ${variants.map(
+                  (variant) => html`
+                    <div>
+                      ${appearances.map(
+                        (appearance) => html`
+                          <ha-button
+                            .appearance=${appearance}
+                            .variant=${variant}
+                          >
+                            <ha-svg-icon
+                              .path=${mdiHomeAssistant}
+                              slot="start"
+                            ></ha-svg-icon>
+                            ${titleCase(`${variant} ${appearance}`)}
+                            <ha-svg-icon
+                              .path=${mdiHome}
+                              slot="end"
+                            ></ha-svg-icon>
+                          </ha-button>
+                        `
+                      )}
+                    </div>
+                    <div>
+                      ${appearances.map(
+                        (appearance) => html`
+                          <ha-button
+                            .appearance=${appearance}
+                            .variant=${variant}
+                            size="small"
+                          >
+                            ${titleCase(`${variant} ${appearance}`)}
+                          </ha-button>
+                        `
+                      )}
+                    </div>
+                    <div>
+                      ${appearances.map(
+                        (appearance) => html`
+                          <ha-button
+                            .appearance=${appearance}
+                            .variant=${variant}
+                            loading
+                          >
+                            <ha-svg-icon
+                              .path=${mdiHomeAssistant}
+                              slot="start"
+                            ></ha-svg-icon>
+                            ${titleCase(`${variant} ${appearance}`)}
+                            <ha-svg-icon
+                              .path=${mdiHome}
+                              slot="end"
+                            ></ha-svg-icon>
+                          </ha-button>
+                        `
+                      )}
+                    </div>
+                  `
+                )}
+                ${variants.map(
+                  (variant) => html`
+                    <div>
+                      ${appearances.map(
+                        (appearance) => html`
+                          <ha-button
+                            .variant=${variant}
+                            .appearance=${appearance}
+                            disabled
+                          >
+                            ${titleCase(`${appearance}`)}
+                          </ha-button>
+                        `
+                      )}
+                    </div>
+                    <div>
+                      ${appearances.map(
+                        (appearance) => html`
+                          <ha-button
+                            .variant=${variant}
+                            .appearance=${appearance}
+                            size="small"
+                            disabled
+                          >
+                            ${titleCase(`${appearance}`)}
+                          </ha-button>
+                        `
+                      )}
+                    </div>
+                  `
+                )}
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
+    }
+    .button {
+      padding: unset;
+    }
+    ha-card {
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+    .card-content div {
+      display: flex;
+      gap: 8px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-button": DemoHaButton;
+  }
+}
@@ -135,7 +135,7 @@ export class DemoHaControlSelect extends LitElement {
                .options=${options}
                class=${ifDefined(config.class)}
                @value-changed=${this.handleValueChanged}
-                aria-labelledby=${id}
+                .label=${label}
                ?disabled=${config.disabled}
              >
              </ha-control-select>
@@ -156,7 +156,7 @@ export class DemoHaControlSelect extends LitElement {
                  vertical
                  class=${ifDefined(config.class)}
                  @value-changed=${this.handleValueChanged}
-                  aria-labelledby=${id}
+                  .label=${label}
                  ?disabled=${config.disabled}
                >
                </ha-control-select>
@@ -97,7 +97,7 @@ export class DemoHaBarSlider extends LitElement {
                class=${ifDefined(config.class)}
                @value-changed=${this.handleValueChanged}
                @slider-moved=${this.handleSliderMoved}
-                aria-labelledby=${id}
+                .label=${label}
                .unit=${config.unit}
              >
              </ha-control-slider>
@@ -119,7 +119,7 @@ export class DemoHaBarSlider extends LitElement {
                  class=${ifDefined(config.class)}
                  @value-changed=${this.handleValueChanged}
                  @slider-moved=${this.handleSliderMoved}
-                  aria-label=${label}
+                  .label=${label}
                  .unit=${config.unit}
                >
                </ha-control-slider>
@@ -63,7 +63,7 @@ export class DemoHaControlSwitch extends LitElement {
                @change=${this.handleValueChanged}
                .pathOn=${mdiLightbulb}
                .pathOff=${mdiLightbulbOff}
-                aria-labelledby=${id}
+                .label=${label}
                ?disabled=${config.disabled}
                ?reversed=${config.reversed}
              >
@@ -84,7 +84,7 @@ export class DemoHaControlSwitch extends LitElement {
                  vertical
                  class=${ifDefined(config.class)}
                  @change=${this.handleValueChanged}
-                  aria-label=${label}
+                  .label=${label}
                  .pathOn=${mdiGarageOpen}
                  .pathOff=${mdiGarage}
                  ?disabled=${config.disabled}
@@ -1,5 +1,4 @@
 /* eslint-disable lit/no-template-arrow */
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
@@ -0,0 +1,32 @@
+---
+title: Progress Button
+---
+
+<style>
+  .wrapper {
+    display: flex;
+    gap: 24px;
+  }
+</style>
+
+# Progress Button `<ha-progress-button>`
+
+### API
+
+This component is a wrapper around `<ha-button>` that adds support for showing progress
+
+**Slots**
+
+- default slot: Label of the button
+  ` - no default
+
+**Properties/Attributes**
+
+| Name       | Type                                           | Default   | Description                                        |
+| ---------- | ---------------------------------------------- | --------- | -------------------------------------------------- |
+| label      | string                                         | "accent"  | Sets the button label.                             |
+| disabled   | Boolean                                        | false     | Disables the button if true.                       |
+| progress   | Boolean                                        | false     | Shows a progress indicator on the button.          |
+| appearance | "accent"/"filled"/"plain"                      | "accent"  | Sets the button appearance.                        |
+| variants   | "brand"/"danger"/"neutral"/"warning"/"success" | "brand"   | Sets the button color variant. "brand" is default. |
+| iconPath   | string                                         | undefined | Sets the icon path for the button.                 |
@@ -0,0 +1,139 @@
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-svg-icon";
+import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
+
+@customElement("demo-components-ha-progress-button")
+export class DemoHaProgressButton extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-progress-button in ${mode}">
+              <div class="card-content">
+                <ha-progress-button @click=${this._clickedSuccess}>
+                  Success
+                </ha-progress-button>
+                <ha-progress-button @click=${this._clickedFail}>
+                  Fail
+                </ha-progress-button>
+                <ha-progress-button size="small" @click=${this._clickedSuccess}>
+                  small
+                </ha-progress-button>
+                <ha-progress-button
+                  appearance="filled"
+                  @click=${this._clickedSuccess}
+                >
+                  filled
+                </ha-progress-button>
+                <ha-progress-button
+                  appearance="plain"
+                  @click=${this._clickedSuccess}
+                >
+                  plain
+                </ha-progress-button>
+                <ha-progress-button
+                  variant="warning"
+                  @click=${this._clickedSuccess}
+                >
+                  warning
+                </ha-progress-button>
+                <ha-progress-button
+                  variant="neutral"
+                  @click=${this._clickedSuccess}
+                  label="with icon"
+                  .iconPath=${mdiHomeAssistant}
+                >
+                  With Icon
+                </ha-progress-button>
+                <ha-progress-button progress @click=${this._clickedSuccess}>
+                  progress
+                </ha-progress-button>
+                <ha-progress-button disabled @click=${this._clickedSuccess}>
+                  disabled
+                </ha-progress-button>
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
+  }
+
+  private async _clickedSuccess(ev: CustomEvent): Promise<void> {
+    console.log("Clicked success");
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
+    setTimeout(() => {
+      button.actionSuccess();
+      button.progress = false;
+    }, 1000);
+  }
+
+  private async _clickedFail(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
+    setTimeout(() => {
+      button.actionError();
+      button.progress = false;
+    }, 1000);
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
+    }
+    .button {
+      padding: unset;
+    }
+    ha-card {
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+    .card-content div {
+      display: flex;
+      gap: 8px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-progress-button": DemoHaProgressButton;
+  }
+}
@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
@@ -11,6 +11,7 @@ import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 import { ClimateEntityFeature } from "../../../../src/data/climate";
+import { FanEntityFeature } from "../../../../src/data/fan";

 const ENTITIES = [
  getEntity("switch", "tv_outlet", "on", {
@@ -100,6 +101,15 @@ const ENTITIES = [
      ClimateEntityFeature.FAN_MODE +
      ClimateEntityFeature.TARGET_TEMPERATURE_RANGE,
  }),
+  getEntity("fan", "fan_demo", "on", {
+    friendly_name: "Ceiling fan",
+    device_class: "fan",
+    direction: "reverse",
+    supported_features:
+      FanEntityFeature.DIRECTION +
+      FanEntityFeature.SET_SPEED +
+      FanEntityFeature.OSCILLATE,
+  }),
 ];

 const CONFIGS = [
@@ -261,6 +271,33 @@ const CONFIGS = [
  - type: target-temperature
    `,
  },
+  {
+    heading: "Fan direction feature",
+    config: `
+- type: tile
+  entity: fan.fan_demo
+  features:
+  - type: fan-direction
+    `,
+  },
+  {
+    heading: "Fan speed feature",
+    config: `
+- type: tile
+  entity: fan.fan_demo
+  features:
+  - type: fan-speed
+    `,
+  },
+  {
+    heading: "Fan oscillate feature",
+    config: `
+- type: tile
+  entity: fan.fan_demo
+  features:
+  - type: fan-oscillate
+    `,
+  },
 ];

@customElement("demo-lovelace-tile-card")
@@ -1,7 +1,7 @@
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-card";
 import type { ActionHandlerEvent } from "../../../../src/data/lovelace/action_handler";
 import { actionHandler } from "../../../../src/panels/lovelace/common/directives/action-handler-directive";
@@ -13,12 +13,16 @@ export class DemoUtilLongPress extends LitElement {
      ${[1, 2, 3].map(
        () => html`
          <ha-card>
-            <mwc-button
+            <ha-button
+              appearance="plain"
              @action=${this._handleAction}
-              .actionHandler=${actionHandler({})}
+              .actionHandler=${actionHandler({
+                hasHold: true,
+                hasDoubleClick: true,
+              })}
            >
              (long) press me!
-            </mwc-button>
+            </ha-button>

            <textarea></textarea>

@@ -0,0 +1,3 @@
+---
+title: Fan
+---
@@ -0,0 +1,50 @@
+import type { PropertyValues, TemplateResult } from "lit";
+import { html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+import { FanEntityFeature } from "../../../../src/data/fan";
+
+const ENTITIES = [
+  getEntity("fan", "fan", "on", {
+    friendly_name: "Fan",
+    device_class: "fan",
+    supported_features:
+      FanEntityFeature.OSCILLATE +
+      FanEntityFeature.DIRECTION +
+      FanEntityFeature.SET_SPEED,
+  }),
+];
+
+@customElement("demo-more-info-fan")
+class DemoMoreInfoFan extends LitElement {
+  @property({ attribute: false }) public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-fan": DemoMoreInfoFan;
+  }
+}
@@ -99,7 +99,8 @@ class HassioAddonNetwork extends LitElement {
          : nothing}
        <div class="card-actions">
          <ha-progress-button
-            class="warning"
+            variant="danger"
+            appearance="plain"
            .disabled=${this.disabled}
            @click=${this._resetTapped}
          >
@@ -25,6 +25,7 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
@@ -187,12 +188,13 @@ class HassioAddonInfo extends LitElement {
                "addon.dashboard.protection_mode.content"
              )}
              <ha-button
+                variant="danger"
                slot="action"
-                .label=${this.supervisor.localize(
-                  "addon.dashboard.protection_mode.enable"
-                )}
                @click=${this._protectionToggled}
              >
+                ${this.supervisor.localize(
+                  "addon.dashboard.protection_mode.enable"
+                )}
              </ha-button>
            </ha-alert>
          `
@@ -692,14 +694,16 @@ class HassioAddonInfo extends LitElement {
              ? this._computeIsRunning
                ? html`
                    <ha-progress-button
-                      class="warning"
+                      variant="danger"
+                      appearance="plain"
                      @click=${this._stopClicked}
                      .disabled=${systemManaged && !this.controlEnabled}
                    >
                      ${this.supervisor.localize("addon.dashboard.stop")}
                    </ha-progress-button>
                    <ha-progress-button
-                      class="warning"
+                      variant="danger"
+                      appearance="plain"
                      @click=${this._restartClicked}
                    >
                      ${this.supervisor.localize("addon.dashboard.restart")}
@@ -709,48 +713,19 @@ class HassioAddonInfo extends LitElement {
                    <ha-progress-button
                      @click=${this._startClicked}
                      .progress=${this.addon.state === "startup"}
+                      appearance="plain"
                    >
                      ${this.supervisor.localize("addon.dashboard.start")}
                    </ha-progress-button>
                  `
-              : html`
-                  <ha-progress-button
-                    .disabled=${!this.addon.available}
-                    @click=${this._installClicked}
-                  >
-                    ${this.supervisor.localize("addon.dashboard.install")}
-                  </ha-progress-button>
-                `}
+              : nothing}
          </div>
          <div>
            ${this.addon.version
-              ? html` ${this._computeShowWebUI
-                    ? html`
-                        <a
-                          href=${this._pathWebui!}
-                          tabindex="-1"
-                          target="_blank"
-                          rel="noopener"
-                        >
-                          <ha-button>
-                            ${this.supervisor.localize(
-                              "addon.dashboard.open_web_ui"
-                            )}
-                          </ha-button>
-                        </a>
-                      `
-                    : nothing}
-                  ${this._computeShowIngressUI
-                    ? html`
-                        <ha-button @click=${this._openIngress}>
-                          ${this.supervisor.localize(
-                            "addon.dashboard.open_web_ui"
-                          )}
-                        </ha-button>
-                      `
-                    : nothing}
+              ? html`
                  <ha-progress-button
-                    class="warning"
+                    variant="danger"
+                    appearance="plain"
                    @click=${this._uninstallClicked}
                    .disabled=${systemManaged && !this.controlEnabled}
                  >
@@ -759,14 +734,47 @@ class HassioAddonInfo extends LitElement {
                  ${this.addon.build
                    ? html`
                        <ha-progress-button
-                          class="warning"
+                          variant="danger"
+                          appearance="plain"
                          @click=${this._rebuildClicked}
                        >
                          ${this.supervisor.localize("addon.dashboard.rebuild")}
                        </ha-progress-button>
                      `
-                    : nothing}`
-              : nothing}
+                    : nothing}
+                  ${this._computeShowWebUI || this._computeShowIngressUI
+                    ? html`
+                        <ha-button
+                          href=${ifDefined(
+                            !this._computeShowIngressUI
+                              ? this._pathWebui!
+                              : nothing
+                          )}
+                          target=${ifDefined(
+                            !this._computeShowIngressUI ? "_blank" : nothing
+                          )}
+                          rel=${ifDefined(
+                            !this._computeShowIngressUI ? "noopener" : nothing
+                          )}
+                          @click=${!this._computeShowWebUI
+                            ? this._openIngress
+                            : undefined}
+                        >
+                          ${this.supervisor.localize(
+                            "addon.dashboard.open_web_ui"
+                          )}
+                        </ha-button>
+                      `
+                    : nothing}
+                `
+              : html`
+                  <ha-progress-button
+                    .disabled=${!this.addon.available}
+                    @click=${this._installClicked}
+                  >
+                    ${this.supervisor.localize("addon.dashboard.install")}
+                  </ha-progress-button>
+                `}
          </div>
        </div>
      </ha-card>
@@ -1146,15 +1154,17 @@ class HassioAddonInfo extends LitElement {
          ),
          dismissText: this.supervisor.localize("common.cancel"),
        });
+        button.actionError();
        button.progress = false;
        return;
      }
    } catch (err: any) {
+      button.actionError();
+      button.progress = false;
      showAlertDialog(this, {
        title: "Failed to validate addon configuration",
        text: extractApiErrorMessage(err),
      });
-      button.progress = false;
      return;
    }

@@ -1168,11 +1178,15 @@ class HassioAddonInfo extends LitElement {
      };
      fireEvent(this, "hass-api-called", eventdata);
    } catch (err: any) {
+      button.actionError();
+      button.progress = false;
      showAlertDialog(this, {
        title: this.supervisor.localize("addon.dashboard.action_error.start"),
        text: extractApiErrorMessage(err),
      });
+      return;
    }
+    button.actionSuccess();
    button.progress = false;
  }

@@ -1228,6 +1242,7 @@ class HassioAddonInfo extends LitElement {
        path: "uninstall",
      };
      fireEvent(this, "hass-api-called", eventdata);
+      button.actionSuccess();
    } catch (err: any) {
      showAlertDialog(this, {
        title: this.supervisor.localize(
@@ -1235,6 +1250,7 @@ class HassioAddonInfo extends LitElement {
        ),
        text: extractApiErrorMessage(err),
      });
+      button.actionError();
    }
    button.progress = false;
  }
@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { ActionDetail } from "@material/mwc-list";

 import { mdiBackupRestore, mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
@@ -17,6 +16,7 @@ import type {
 } from "../../../src/components/data-table/ha-data-table";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-fab";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-icon-button";
 import "../../../src/components/ha-list-item";
 import "../../../src/components/ha-svg-icon";
@@ -241,12 +241,13 @@ export class HassioBackups extends LitElement {
              <div class="header-btns">
                ${!this.narrow
                  ? html`
-                      <mwc-button
+                      <ha-button
+                        appearance="plain"
+                        variant="danger"
                        @click=${this._deleteSelected}
-                        class="warning"
                      >
                        ${this.supervisor.localize("backup.delete_selected")}
-                      </mwc-button>
+                      </ha-button>
                    `
                  : html`
                      <ha-icon-button
@@ -408,7 +409,7 @@ export class HassioBackups extends LitElement {
          margin-inline-end: -12px;
          margin-inline-start: initial;
        }
-        .header-btns > mwc-button,
+        .header-btns > ha-button,
        .header-btns > ha-icon-button {
          margin: 8px;
        }
@@ -1,10 +1,9 @@
-import "@material/mwc-button";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-svg-icon";
 import type { HassioHassOSInfo } from "../../../src/data/hassio/host";
@@ -109,10 +108,9 @@ export class HassioUpdate extends LitElement {
          </ha-settings-row>
        </div>
        <div class="card-actions">
-          <a href="/hassio/update-available/${key}">
-            <mwc-button .label=${this.supervisor.localize("common.show")}>
-            </mwc-button>
-          </a>
+          <ha-button appearance="plain" href="/hassio/update-available/${key}">
+            ${this.supervisor.localize("common.show")}
+          </ha-button>
        </div>
      </ha-card>
    `;
@@ -1,10 +1,10 @@
-import "@material/mwc-button/mwc-button";
 import type { CSSResultGroup } from "lit";
 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-dialog";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../src/components/ha-form/types";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -77,20 +77,21 @@ class HassioBackupLocationDialog extends LitElement {
          @value-changed=${this._valueChanged}
          dialogInitialFocus
        ></ha-form>
-        <mwc-button
+        <ha-button
+          appearance="plain"
          slot="secondaryAction"
          @click=${this.closeDialog}
          dialogInitialFocus
        >
          ${this._dialogParams.supervisor.localize("common.cancel")}
-        </mwc-button>
-        <mwc-button
+        </ha-button>
+        <ha-button
          .disabled=${this._waiting || !this._data}
          slot="primaryAction"
          @click=${this._changeMount}
        >
          ${this._dialogParams.supervisor.localize("common.save")}
-        </mwc-button>
+        </ha-button>
      </ha-dialog>
    `;
  }
@@ -8,7 +8,6 @@ import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
 import { slugify } from "../../../../src/common/string/slugify";
-import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-button-menu";
@@ -1,10 +1,9 @@
-import "@material/mwc-button";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 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-button";
 import "../../../../src/components/ha-spinner";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import {
@@ -69,16 +68,20 @@ class HassioCreateBackupDialog extends LitElement {
        ${this._error
          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
          : ""}
-        <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+        <ha-button
+          appearance="plain"
+          slot="secondaryAction"
+          @click=${this.closeDialog}
+        >
          ${this._dialogParams.supervisor.localize("common.close")}
-        </mwc-button>
-        <mwc-button
+        </ha-button>
+        <ha-button
          .disabled=${this._creatingBackup}
          slot="primaryAction"
          @click=${this._createBackup}
        >
          ${this._dialogParams.supervisor.localize("backup.create")}
-        </mwc-button>
+        </ha-button>
      </ha-dialog>
    `;
  }
@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-select";
 import "../../../../src/components/ha-spinner";
@@ -20,8 +21,8 @@ import type { HomeAssistant } from "../../../../src/types";
 import type { HassioDatatiskDialogParams } from "./show-dialog-hassio-datadisk";

 const calculateMoveTime = memoizeOne((supervisor: Supervisor): number => {
-  const speed = supervisor.host.disk_life_time !== "" ? 30 : 10;
-  const moveTime = (supervisor.host.disk_used * 1000) / 60 / speed;
+  // Assume a speed of 30 MB/s.
+  const moveTime = (supervisor.host.disk_used * 1000) / 60 / 30;
  const rebootTime = (supervisor.host.startup_time * 4) / 60;
  return Math.ceil((moveTime + rebootTime) / 10) * 10;
 });
@@ -109,17 +110,18 @@ class HassioDatadiskDialog extends LitElement {
                      "dialog.datadisk_move.no_devices"
                    )}

-              <mwc-button
-                slot="secondaryAction"
+              <ha-button
+                appearance="plain"
+                slot="primaryAction"
                @click=${this.closeDialog}
                dialogInitialFocus
              >
                ${this.dialogParams.supervisor.localize(
                  "dialog.datadisk_move.cancel"
                )}
-              </mwc-button>
+              </ha-button>

-              <mwc-button
+              <ha-button
                .disabled=${!this.selectedDevice}
                slot="primaryAction"
                @click=${this._moveDatadisk}
@@ -127,7 +129,7 @@ class HassioDatadiskDialog extends LitElement {
                ${this.dialogParams.supervisor.localize(
                  "dialog.datadisk_move.move"
                )}
-              </mwc-button>`}
+              </ha-button>`}
      </ha-dialog>
    `;
  }
@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -6,6 +5,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-button";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
 import "../../../../src/components/ha-formfield";
@@ -15,7 +15,6 @@ import "../../../../src/components/ha-list";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-password-field";
 import "../../../../src/components/ha-radio";
-import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-textfield";
 import type { HaTextField } from "../../../../src/components/ha-textfield";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -154,16 +153,16 @@ export class DialogHassioNetwork
                      )}
                    </p>`
                  : ""}
-                <mwc-button
+                <ha-button
+                  appearance="plain"
+                  size="small"
                  class="scan"
                  @click=${this._scanForAP}
                  .disabled=${this._scanning}
+                  .loading=${this._scanning}
                >
-                  ${this._scanning
-                    ? html`<ha-spinner aria-label="Scanning" size="small">
-                      </ha-spinner>`
-                    : this.supervisor.localize("dialog.network.scan_ap")}
-                </mwc-button>
+                  ${this.supervisor.localize("dialog.network.scan_ap")}
+                </ha-button>
                ${this._accessPoints &&
                this._accessPoints.accesspoints &&
                this._accessPoints.accesspoints.length !== 0
@@ -270,16 +269,16 @@ export class DialogHassioNetwork
          : ""}
      </div>
      <div class="buttons">
-        <mwc-button
-          .label=${this.supervisor.localize("common.cancel")}
-          @click=${this.closeDialog}
+        <ha-button @click=${this.closeDialog} appearance="plain">
+          ${this.supervisor.localize("common.cancel")}
+        </ha-button>
+        <ha-button
+          @click=${this._updateNetwork}
+          .disabled=${!this._dirty}
+          .loading=${this._processing}
        >
-        </mwc-button>
-        <mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
-          ${this._processing
-            ? html`<ha-spinner size="small"> </ha-spinner>`
-            : this.supervisor.localize("common.save")}
-        </mwc-button>
+          ${this.supervisor.localize("common.save")}
+        </ha-button>
      </div>`;
  }

@@ -584,11 +583,7 @@ export class DialogHassioNetwork
          }
        }

-        mwc-button.warning {
-          --mdc-theme-primary: var(--error-color);
-        }
-
-        mwc-button.scan {
+        ha-button.scan {
          margin-left: 8px;
          margin-inline-start: 8px;
          margin-inline-end: initial;
@@ -609,8 +604,8 @@ export class DialogHassioNetwork
            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
          display: flex;
          justify-content: space-between;
-          padding: 8px;
-          padding-bottom: max(var(--safe-area-inset-bottom), 8px);
+          padding: 16px;
+          padding-bottom: max(var(--safe-area-inset-bottom), 16px);
          background-color: var(--mdc-theme-surface, #fff);
        }
        .warning {
@@ -1,13 +1,14 @@
-import "@material/mwc-button/mwc-button";
-import { mdiDelete } from "@mdi/js";
+import { mdiDelete, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import "../../../../src/components/ha-button";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-settings-row";
+import "../../../../src/components/ha-svg-icon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
  addHassioDockerRegistry,
@@ -84,16 +85,19 @@ class HassioRegistriesDialog extends LitElement {
                dialogInitialFocus
              ></ha-form>
              <div class="action">
-                <mwc-button
+                <ha-button
                  ?disabled=${Boolean(
                    !this._input.registry ||
                      !this._input.username ||
                      !this._input.password
                  )}
                  @click=${this._addNewRegistry}
+                  appearance="filled"
+                  size="small"
                >
+                  <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
                  ${this.supervisor.localize("dialog.registries.add_registry")}
-                </mwc-button>
+                </ha-button>
              </div>
            `
          : html`${this._registries?.length
@@ -126,11 +130,17 @@ class HassioRegistriesDialog extends LitElement {
                    </ha-alert>
                  `}
              <div class="action">
-                <mwc-button @click=${this._addRegistry} dialogInitialFocus>
+                <ha-button
+                  @click=${this._addRegistry}
+                  dialogInitialFocus
+                  appearance="filled"
+                  size="small"
+                >
+                  <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
                  ${this.supervisor.localize(
                    "dialog.registries.add_new_registry"
                  )}
-                </mwc-button>
+                </ha-button>
              </div> `}
      </ha-dialog>
    `;
@@ -1,5 +1,4 @@
-import "@material/mwc-button/mwc-button";
-import { mdiDelete, mdiDeleteOff } from "@mdi/js";
+import { mdiDelete, mdiDeleteOff, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -7,10 +6,15 @@ 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-button";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-icon-button";
+import "../../../../src/components/ha-md-list";
+import "../../../../src/components/ha-md-list-item";
+import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-textfield";
+import type { HaTextField } from "../../../../src/components/ha-textfield";
+import "../../../../src/components/ha-tooltip";
 import type {
  HassioAddonInfo,
  HassioAddonRepository,
@@ -24,10 +28,6 @@ import {
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import type { HassioRepositoryDialogParams } from "./show-dialog-repositories";
-import type { HaTextField } from "../../../../src/components/ha-textfield";
-import "../../../../src/components/ha-textfield";
-import "../../../../src/components/ha-md-list";
-import "../../../../src/components/ha-md-list-item";

@customElement("dialog-hassio-repositories")
 class HassioRepositoriesDialog extends LitElement {
@@ -159,18 +159,22 @@ class HassioRepositoriesDialog extends LitElement {
              @keydown=${this._handleKeyAdd}
              dialogInitialFocus
            ></ha-textfield>
-            <mwc-button @click=${this._addRepository}>
-              ${this._processing
-                ? html`<ha-spinner size="small"></ha-spinner>`
-                : this._dialogParams!.supervisor.localize(
-                    "dialog.repositories.add"
-                  )}
-            </mwc-button>
+            <ha-button
+              .loading=${this._processing}
+              @click=${this._addRepository}
+              appearance="filled"
+              size="small"
+            >
+              <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
+              ${this._dialogParams!.supervisor.localize(
+                "dialog.repositories.add"
+              )}
+            </ha-button>
          </div>
        </div>
-        <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+        <ha-button slot="primaryAction" @click=${this.closeDialog}>
          ${this._dialogParams?.supervisor.localize("common.close")}
-        </mwc-button>
+        </ha-button>
      </ha-dialog>
    `;
  }
@@ -191,16 +195,11 @@ class HassioRepositoriesDialog extends LitElement {
          border-radius: 4px;
          margin-top: 4px;
        }
-        mwc-button {
+        ha-button {
          margin-left: 8px;
          margin-inline-start: 8px;
          margin-inline-end: initial;
        }
-        ha-spinner {
-          display: block;
-          margin: 32px;
-          text-align: center;
-        }
        div.delete ha-icon-button {
          color: var(--error-color);
        }
@@ -249,6 +248,8 @@ class HassioRepositoriesDialog extends LitElement {
      await addStoreRepository(this.hass, input.value);
      await this._loadData();

+      fireEvent(this, "supervisor-collection-refresh", { collection: "store" });
+
      input.value = "";
    } catch (err: any) {
      this._error = extractApiErrorMessage(err);
@@ -261,6 +262,8 @@ class HassioRepositoriesDialog extends LitElement {
    try {
      await removeStoreRepository(this.hass, slug);
      await this._loadData();
+
+      fireEvent(this, "supervisor-collection-refresh", { collection: "store" });
    } catch (err: any) {
      this._error = extractApiErrorMessage(err);
    }
@@ -1,10 +1,9 @@
-import "@material/mwc-button";
-
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
@@ -70,12 +69,12 @@ class HassioCoreInfo extends LitElement {
              ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
              this.supervisor.core.update_available
                ? html`
-                    <a href="/hassio/update-available/core">
-                      <mwc-button
-                        .label=${this.supervisor.localize("common.show")}
-                      >
-                      </mwc-button>
-                    </a>
+                    <ha-button
+                      appearance="plain"
+                      href="/hassio/update-available/core"
+                    >
+                      ${this.supervisor.localize("common.show")}
+                    </ha-button>
                  `
                : ""}
            </ha-settings-row>
@@ -95,7 +94,7 @@ class HassioCoreInfo extends LitElement {
        <div class="card-actions">
          <ha-progress-button
            slot="primaryAction"
-            class="warning"
+            variant="danger"
            @click=${this._coreRestart}
            .title=${this.supervisor.localize("common.restart_name", {
              name: "Core",
@@ -188,11 +187,6 @@ class HassioCoreInfo extends LitElement {
          white-space: normal;
          color: var(--secondary-text-color);
        }
-
-        .warning {
-          --mdc-theme-primary: var(--error-color);
-        }
-
        ha-button-menu {
          color: var(--secondary-text-color);
          --mdc-menu-min-width: 200px;
@@ -1,5 +1,3 @@
-import "@material/mwc-button";
-
 import { mdiDotsVertical } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
@@ -8,10 +6,11 @@ import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
-import "../../../src/components/ha-list-item";
 import "../../../src/components/ha-icon-button";
+import "../../../src/components/ha-list-item";
 import "../../../src/components/ha-settings-row";
 import {
  extractApiErrorMessage,
@@ -77,24 +76,28 @@ class HassioHostInfo extends LitElement {
                  <span slot="description">
                    ${this.supervisor.host.hostname}
                  </span>
-                  <mwc-button
-                    .label=${this.supervisor.localize("system.host.change")}
+                  <ha-button
                    @click=${this._changeHostnameClicked}
+                    appearance="plain"
+                    size="small"
                  >
-                  </mwc-button>
+                    ${this.supervisor.localize("system.host.change")}
+                  </ha-button>
                </ha-settings-row>`
              : ""}
            ${this.supervisor.host.features.includes("network")
-              ? html` <ha-settings-row>
+              ? html`<ha-settings-row>
                  <span slot="heading">
                    ${this.supervisor.localize("system.host.ip_address")}
                  </span>
                  <span slot="description"> ${primaryIpAddress} </span>
-                  <mwc-button
-                    .label=${this.supervisor.localize("system.host.change")}
+                  <ha-button
                    @click=${this._changeNetworkClicked}
+                    appearance="plain"
+                    size="small"
                  >
-                  </mwc-button>
+                    ${this.supervisor.localize("system.host.change")}
+                  </ha-button>
                </ha-settings-row>`
              : ""}

@@ -108,12 +111,13 @@ class HassioHostInfo extends LitElement {
              ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
              this.supervisor.os.update_available
                ? html`
-                    <a href="/hassio/update-available/os">
-                      <mwc-button
-                        .label=${this.supervisor.localize("common.show")}
-                      >
-                      </mwc-button>
-                    </a>
+                    <ha-button
+                      appearance="plain"
+                      size="small"
+                      href="/hassio/update-available/os"
+                    >
+                      ${this.supervisor.localize("common.show")}
+                    </ha-button>
                  `
                : ""}
            </ha-settings-row>
@@ -139,16 +143,12 @@ class HassioHostInfo extends LitElement {
              : ""}
          </div>
          <div>
-            ${this.supervisor.host.disk_life_time !== "" &&
-            this.supervisor.host.disk_life_time >= 10
+            ${this.supervisor.host.disk_life_time !== null
              ? html` <ha-settings-row>
                  <span slot="heading">
-                    ${this.supervisor.localize(
-                      "system.host.emmc_lifetime_used"
-                    )}
+                    ${this.supervisor.localize("system.host.lifetime_used")}
                  </span>
                  <span slot="description">
-                    ${this.supervisor.host.disk_life_time - 10} % -
                    ${this.supervisor.host.disk_life_time} %
                  </span>
                </ha-settings-row>`
@@ -167,7 +167,7 @@ class HassioHostInfo extends LitElement {
        <div class="card-actions">
          ${this.supervisor.host.features.includes("reboot")
            ? html`
-                <ha-progress-button class="warning" @click=${this._hostReboot}>
+                <ha-progress-button variant="danger" @click=${this._hostReboot}>
                  ${this.supervisor.localize("system.host.reboot_host")}
                </ha-progress-button>
              `
@@ -175,7 +175,7 @@ class HassioHostInfo extends LitElement {
          ${this.supervisor.host.features.includes("shutdown")
            ? html`
                <ha-progress-button
-                  class="warning"
+                  variant="danger"
                  @click=${this._hostShutdown}
                >
                  ${this.supervisor.localize("system.host.shutdown_host")}
@@ -431,10 +431,6 @@ class HassioHostInfo extends LitElement {
          color: var(--secondary-text-color);
        }

-        .warning {
-          --mdc-theme-primary: var(--error-color);
-        }
-
        ha-button-menu {
          color: var(--secondary-text-color);
          --mdc-menu-min-width: 200px;
@@ -5,6 +5,7 @@ import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-alert";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-switch";
@@ -80,12 +81,13 @@ class HassioSupervisorInfo extends LitElement {
              ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
              this.supervisor.supervisor.update_available
                ? html`
-                    <a href="/hassio/update-available/supervisor">
-                      <mwc-button
-                        .label=${this.supervisor.localize("common.show")}
-                      >
-                      </mwc-button>
-                    </a>
+                    <ha-button
+                      appearance="plain"
+                      size="small"
+                      href="/hassio/update-available/supervisor"
+                    >
+                      ${this.supervisor.localize("common.show")}
+                    </ha-button>
                  `
                : ""}
            </ha-settings-row>
@@ -156,24 +158,28 @@ class HassioSupervisorInfo extends LitElement {
                  ${this.supervisor.localize(
                    "system.supervisor.unsupported_title"
                  )}
-                  <mwc-button
+                  <ha-button
                    slot="action"
-                    .label=${this.supervisor.localize("common.learn_more")}
                    @click=${this._unsupportedDialog}
+                    variant="warning"
+                    size="small"
                  >
-                  </mwc-button>
+                    ${this.supervisor.localize("common.learn_more")}
+                  </ha-button>
                </ha-alert>`}
            ${!this.supervisor.supervisor.healthy
              ? html`<ha-alert alert-type="error">
                  ${this.supervisor.localize(
                    "system.supervisor.unhealthy_title"
                  )}
-                  <mwc-button
+                  <ha-button
+                    variant="danger"
+                    size="small"
                    slot="action"
-                    .label=${this.supervisor.localize("common.learn_more")}
                    @click=${this._unhealthyDialog}
                  >
-                  </mwc-button>
+                    ${this.supervisor.localize("common.learn_more")}
+                  </ha-button>
                </ha-alert>`
              : ""}
          </div>
@@ -448,9 +454,6 @@ class HassioSupervisorInfo extends LitElement {
          white-space: normal;
          color: var(--secondary-text-color);
        }
-        ha-alert mwc-button {
-          --mdc-theme-primary: var(--primary-text-color);
-        }
        a {
          text-decoration: none;
        }
@@ -1,5 +1,3 @@
-import "@material/mwc-button";
-
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -208,14 +208,16 @@ class UpdateAvailableCard extends LitElement {
              <div class="card-actions">
                ${changelog
                  ? html`
-                      <a href=${changelog} target="_blank" rel="noreferrer">
-                        <ha-button
-                          .label=${this.supervisor.localize(
-                            "update_available.open_release_notes"
-                          )}
-                        >
-                        </ha-button>
-                      </a>
+                      <ha-button
+                        href=${changelog}
+                        target="_blank"
+                        rel="noreferrer"
+                        appearance="plain"
+                      >
+                        ${this.supervisor.localize(
+                          "update_available.open_release_notes"
+                        )}
+                      </ha-button>
                    `
                  : nothing}
                <span></span>
@@ -3,26 +3,26 @@ import { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
 // eslint-disable-next-line import/extensions
 import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
 import { LitElement, type PropertyValues, css, html, nothing } from "lit";
-import { classMap } from "lit/directives/class-map";
 import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { fireEvent } from "../../../src/common/dom/fire_event";
 import type {
  LandingPageKeys,
  LocalizeFunc,
 } from "../../../src/common/translations/localize";
+import { waitForSeconds } from "../../../src/common/util/wait";
+import "../../../src/components/ha-alert";
+import "../../../src/components/ha-ansi-to-html";
+import type { HaAnsiToHtml } from "../../../src/components/ha-ansi-to-html";
 import "../../../src/components/ha-button";
 import "../../../src/components/ha-icon-button";
 import "../../../src/components/ha-svg-icon";
-import "../../../src/components/ha-ansi-to-html";
-import "../../../src/components/ha-alert";
-import type { HaAnsiToHtml } from "../../../src/components/ha-ansi-to-html";
+import { fileDownload } from "../../../src/util/file_download";
 import {
  getObserverLogs,
  downloadUrl as observerLogsDownloadUrl,
 } from "../data/observer";
-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;
@@ -64,7 +64,7 @@ class LandingPageLogs extends LitElement {
  protected render() {
    return html`
      <div class="actions">
-        <ha-button @click=${this._toggleLogDetails}>
+        <ha-button appearance="plain" @click=${this._toggleLogDetails}>
          ${this.localize(this._show ? "hide_details" : "show_details")}
        </ha-button>
        ${this._show
@@ -81,7 +81,11 @@ class LandingPageLogs extends LitElement {
              alert-type="error"
              .title=${this.localize("logs.fetch_error")}
            >
-              <ha-button @click=${this._startLogStream}>
+              <ha-button
+                size="small"
+                variant="danger"
+                @click=${this._startLogStream}
+              >
                ${this.localize("logs.retry")}
              </ha-button>
            </ha-alert>
@@ -104,14 +108,13 @@ class LandingPageLogs extends LitElement {
              !this._scrolledToBottomController.value) ||
            false,
        })}"
+        size="small"
+        appearance="filled"
        @click=${this._scrollToBottom}
      >
-        <ha-svg-icon .path=${mdiArrowCollapseDown} slot="icon"></ha-svg-icon>
+        <ha-svg-icon .path=${mdiArrowCollapseDown} slot="start"></ha-svg-icon>
        ${this.localize("logs.scroll_down_button")}
-        <ha-svg-icon
-          .path=${mdiArrowCollapseDown}
-          slot="trailingIcon"
-        ></ha-svg-icon>
+        <ha-svg-icon .path=${mdiArrowCollapseDown} slot="end"></ha-svg-icon>
      </ha-button>
    `;
  }
@@ -308,21 +311,14 @@ class LandingPageLogs extends LitElement {
      }

      .new-logs-indicator {
-        --mdc-theme-primary: var(--text-primary-color);
-
        overflow: hidden;
        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        bottom: 4px;
+        left: 4px;
        height: 0;
-        background-color: var(--primary-color);
-        border-radius: 8px;

        transition: height 0.4s ease-out;
        display: flex;
-        justify-content: space-between;
-        align-items: center;
      }

      .new-logs-indicator.visible {
@@ -67,6 +67,7 @@ class LandingPageNetwork extends LitElement {
          ${ALTERNATIVE_DNS_SERVERS.map(
            ({ translationKey }, key) =>
              html`<ha-button
+                size="small"
                .index=${key}
                .disabled=${!dnsPrimaryInterfaceNameservers}
                @click=${this._setDns}
@@ -1,6 +1,6 @@
 export default {
  "*.?(c|m){js,ts}": [
-    "eslint --flag unstable_config_lookup_from_file --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --fix",
+    "eslint --flag v10_config_lookup_from_file --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --fix",
    "prettier --cache --write",
    "lit-analyzer --quiet",
  ],
@@ -8,8 +8,8 @@
  "version": "1.0.0",
  "scripts": {
    "build": "script/build_frontend",
-    "lint:eslint": "eslint --flag unstable_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --max-warnings=0",
-    "format:eslint": "eslint --flag unstable_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
+    "lint:eslint": "eslint --flag v10_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --max-warnings=0",
+    "format:eslint": "eslint --flag v10_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
    "lint:prettier": "prettier . --cache --check",
    "format:prettier": "prettier . --cache --write",
    "lint:types": "tsc",
@@ -26,15 +26,16 @@
  "license": "Apache-2.0",
  "type": "module",
  "dependencies": {
-    "@babel/runtime": "7.27.6",
+    "@awesome.me/webawesome": "3.0.0-beta.4",
+    "@babel/runtime": "7.28.3",
    "@braintree/sanitize-url": "7.1.1",
    "@codemirror/autocomplete": "6.18.6",
    "@codemirror/commands": "6.8.1",
-    "@codemirror/language": "6.11.2",
+    "@codemirror/language": "6.11.3",
    "@codemirror/legacy-modes": "6.5.1",
    "@codemirror/search": "6.5.11",
    "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.0",
+    "@codemirror/view": "6.38.1",
    "@egjs/hammerjs": "2.0.17",
    "@formatjs/intl-datetimeformat": "6.18.0",
    "@formatjs/intl-displaynames": "6.8.11",
@@ -45,22 +46,21 @@
    "@formatjs/intl-numberformat": "8.15.4",
    "@formatjs/intl-pluralrules": "5.4.4",
    "@formatjs/intl-relativetimeformat": "11.4.11",
-    "@fullcalendar/core": "6.1.18",
-    "@fullcalendar/daygrid": "6.1.18",
-    "@fullcalendar/interaction": "6.1.18",
-    "@fullcalendar/list": "6.1.18",
-    "@fullcalendar/luxon3": "6.1.18",
-    "@fullcalendar/timegrid": "6.1.18",
+    "@fullcalendar/core": "6.1.19",
+    "@fullcalendar/daygrid": "6.1.19",
+    "@fullcalendar/interaction": "6.1.19",
+    "@fullcalendar/list": "6.1.19",
+    "@fullcalendar/luxon3": "6.1.19",
+    "@fullcalendar/timegrid": "6.1.19",
    "@lezer/highlight": "1.2.1",
-    "@lit-labs/motion": "1.0.8",
-    "@lit-labs/observers": "2.0.5",
-    "@lit-labs/virtualizer": "2.1.0",
-    "@lit/context": "1.1.5",
-    "@lit/reactive-element": "2.1.0",
+    "@lit-labs/motion": "1.0.9",
+    "@lit-labs/observers": "2.0.6",
+    "@lit-labs/virtualizer": "2.1.1",
+    "@lit/context": "1.1.6",
+    "@lit/reactive-element": "2.1.1",
    "@material/chips": "=14.0.0-canary.53b3cad2f.0",
    "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
    "@material/mwc-base": "0.27.0",
-    "@material/mwc-button": "0.27.0",
    "@material/mwc-checkbox": "0.27.0",
    "@material/mwc-dialog": "0.27.0",
    "@material/mwc-drawer": "0.27.0",
@@ -80,17 +80,17 @@
    "@material/mwc-top-app-bar": "0.27.0",
    "@material/mwc-top-app-bar-fixed": "0.27.0",
    "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "2.3.0",
+    "@material/web": "2.4.0",
    "@mdi/js": "7.4.47",
    "@mdi/svg": "7.4.47",
    "@replit/codemirror-indentation-markers": "6.5.3",
    "@shoelace-style/shoelace": "2.20.1",
    "@swc/helpers": "0.5.17",
    "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "3.8.1",
+    "@tsparticles/engine": "3.9.1",
    "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.7.9",
-    "@vaadin/vaadin-themable-mixin": "24.7.9",
+    "@vaadin/combo-box": "24.8.6",
+    "@vaadin/vaadin-themable-mixin": "24.8.6",
    "@vibrant/color": "4.0.0",
    "@vue/web-component-wrapper": "1.3.0",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -99,19 +99,20 @@
    "barcode-detector": "3.0.5",
    "color-name": "2.0.0",
    "comlink": "4.4.2",
-    "core-js": "3.44.0",
+    "core-js": "3.45.1",
    "cropperjs": "1.6.2",
+    "culori": "4.0.2",
    "date-fns": "4.1.0",
    "date-fns-tz": "3.2.0",
    "deep-clone-simple": "1.1.1",
    "deep-freeze": "0.0.1",
    "dialog-polyfill": "0.5.6",
-    "echarts": "5.6.0",
+    "echarts": "6.0.0",
    "element-internals-polyfill": "3.0.2",
    "fuse.js": "7.1.0",
    "google-timezones-json": "1.2.0",
    "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.6",
+    "hls.js": "1.6.11",
    "home-assistant-js-websocket": "9.5.0",
    "idb-keyval": "6.2.2",
    "intl-messageformat": "10.7.16",
@@ -119,10 +120,10 @@
    "leaflet": "1.9.4",
    "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
    "leaflet.markercluster": "1.5.3",
-    "lit": "3.3.0",
-    "lit-html": "3.3.0",
-    "luxon": "3.6.1",
-    "marked": "16.0.0",
+    "lit": "3.3.1",
+    "lit-html": "3.3.1",
+    "luxon": "3.7.1",
+    "marked": "16.2.1",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.3",
    "object-hash": "3.0.0",
@@ -136,7 +137,6 @@
    "superstruct": "2.0.2",
    "tinykeys": "3.0.0",
    "ua-parser-js": "2.0.4",
-    "vis-data": "7.1.10",
    "vue": "2.7.16",
    "vue2-daterange-picker": "0.6.8",
    "weekstart": "2.0.0",
@@ -149,29 +149,30 @@
    "xss": "1.0.15"
  },
  "devDependencies": {
-    "@babel/core": "7.28.0",
+    "@babel/core": "7.28.3",
    "@babel/helper-define-polyfill-provider": "0.6.5",
-    "@babel/plugin-transform-runtime": "7.28.0",
-    "@babel/preset-env": "7.28.0",
-    "@bundle-stats/plugin-webpack-filter": "4.21.0",
-    "@lokalise/node-api": "14.9.1",
+    "@babel/plugin-transform-runtime": "7.28.3",
+    "@babel/preset-env": "7.28.3",
+    "@bundle-stats/plugin-webpack-filter": "4.21.3",
+    "@lokalise/node-api": "15.2.1",
    "@octokit/auth-oauth-device": "8.0.1",
    "@octokit/plugin-retry": "8.0.1",
    "@octokit/rest": "22.0.0",
-    "@rsdoctor/rspack-plugin": "1.1.8",
-    "@rspack/cli": "1.4.4",
-    "@rspack/core": "1.4.4",
+    "@rsdoctor/rspack-plugin": "1.2.3",
+    "@rspack/core": "1.5.1",
+    "@rspack/dev-server": "1.1.4",
    "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.22",
+    "@types/chromecast-caf-receiver": "6.0.24",
    "@types/chromecast-caf-sender": "1.0.11",
    "@types/color-name": "2.0.0",
+    "@types/culori": "4.0.0",
    "@types/html-minifier-terser": "7.0.2",
    "@types/js-yaml": "4.0.9",
-    "@types/leaflet": "1.9.19",
+    "@types/leaflet": "1.9.20",
    "@types/leaflet-draw": "1.0.12",
    "@types/leaflet.markercluster": "1.5.5",
    "@types/lodash.merge": "4.6.9",
-    "@types/luxon": "3.6.2",
+    "@types/luxon": "3.7.1",
    "@types/mocha": "10.0.10",
    "@types/qrcode": "1.5.5",
    "@types/sortablejs": "1.15.8",
@@ -183,17 +184,17 @@
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.3",
    "del": "8.0.0",
-    "eslint": "9.30.1",
+    "eslint": "9.34.0",
    "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-prettier": "10.1.5",
+    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-webpack": "0.13.10",
    "eslint-plugin-import": "2.32.0",
    "eslint-plugin-lit": "2.1.1",
-    "eslint-plugin-lit-a11y": "5.1.0",
-    "eslint-plugin-unused-imports": "4.1.4",
+    "eslint-plugin-lit-a11y": "5.1.1",
+    "eslint-plugin-unused-imports": "4.2.0",
    "eslint-plugin-wc": "3.0.1",
    "fancy-log": "2.0.0",
-    "fs-extra": "11.3.0",
+    "fs-extra": "11.3.1",
    "glob": "11.0.3",
    "gulp": "5.0.1",
    "gulp-brotli": "3.0.0",
@@ -203,7 +204,7 @@
    "husky": "9.1.7",
    "jsdom": "26.1.0",
    "jszip": "3.10.1",
-    "lint-staged": "16.1.2",
+    "lint-staged": "16.1.5",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
    "lodash.template": "4.5.0",
@@ -216,8 +217,8 @@
    "tar": "7.4.3",
    "terser-webpack-plugin": "5.3.14",
    "ts-lit-plugin": "2.0.2",
-    "typescript": "5.8.3",
-    "typescript-eslint": "8.35.1",
+    "typescript": "5.9.2",
+    "typescript-eslint": "8.41.0",
    "vite-tsconfig-paths": "5.1.4",
    "vitest": "3.2.4",
    "webpack-stats-plugin": "1.1.3",
@@ -226,14 +227,15 @@
  },
  "resolutions": {
    "@material/mwc-button@^0.25.3": "^0.27.0",
-    "lit": "3.3.0",
-    "lit-html": "3.3.0",
+    "lit": "3.3.1",
+    "lit-html": "3.3.1",
    "clean-css": "5.3.3",
-    "@lit/reactive-element": "2.1.0",
-    "@fullcalendar/daygrid": "6.1.18",
+    "@lit/reactive-element": "2.1.1",
+    "@fullcalendar/daygrid": "6.1.19",
    "globals": "16.3.0",
    "tslib": "2.8.1",
-    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
+    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
+    "@vaadin/vaadin-themable-mixin": "24.8.6"
  },
-  "packageManager": "yarn@4.9.2"
+  "packageManager": "yarn@4.9.4"
 }
@@ -1,35 +1,31 @@
 <svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1738_5532)">
+<g clip-path="url(#clip0_3969_57097)">
 <path d="M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V4C20 6.20914 18.2091 8 16 8H4C1.79086 8 0 6.20914 0 4V4Z" fill="white" fill-opacity="0.48"/>
-<path d="M40 4C40 1.79086 41.7909 0 44 0V0C46.2091 0 48 1.79086 48 4V4C48 6.20914 46.2091 8 44 8V8C41.7909 8 40 6.20914 40 4V4Z" fill="white" fill-opacity="0.24"/>
-<path d="M0 20C0 15.5817 3.58172 12 8 12H40C44.4183 12 48 15.5817 48 20V64C48 68.4183 44.4183 72 40 72H8C3.58172 72 0 68.4183 0 64V20Z" fill="#1C1C1C"/>
-<path d="M8 12.5H40C44.1421 12.5 47.5 15.8579 47.5 20V64C47.5 68.1421 44.1421 71.5 40 71.5H8C3.85787 71.5 0.5 68.1421 0.5 64V20L0.509766 19.6143C0.704063 15.7792 3.77915 12.7041 7.61426 12.5098L8 12.5Z" stroke="white" stroke-opacity="0.24"/>
-<path d="M18.9844 41.0156C18.9844 40.0781 18.7031 39.2656 18.1406 38.5781C17.5781 37.8594 16.8594 37.375 15.9844 37.125V36C15.9844 35.4375 16.125 34.9375 16.4062 34.5C16.6875 34.0312 17.0469 33.6719 17.4844 33.4219C17.9531 33.1406 18.4531 33 18.9844 33H29.0156C29.5469 33 30.0312 33.1406 30.4688 33.4219C30.9375 33.6719 31.3125 34.0312 31.5938 34.5C31.875 34.9375 32.0156 35.4375 32.0156 36V37.125C31.1406 37.375 30.4219 37.8594 29.8594 38.5781C29.2969 39.2656 29.0156 40.0781 29.0156 41.0156V42.9844H18.9844V41.0156ZM33 39C33.5625 39 34.0312 39.2031 34.4062 39.6094C34.8125 39.9844 35.0156 40.4531 35.0156 41.0156V45.9844C35.0156 46.5469 34.875 47.0625 34.5938 47.5312C34.3125 47.9688 33.9375 48.3281 33.4688 48.6094C33.0312 48.8594 32.5469 48.9844 32.0156 48.9844V50.0156C32.0156 50.2656 31.9062 50.5 31.6875 50.7188C31.5 50.9062 31.2656 51 30.9844 51C30.7344 51 30.5 50.9062 30.2812 50.7188C30.0938 50.5 30 50.2656 30 50.0156V48.9844H18V50.0156C18 50.2656 17.8906 50.5 17.6719 50.7188C17.4844 50.9062 17.2656 51 17.0156 51C16.7344 51 16.4844 50.9062 16.2656 50.7188C16.0781 50.5 15.9844 50.2656 15.9844 50.0156V48.9844C15.4531 48.9844 14.9531 48.8594 14.4844 48.6094C14.0469 48.3281 13.6875 47.9688 13.4062 47.5312C13.125 47.0625 12.9844 46.5469 12.9844 45.9844V41.0156C12.9844 40.4531 13.1719 39.9844 13.5469 39.6094C13.9531 39.2031 14.4375 39 15 39C15.5625 39 16.0312 39.2031 16.4062 39.6094C16.8125 39.9844 17.0156 40.4531 17.0156 41.0156V45H30.9844V41.0156C30.9844 40.4531 31.1719 39.9844 31.5469 39.6094C31.9531 39.2031 32.4375 39 33 39Z" fill="#03A9F4"/>
-<path d="M56 4C56 1.79086 57.7909 0 60 0H72C74.2091 0 76 1.79086 76 4V4C76 6.20914 74.2091 8 72 8H60C57.7909 8 56 6.20914 56 4V4Z" fill="white" fill-opacity="0.48"/>
-<path d="M96 4C96 1.79086 97.7909 0 100 0V0C102.209 0 104 1.79086 104 4V4C104 6.20914 102.209 8 100 8V8C97.7909 8 96 6.20914 96 4V4Z" fill="white" fill-opacity="0.24"/>
-<path d="M56 20C56 15.5817 59.5817 12 64 12H96C100.418 12 104 15.5817 104 20V64C104 68.4183 100.418 72 96 72H64C59.5817 72 56 68.4183 56 64V20Z" fill="#1C1C1C"/>
-<path d="M64 12.5H96C100.142 12.5 103.5 15.8579 103.5 20V64C103.5 68.1421 100.142 71.5 96 71.5H64C59.8579 71.5 56.5 68.1421 56.5 64V20L56.5098 19.6143C56.7041 15.7792 59.7792 12.7041 63.6143 12.5098L64 12.5Z" stroke="white" stroke-opacity="0.24"/>
-<path d="M86 39.9844H89.9844V42H88.0156V50.0156H71.9844V42H70.0156V39.9844H74C73.4375 39.9844 72.9531 39.7969 72.5469 39.4219C72.1719 39.0156 71.9844 38.5469 71.9844 38.0156V33.9844H77.9844V38.0156C77.9844 38.5469 77.7812 39.0156 77.375 39.4219C77 39.7969 76.5469 39.9844 76.0156 39.9844H83.9844V36.9844C83.9844 36.7344 83.8906 36.5156 83.7031 36.3281C83.5156 36.1094 83.2812 36 83 36C82.7188 36 82.4844 36.1094 82.2969 36.3281C82.1094 36.5156 82.0156 36.7344 82.0156 36.9844H80C80 36.4531 80.125 35.9688 80.375 35.5312C80.6562 35.0625 81.0156 34.6875 81.4531 34.4062C81.9219 34.125 82.4375 33.9844 83 33.9844C83.5625 33.9844 84.0625 34.125 84.5 34.4062C84.9688 34.6875 85.3281 35.0625 85.5781 35.5312C85.8594 35.9688 86 36.4531 86 36.9844V39.9844ZM80.9844 48V42H79.0156V48H80.9844Z" fill="#03A9F4"/>
-<path d="M112 4C112 1.79086 113.791 0 116 0H128C130.209 0 132 1.79086 132 4V4C132 6.20914 130.209 8 128 8H116C113.791 8 112 6.20914 112 4V4Z" fill="white" fill-opacity="0.48"/>
-<path d="M152 4C152 1.79086 153.791 0 156 0V0C158.209 0 160 1.79086 160 4V4C160 6.20914 158.209 8 156 8V8C153.791 8 152 6.20914 152 4V4Z" fill="white" fill-opacity="0.24"/>
-<path d="M112 20C112 15.5817 115.582 12 120 12H152C156.418 12 160 15.5817 160 20V64C160 68.4183 156.418 72 152 72H120C115.582 72 112 68.4183 112 64V20Z" fill="#1C1C1C"/>
-<path d="M120 12.5H152C156.142 12.5 159.5 15.8579 159.5 20V64C159.5 68.1421 156.142 71.5 152 71.5H120C115.858 71.5 112.5 68.1421 112.5 64V20L112.51 19.6143C112.704 15.7792 115.779 12.7041 119.614 12.5098L120 12.5Z" stroke="white" stroke-opacity="0.24"/>
-<path d="M142.984 36.9844C144.078 36.9844 145.016 37.3906 145.797 38.2031C146.609 38.9844 147.016 39.9219 147.016 41.0156V50.0156H145V47.0156H127V50.0156H124.984V35.0156H127V44.0156H135.016V36.9844H142.984ZM133.094 42.0938C132.5 42.6875 131.797 42.9844 130.984 42.9844C130.172 42.9844 129.469 42.6875 128.875 42.0938C128.281 41.5 127.984 40.7969 127.984 39.9844C127.984 39.1719 128.281 38.4688 128.875 37.875C129.469 37.2812 130.172 36.9844 130.984 36.9844C131.797 36.9844 132.5 37.2812 133.094 37.875C133.688 38.4688 133.984 39.1719 133.984 39.9844C133.984 40.7969 133.688 41.5 133.094 42.0938Z" fill="#03A9F4"/>
-<path d="M0 84C0 81.7909 1.79086 80 4 80H16C18.2091 80 20 81.7909 20 84V84C20 86.2091 18.2091 88 16 88H4C1.79086 88 0 86.2091 0 84V84Z" fill="white" fill-opacity="0.48"/>
-<path d="M28 84C28 81.7909 29.7909 80 32 80V80C34.2091 80 36 81.7909 36 84V84C36 86.2091 34.2091 88 32 88V88C29.7909 88 28 86.2091 28 84V84Z" fill="white" fill-opacity="0.24"/>
-<path d="M40 84C40 81.7909 41.7909 80 44 80V80C46.2091 80 48 81.7909 48 84V84C48 86.2091 46.2091 88 44 88V88C41.7909 88 40 86.2091 40 84V84Z" fill="white" fill-opacity="0.24"/>
-<path d="M0 100C0 95.5817 3.58172 92 8 92H40C44.4183 92 48 95.5817 48 100V144C48 148.418 44.4183 152 40 152H8C3.58172 152 0 148.418 0 144V100Z" fill="#1C1C1C"/>
-<path d="M8 92.5H40C44.1421 92.5 47.5 95.8579 47.5 100V144C47.5 148.142 44.1421 151.5 40 151.5H8C3.85787 151.5 0.5 148.142 0.5 144V100L0.509766 99.6143C0.704063 95.7792 3.77915 92.7041 7.61426 92.5098L8 92.5Z" stroke="white" stroke-opacity="0.24"/>
-<path d="M14.0156 116H33.9844V128H32.0156V125.984H27.9844V128H26.0156V118.016H15.9844V128H14.0156V116ZM32.0156 118.016H27.9844V119.984H32.0156V118.016ZM27.9844 124.016H32.0156V122H27.9844V124.016Z" fill="#03A9F4"/>
-<path d="M56 84C56 81.7909 57.7909 80 60 80H72C74.2091 80 76 81.7909 76 84V84C76 86.2091 74.2091 88 72 88H60C57.7909 88 56 86.2091 56 84V84Z" fill="white" fill-opacity="0.48"/>
-<path d="M84 84C84 81.7909 85.7909 80 88 80V80C90.2091 80 92 81.7909 92 84V84C92 86.2091 90.2091 88 88 88V88C85.7909 88 84 86.2091 84 84V84Z" fill="white" fill-opacity="0.24"/>
-<path d="M96 84C96 81.7909 97.7909 80 100 80V80C102.209 80 104 81.7909 104 84V84C104 86.2091 102.209 88 100 88V88C97.7909 88 96 86.2091 96 84V84Z" fill="white" fill-opacity="0.24"/>
-<path d="M56 100C56 95.5817 59.5817 92 64 92H96C100.418 92 104 95.5817 104 100V144C104 148.418 100.418 152 96 152H64C59.5817 152 56 148.418 56 144V100Z" fill="#1C1C1C"/>
-<path d="M64 92.5H96C100.142 92.5 103.5 95.8579 103.5 100V144C103.5 148.142 100.142 151.5 96 151.5H64C59.8579 151.5 56.5 148.142 56.5 144V100L56.5098 99.6143C56.7041 95.7792 59.7792 92.7041 63.6143 92.5098L64 92.5Z" stroke="white" stroke-opacity="0.24"/>
-<path d="M77.9844 121.016V122.984H80V121.016H77.9844ZM82.0156 116V131H71V128.984H73.0156V113H82.0156V113.984H86.9844V128.984H89V131H85.0156V116H82.0156Z" fill="#03A9F4"/>
+<path d="M0 20C0 15.5817 3.58172 12 8 12H68C72.4183 12 76 15.5817 76 20V36C76 40.4183 72.4183 44 68 44H8C3.58172 44 0 40.4183 0 36V20Z" fill="#1C1C1C"/>
+<path d="M8 12.5H68C72.1421 12.5 75.5 15.8579 75.5 20V36C75.5 40.1421 72.1421 43.5 68 43.5H8C3.85786 43.5 0.5 40.1421 0.5 36V20C0.5 15.8579 3.85786 12.5 8 12.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M32.9844 27.0156C32.9844 26.0781 32.7031 25.2656 32.1406 24.5781C31.5781 23.8594 30.8594 23.375 29.9844 23.125V22C29.9844 21.4375 30.125 20.9375 30.4062 20.5C30.6875 20.0312 31.0469 19.6719 31.4844 19.4219C31.9531 19.1406 32.4531 19 32.9844 19H43.0156C43.5469 19 44.0312 19.1406 44.4688 19.4219C44.9375 19.6719 45.3125 20.0312 45.5938 20.5C45.875 20.9375 46.0156 21.4375 46.0156 22V23.125C45.1406 23.375 44.4219 23.8594 43.8594 24.5781C43.2969 25.2656 43.0156 26.0781 43.0156 27.0156V28.9844H32.9844V27.0156ZM47 25C47.5625 25 48.0312 25.2031 48.4062 25.6094C48.8125 25.9844 49.0156 26.4531 49.0156 27.0156V31.9844C49.0156 32.5469 48.875 33.0625 48.5938 33.5312C48.3125 33.9688 47.9375 34.3281 47.4688 34.6094C47.0312 34.8594 46.5469 34.9844 46.0156 34.9844V36.0156C46.0156 36.2656 45.9062 36.5 45.6875 36.7188C45.5 36.9062 45.2656 37 44.9844 37C44.7344 37 44.5 36.9062 44.2812 36.7188C44.0938 36.5 44 36.2656 44 36.0156V34.9844H32V36.0156C32 36.2656 31.8906 36.5 31.6719 36.7188C31.4844 36.9062 31.2656 37 31.0156 37C30.7344 37 30.4844 36.9062 30.2656 36.7188C30.0781 36.5 29.9844 36.2656 29.9844 36.0156V34.9844C29.4531 34.9844 28.9531 34.8594 28.4844 34.6094C28.0469 34.3281 27.6875 33.9688 27.4062 33.5312C27.125 33.0625 26.9844 32.5469 26.9844 31.9844V27.0156C26.9844 26.4531 27.1719 25.9844 27.5469 25.6094C27.9531 25.2031 28.4375 25 29 25C29.5625 25 30.0312 25.2031 30.4062 25.6094C30.8125 25.9844 31.0156 26.4531 31.0156 27.0156V31H44.9844V27.0156C44.9844 26.4531 45.1719 25.9844 45.5469 25.6094C45.9531 25.2031 46.4375 25 47 25Z" fill="#03A9F4"/>
+<path d="M0 56C0 51.5817 3.58172 48 8 48H68C72.4183 48 76 51.5817 76 56V72C76 76.4183 72.4183 80 68 80H8C3.58172 80 0 76.4183 0 72V56Z" fill="#1C1C1C"/>
+<path d="M8 48.5H68C72.1421 48.5 75.5 51.8579 75.5 56V72C75.5 76.1421 72.1421 79.5 68 79.5H8C3.85786 79.5 0.5 76.1421 0.5 72V56C0.5 51.8579 3.85786 48.5 8 48.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M44 61.9844H47.9844V64H46.0156V72.0156H29.9844V64H28.0156V61.9844H32C31.4375 61.9844 30.9531 61.7969 30.5469 61.4219C30.1719 61.0156 29.9844 60.5469 29.9844 60.0156V55.9844H35.9844V60.0156C35.9844 60.5469 35.7812 61.0156 35.375 61.4219C35 61.7969 34.5469 61.9844 34.0156 61.9844H41.9844V58.9844C41.9844 58.7344 41.8906 58.5156 41.7031 58.3281C41.5156 58.1094 41.2812 58 41 58C40.7188 58 40.4844 58.1094 40.2969 58.3281C40.1094 58.5156 40.0156 58.7344 40.0156 58.9844H38C38 58.4531 38.125 57.9688 38.375 57.5312C38.6562 57.0625 39.0156 56.6875 39.4531 56.4062C39.9219 56.125 40.4375 55.9844 41 55.9844C41.5625 55.9844 42.0625 56.125 42.5 56.4062C42.9688 56.6875 43.3281 57.0625 43.5781 57.5312C43.8594 57.9688 44 58.4531 44 58.9844V61.9844ZM38.9844 70V64H37.0156V70H38.9844Z" fill="#03A9F4"/>
+<path d="M0 92C0 87.5817 3.58172 84 8 84H68C72.4183 84 76 87.5817 76 92V108C76 112.418 72.4183 116 68 116H8C3.58172 116 0 112.418 0 108V92Z" fill="#1C1C1C"/>
+<path d="M8 84.5H68C72.1421 84.5 75.5 87.8579 75.5 92V108C75.5 112.142 72.1421 115.5 68 115.5H8C3.85786 115.5 0.5 112.142 0.5 108V92C0.5 87.8579 3.85786 84.5 8 84.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M44.9844 94.9844C46.0781 94.9844 47.0156 95.3906 47.7969 96.2031C48.6094 96.9844 49.0156 97.9219 49.0156 99.0156V108.016H47V105.016H29V108.016H26.9844V93.0156H29V102.016H37.0156V94.9844H44.9844ZM35.0938 100.094C34.5 100.688 33.7969 100.984 32.9844 100.984C32.1719 100.984 31.4688 100.688 30.875 100.094C30.2812 99.5 29.9844 98.7969 29.9844 97.9844C29.9844 97.1719 30.2812 96.4688 30.875 95.875C31.4688 95.2812 32.1719 94.9844 32.9844 94.9844C33.7969 94.9844 34.5 95.2812 35.0938 95.875C35.6875 96.4688 35.9844 97.1719 35.9844 97.9844C35.9844 98.7969 35.6875 99.5 35.0938 100.094Z" fill="#03A9F4"/>
+<path d="M0 128C0 123.582 3.58172 120 8 120H68C72.4183 120 76 123.582 76 128V144C76 148.418 72.4183 152 68 152H8C3.58172 152 0 148.418 0 144V128Z" fill="#1C1C1C"/>
+<path d="M8 120.5H68C72.1421 120.5 75.5 123.858 75.5 128V144C75.5 148.142 72.1421 151.5 68 151.5H8C3.85786 151.5 0.5 148.142 0.5 144V128C0.5 123.858 3.85786 120.5 8 120.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M46.0156 136.984H47.9844V142.984C47.9844 143.516 47.7812 143.984 47.375 144.391C47 144.797 46.5469 145 46.0156 145C46.0156 145.281 45.9062 145.516 45.6875 145.703C45.5 145.891 45.2656 145.984 44.9844 145.984H31.0156C30.7344 145.984 30.4844 145.891 30.2656 145.703C30.0781 145.516 29.9844 145.281 29.9844 145C29.4531 145 28.9844 144.797 28.5781 144.391C28.2031 143.984 28.0156 143.516 28.0156 142.984V136.984H31.0156V136.234C31.0156 135.641 31.2344 135.125 31.6719 134.688C32.1406 134.219 32.6719 133.984 33.2656 133.984C33.8906 133.984 34.4531 134.234 34.9531 134.734L36.3125 136.281C36.5 136.5 36.7812 136.734 37.1562 136.984H44V128.828C44 128.609 43.9219 128.422 43.7656 128.266C43.6094 128.078 43.4062 127.984 43.1562 127.984C42.9375 127.984 42.75 128.062 42.5938 128.219L41.3281 129.484C41.3906 129.734 41.4219 129.906 41.4219 130C41.4219 130.344 41.3125 130.703 41.0938 131.078L38.3281 128.312C38.7031 128.094 39.0625 127.984 39.4062 127.984C39.5625 127.984 39.7344 128.016 39.9219 128.078L41.1875 126.812C41.7188 126.281 42.375 126.016 43.1562 126.016C43.9375 126.016 44.6094 126.297 45.1719 126.859C45.7344 127.391 46.0156 128.047 46.0156 128.828V136.984ZM31.5781 132.438C31.2031 132.031 31.0156 131.547 31.0156 130.984C31.0156 130.422 31.2031 129.953 31.5781 129.578C31.9531 129.203 32.4219 129.016 32.9844 129.016C33.5469 129.016 34.0156 129.203 34.3906 129.578C34.7969 129.953 35 130.422 35 130.984C35 131.547 34.7969 132.031 34.3906 132.438C34.0156 132.812 33.5469 133 32.9844 133C32.4219 133 31.9531 132.812 31.5781 132.438Z" fill="#03A9F4"/>
+<path d="M84 4C84 1.79086 85.7909 0 88 0H100C102.209 0 104 1.79086 104 4V4C104 6.20914 102.209 8 100 8H88C85.7909 8 84 6.20914 84 4V4Z" fill="white" fill-opacity="0.48"/>
+<path d="M84 20C84 15.5817 87.5817 12 92 12H152C156.418 12 160 15.5817 160 20V36C160 40.4183 156.418 44 152 44H92C87.5817 44 84 40.4183 84 36V20Z" fill="#1C1C1C"/>
+<path d="M92 12.5H152C156.142 12.5 159.5 15.8579 159.5 20V36C159.5 40.1421 156.142 43.5 152 43.5H92C87.8579 43.5 84.5 40.1421 84.5 36V20C84.5 15.8579 87.8579 12.5 92 12.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M131.984 30.0156C131.984 30.7656 131.797 31.4531 131.422 32.0781C131.047 32.6719 130.562 33.1406 129.969 33.4844C129.844 34.2031 129.5 34.8125 128.938 35.3125C128.406 35.7812 127.766 36.0156 127.016 36.0156C126.359 36.0156 125.766 35.8281 125.234 35.4531C124.734 35.0781 124.391 34.5938 124.203 34H119.797C119.609 34.5938 119.25 35.0781 118.719 35.4531C118.219 35.8281 117.641 36.0156 116.984 36.0156C116.234 36.0156 115.578 35.7812 115.016 35.3125C114.484 34.8125 114.156 34.2031 114.031 33.4844C113.438 33.1406 112.953 32.6719 112.578 32.0781C112.203 31.4531 112.016 30.7656 112.016 30.0156C112.016 29.1094 112.266 28.3125 112.766 27.625C113.297 26.9375 113.969 26.4688 114.781 26.2188L113 24.3906L112.719 24.7188C112.5 24.9062 112.25 25 111.969 25C111.719 25 111.5 24.9062 111.312 24.7188C111.094 24.5312 110.984 24.2969 110.984 24.0156C110.984 23.7344 111.094 23.5 111.312 23.3125L113.281 21.2969C113.469 21.1094 113.703 21.0156 113.984 21.0156C114.266 21.0156 114.5 21.1094 114.688 21.2969C114.906 21.4844 115.016 21.7188 115.016 22C115.016 22.2812 114.906 22.5156 114.688 22.7031L114.406 22.9844L115.812 24.3906L116.609 22.0469C116.797 21.4219 117.156 20.9219 117.688 20.5469C118.219 20.1719 118.797 19.9844 119.422 19.9844H124.578C125.203 19.9844 125.781 20.1719 126.312 20.5469C126.844 20.9219 127.203 21.4219 127.391 22.0469L128.75 26.0781C129.375 26.2031 129.922 26.4531 130.391 26.8281C130.891 27.2031 131.281 27.6719 131.562 28.2344C131.844 28.7656 131.984 29.3594 131.984 30.0156ZM116.984 34C117.266 34 117.5 33.9062 117.688 33.7188C117.906 33.5 118.016 33.2656 118.016 33.0156C118.016 32.7344 117.906 32.5 117.688 32.3125C117.5 32.0938 117.266 31.9844 116.984 31.9844C116.734 31.9844 116.5 32.0938 116.281 32.3125C116.094 32.5 116 32.7344 116 33.0156C116 33.2656 116.094 33.5 116.281 33.7188C116.5 33.9062 116.734 34 116.984 34ZM121.016 25.9844V22H119.422C118.953 22 118.641 22.2344 118.484 22.7031L117.406 25.9844H121.016ZM122.984 22V25.9844H126.594L125.516 22.7031C125.359 22.2344 125.047 22 124.578 22H122.984ZM127.016 34C127.266 34 127.484 33.9062 127.672 33.7188C127.891 33.5 128 33.2656 128 33.0156C128 32.7344 127.891 32.5 127.672 32.3125C127.484 32.0938 127.266 31.9844 127.016 31.9844C126.734 31.9844 126.484 32.0938 126.266 32.3125C126.078 32.5 125.984 32.7344 125.984 33.0156C125.984 33.2656 126.078 33.5 126.266 33.7188C126.484 33.9062 126.734 34 127.016 34Z" fill="#03A9F4"/>
+<path d="M84 56C84 51.5817 87.5817 48 92 48H152C156.418 48 160 51.5817 160 56V72C160 76.4183 156.418 80 152 80H92C87.5817 80 84 76.4183 84 72V56Z" fill="#1C1C1C"/>
+<path d="M92 48.5H152C156.142 48.5 159.5 51.8579 159.5 56V72C159.5 76.1421 156.142 79.5 152 79.5H92C87.8579 79.5 84.5 76.1421 84.5 72V56C84.5 51.8579 87.8579 48.5 92 48.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M128.984 58.9844C130.078 58.9844 131.016 59.3906 131.797 60.2031C132.609 60.9844 133.016 61.9219 133.016 63.0156V72.0156H131V69.0156H113V72.0156H110.984V57.0156H113V66.0156H121.016V58.9844H128.984ZM119.094 64.0938C118.5 64.6875 117.797 64.9844 116.984 64.9844C116.172 64.9844 115.469 64.6875 114.875 64.0938C114.281 63.5 113.984 62.7969 113.984 61.9844C113.984 61.1719 114.281 60.4688 114.875 59.875C115.469 59.2812 116.172 58.9844 116.984 58.9844C117.797 58.9844 118.5 59.2812 119.094 59.875C119.688 60.4688 119.984 61.1719 119.984 61.9844C119.984 62.7969 119.688 63.5 119.094 64.0938Z" fill="#03A9F4"/>
+<path d="M84 92C84 87.5817 87.5817 84 92 84H152C156.418 84 160 87.5817 160 92V108C160 112.418 156.418 116 152 116H92C87.5817 116 84 112.418 84 108V92Z" fill="#1C1C1C"/>
+<path d="M92 84.5H152C156.142 84.5 159.5 87.8579 159.5 92V108C159.5 112.142 156.142 115.5 152 115.5H92C87.8579 115.5 84.5 112.142 84.5 108V92C84.5 87.8579 87.8579 84.5 92 84.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M112.016 94H131.984V106H130.016V103.984H125.984V106H124.016V96.0156H113.984V106H112.016V94ZM130.016 96.0156H125.984V97.9844H130.016V96.0156ZM125.984 102.016H130.016V100H125.984V102.016Z" fill="#03A9F4"/>
 </g>
 <defs>
-<clipPath id="clip0_1738_5532">
+<clipPath id="clip0_3969_57097">
 <rect width="160" height="160" fill="white"/>
 </clipPath>
 </defs>
@@ -0,0 +1,76 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4744_40067)">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H28C31.3137 0 34 2.68629 34 6C34 9.31371 31.3137 12 28 12H6C2.68629 12 0 9.31371 0 6Z" fill="white" fill-opacity="0.48"/>
+<path d="M0 28C0 23.5817 3.58172 20 8 20H42.6667C47.0849 20 50.6667 23.5817 50.6667 28V36C50.6667 40.4183 47.0849 44 42.6667 44H8.00001C3.58173 44 0 40.4183 0 36V28Z" fill="#1C1C1C"/>
+<path d="M8 20.5H42.667C46.809 20.5002 50.167 23.858 50.167 28V36C50.167 40.142 46.809 43.4998 42.667 43.5H8C3.85787 43.5 0.5 40.1421 0.5 36V28C0.5 23.8579 3.85786 20.5 8 20.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M6 32C6 28.6863 8.68629 26 12 26C15.3137 26 18 28.6863 18 32C18 35.3137 15.3137 38 12 38C8.68629 38 6 35.3137 6 32Z" fill="white" fill-opacity="0.24"/>
+<path d="M24 31C24 29.3431 25.3431 28 27 28H39.6667C41.3235 28 42.6667 29.3431 42.6667 31V33C42.6667 34.6569 41.3235 36 39.6667 36H27C25.3431 36 24 34.6569 24 33V31Z" fill="white" fill-opacity="0.24"/>
+<path d="M54.6666 28C54.6666 23.5817 58.2483 20 62.6666 20H97.3333C101.752 20 105.333 23.5817 105.333 28V36C105.333 40.4183 101.752 44 97.3333 44H62.6666C58.2484 44 54.6666 40.4183 54.6666 36V28Z" fill="#1C1C1C"/>
+<path d="M62.6666 20.5H97.3336C101.476 20.5002 104.834 23.858 104.834 28V36C104.834 40.142 101.476 43.4998 97.3336 43.5H62.6666C58.5245 43.5 55.1666 40.1421 55.1666 36V28C55.1666 23.8579 58.5245 20.5 62.6666 20.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M60.6666 32C60.6666 28.6863 63.3529 26 66.6666 26C69.9803 26 72.6666 28.6863 72.6666 32C72.6666 35.3137 69.9803 38 66.6666 38C63.3529 38 60.6666 35.3137 60.6666 32Z" fill="white" fill-opacity="0.24"/>
+<path d="M78.6666 31C78.6666 29.3431 80.0098 28 81.6666 28H94.3333C95.9901 28 97.3333 29.3431 97.3333 31V33C97.3333 34.6569 95.9901 36 94.3333 36H81.6666C80.0098 36 78.6666 34.6569 78.6666 33V31Z" fill="white" fill-opacity="0.24"/>
+<path d="M109.333 28C109.333 23.5817 112.915 20 117.333 20H152C156.418 20 160 23.5817 160 28V36C160 40.4183 156.418 44 152 44H117.333C112.915 44 109.333 40.4183 109.333 36V28Z" fill="#1C1C1C"/>
+<path d="M117.333 20.5H152C156.142 20.5002 159.5 23.858 159.5 28V36C159.5 40.142 156.142 43.4998 152 43.5H117.333C113.191 43.5 109.833 40.1421 109.833 36V28C109.833 23.8579 113.191 20.5 117.333 20.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M115.333 32C115.333 28.6863 118.02 26 121.333 26C124.647 26 127.333 28.6863 127.333 32C127.333 35.3137 124.647 38 121.333 38C118.02 38 115.333 35.3137 115.333 32Z" fill="white" fill-opacity="0.24"/>
+<path d="M133.333 31C133.333 29.3431 134.677 28 136.333 28H149C150.657 28 152 29.3431 152 31V33C152 34.6569 150.657 36 149 36H136.333C134.677 36 133.333 34.6569 133.333 33V31Z" fill="white" fill-opacity="0.24"/>
+<path d="M0 56C0 53.7909 1.79086 52 4 52H29C31.2091 52 33 53.7909 33 56C33 58.2091 31.2091 60 29 60H4C1.79086 60 0 58.2091 0 56Z" fill="white" fill-opacity="0.48"/>
+<path d="M0 72C0 67.5817 3.58172 64 8 64H29C33.4183 64 37 67.5817 37 72V96C37 100.418 33.4183 104 29 104H8C3.58172 104 0 100.418 0 96V72Z" fill="#1C1C1C"/>
+<path d="M8 64.5H29C33.1421 64.5 36.5 67.8579 36.5 72V96C36.5 100.142 33.1421 103.5 29 103.5H8C3.85786 103.5 0.5 100.142 0.5 96V72C0.5 67.8579 3.85786 64.5 8 64.5Z" stroke="white" stroke-opacity="0.24"/>
+<mask id="mask0_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="72" width="25" height="24">
+<path d="M18.5 74C16.6435 74 14.863 74.7375 13.5503 76.0503C12.2375 77.363 11.5 79.1435 11.5 81C11.5 83.38 12.69 85.47 14.5 86.74V89C14.5 89.2652 14.6054 89.5196 14.7929 89.7071C14.9804 89.8946 15.2348 90 15.5 90H21.5C21.7652 90 22.0196 89.8946 22.2071 89.7071C22.3946 89.5196 22.5 89.2652 22.5 89V86.74C24.31 85.47 25.5 83.38 25.5 81C25.5 79.1435 24.7625 77.363 23.4497 76.0503C22.137 74.7375 20.3565 74 18.5 74ZM15.5 93C15.5 93.2652 15.6054 93.5196 15.7929 93.7071C15.9804 93.8946 16.2348 94 16.5 94H20.5C20.7652 94 21.0196 93.8946 21.2071 93.7071C21.3946 93.5196 21.5 93.2652 21.5 93V92H15.5V93Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_4744_40067)">
+<rect x="6.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M41 72C41 67.5817 44.5817 64 49 64H70C74.4183 64 78 67.5817 78 72V96C78 100.418 74.4183 104 70 104H49C44.5817 104 41 100.418 41 96V72Z" fill="#1C1C1C"/>
+<path d="M49 64.5H70C74.1421 64.5 77.5 67.8579 77.5 72V96C77.5 100.142 74.1421 103.5 70 103.5H49C44.8579 103.5 41.5 100.142 41.5 96V72C41.5 67.8579 44.8579 64.5 49 64.5Z" stroke="white" stroke-opacity="0.24"/>
+<mask id="mask1_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="47" y="72" width="25" height="24">
+<path d="M66.5 80C67.61 80 68.5 80.9 68.5 82V88.76C69.11 89.31 69.5 90.11 69.5 91C69.5 92.66 68.16 94 66.5 94C64.84 94 63.5 92.66 63.5 91C63.5 90.11 63.89 89.31 64.5 88.76V82C64.5 80.9 65.4 80 66.5 80ZM66.5 81C65.95 81 65.5 81.45 65.5 82V83H67.5V82C67.5 81.45 67.05 81 66.5 81ZM52.5 92V84H49.5L59.5 75L63.9 78.96C63.04 79.69 62.5 80.78 62.5 82V88C61.87 88.83 61.5 89.87 61.5 91L61.6 92H52.5Z" fill="black"/>
+</mask>
+<g mask="url(#mask1_4744_40067)">
+<rect x="47.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M82 72C82 67.5817 85.5817 64 90 64H111C115.418 64 119 67.5817 119 72V96C119 100.418 115.418 104 111 104H90C85.5817 104 82 100.418 82 96V72Z" fill="#1C1C1C"/>
+<path d="M90 64.5H111C115.142 64.5 118.5 67.8579 118.5 72V96C118.5 100.142 115.142 103.5 111 103.5H90C85.8579 103.5 82.5 100.142 82.5 96V72C82.5 67.8579 85.8579 64.5 90 64.5Z" stroke="white" stroke-opacity="0.24"/>
+<mask id="mask2_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="88" y="72" width="25" height="24">
+<path d="M100.5 84H107.5C106.97 88.11 104.22 91.78 100.5 92.92V84H93.5V78.3L100.5 75.19M100.5 73L91.5 77V83C91.5 88.55 95.34 93.73 100.5 95C105.66 93.73 109.5 88.55 109.5 83V77L100.5 73Z" fill="black"/>
+</mask>
+<g mask="url(#mask2_4744_40067)">
+<rect x="88.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M123 72C123 67.5817 126.582 64 131 64H152C156.418 64 160 67.5817 160 72V96C160 100.418 156.418 104 152 104H131C126.582 104 123 100.418 123 96V72Z" fill="#1C1C1C"/>
+<path d="M131 64.5H152C156.142 64.5 159.5 67.8579 159.5 72V96C159.5 100.142 156.142 103.5 152 103.5H131C126.858 103.5 123.5 100.142 123.5 96V72C123.5 67.8579 126.858 64.5 131 64.5Z" stroke="white" stroke-opacity="0.24"/>
+<mask id="mask3_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="129" y="72" width="25" height="24">
+<path d="M145.5 84C145.5 83.4696 145.711 82.9609 146.086 82.5858C146.461 82.2107 146.97 82 147.5 82C148.03 82 148.539 82.2107 148.914 82.5858C149.289 82.9609 149.5 83.4696 149.5 84C149.5 84.5304 149.289 85.0391 148.914 85.4142C148.539 85.7893 148.03 86 147.5 86C146.97 86 146.461 85.7893 146.086 85.4142C145.711 85.0391 145.5 84.5304 145.5 84ZM139.5 84C139.5 83.4696 139.711 82.9609 140.086 82.5858C140.461 82.2107 140.97 82 141.5 82C142.03 82 142.539 82.2107 142.914 82.5858C143.289 82.9609 143.5 83.4696 143.5 84C143.5 84.5304 143.289 85.0391 142.914 85.4142C142.539 85.7893 142.03 86 141.5 86C140.97 86 140.461 85.7893 140.086 85.4142C139.711 85.0391 139.5 84.5304 139.5 84ZM133.5 84C133.5 83.4696 133.711 82.9609 134.086 82.5858C134.461 82.2107 134.97 82 135.5 82C136.03 82 136.539 82.2107 136.914 82.5858C137.289 82.9609 137.5 83.4696 137.5 84C137.5 84.5304 137.289 85.0391 136.914 85.4142C136.539 85.7893 136.03 86 135.5 86C134.97 86 134.461 85.7893 134.086 85.4142C133.711 85.0391 133.5 84.5304 133.5 84Z" fill="black"/>
+</mask>
+<g mask="url(#mask3_4744_40067)">
+<rect x="129.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M0 116C0 113.791 1.79086 112 4 112H29C31.2091 112 33 113.791 33 116C33 118.209 31.2091 120 29 120H4C1.79086 120 0 118.209 0 116Z" fill="white" fill-opacity="0.48"/>
+<path d="M0 132C0 127.582 3.58172 124 8 124H70C74.4183 124 78 127.582 78 132V160H0V132Z" fill="url(#paint0_linear_4744_40067)"/>
+<path d="M8 124.5H70C74.1421 124.5 77.5 127.858 77.5 132V159.5H0.5V132C0.5 127.858 3.85786 124.5 8 124.5Z" stroke="url(#paint1_linear_4744_40067)" stroke-opacity="0.12"/>
+<path d="M82 132C82 127.582 85.5817 124 90 124H152C156.418 124 160 127.582 160 132V160H82V132Z" fill="url(#paint2_linear_4744_40067)"/>
+<path d="M90 124.5H152C156.142 124.5 159.5 127.858 159.5 132V159.5H82.5V132C82.5 127.858 85.8579 124.5 90 124.5Z" stroke="url(#paint3_linear_4744_40067)" stroke-opacity="0.12"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4744_40067" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="#1C1C1C"/>
+<stop offset="1" stop-color="#1C1C1C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4744_40067" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="white" stop-opacity="0.24"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_4744_40067" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="#1C1C1C"/>
+<stop offset="1" stop-color="#1C1C1C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_4744_40067" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="white" stop-opacity="0.24"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_4744_40067">
+<rect width="160" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -1,35 +1,31 @@
 <svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1738_5531)">
+<g clip-path="url(#clip0_3969_50764)">
 <path d="M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V4C20 6.20914 18.2091 8 16 8H4C1.79086 8 0 6.20914 0 4V4Z" fill="black" fill-opacity="0.32"/>
-<rect x="40" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
-<path d="M0 20C0 15.5817 3.58172 12 8 12H40C44.4183 12 48 15.5817 48 20V64C48 68.4183 44.4183 72 40 72H8C3.58172 72 0 68.4183 0 64V20Z" fill="white"/>
-<path d="M8 12.5H40C44.1421 12.5 47.5 15.8579 47.5 20V64C47.5 68.1421 44.1421 71.5 40 71.5H8C3.85787 71.5 0.5 68.1421 0.5 64V20L0.509766 19.6143C0.704063 15.7792 3.77915 12.7041 7.61426 12.5098L8 12.5Z" stroke="black" stroke-opacity="0.12"/>
-<path d="M18.9844 41.0156C18.9844 40.0781 18.7031 39.2656 18.1406 38.5781C17.5781 37.8594 16.8594 37.375 15.9844 37.125V36C15.9844 35.4375 16.125 34.9375 16.4062 34.5C16.6875 34.0312 17.0469 33.6719 17.4844 33.4219C17.9531 33.1406 18.4531 33 18.9844 33H29.0156C29.5469 33 30.0312 33.1406 30.4688 33.4219C30.9375 33.6719 31.3125 34.0312 31.5938 34.5C31.875 34.9375 32.0156 35.4375 32.0156 36V37.125C31.1406 37.375 30.4219 37.8594 29.8594 38.5781C29.2969 39.2656 29.0156 40.0781 29.0156 41.0156V42.9844H18.9844V41.0156ZM33 39C33.5625 39 34.0312 39.2031 34.4062 39.6094C34.8125 39.9844 35.0156 40.4531 35.0156 41.0156V45.9844C35.0156 46.5469 34.875 47.0625 34.5938 47.5312C34.3125 47.9688 33.9375 48.3281 33.4688 48.6094C33.0312 48.8594 32.5469 48.9844 32.0156 48.9844V50.0156C32.0156 50.2656 31.9062 50.5 31.6875 50.7188C31.5 50.9062 31.2656 51 30.9844 51C30.7344 51 30.5 50.9062 30.2812 50.7188C30.0938 50.5 30 50.2656 30 50.0156V48.9844H18V50.0156C18 50.2656 17.8906 50.5 17.6719 50.7188C17.4844 50.9062 17.2656 51 17.0156 51C16.7344 51 16.4844 50.9062 16.2656 50.7188C16.0781 50.5 15.9844 50.2656 15.9844 50.0156V48.9844C15.4531 48.9844 14.9531 48.8594 14.4844 48.6094C14.0469 48.3281 13.6875 47.9688 13.4062 47.5312C13.125 47.0625 12.9844 46.5469 12.9844 45.9844V41.0156C12.9844 40.4531 13.1719 39.9844 13.5469 39.6094C13.9531 39.2031 14.4375 39 15 39C15.5625 39 16.0312 39.2031 16.4062 39.6094C16.8125 39.9844 17.0156 40.4531 17.0156 41.0156V45H30.9844V41.0156C30.9844 40.4531 31.1719 39.9844 31.5469 39.6094C31.9531 39.2031 32.4375 39 33 39Z" fill="#03A9F4"/>
-<path d="M56 4C56 1.79086 57.7909 0 60 0H72C74.2091 0 76 1.79086 76 4V4C76 6.20914 74.2091 8 72 8H60C57.7909 8 56 6.20914 56 4V4Z" fill="black" fill-opacity="0.32"/>
-<rect x="96" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
-<path d="M56 20C56 15.5817 59.5817 12 64 12H96C100.418 12 104 15.5817 104 20V64C104 68.4183 100.418 72 96 72H64C59.5817 72 56 68.4183 56 64V20Z" fill="white"/>
-<path d="M64 12.5H96C100.142 12.5 103.5 15.8579 103.5 20V64C103.5 68.1421 100.142 71.5 96 71.5H64C59.8579 71.5 56.5 68.1421 56.5 64V20L56.5098 19.6143C56.7041 15.7792 59.7792 12.7041 63.6143 12.5098L64 12.5Z" stroke="black" stroke-opacity="0.12"/>
-<path d="M86 39.9844H89.9844V42H88.0156V50.0156H71.9844V42H70.0156V39.9844H74C73.4375 39.9844 72.9531 39.7969 72.5469 39.4219C72.1719 39.0156 71.9844 38.5469 71.9844 38.0156V33.9844H77.9844V38.0156C77.9844 38.5469 77.7812 39.0156 77.375 39.4219C77 39.7969 76.5469 39.9844 76.0156 39.9844H83.9844V36.9844C83.9844 36.7344 83.8906 36.5156 83.7031 36.3281C83.5156 36.1094 83.2812 36 83 36C82.7188 36 82.4844 36.1094 82.2969 36.3281C82.1094 36.5156 82.0156 36.7344 82.0156 36.9844H80C80 36.4531 80.125 35.9688 80.375 35.5312C80.6562 35.0625 81.0156 34.6875 81.4531 34.4062C81.9219 34.125 82.4375 33.9844 83 33.9844C83.5625 33.9844 84.0625 34.125 84.5 34.4062C84.9688 34.6875 85.3281 35.0625 85.5781 35.5312C85.8594 35.9688 86 36.4531 86 36.9844V39.9844ZM80.9844 48V42H79.0156V48H80.9844Z" fill="#03A9F4"/>
-<path d="M112 4C112 1.79086 113.791 0 116 0H128C130.209 0 132 1.79086 132 4V4C132 6.20914 130.209 8 128 8H116C113.791 8 112 6.20914 112 4V4Z" fill="black" fill-opacity="0.32"/>
-<rect x="152" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
-<path d="M112 20C112 15.5817 115.582 12 120 12H152C156.418 12 160 15.5817 160 20V64C160 68.4183 156.418 72 152 72H120C115.582 72 112 68.4183 112 64V20Z" fill="white"/>
-<path d="M120 12.5H152C156.142 12.5 159.5 15.8579 159.5 20V64C159.5 68.1421 156.142 71.5 152 71.5H120C115.858 71.5 112.5 68.1421 112.5 64V20L112.51 19.6143C112.704 15.7792 115.779 12.7041 119.614 12.5098L120 12.5Z" stroke="black" stroke-opacity="0.12"/>
-<path d="M142.984 36.9844C144.078 36.9844 145.016 37.3906 145.797 38.2031C146.609 38.9844 147.016 39.9219 147.016 41.0156V50.0156H145V47.0156H127V50.0156H124.984V35.0156H127V44.0156H135.016V36.9844H142.984ZM133.094 42.0938C132.5 42.6875 131.797 42.9844 130.984 42.9844C130.172 42.9844 129.469 42.6875 128.875 42.0938C128.281 41.5 127.984 40.7969 127.984 39.9844C127.984 39.1719 128.281 38.4688 128.875 37.875C129.469 37.2812 130.172 36.9844 130.984 36.9844C131.797 36.9844 132.5 37.2812 133.094 37.875C133.688 38.4688 133.984 39.1719 133.984 39.9844C133.984 40.7969 133.688 41.5 133.094 42.0938Z" fill="#03A9F4"/>
-<path d="M0 84C0 81.7909 1.79086 80 4 80H16C18.2091 80 20 81.7909 20 84V84C20 86.2091 18.2091 88 16 88H4C1.79086 88 0 86.2091 0 84V84Z" fill="black" fill-opacity="0.32"/>
-<rect x="28" y="80" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
-<rect x="40" y="80" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
-<path d="M0 100C0 95.5817 3.58172 92 8 92H40C44.4183 92 48 95.5817 48 100V144C48 148.418 44.4183 152 40 152H8C3.58172 152 0 148.418 0 144V100Z" fill="white"/>
-<path d="M8 92.5H40C44.1421 92.5 47.5 95.8579 47.5 100V144C47.5 148.142 44.1421 151.5 40 151.5H8C3.85787 151.5 0.5 148.142 0.5 144V100L0.509766 99.6143C0.704063 95.7792 3.77915 92.7041 7.61426 92.5098L8 92.5Z" stroke="black" stroke-opacity="0.12"/>
-<path d="M14.0156 116H33.9844V128H32.0156V125.984H27.9844V128H26.0156V118.016H15.9844V128H14.0156V116ZM32.0156 118.016H27.9844V119.984H32.0156V118.016ZM27.9844 124.016H32.0156V122H27.9844V124.016Z" fill="#03A9F4"/>
-<path d="M56 84C56 81.7909 57.7909 80 60 80H72C74.2091 80 76 81.7909 76 84V84C76 86.2091 74.2091 88 72 88H60C57.7909 88 56 86.2091 56 84V84Z" fill="black" fill-opacity="0.32"/>
-<rect x="84" y="80" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
-<rect x="96" y="80" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
-<path d="M56 100C56 95.5817 59.5817 92 64 92H96C100.418 92 104 95.5817 104 100V144C104 148.418 100.418 152 96 152H64C59.5817 152 56 148.418 56 144V100Z" fill="white"/>
-<path d="M64 92.5H96C100.142 92.5 103.5 95.8579 103.5 100V144C103.5 148.142 100.142 151.5 96 151.5H64C59.8579 151.5 56.5 148.142 56.5 144V100L56.5098 99.6143C56.7041 95.7792 59.7792 92.7041 63.6143 92.5098L64 92.5Z" stroke="black" stroke-opacity="0.12"/>
-<path d="M77.9844 121.016V122.984H80V121.016H77.9844ZM82.0156 116V131H71V128.984H73.0156V113H82.0156V113.984H86.9844V128.984H89V131H85.0156V116H82.0156Z" fill="#03A9F4"/>
+<path d="M0 20C0 15.5817 3.58172 12 8 12H68C72.4183 12 76 15.5817 76 20V36C76 40.4183 72.4183 44 68 44H8C3.58172 44 0 40.4183 0 36V20Z" fill="white"/>
+<path d="M8 12.5H68C72.1421 12.5 75.5 15.8579 75.5 20V36C75.5 40.1421 72.1421 43.5 68 43.5H8C3.85786 43.5 0.5 40.1421 0.5 36V20C0.5 15.8579 3.85786 12.5 8 12.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M32.9844 27.0156C32.9844 26.0781 32.7031 25.2656 32.1406 24.5781C31.5781 23.8594 30.8594 23.375 29.9844 23.125V22C29.9844 21.4375 30.125 20.9375 30.4062 20.5C30.6875 20.0312 31.0469 19.6719 31.4844 19.4219C31.9531 19.1406 32.4531 19 32.9844 19H43.0156C43.5469 19 44.0312 19.1406 44.4688 19.4219C44.9375 19.6719 45.3125 20.0312 45.5938 20.5C45.875 20.9375 46.0156 21.4375 46.0156 22V23.125C45.1406 23.375 44.4219 23.8594 43.8594 24.5781C43.2969 25.2656 43.0156 26.0781 43.0156 27.0156V28.9844H32.9844V27.0156ZM47 25C47.5625 25 48.0312 25.2031 48.4062 25.6094C48.8125 25.9844 49.0156 26.4531 49.0156 27.0156V31.9844C49.0156 32.5469 48.875 33.0625 48.5938 33.5312C48.3125 33.9688 47.9375 34.3281 47.4688 34.6094C47.0312 34.8594 46.5469 34.9844 46.0156 34.9844V36.0156C46.0156 36.2656 45.9062 36.5 45.6875 36.7188C45.5 36.9062 45.2656 37 44.9844 37C44.7344 37 44.5 36.9062 44.2812 36.7188C44.0938 36.5 44 36.2656 44 36.0156V34.9844H32V36.0156C32 36.2656 31.8906 36.5 31.6719 36.7188C31.4844 36.9062 31.2656 37 31.0156 37C30.7344 37 30.4844 36.9062 30.2656 36.7188C30.0781 36.5 29.9844 36.2656 29.9844 36.0156V34.9844C29.4531 34.9844 28.9531 34.8594 28.4844 34.6094C28.0469 34.3281 27.6875 33.9688 27.4062 33.5312C27.125 33.0625 26.9844 32.5469 26.9844 31.9844V27.0156C26.9844 26.4531 27.1719 25.9844 27.5469 25.6094C27.9531 25.2031 28.4375 25 29 25C29.5625 25 30.0312 25.2031 30.4062 25.6094C30.8125 25.9844 31.0156 26.4531 31.0156 27.0156V31H44.9844V27.0156C44.9844 26.4531 45.1719 25.9844 45.5469 25.6094C45.9531 25.2031 46.4375 25 47 25Z" fill="#03A9F4"/>
+<path d="M0 56C0 51.5817 3.58172 48 8 48H68C72.4183 48 76 51.5817 76 56V72C76 76.4183 72.4183 80 68 80H8C3.58172 80 0 76.4183 0 72V56Z" fill="white"/>
+<path d="M8 48.5H68C72.1421 48.5 75.5 51.8579 75.5 56V72C75.5 76.1421 72.1421 79.5 68 79.5H8C3.85786 79.5 0.5 76.1421 0.5 72V56C0.5 51.8579 3.85786 48.5 8 48.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M44 61.9844H47.9844V64H46.0156V72.0156H29.9844V64H28.0156V61.9844H32C31.4375 61.9844 30.9531 61.7969 30.5469 61.4219C30.1719 61.0156 29.9844 60.5469 29.9844 60.0156V55.9844H35.9844V60.0156C35.9844 60.5469 35.7812 61.0156 35.375 61.4219C35 61.7969 34.5469 61.9844 34.0156 61.9844H41.9844V58.9844C41.9844 58.7344 41.8906 58.5156 41.7031 58.3281C41.5156 58.1094 41.2812 58 41 58C40.7188 58 40.4844 58.1094 40.2969 58.3281C40.1094 58.5156 40.0156 58.7344 40.0156 58.9844H38C38 58.4531 38.125 57.9688 38.375 57.5312C38.6562 57.0625 39.0156 56.6875 39.4531 56.4062C39.9219 56.125 40.4375 55.9844 41 55.9844C41.5625 55.9844 42.0625 56.125 42.5 56.4062C42.9688 56.6875 43.3281 57.0625 43.5781 57.5312C43.8594 57.9688 44 58.4531 44 58.9844V61.9844ZM38.9844 70V64H37.0156V70H38.9844Z" fill="#03A9F4"/>
+<path d="M0 92C0 87.5817 3.58172 84 8 84H68C72.4183 84 76 87.5817 76 92V108C76 112.418 72.4183 116 68 116H8C3.58172 116 0 112.418 0 108V92Z" fill="white"/>
+<path d="M8 84.5H68C72.1421 84.5 75.5 87.8579 75.5 92V108C75.5 112.142 72.1421 115.5 68 115.5H8C3.85786 115.5 0.5 112.142 0.5 108V92C0.5 87.8579 3.85786 84.5 8 84.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M44.9844 94.9844C46.0781 94.9844 47.0156 95.3906 47.7969 96.2031C48.6094 96.9844 49.0156 97.9219 49.0156 99.0156V108.016H47V105.016H29V108.016H26.9844V93.0156H29V102.016H37.0156V94.9844H44.9844ZM35.0938 100.094C34.5 100.688 33.7969 100.984 32.9844 100.984C32.1719 100.984 31.4688 100.688 30.875 100.094C30.2812 99.5 29.9844 98.7969 29.9844 97.9844C29.9844 97.1719 30.2812 96.4688 30.875 95.875C31.4688 95.2812 32.1719 94.9844 32.9844 94.9844C33.7969 94.9844 34.5 95.2812 35.0938 95.875C35.6875 96.4688 35.9844 97.1719 35.9844 97.9844C35.9844 98.7969 35.6875 99.5 35.0938 100.094Z" fill="#03A9F4"/>
+<path d="M0 128C0 123.582 3.58172 120 8 120H68C72.4183 120 76 123.582 76 128V144C76 148.418 72.4183 152 68 152H8C3.58172 152 0 148.418 0 144V128Z" fill="white"/>
+<path d="M8 120.5H68C72.1421 120.5 75.5 123.858 75.5 128V144C75.5 148.142 72.1421 151.5 68 151.5H8C3.85786 151.5 0.5 148.142 0.5 144V128C0.5 123.858 3.85786 120.5 8 120.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M46.0156 136.984H47.9844V142.984C47.9844 143.516 47.7812 143.984 47.375 144.391C47 144.797 46.5469 145 46.0156 145C46.0156 145.281 45.9062 145.516 45.6875 145.703C45.5 145.891 45.2656 145.984 44.9844 145.984H31.0156C30.7344 145.984 30.4844 145.891 30.2656 145.703C30.0781 145.516 29.9844 145.281 29.9844 145C29.4531 145 28.9844 144.797 28.5781 144.391C28.2031 143.984 28.0156 143.516 28.0156 142.984V136.984H31.0156V136.234C31.0156 135.641 31.2344 135.125 31.6719 134.688C32.1406 134.219 32.6719 133.984 33.2656 133.984C33.8906 133.984 34.4531 134.234 34.9531 134.734L36.3125 136.281C36.5 136.5 36.7812 136.734 37.1562 136.984H44V128.828C44 128.609 43.9219 128.422 43.7656 128.266C43.6094 128.078 43.4062 127.984 43.1562 127.984C42.9375 127.984 42.75 128.062 42.5938 128.219L41.3281 129.484C41.3906 129.734 41.4219 129.906 41.4219 130C41.4219 130.344 41.3125 130.703 41.0938 131.078L38.3281 128.312C38.7031 128.094 39.0625 127.984 39.4062 127.984C39.5625 127.984 39.7344 128.016 39.9219 128.078L41.1875 126.812C41.7188 126.281 42.375 126.016 43.1562 126.016C43.9375 126.016 44.6094 126.297 45.1719 126.859C45.7344 127.391 46.0156 128.047 46.0156 128.828V136.984ZM31.5781 132.438C31.2031 132.031 31.0156 131.547 31.0156 130.984C31.0156 130.422 31.2031 129.953 31.5781 129.578C31.9531 129.203 32.4219 129.016 32.9844 129.016C33.5469 129.016 34.0156 129.203 34.3906 129.578C34.7969 129.953 35 130.422 35 130.984C35 131.547 34.7969 132.031 34.3906 132.438C34.0156 132.812 33.5469 133 32.9844 133C32.4219 133 31.9531 132.812 31.5781 132.438Z" fill="#03A9F4"/>
+<path d="M84 4C84 1.79086 85.7909 0 88 0H100C102.209 0 104 1.79086 104 4V4C104 6.20914 102.209 8 100 8H88C85.7909 8 84 6.20914 84 4V4Z" fill="black" fill-opacity="0.32"/>
+<path d="M84 20C84 15.5817 87.5817 12 92 12H152C156.418 12 160 15.5817 160 20V36C160 40.4183 156.418 44 152 44H92C87.5817 44 84 40.4183 84 36V20Z" fill="white"/>
+<path d="M92 12.5H152C156.142 12.5 159.5 15.8579 159.5 20V36C159.5 40.1421 156.142 43.5 152 43.5H92C87.8579 43.5 84.5 40.1421 84.5 36V20C84.5 15.8579 87.8579 12.5 92 12.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M131.984 30.0156C131.984 30.7656 131.797 31.4531 131.422 32.0781C131.047 32.6719 130.562 33.1406 129.969 33.4844C129.844 34.2031 129.5 34.8125 128.938 35.3125C128.406 35.7812 127.766 36.0156 127.016 36.0156C126.359 36.0156 125.766 35.8281 125.234 35.4531C124.734 35.0781 124.391 34.5938 124.203 34H119.797C119.609 34.5938 119.25 35.0781 118.719 35.4531C118.219 35.8281 117.641 36.0156 116.984 36.0156C116.234 36.0156 115.578 35.7812 115.016 35.3125C114.484 34.8125 114.156 34.2031 114.031 33.4844C113.438 33.1406 112.953 32.6719 112.578 32.0781C112.203 31.4531 112.016 30.7656 112.016 30.0156C112.016 29.1094 112.266 28.3125 112.766 27.625C113.297 26.9375 113.969 26.4688 114.781 26.2188L113 24.3906L112.719 24.7188C112.5 24.9062 112.25 25 111.969 25C111.719 25 111.5 24.9062 111.312 24.7188C111.094 24.5312 110.984 24.2969 110.984 24.0156C110.984 23.7344 111.094 23.5 111.312 23.3125L113.281 21.2969C113.469 21.1094 113.703 21.0156 113.984 21.0156C114.266 21.0156 114.5 21.1094 114.688 21.2969C114.906 21.4844 115.016 21.7188 115.016 22C115.016 22.2812 114.906 22.5156 114.688 22.7031L114.406 22.9844L115.812 24.3906L116.609 22.0469C116.797 21.4219 117.156 20.9219 117.688 20.5469C118.219 20.1719 118.797 19.9844 119.422 19.9844H124.578C125.203 19.9844 125.781 20.1719 126.312 20.5469C126.844 20.9219 127.203 21.4219 127.391 22.0469L128.75 26.0781C129.375 26.2031 129.922 26.4531 130.391 26.8281C130.891 27.2031 131.281 27.6719 131.562 28.2344C131.844 28.7656 131.984 29.3594 131.984 30.0156ZM116.984 34C117.266 34 117.5 33.9062 117.688 33.7188C117.906 33.5 118.016 33.2656 118.016 33.0156C118.016 32.7344 117.906 32.5 117.688 32.3125C117.5 32.0938 117.266 31.9844 116.984 31.9844C116.734 31.9844 116.5 32.0938 116.281 32.3125C116.094 32.5 116 32.7344 116 33.0156C116 33.2656 116.094 33.5 116.281 33.7188C116.5 33.9062 116.734 34 116.984 34ZM121.016 25.9844V22H119.422C118.953 22 118.641 22.2344 118.484 22.7031L117.406 25.9844H121.016ZM122.984 22V25.9844H126.594L125.516 22.7031C125.359 22.2344 125.047 22 124.578 22H122.984ZM127.016 34C127.266 34 127.484 33.9062 127.672 33.7188C127.891 33.5 128 33.2656 128 33.0156C128 32.7344 127.891 32.5 127.672 32.3125C127.484 32.0938 127.266 31.9844 127.016 31.9844C126.734 31.9844 126.484 32.0938 126.266 32.3125C126.078 32.5 125.984 32.7344 125.984 33.0156C125.984 33.2656 126.078 33.5 126.266 33.7188C126.484 33.9062 126.734 34 127.016 34Z" fill="#03A9F4"/>
+<path d="M84 56C84 51.5817 87.5817 48 92 48H152C156.418 48 160 51.5817 160 56V72C160 76.4183 156.418 80 152 80H92C87.5817 80 84 76.4183 84 72V56Z" fill="white"/>
+<path d="M92 48.5H152C156.142 48.5 159.5 51.8579 159.5 56V72C159.5 76.1421 156.142 79.5 152 79.5H92C87.8579 79.5 84.5 76.1421 84.5 72V56C84.5 51.8579 87.8579 48.5 92 48.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M128.984 58.9844C130.078 58.9844 131.016 59.3906 131.797 60.2031C132.609 60.9844 133.016 61.9219 133.016 63.0156V72.0156H131V69.0156H113V72.0156H110.984V57.0156H113V66.0156H121.016V58.9844H128.984ZM119.094 64.0938C118.5 64.6875 117.797 64.9844 116.984 64.9844C116.172 64.9844 115.469 64.6875 114.875 64.0938C114.281 63.5 113.984 62.7969 113.984 61.9844C113.984 61.1719 114.281 60.4688 114.875 59.875C115.469 59.2812 116.172 58.9844 116.984 58.9844C117.797 58.9844 118.5 59.2812 119.094 59.875C119.688 60.4688 119.984 61.1719 119.984 61.9844C119.984 62.7969 119.688 63.5 119.094 64.0938Z" fill="#03A9F4"/>
+<path d="M84 92C84 87.5817 87.5817 84 92 84H152C156.418 84 160 87.5817 160 92V108C160 112.418 156.418 116 152 116H92C87.5817 116 84 112.418 84 108V92Z" fill="white"/>
+<path d="M92 84.5H152C156.142 84.5 159.5 87.8579 159.5 92V108C159.5 112.142 156.142 115.5 152 115.5H92C87.8579 115.5 84.5 112.142 84.5 108V92C84.5 87.8579 87.8579 84.5 92 84.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M112.016 94H131.984V106H130.016V103.984H125.984V106H124.016V96.0156H113.984V106H112.016V94ZM130.016 96.0156H125.984V97.9844H130.016V96.0156ZM125.984 102.016H130.016V100H125.984V102.016Z" fill="#03A9F4"/>
 </g>
 <defs>
-<clipPath id="clip0_1738_5531">
+<clipPath id="clip0_3969_50764">
 <rect width="160" height="160" fill="white"/>
 </clipPath>
 </defs>
@@ -0,0 +1,76 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4744_39984)">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H28C31.3137 0 34 2.68629 34 6C34 9.31371 31.3137 12 28 12H6C2.68629 12 0 9.31371 0 6Z" fill="black" fill-opacity="0.32"/>
+<path d="M0 28C0 23.5817 3.58172 20 8 20H42.6667C47.0849 20 50.6667 23.5817 50.6667 28V36C50.6667 40.4183 47.0849 44 42.6667 44H8.00001C3.58173 44 0 40.4183 0 36V28Z" fill="white"/>
+<path d="M8 20.5H42.667C46.809 20.5002 50.167 23.858 50.167 28V36C50.167 40.142 46.809 43.4998 42.667 43.5H8C3.85787 43.5 0.5 40.1421 0.5 36V28C0.5 23.8579 3.85786 20.5 8 20.5Z" stroke="black" stroke-opacity="0.12"/>
+<rect x="6" y="26" width="12" height="12" rx="6" fill="black" fill-opacity="0.12"/>
+<path d="M24 31C24 29.3431 25.3431 28 27 28H39.6667C41.3235 28 42.6667 29.3431 42.6667 31V33C42.6667 34.6569 41.3235 36 39.6667 36H27C25.3431 36 24 34.6569 24 33V31Z" fill="black" fill-opacity="0.12"/>
+<path d="M54.6667 28C54.6667 23.5817 58.2484 20 62.6667 20H97.3333C101.752 20 105.333 23.5817 105.333 28V36C105.333 40.4183 101.752 44 97.3334 44H62.6667C58.2484 44 54.6667 40.4183 54.6667 36V28Z" fill="white"/>
+<path d="M62.6667 20.5H97.3337C101.476 20.5002 104.834 23.858 104.834 28V36C104.834 40.142 101.476 43.4998 97.3337 43.5H62.6667C58.5246 43.5 55.1667 40.1421 55.1667 36V28C55.1667 23.8579 58.5246 20.5 62.6667 20.5Z" stroke="black" stroke-opacity="0.12"/>
+<rect x="60.6667" y="26" width="12" height="12" rx="6" fill="black" fill-opacity="0.12"/>
+<path d="M78.6667 31C78.6667 29.3431 80.0098 28 81.6667 28H94.3334C95.9902 28 97.3334 29.3431 97.3334 31V33C97.3334 34.6569 95.9902 36 94.3334 36H81.6667C80.0098 36 78.6667 34.6569 78.6667 33V31Z" fill="black" fill-opacity="0.12"/>
+<path d="M109.333 28C109.333 23.5817 112.915 20 117.333 20H152C156.418 20 160 23.5817 160 28V36C160 40.4183 156.418 44 152 44H117.333C112.915 44 109.333 40.4183 109.333 36V28Z" fill="white"/>
+<path d="M117.333 20.5H152C156.142 20.5002 159.5 23.858 159.5 28V36C159.5 40.142 156.142 43.4998 152 43.5H117.333C113.191 43.5 109.833 40.1421 109.833 36V28C109.833 23.8579 113.191 20.5 117.333 20.5Z" stroke="black" stroke-opacity="0.12"/>
+<rect x="115.333" y="26" width="12" height="12" rx="6" fill="black" fill-opacity="0.12"/>
+<path d="M133.333 31C133.333 29.3431 134.676 28 136.333 28H149C150.657 28 152 29.3431 152 31V33C152 34.6569 150.657 36 149 36H136.333C134.676 36 133.333 34.6569 133.333 33V31Z" fill="black" fill-opacity="0.12"/>
+<path d="M0 56C0 53.7909 1.79086 52 4 52H29C31.2091 52 33 53.7909 33 56C33 58.2091 31.2091 60 29 60H4C1.79086 60 0 58.2091 0 56Z" fill="black" fill-opacity="0.32"/>
+<path d="M0 72C0 67.5817 3.58172 64 8 64H29C33.4183 64 37 67.5817 37 72V96C37 100.418 33.4183 104 29 104H8C3.58172 104 0 100.418 0 96V72Z" fill="white"/>
+<path d="M8 64.5H29C33.1421 64.5 36.5 67.8579 36.5 72V96C36.5 100.142 33.1421 103.5 29 103.5H8C3.85786 103.5 0.5 100.142 0.5 96V72C0.5 67.8579 3.85786 64.5 8 64.5Z" stroke="black" stroke-opacity="0.12"/>
+<mask id="mask0_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="72" width="25" height="24">
+<path d="M18.5 74C16.6435 74 14.863 74.7375 13.5503 76.0503C12.2375 77.363 11.5 79.1435 11.5 81C11.5 83.38 12.69 85.47 14.5 86.74V89C14.5 89.2652 14.6054 89.5196 14.7929 89.7071C14.9804 89.8946 15.2348 90 15.5 90H21.5C21.7652 90 22.0196 89.8946 22.2071 89.7071C22.3946 89.5196 22.5 89.2652 22.5 89V86.74C24.31 85.47 25.5 83.38 25.5 81C25.5 79.1435 24.7625 77.363 23.4497 76.0503C22.137 74.7375 20.3565 74 18.5 74ZM15.5 93C15.5 93.2652 15.6054 93.5196 15.7929 93.7071C15.9804 93.8946 16.2348 94 16.5 94H20.5C20.7652 94 21.0196 93.8946 21.2071 93.7071C21.3946 93.5196 21.5 93.2652 21.5 93V92H15.5V93Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_4744_39984)">
+<rect x="6.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M41 72C41 67.5817 44.5817 64 49 64H70C74.4183 64 78 67.5817 78 72V96C78 100.418 74.4183 104 70 104H49C44.5817 104 41 100.418 41 96V72Z" fill="white"/>
+<path d="M49 64.5H70C74.1421 64.5 77.5 67.8579 77.5 72V96C77.5 100.142 74.1421 103.5 70 103.5H49C44.8579 103.5 41.5 100.142 41.5 96V72C41.5 67.8579 44.8579 64.5 49 64.5Z" stroke="black" stroke-opacity="0.12"/>
+<mask id="mask1_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="47" y="72" width="25" height="24">
+<path d="M66.5 80C67.61 80 68.5 80.9 68.5 82V88.76C69.11 89.31 69.5 90.11 69.5 91C69.5 92.66 68.16 94 66.5 94C64.84 94 63.5 92.66 63.5 91C63.5 90.11 63.89 89.31 64.5 88.76V82C64.5 80.9 65.4 80 66.5 80ZM66.5 81C65.95 81 65.5 81.45 65.5 82V83H67.5V82C67.5 81.45 67.05 81 66.5 81ZM52.5 92V84H49.5L59.5 75L63.9 78.96C63.04 79.69 62.5 80.78 62.5 82V88C61.87 88.83 61.5 89.87 61.5 91L61.6 92H52.5Z" fill="black"/>
+</mask>
+<g mask="url(#mask1_4744_39984)">
+<rect x="47.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M82 72C82 67.5817 85.5817 64 90 64H111C115.418 64 119 67.5817 119 72V96C119 100.418 115.418 104 111 104H90C85.5817 104 82 100.418 82 96V72Z" fill="white"/>
+<path d="M90 64.5H111C115.142 64.5 118.5 67.8579 118.5 72V96C118.5 100.142 115.142 103.5 111 103.5H90C85.8579 103.5 82.5 100.142 82.5 96V72C82.5 67.8579 85.8579 64.5 90 64.5Z" stroke="black" stroke-opacity="0.12"/>
+<mask id="mask2_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="88" y="72" width="25" height="24">
+<path d="M100.5 84H107.5C106.97 88.11 104.22 91.78 100.5 92.92V84H93.5V78.3L100.5 75.19M100.5 73L91.5 77V83C91.5 88.55 95.34 93.73 100.5 95C105.66 93.73 109.5 88.55 109.5 83V77L100.5 73Z" fill="black"/>
+</mask>
+<g mask="url(#mask2_4744_39984)">
+<rect x="88.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M123 72C123 67.5817 126.582 64 131 64H152C156.418 64 160 67.5817 160 72V96C160 100.418 156.418 104 152 104H131C126.582 104 123 100.418 123 96V72Z" fill="white"/>
+<path d="M131 64.5H152C156.142 64.5 159.5 67.8579 159.5 72V96C159.5 100.142 156.142 103.5 152 103.5H131C126.858 103.5 123.5 100.142 123.5 96V72C123.5 67.8579 126.858 64.5 131 64.5Z" stroke="black" stroke-opacity="0.12"/>
+<mask id="mask3_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="129" y="72" width="25" height="24">
+<path d="M145.5 84C145.5 83.4696 145.711 82.9609 146.086 82.5858C146.461 82.2107 146.97 82 147.5 82C148.03 82 148.539 82.2107 148.914 82.5858C149.289 82.9609 149.5 83.4696 149.5 84C149.5 84.5304 149.289 85.0391 148.914 85.4142C148.539 85.7893 148.03 86 147.5 86C146.97 86 146.461 85.7893 146.086 85.4142C145.711 85.0391 145.5 84.5304 145.5 84ZM139.5 84C139.5 83.4696 139.711 82.9609 140.086 82.5858C140.461 82.2107 140.97 82 141.5 82C142.03 82 142.539 82.2107 142.914 82.5858C143.289 82.9609 143.5 83.4696 143.5 84C143.5 84.5304 143.289 85.0391 142.914 85.4142C142.539 85.7893 142.03 86 141.5 86C140.97 86 140.461 85.7893 140.086 85.4142C139.711 85.0391 139.5 84.5304 139.5 84ZM133.5 84C133.5 83.4696 133.711 82.9609 134.086 82.5858C134.461 82.2107 134.97 82 135.5 82C136.03 82 136.539 82.2107 136.914 82.5858C137.289 82.9609 137.5 83.4696 137.5 84C137.5 84.5304 137.289 85.0391 136.914 85.4142C136.539 85.7893 136.03 86 135.5 86C134.97 86 134.461 85.7893 134.086 85.4142C133.711 85.0391 133.5 84.5304 133.5 84Z" fill="black"/>
+</mask>
+<g mask="url(#mask3_4744_39984)">
+<rect x="129.5" y="72" width="24" height="24" fill="#18BCF2"/>
+</g>
+<path d="M0 116C0 113.791 1.79086 112 4 112H29C31.2091 112 33 113.791 33 116C33 118.209 31.2091 120 29 120H4C1.79086 120 0 118.209 0 116Z" fill="black" fill-opacity="0.32"/>
+<path d="M0 132C0 127.582 3.58172 124 8 124H70C74.4183 124 78 127.582 78 132V160H0V132Z" fill="url(#paint0_linear_4744_39984)"/>
+<path d="M8 124.5H70C74.1421 124.5 77.5 127.858 77.5 132V159.5H0.5V132C0.5 127.858 3.85786 124.5 8 124.5Z" stroke="url(#paint1_linear_4744_39984)" stroke-opacity="0.12"/>
+<path d="M82 132C82 127.582 85.5817 124 90 124H152C156.418 124 160 127.582 160 132V160H82V132Z" fill="url(#paint2_linear_4744_39984)"/>
+<path d="M90 124.5H152C156.142 124.5 159.5 127.858 159.5 132V159.5H82.5V132C82.5 127.858 85.8579 124.5 90 124.5Z" stroke="url(#paint3_linear_4744_39984)" stroke-opacity="0.12"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4744_39984" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4744_39984" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-opacity="0.12"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_4744_39984" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_4744_39984" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-opacity="0.12"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_4744_39984">
+<rect width="160" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20250625.0"
+version      = "20250903.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -33,7 +33,7 @@ fi

 docker run \
    -v ${LOCAL_FILE}:/opt/src/${LOCAL_FILE} \
-     lokalise/lokalise-cli-2:v2.6.10 lokalise2 \
+     lokalise/lokalise-cli-2:v3.1.4 lokalise2 \
    --token ${LOKALISE_TOKEN} \
    --project-id ${PROJECT_ID} \
    file upload \
@@ -1,5 +1,4 @@
 /* eslint-disable lit/prefer-static-styles */
-import "@material/mwc-button";
 import { genClientId } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
@@ -7,6 +6,7 @@ import { keyed } from "lit/directives/keyed";
 import { customElement, property, state } from "lit/decorators";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-alert";
+import "../components/ha-button";
 import "../components/ha-checkbox";
 import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
 import "../components/ha-formfield";
@@ -173,15 +173,14 @@ export class HaAuthFlow extends LitElement {
        return html`
          ${this._renderStep(this.step)}
          <div class="action">
-            <mwc-button
-              raised
+            <ha-button
              @click=${this._handleSubmit}
              .disabled=${this._submitting}
            >
              ${this.step.type === "form"
                ? this.localize("ui.panel.page-authorize.form.next")
                : this.localize("ui.panel.page-authorize.form.start_over")}
-            </mwc-button>
+            </ha-button>
          </div>
        `;
      case "error":
@@ -192,9 +191,9 @@ export class HaAuthFlow extends LitElement {
            })}
          </ha-alert>
          <div class="action">
-            <mwc-button raised @click=${this._startOver}>
+            <ha-button @click=${this._startOver}>
              ${this.localize("ui.panel.page-authorize.form.start_over")}
-            </mwc-button>
+            </ha-button>
          </div>
        `;
      case "loading":
@@ -238,10 +237,11 @@ export class HaAuthFlow extends LitElement {
              @value-changed=${this._stepDataChanged}
            ></ha-auth-form>`
          )}
-          ${this.clientId === genClientId() &&
-          !["select_mfa_module", "mfa"].includes(step.step_id)
-            ? html`
-                <div class="space-between">
+
+          <div class="space-between">
+            ${this.clientId === genClientId() &&
+            !["select_mfa_module", "mfa"].includes(step.step_id)
+              ? html`
                  <ha-formfield
                    class="store-token"
                    .label=${this.localize(
@@ -253,18 +253,16 @@ export class HaAuthFlow extends LitElement {
                      @change=${this._storeTokenChanged}
                    ></ha-checkbox>
                  </ha-formfield>
-                  <a
-                    class="forgot-password"
-                    href="https://www.home-assistant.io/docs/locked_out/#forgot-password"
-                    target="_blank"
-                    rel="noreferrer noopener"
-                    >${this.localize(
-                      "ui.panel.page-authorize.forgot_password"
-                    )}</a
-                  >
-                </div>
-              `
-            : ""}
+                `
+              : ""}
+            <a
+              class="forgot-password"
+              href="https://www.home-assistant.io/docs/locked_out/#forgot-password"
+              target="_blank"
+              rel="noreferrer noopener"
+              >${this.localize("ui.panel.page-authorize.forgot_password")}</a
+            >
+          </div>
        `;
      default:
        return nothing;
@@ -0,0 +1,115 @@
+import { formatHex, oklch, wcagLuminance, type Oklch } from "culori";
+
+const MIN_LUMINANCE = 0.3;
+const MAX_LUMINANCE = 0.6;
+
+/**
+ * Normalizes the luminance of a given color to ensure it falls within the specified minimum and maximum luminance range.
+ * This helps to keep everything readable and accessible, especially for text and UI elements.
+ *
+ * This function converts the input color to the OKLCH color space, calculates its luminance,
+ * and adjusts the lightness component if the luminance is outside the allowed range.
+ * The adjustment is performed using a binary search to find the appropriate lightness value.
+ * If the color is already within the range, it is returned unchanged.
+ *
+ * @param color - css color string
+ * @returns The normalized color as a hex string, or the original color if normalization is not needed.
+ * @throws If the provided color is invalid or cannot be parsed.
+ */
+export const normalizeLuminance = (color: string): string => {
+  const baseOklch = oklch(color);
+
+  if (baseOklch === undefined) {
+    throw new Error("Invalid color provided");
+  }
+
+  const luminance = wcagLuminance(baseOklch);
+
+  if (luminance >= MIN_LUMINANCE && luminance <= MAX_LUMINANCE) {
+    return color;
+  }
+  const targetLuminance =
+    luminance < MIN_LUMINANCE ? MIN_LUMINANCE : MAX_LUMINANCE;
+
+  function findLightness(lowL = 0, highL = 1, iterations = 10) {
+    if (iterations <= 0) {
+      return (lowL + highL) / 2;
+    }
+
+    const midL = (lowL + highL) / 2;
+    const testColor = { ...baseOklch, l: midL } as Oklch;
+    const testLuminance = wcagLuminance(testColor);
+
+    if (Math.abs(testLuminance - targetLuminance) < 0.01) {
+      return midL;
+    }
+    if (testLuminance < targetLuminance) {
+      return findLightness(midL, highL, iterations--);
+    }
+    return findLightness(lowL, midL, iterations--);
+  }
+
+  baseOklch.l = findLightness();
+
+  return formatHex(baseOklch) || color;
+};
+
+/**
+ * Generates a color palette based on a base color using the OKLCH color space.
+ *
+ * The palette consists of multiple shades, both lighter and darker than the base color,
+ * calculated by adjusting the lightness and chroma values. Each shade is labeled and
+ * returned as a tuple containing the shade name and its hexadecimal color value.
+ *
+ * @param baseColor - The base color in a HEX format.
+ * @param label - A string label used to name each color variant in the palette.
+ * @param steps - An array of numbers representing the percentage steps for generating shades (default: [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95]).
+ * @returns An array of tuples, each containing the shade name and its corresponding hex color value.
+ * @throws If the provided base color is invalid or cannot be parsed by the `oklch` function.
+ */
+export const generateColorPalette = (
+  baseColor: string,
+  label: string,
+  steps = [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95]
+) => {
+  const baseOklch = oklch(baseColor);
+
+  if (baseOklch === undefined) {
+    throw new Error("Invalid base color provided");
+  }
+
+  return steps.map((step) => {
+    const name = `color-${label}-${step}`;
+
+    // Base color at 50%
+    if (step === 50) {
+      return [name, formatHex(baseOklch)];
+    }
+
+    // For darker shades (below 50%)
+    if (step < 50) {
+      const darkFactor = step / 50;
+
+      // Adjust lightness and chroma to create darker variants
+      const darker = {
+        ...baseOklch,
+        l: baseOklch.l * darkFactor, // darkening
+        c: baseOklch.c * (0.9 + 0.1 * darkFactor), // Slightly adjust chroma
+      };
+
+      return [name, formatHex(darker)];
+    }
+
+    // For lighter shades (above 50%)
+    const lightFactor = (step - 50) / 45; // Normalized from 0 to 1
+
+    // Adjust lightness and reduce chroma for lighter variants
+    const lighter = {
+      ...baseOklch,
+      l: Math.min(1, baseOklch.l + (1 - baseOklch.l) * lightFactor), // Increase lightness
+      c: baseOklch.c * Math.max(0, 1 - lightFactor * 0.7), // Gradually reduce chroma
+    };
+
+    return [name, formatHex(lighter)];
+  });
+};
@@ -132,15 +132,13 @@ export const shiftDateRange = (
    end = calcDate(endDate, addDays, locale, config, difference);
  } else {
    const difference =
-      ((calcDateDifferenceProperty(
+      (calcDateDifferenceProperty(
        endDate,
        startDate,
        differenceInMilliseconds,
        locale,
        config
-      ) as number) +
-        1) *
-      (forward ? 1 : -1);
+      ) as number) * (forward ? 1 : -1);
    start = calcDate(startDate, addMilliseconds, locale, config, difference);
    end = calcDate(endDate, addMilliseconds, locale, config, difference);
  }
@@ -1,5 +1,5 @@
 import type { ThemeVars } from "../../data/ws-themes";
-import { darkColorVariables } from "../../resources/theme/color.globals";
+import { darkColorVariables } from "../../resources/theme/color";
 import { derivedStyles } from "../../resources/theme/theme";
 import type { HomeAssistant } from "../../types";
 import {
@@ -11,6 +11,7 @@ import {
 } from "../color/convert-color";
 import { hexBlend } from "../color/hex";
 import { labBrighten, labDarken } from "../color/lab";
+import { generateColorPalette } from "../color/palette";
 import { rgbContrast } from "../color/rgb";

 interface ProcessedTheme {
@@ -75,8 +76,16 @@ export const applyThemesOnElement = (
      const labPrimaryColor = rgb2lab(rgbPrimaryColor);
      themeRules["primary-color"] = primaryColor;
      const rgbLightPrimaryColor = lab2rgb(labBrighten(labPrimaryColor));
+
+      generateColorPalette(primaryColor, "primary").forEach(([key, color]) => {
+        themeRules[key] = color;
+      });
+
      themeRules["light-primary-color"] = rgb2hex(rgbLightPrimaryColor);
      themeRules["dark-primary-color"] = lab2hex(labDarken(labPrimaryColor));
+      themeRules["darker-primary-color"] = lab2hex(
+        labDarken(labPrimaryColor, 2)
+      );
      themeRules["text-primary-color"] =
        rgbContrast(rgbPrimaryColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
      themeRules["text-light-primary-color"] =
@@ -0,0 +1,4 @@
+export const preventDefaultStopPropagation = (ev) => {
+  ev.preventDefault();
+  ev.stopPropagation();
+};
@@ -28,7 +28,10 @@ export const computeEntityEntryName = (
  hass: HomeAssistant
 ): string | undefined => {
  const name =
-    entry.name || ("original_name" in entry ? entry.original_name : undefined);
+    entry.name ||
+    ("original_name" in entry && entry.original_name != null
+      ? String(entry.original_name)
+      : undefined);

  const device = entry.device_id ? hass.devices[entry.device_id] : undefined;

@@ -165,6 +165,7 @@ export const computeStateDisplayFromEntityAttributes = (
  // state is a timestamp
  if (
    [
+      "ai_task",
      "button",
      "conversation",
      "event",
@@ -18,7 +18,43 @@ const _extractCssVars = (
  return variables;
 };

-export const extractVar = (css: CSSResult, varName: string) => {
+/**
+ * Recursively resolves a CSS variable reference from a base variable map.
+ *
+ * If the value of the specified variable in `baseVars` is itself a CSS variable reference
+ * (i.e., starts with `var(`), this function will recursively resolve the reference until
+ * it finds a concrete value or reaches an undefined variable.
+ *
+ * @param varName - The name of the CSS variable to resolve.
+ * @param baseVars - A record mapping variable names to their values or references.
+ * @returns The resolved value of the variable, or `undefined` if not found.
+ */
+const extractVarFromBase = (
+  varName: string,
+  baseVars: Record<string, string>
+): string | undefined => {
+  if (baseVars[varName] && baseVars[varName].startsWith("var(")) {
+    const baseVarName = baseVars[varName]
+      .substring(6, baseVars[varName].length - 1)
+      .trim();
+    return extractVarFromBase(baseVarName, baseVars);
+  }
+  return baseVars[varName];
+};
+
+/**
+ * Extracts the value of a CSS custom property (CSS variable) from a given CSSResult object.
+ *
+ * @param css - The CSSResult object containing the CSS string to search.
+ * @param varName - The name of the CSS variable (without the leading '--') to extract.
+ * @param baseVars - (Optional) A record of base variable names and their values, used to resolve variables that reference other variables via `var()`.
+ * @returns The value of the CSS variable if found, otherwise an empty string. If the variable references another variable and `baseVars` is provided, attempts to resolve it from `baseVars`.
+ */
+export const extractVar = (
+  css: CSSResult,
+  varName: string,
+  baseVars?: Record<string, string>
+) => {
  const cssString = css.toString();
  const search = `--${varName}:`;
  const startIndex = cssString.indexOf(search);
@@ -27,10 +63,17 @@ export const extractVar = (css: CSSResult, varName: string) => {
  }

  const endIndex = cssString.indexOf(";", startIndex + search.length);
-  return cssString
+  const value = cssString
    .substring(startIndex + search.length, endIndex)
    .replaceAll("}", "")
    .trim();
+
+  if (baseVars && value.startsWith("var(")) {
+    const baseVarName = value.substring(6, value.length - 1).trim();
+    return extractVarFromBase(baseVarName, baseVars) || value;
+  }
+
+  return value;
 };

 export const extractVars = (css: CSSResult) => {
@@ -14,6 +14,7 @@ export type LocalizeKeys =
  | `ui.card.weather.attributes.${string}`
  | `ui.card.weather.cardinal_direction.${string}`
  | `ui.card.lawn_mower.actions.${string}`
+  | `ui.common.${string}`
  | `ui.components.calendar.event.rrule.${string}`
  | `ui.components.selectors.file.${string}`
  | `ui.components.logbook.messages.detected_device_classes.${string}`
@@ -22,10 +23,11 @@ export type LocalizeKeys =
  | `ui.dialogs.more_info_control.lawn_mower.${string}`
  | `ui.dialogs.more_info_control.vacuum.${string}`
  | `ui.dialogs.quick-bar.commands.${string}`
-  | `ui.dialogs.unhealthy.reason.${string}`
-  | `ui.dialogs.unsupported.reason.${string}`
+  | `ui.dialogs.unhealthy.reasons.${string}`
+  | `ui.dialogs.unsupported.reasons.${string}`
  | `ui.panel.config.${string}.${"caption" | "description"}`
  | `ui.panel.config.dashboard.${string}`
+  | `ui.panel.config.storage.segments.${string}`
  | `ui.panel.config.zha.${string}`
  | `ui.panel.config.zwave_js.${string}`
  | `ui.panel.lovelace.card.${string}`
@@ -30,6 +30,7 @@ class HaCallServiceButton extends LitElement {
      <ha-progress-button
        .progress=${this.progress}
        .disabled=${this.disabled}
+        appearance="plain"
        @click=${this._buttonTapped}
        tabindex="0"
      >
@@ -2,7 +2,9 @@ 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 { classMap } from "lit/directives/class-map";
 import "../ha-button";
+import type { Appearance } from "../ha-button";
 import "../ha-spinner";
 import "../ha-svg-icon";

@@ -12,28 +14,47 @@ export class HaProgressButton extends LitElement {

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

-  @property({ type: Boolean }) public progress = false;
+  @property({ type: Boolean, reflect: true }) public progress = false;

-  @property({ type: Boolean }) public raised = false;
+  @property() appearance: Appearance = "accent";

-  @property({ type: Boolean }) public unelevated = false;
+  @property({ attribute: false }) public iconPath?: string;
+
+  @property() variant: "brand" | "danger" | "neutral" | "warning" | "success" =
+    "brand";

  @state() private _result?: "success" | "error";

  public render(): TemplateResult {
-    const overlay = this._result || this.progress;
+    const appearance =
+      this.progress || this._result ? "accent" : this.appearance;
+
    return html`
      <ha-button
-        .raised=${this.raised}
-        .label=${this.label}
-        .unelevated=${this.unelevated}
-        .disabled=${this.disabled || this.progress}
-        class=${this._result || ""}
+        .appearance=${appearance}
+        .disabled=${this.disabled}
+        .loading=${this.progress}
+        .variant=${this._result === "success"
+          ? "success"
+          : this._result === "error"
+            ? "danger"
+            : this.variant}
+        class=${classMap({
+          result: !!this._result,
+          success: this._result === "success",
+          error: this._result === "error",
+        })}
      >
-        <slot name="icon" slot="icon"></slot>
-        <slot></slot>
+        ${this.iconPath
+          ? html`<ha-svg-icon
+              .path=${this.iconPath}
+              slot="start"
+            ></ha-svg-icon>`
+          : nothing}
+
+        <slot>${this.label}</slot>
      </ha-button>
-      ${!overlay
+      ${!this._result
        ? nothing
        : html`
            <div class="progress">
@@ -41,9 +62,7 @@ export class HaProgressButton extends LitElement {
                ? html`<ha-svg-icon .path=${mdiCheckBold}></ha-svg-icon>`
                : this._result === "error"
                  ? html`<ha-svg-icon .path=${mdiAlertOctagram}></ha-svg-icon>`
-                  : this.progress
-                    ? html`<ha-spinner size="small"></ha-spinner>`
-                    : nothing}
+                  : nothing}
            </div>
          `}
    `;
@@ -69,60 +88,36 @@ export class HaProgressButton extends LitElement {
      outline: none;
      display: inline-block;
      position: relative;
+    }
+
+    :host([progress]) {
      pointer-events: none;
    }

-    ha-button {
-      transition: all 1s;
-      pointer-events: initial;
-    }
-
-    ha-button.success {
-      --mdc-theme-primary: white;
-      background-color: var(--success-color);
-      transition: none;
-      border-radius: 4px;
-      pointer-events: none;
-    }
-
-    ha-button[unelevated].success,
-    ha-button[raised].success {
-      --mdc-theme-primary: var(--success-color);
-      --mdc-theme-on-primary: white;
-    }
-
-    ha-button.error {
-      --mdc-theme-primary: white;
-      background-color: var(--error-color);
-      transition: none;
-      border-radius: 4px;
-      pointer-events: none;
-    }
-
-    ha-button[unelevated].error,
-    ha-button[raised].error {
-      --mdc-theme-primary: var(--error-color);
-      --mdc-theme-on-primary: white;
-    }
-
    .progress {
-      bottom: 4px;
+      bottom: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
      position: absolute;
-      text-align: center;
-      top: 4px;
+      top: 0;
      width: 100%;
    }

-    ha-svg-icon {
-      color: white;
+    ha-button {
+      width: 100%;
    }

-    ha-button.success slot,
-    ha-button.error slot {
+    ha-button.result::part(start),
+    ha-button.result::part(end),
+    ha-button.result::part(label),
+    ha-button.result::part(caret),
+    ha-button.result::part(spinner) {
      visibility: hidden;
    }
-    :host([destructive]) {
-      --mdc-theme-primary: var(--error-color);
+
+    ha-svg-icon {
+      color: var(--white-color);
    }
  `;
 }
@@ -35,6 +35,16 @@ const LEGEND_OVERFLOW_LIMIT = 10;
 const LEGEND_OVERFLOW_LIMIT_MOBILE = 6;
 const DOUBLE_TAP_TIME = 300;

+export type CustomLegendOption = ECOption["legend"] & {
+  type: "custom";
+  data?: {
+    id?: string;
+    secondaryIds?: string[]; // Other dataset IDs that should be controlled by this legend item.
+    name: string;
+    itemStyle?: Record<string, any>;
+  }[];
+};
+
@customElement("ha-chart-base")
 export class HaChartBase extends LitElement {
  public chart?: EChartsType;
@@ -158,18 +168,24 @@ export class HaChartBase extends LitElement {
  }

  protected firstUpdated() {
-    this._setupChart();
+    if (this.isConnected) {
+      this._setupChart();
+    }
  }

  public willUpdate(changedProps: PropertyValues): void {
    if (!this.chart) {
      return;
    }
-    if (changedProps.has("_themes")) {
+    if (changedProps.has("_themes") && this.hasUpdated) {
      this._setupChart();
      return;
    }
    let chartOptions: ECOption = {};
+    if (changedProps.has("options")) {
+      // Separate 'if' from below since this must updated before _getSeries()
+      this._updateHiddenStatsFromOptions(this.options);
+    }
    if (changedProps.has("data") || changedProps.has("_hiddenDatasets")) {
      chartOptions.series = this._getSeries();
    }
@@ -219,16 +235,18 @@ export class HaChartBase extends LitElement {
    if (!this.options?.legend || !this.data) {
      return nothing;
    }
-    const legend = ensureArray(this.options.legend)[0] as LegendComponentOption;
-    if (!legend.show || legend.type !== "custom") {
+    const legend = ensureArray(this.options.legend).find(
+      (l) => l.show && l.type === "custom"
+    ) as CustomLegendOption | undefined;
+    if (!legend) {
      return nothing;
    }
    const datasets = ensureArray(this.data);
-    const items: LegendComponentOption["data"] =
+    const items =
      legend.data ||
-      ((datasets
+      datasets
        .filter((d) => (d.data as any[])?.length && (d.id || d.name))
-        .map((d) => d.name ?? d.id) || []) as string[]);
+        .map((d) => ({ id: d.id, name: d.name }));

    const isMobile = window.matchMedia(
      "all and (max-width: 450px), all and (max-height: 500px)"
@@ -249,25 +267,29 @@ export class HaChartBase extends LitElement {
          }
          let itemStyle: Record<string, any> = {};
          let name = "";
+          let id = "";
          if (typeof item === "string") {
            name = item;
-            const dataset = datasets.find(
-              (d) => d.id === item || d.name === item
-            );
-            itemStyle = {
-              color: dataset?.color as string,
-              ...(dataset?.itemStyle as { borderColor?: string }),
-            };
+            id = item;
          } else {
            name = item.name ?? "";
+            id = item.id ?? name;
            itemStyle = item.itemStyle ?? {};
          }
+          const dataset =
+            datasets.find((d) => d.id === id) ??
+            datasets.find((d) => d.name === id);
+          itemStyle = {
+            color: dataset?.color as string,
+            ...(dataset?.itemStyle as { borderColor?: string }),
+            itemStyle,
+          };
          const color = itemStyle?.color as string;
          const borderColor = itemStyle?.borderColor as string;
          return html`<li
-            .name=${name}
+            .id=${id}
            @click=${this._legendClick}
-            class=${classMap({ hidden: this._hiddenDatasets.has(name) })}
+            class=${classMap({ hidden: this._hiddenDatasets.has(id) })}
            .title=${name}
          >
            <div
@@ -326,13 +348,21 @@ export class HaChartBase extends LitElement {
        echarts.use(this.extraComponents);
      }

-      echarts.registerTheme("custom", this._createTheme());
+      const style = getComputedStyle(this);
+      echarts.registerTheme("custom", this._createTheme(style));

      this.chart = echarts.init(container, "custom");
      this.chart.on("datazoom", (e: any) => {
        const { start, end } = e.batch?.[0] ?? e;
        this._isZoomed = start !== 0 || end !== 100;
        this._zoomRatio = (end - start) / 100;
+        if (this._isTouchDevice) {
+          // zooming changes the axis pointer so we need to hide it
+          this.chart?.dispatchAction({
+            type: "hideTip",
+            from: "datazoom",
+          });
+        }
      });
      this.chart.on("click", (e: ECElementEvent) => {
        fireEvent(this, "chart-click", e);
@@ -354,16 +384,79 @@ export class HaChartBase extends LitElement {
            this._lastTapTime = Date.now();
          }
        });
+        // show axis pointer handle on touch devices
+        let dragJustEnded = false;
+        let lastTipX: number | undefined;
+        let lastTipY: number | undefined;
+        this.chart.on("showTip", (e: any) => {
+          lastTipX = e.x;
+          lastTipY = e.y;
+          this.chart?.setOption({
+            xAxis: ensureArray(
+              (this.chart?.getOption().xAxis as any) ?? []
+            ).map((axis: XAXisOption) =>
+              axis.show
+                ? {
+                    ...axis,
+                    axisPointer: {
+                      ...axis.axisPointer,
+                      status: "show",
+                      handle: {
+                        color: style.getPropertyValue("--primary-color"),
+                        margin: 0,
+                        size: 20,
+                        ...axis.axisPointer?.handle,
+                        show: true,
+                      },
+                    },
+                  }
+                : axis
+            ),
+          });
+        });
+        this.chart.on("hideTip", (e: any) => {
+          // the drag end event doesn't have a `from` property
+          if (e.from) {
+            if (dragJustEnded) {
+              // hideTip is fired twice when the drag ends, so we need to ignore the second one
+              dragJustEnded = false;
+              return;
+            }
+            this.chart?.setOption({
+              xAxis: ensureArray(
+                (this.chart?.getOption().xAxis as any) ?? []
+              ).map((axis: XAXisOption) =>
+                axis.show
+                  ? {
+                      ...axis,
+                      axisPointer: {
+                        ...axis.axisPointer,
+                        handle: {
+                          ...axis.axisPointer?.handle,
+                          show: false,
+                        },
+                        status: "hide",
+                      },
+                    }
+                  : axis
+              ),
+            });
+            this.chart?.dispatchAction({
+              type: "downplay",
+            });
+          } else if (lastTipX != null && lastTipY != null) {
+            // echarts hides the tip as soon as the drag ends, so we need to show it again
+            dragJustEnded = true;
+            this.chart?.dispatchAction({
+              type: "showTip",
+              x: lastTipX,
+              y: lastTipY,
+            });
+          }
+        });
      }

-      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._updateHiddenStatsFromOptions(this.options);

      this.chart.setOption({
        ...this._createOptions(),
@@ -374,6 +467,42 @@ export class HaChartBase extends LitElement {
    }
  }

+  // Return an array of all IDs associated with the legend item of the primaryId
+  private _getAllIdsFromLegend(
+    options: ECOption | undefined,
+    primaryId: string
+  ): string[] {
+    if (!options) return [primaryId];
+    const legend = ensureArray(this.options?.legend || [])[0] as
+      | LegendComponentOption
+      | undefined;
+
+    let customLegendItem;
+    if (legend?.type === "custom") {
+      customLegendItem = (legend as CustomLegendOption).data?.find(
+        (li) => typeof li === "object" && li.id === primaryId
+      );
+    }
+
+    return [primaryId, ...(customLegendItem?.secondaryIds || [])];
+  }
+
+  // Parses the options structure and adds all ids of unselected legend items to hiddenDatasets.
+  // No known need to remove items at this time.
+  private _updateHiddenStatsFromOptions(options: ECOption | undefined) {
+    if (!options) return;
+    const legend = ensureArray(this.options?.legend || [])[0] as
+      | LegendComponentOption
+      | undefined;
+    Object.entries(legend?.selected || {}).forEach(([stat, selected]) => {
+      if (selected === false) {
+        this._getAllIdsFromLegend(options, stat).forEach((id) =>
+          this._hiddenDatasets.add(id)
+        );
+      }
+    });
+  }
+
  private _getDataZoomConfig(): DataZoomComponentOption | undefined {
    const xAxis = (this.options?.xAxis?.[0] ?? this.options?.xAxis) as
      | XAXisOption
@@ -477,8 +606,7 @@ export class HaChartBase extends LitElement {
    return options;
  }

-  private _createTheme() {
-    const style = getComputedStyle(this);
+  private _createTheme(style: CSSStyleDeclaration) {
    return {
      color: getAllGraphColors(style),
      backgroundColor: "transparent",
@@ -506,6 +634,13 @@ export class HaChartBase extends LitElement {
          textBorderWidth: 2,
        },
      },
+      sankey: {
+        label: {
+          color: style.getPropertyValue("--primary-text-color"),
+          textBorderColor: style.getPropertyValue("--primary-background-color"),
+          textBorderWidth: 2,
+        },
+      },
      categoryAxis: {
        axisLine: { show: false },
        axisTick: { show: false },
@@ -645,7 +780,7 @@ export class HaChartBase extends LitElement {
      | YAXisOption
      | undefined;
    const series = ensureArray(this.data).map((s) => {
-      const data = this._hiddenDatasets.has(String(s.name ?? s.id))
+      const data = this._hiddenDatasets.has(String(s.id ?? s.name))
        ? undefined
        : s.data;
      if (data && s.type === "line") {
@@ -711,6 +846,7 @@ export class HaChartBase extends LitElement {
        };
      }
    }
+
    const replaceMerge = options.series ? ["series"] : [];
    this.chart.setOption(options, { replaceMerge });
  }
@@ -740,13 +876,17 @@ export class HaChartBase extends LitElement {
    if (!this.chart) {
      return;
    }
-    const name = ev.currentTarget?.name;
-    if (this._hiddenDatasets.has(name)) {
-      this._hiddenDatasets.delete(name);
-      fireEvent(this, "dataset-unhidden", { name });
+    const id = ev.currentTarget?.id;
+    if (this._hiddenDatasets.has(id)) {
+      this._getAllIdsFromLegend(this.options, id).forEach((i) =>
+        this._hiddenDatasets.delete(i)
+      );
+      fireEvent(this, "dataset-unhidden", { id });
    } else {
-      this._hiddenDatasets.add(name);
-      fireEvent(this, "dataset-hidden", { name });
+      this._getAllIdsFromLegend(this.options, id).forEach((i) =>
+        this._hiddenDatasets.add(i)
+      );
+      fireEvent(this, "dataset-hidden", { id });
    }
    this.requestUpdate("_hiddenDatasets");
  }
@@ -881,8 +1021,8 @@ declare global {
    "ha-chart-base": HaChartBase;
  }
  interface HASSDomEvents {
-    "dataset-hidden": { name: string };
-    "dataset-unhidden": { name: string };
+    "dataset-hidden": { id: string };
+    "dataset-unhidden": { id: string };
    "chart-click": ECElementEvent;
  }
 }
@@ -10,12 +10,13 @@ import type { ECOption } from "../../resources/echarts";
 import "./ha-chart-base";
 import type { HaChartBase } from "./ha-chart-base";
 import type { HomeAssistant } from "../../types";
+import { SubscribeMixin } from "../../mixins/subscribe-mixin";
+import { deepEqual } from "../../common/util/deep-equal";

 export interface NetworkNode {
  id: string;
  name?: string;
  category?: number;
-  label?: string;
  value?: number;
  symbolSize?: number;
  symbol?: string;
@@ -29,6 +30,8 @@ export interface NetworkNode {
   * Distance from the center, where 0 is the center and 1 is the edge
   */
  polarDistance?: number;
+  x?: number;
+  y?: number;
 }

 export interface NetworkLink {
@@ -60,7 +63,7 @@ export interface NetworkData {
 let GraphChart: typeof import("echarts/lib/chart/graph/install");

@customElement("ha-network-graph")
-export class HaNetworkGraph extends LitElement {
+export class HaNetworkGraph extends SubscribeMixin(LitElement) {
  public chart?: EChartsType;

  @property({ attribute: false }) public data!: NetworkData;
@@ -77,8 +80,6 @@ export class HaNetworkGraph extends LitElement {

  @state() private _showLabels = true;

-  private _listeners: (() => void)[] = [];
-
  private _nodePositions: Record<string, { x: number; y: number }> = {};

  @query("ha-chart-base") private _baseChart?: HaChartBase;
@@ -93,35 +94,33 @@ export class HaNetworkGraph extends LitElement {
    }
  }

-  public async connectedCallback() {
-    super.connectedCallback();
-    this._listeners.push(
+  protected hassSubscribe() {
+    return [
      listenMediaQuery("(prefers-reduced-motion)", (matches) => {
        if (this._reducedMotion !== matches) {
          this._reducedMotion = matches;
        }
-      })
-    );
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    while (this._listeners.length) {
-      this._listeners.pop()!();
-    }
+      }),
+    ];
  }

  protected render() {
-    if (!GraphChart) {
+    if (!GraphChart || !this.data.nodes?.length) {
      return nothing;
    }
+
+    const isMobile = window.matchMedia(
+      "all and (max-width: 450px), all and (max-height: 500px)"
+    ).matches;
+
    return html`<ha-chart-base
      .hass=${this.hass}
      .data=${this._getSeries(
        this.data,
        this._physicsEnabled,
        this._reducedMotion,
-        this._showLabels
+        this._showLabels,
+        isMobile
      )}
      .options=${this._createOptions(this.data?.categories)}
      height="100%"
@@ -168,7 +167,8 @@ export class HaNetworkGraph extends LitElement {
        type: "inside",
        filterMode: "none",
      },
-    })
+    }),
+    deepEqual
  );

  private _getSeries = memoizeOne(
@@ -176,79 +176,178 @@ export class HaNetworkGraph extends LitElement {
      data: NetworkData,
      physicsEnabled: boolean,
      reducedMotion: boolean,
-      showLabels: boolean
-    ) => {
-      const containerWidth = this.clientWidth;
-      const containerHeight = this.clientHeight;
-      return [
-        {
-          id: "network",
-          type: "graph",
-          layout: physicsEnabled ? "force" : "none",
-          draggable: true,
-          roam: true,
-          selectedMode: "single",
-          label: {
-            show: showLabels,
-            position: "right",
-          },
-          emphasis: {
-            focus: "adjacency",
-          },
-          force: {
-            repulsion: [400, 600],
-            edgeLength: [200, 300],
-            gravity: 0.1,
-            layoutAnimation: !reducedMotion && data.nodes.length < 100,
-          },
-          edgeSymbol: ["none", "arrow"],
-          edgeSymbolSize: 10,
-          data: data.nodes.map((node) => {
-            const echartsNode: NonNullable<GraphSeriesOption["data"]>[number] =
-              {
-                id: node.id,
-                name: node.name,
-                category: node.category,
-                value: node.value,
-                symbolSize: node.symbolSize || 30,
-                symbol: node.symbol || "circle",
-                itemStyle: node.itemStyle || {},
-                fixed: node.fixed,
-              };
-            if (this._nodePositions[node.id]) {
-              echartsNode.x = this._nodePositions[node.id].x;
-              echartsNode.y = this._nodePositions[node.id].y;
-            } else if (typeof node.polarDistance === "number") {
-              // set the position of the node at polarDistance from the center in a random direction
-              const angle = Math.random() * 2 * Math.PI;
-              echartsNode.x =
-                containerWidth / 2 +
-                ((Math.cos(angle) * containerWidth) / 2) * node.polarDistance;
-              echartsNode.y =
-                containerHeight / 2 +
-                ((Math.sin(angle) * containerHeight) / 2) * node.polarDistance;
-              this._nodePositions[node.id] = {
-                x: echartsNode.x,
-                y: echartsNode.y,
-              };
-            }
-            return echartsNode;
-          }),
-          links: data.links.map((link) => ({
-            ...link,
-            value: link.reverseValue
-              ? Math.max(link.value ?? 0, link.reverseValue)
-              : link.value,
-            // remove arrow for bidirectional links
-            symbolSize: link.reverseValue ? 1 : link.symbolSize, // 0 doesn't work
-          })),
-          categories: data.categories || [],
-        },
-      ] as any;
-    }
+      showLabels: boolean,
+      isMobile: boolean
+    ) => ({
+      id: "network",
+      type: "graph",
+      layout: physicsEnabled ? "force" : "none",
+      draggable: true,
+      roam: true,
+      selectedMode: "single",
+      label: {
+        show: showLabels,
+        position: "right",
+      },
+      emphasis: {
+        focus: isMobile ? "none" : "adjacency",
+      },
+      force: {
+        repulsion: [400, 600],
+        edgeLength: [200, 350],
+        gravity: 0.05,
+        layoutAnimation: !reducedMotion && data.nodes.length < 100,
+      },
+      edgeSymbol: ["none", "arrow"],
+      edgeSymbolSize: 10,
+      data: this._getSeriesData(data.nodes, data.links, this._nodePositions),
+      links: data.links.map((link) => ({
+        ...link,
+        value: link.reverseValue
+          ? Math.max(link.value ?? 0, link.reverseValue)
+          : link.value,
+        // remove arrow for bidirectional links
+        symbolSize: link.reverseValue ? 1 : link.symbolSize, // 0 doesn't work
+      })),
+      categories: data.categories || [],
+    }),
+    deepEqual
  );

+  private _getSeriesData = memoizeOne(
+    (
+      nodes: NetworkNode[],
+      links: NetworkLink[],
+      nodePositions: Record<string, { x: number; y: number }>
+    ) =>
+      this._getPositionedNodes(nodes, links, nodePositions).map(
+        (node) =>
+          ({
+            id: node.id,
+            name: node.name,
+            category: node.category,
+            value: node.value,
+            symbolSize: node.symbolSize || 30,
+            symbol: node.symbol || "circle",
+            itemStyle: node.itemStyle || {},
+            fixed: node.fixed,
+            x: node.x,
+            y: node.y,
+          }) as NonNullable<GraphSeriesOption["data"]>[number]
+      ),
+    deepEqual
+  );
+
+  private _getPositionedNodes(
+    nodes: NetworkNode[],
+    links: NetworkLink[],
+    nodePositions: Record<string, { x: number; y: number }>
+  ) {
+    const containerWidth = this.clientWidth;
+    const containerHeight = this.clientHeight;
+
+    const positionedNodes: NetworkNode[] = nodes.map((node) => ({ ...node }));
+    positionedNodes.forEach((node) => {
+      if (nodePositions[node.id]) {
+        node.x = nodePositions[node.id].x;
+        node.y = nodePositions[node.id].y;
+      }
+      if (node.polarDistance === 0) {
+        if (node.x == null && node.y == null) {
+          node.x = containerWidth / 2;
+          node.y = containerHeight / 2;
+        }
+        this._positionNodeNeighbors(
+          node,
+          positionedNodes,
+          links,
+          nodePositions
+        );
+      }
+    });
+    positionedNodes.forEach((node) => {
+      // set positions for unconnected nodes
+      if (node.polarDistance && node.x == null && node.y == null) {
+        // set the position of the node at polarDistance from the center in a random direction
+        const angle = Math.random() * 2 * Math.PI;
+        node.x =
+          ((Math.cos(angle) * containerWidth) / 2) * node.polarDistance +
+          containerWidth / 2;
+        node.y =
+          ((Math.sin(angle) * containerHeight) / 2) * node.polarDistance +
+          containerHeight / 2;
+        // save the random position
+        this._nodePositions[node.id] = {
+          x: node.x,
+          y: node.y,
+        };
+      }
+    });
+    return positionedNodes;
+  }
+
+  private _positionNodeNeighbors(
+    node: NetworkNode,
+    nodes: NetworkNode[],
+    links: NetworkLink[],
+    nodePositions: Record<string, { x: number; y: number }>,
+    parentId?: string,
+    minAngle = 0,
+    maxAngle = Math.PI * 2
+  ) {
+    const neighbors = links
+      .map((l) =>
+        l.source === node.id && l.target !== parentId && !l.ignoreForceLayout
+          ? nodes.find((n) => n.id === l.target)
+          : l.target === node.id &&
+              l.source !== parentId &&
+              !l.ignoreForceLayout
+            ? nodes.find((n) => n.id === l.source)
+            : null
+      )
+      .filter(Boolean) as NetworkNode[];
+    if (!neighbors.length) {
+      return;
+    }
+    const angle = Math.abs(maxAngle - minAngle) / neighbors.length;
+    const toContinue: { neighbor: NetworkNode; angle: number }[] = [];
+    neighbors.forEach((neighbor, i) => {
+      if (neighbor.x == null && neighbor.y == null) {
+        const nodeAngle = minAngle + angle * i + angle / 2;
+        toContinue.push({ neighbor, angle: nodeAngle });
+        if (nodePositions[neighbor.id]) {
+          neighbor.x = nodePositions[neighbor.id].x;
+          neighbor.y = nodePositions[neighbor.id].y;
+        } else {
+          neighbor.x = node.x! + (Math.cos(nodeAngle) * this.clientWidth) / 4;
+          neighbor.y = node.y! + (Math.sin(nodeAngle) * this.clientHeight) / 4;
+        }
+      }
+    });
+    toContinue.forEach(({ neighbor, angle: neighborAngle }) => {
+      this._positionNodeNeighbors(
+        neighbor,
+        nodes,
+        links,
+        nodePositions,
+        node.id,
+        neighborAngle - Math.PI / 2,
+        neighborAngle + Math.PI / 2
+      );
+    });
+  }
+
  private _togglePhysics() {
+    this._saveNodePositions();
+    this._physicsEnabled = !this._physicsEnabled;
+  }
+
+  private _toggleLabels() {
+    this._showLabels = !this._showLabels;
+  }
+
+  private _saveNodePositions() {
+    const positions = {};
    if (this._baseChart?.chart) {
      this._baseChart.chart
        // @ts-ignore private method but no other way to get the graph positions
@@ -258,18 +357,14 @@ export class HaNetworkGraph extends LitElement {
        .eachNode((node: any) => {
          const layout = node.getLayout();
          if (layout) {
-            this._nodePositions[node.id] = {
+            positions[node.id] = {
              x: layout[0],
              y: layout[1],
            };
          }
        });
    }
-    this._physicsEnabled = !this._physicsEnabled;
-  }
-
-  private _toggleLabels() {
-    this._showLabels = !this._showLabels;
+    this._nodePositions = positions;
  }

  static styles = css`
@@ -18,7 +18,6 @@ export interface Node {
  value: number;
  index: number; // like z-index but for x/y
  label?: string;
-  tooltip?: string;
  color?: string;
  passThrough?: boolean;
 }
@@ -186,23 +185,22 @@ export class HaSankeyChart extends LitElement {
              ""
            );
          const wordWidth = measureTextWidth(longestWord, FONT_SIZE);
+          const availableWidth = params.rect.width + 6;
          const fontSize = Math.min(
            FONT_SIZE,
-            (params.rect.width / wordWidth) * FONT_SIZE
+            (availableWidth / wordWidth) * FONT_SIZE
          );
          return {
            fontSize: fontSize > 1 ? fontSize : 0,
-            width: params.rect.width,
+            width: availableWidth,
            align: "center",
+            dy: -2, // shift up or the lowest row labels may be cut off
          };
        }

-        // 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 availableHeight = params.rect.height + 8; // account for the margin
        const fontSize = Math.min(
-          (params.rect.height / lineCount) * FONT_SIZE,
+          (availableHeight / params.labelRect.height) * FONT_SIZE,
          FONT_SIZE
        );
        return {
@@ -111,7 +111,7 @@ export class StateHistoryChartLine extends LitElement {
    this._chartData.forEach((dataset, index) => {
      if (
        dataset.tooltip?.show === false ||
-        this._hiddenStats.has(dataset.name as string)
+        this._hiddenStats.has(dataset.id as string)
      )
        return;
      const param = params.find(
@@ -185,11 +185,11 @@ export class StateHistoryChartLine extends LitElement {
  };

  private _datasetHidden(ev: CustomEvent) {
-    this._hiddenStats.add(ev.detail.name);
+    this._hiddenStats.add(ev.detail.id);
  }

  private _datasetUnhidden(ev: CustomEvent) {
-    this._hiddenStats.delete(ev.detail.name);
+    this._hiddenStats.delete(ev.detail.id);
  }

  public willUpdate(changedProps: PropertyValues) {
@@ -101,7 +101,7 @@ export class StateHistoryChartTimeline extends LitElement {
        fill: api.value(4) as string,
      },
    };
-    const text = api.value(3) as string;
+    const text = (api.value(3) as string).replaceAll("\n", " ");
    const textWidth = measureTextWidth(text, 12);
    const LABEL_PADDING = 4;
    if (textWidth < rectShape.width - LABEL_PADDING * 2) {
@@ -31,6 +31,7 @@ import {
 } from "../../data/recorder";
 import type { ECOption } from "../../resources/echarts";
 import type { HomeAssistant } from "../../types";
+import type { CustomLegendOption } from "./ha-chart-base";
 import "./ha-chart-base";

 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
@@ -96,7 +97,7 @@ export class StatisticsChart extends LitElement {

  @state() private _chartData: (LineSeriesOption | BarSeriesOption)[] = [];

-  @state() private _legendData: string[] = [];
+  @state() private _legendData: CustomLegendOption["data"];

  @state() private _statisticIds: string[] = [];

@@ -106,6 +107,8 @@ export class StatisticsChart extends LitElement {

  private _computedStyle?: CSSStyleDeclaration;

+  private _previousYAxisLabelValue = 0;
+
  protected shouldUpdate(changedProps: PropertyValues): boolean {
    return changedProps.size > 1 || !changedProps.has("hass");
  }
@@ -181,12 +184,18 @@ export class StatisticsChart extends LitElement {
  }

  private _datasetHidden(ev: CustomEvent) {
-    this._hiddenStats.add(ev.detail.name);
+    if (!this._legendData) {
+      return;
+    }
+    this._hiddenStats.add(ev.detail.id);
    this.requestUpdate("_hiddenStats");
  }

  private _datasetUnhidden(ev: CustomEvent) {
-    this._hiddenStats.delete(ev.detail.name);
+    if (!this._legendData) {
+      return;
+    }
+    this._hiddenStats.delete(ev.detail.id);
    this.requestUpdate("_hiddenStats");
  }

@@ -197,8 +206,8 @@ export class StatisticsChart extends LitElement {
      : "";
    return params
      .map((param, index: number) => {
-        if (rendered[param.seriesName]) return "";
-        rendered[param.seriesName] = true;
+        if (rendered[param.seriesIndex]) return "";
+        rendered[param.seriesIndex] = true;

        const statisticId = this._statisticIds[param.seriesIndex];
        const stateObj = this.hass.states[statisticId];
@@ -314,6 +323,9 @@ export class StatisticsChart extends LitElement {
        splitLine: {
          show: true,
        },
+        axisLabel: {
+          formatter: this._formatYAxisLabel,
+        } as any,
      },
      legend: {
        type: "custom",
@@ -362,6 +374,7 @@ export class StatisticsChart extends LitElement {
    const statisticsData = Object.entries(this.statisticsData);
    const totalDataSets: typeof this._chartData = [];
    const legendData: {
+      id: string;
      name: string;
      color?: ZRColor;
      borderColor?: ZRColor;
@@ -465,6 +478,8 @@ export class StatisticsChart extends LitElement {
        this.statTypes.includes("min") && statisticsHaveType(stats, "min");
      const drawBands = [hasMean, hasMax, hasMin].filter(Boolean).length > 1;

+      const hasState = this.statTypes.includes("state");
+
      const bandTop = hasMax ? "max" : "mean";
      const bandBottom = hasMin ? "min" : "mean";

@@ -486,7 +501,8 @@ export class StatisticsChart extends LitElement {
          const band = drawBands && (type === bandTop || type === bandBottom);
          statTypes.push(type);
          const borderColor =
-            band && hasMin && hasMax && hasMean
+            (band && hasMin && hasMax && hasMean) ||
+            (hasState && ["change", "sum"].includes(type))
              ? color + (this.hideLegend ? "00" : "7F")
              : color;
          const backgroundColor = band ? color + "3F" : color + "7F";
@@ -535,6 +551,7 @@ export class StatisticsChart extends LitElement {
              : displayedLegend === false;
            if (showLegend) {
              statLegendData.push({
+                id: statistic_id,
                name,
                color: series.color as ZRColor,
                borderColor: series.itemStyle?.borderColor,
@@ -579,7 +596,7 @@ export class StatisticsChart extends LitElement {
          }
          dataValues.push(val);
        });
-        if (!this._hiddenStats.has(name)) {
+        if (!this._hiddenStats.has(statistic_id)) {
          pushData(startDate, new Date(stat.end), dataValues);
        }
      });
@@ -593,10 +610,10 @@ export class StatisticsChart extends LitElement {
      this.unit = unit;
    }

-    legendData.forEach(({ name, color, borderColor }) => {
+    legendData.forEach(({ id, name, color, borderColor }) => {
      // Add an empty series for the legend
      totalDataSets.push({
-        id: name + "-legend",
+        id: id,
        name: name,
        color,
        itemStyle: {
@@ -609,9 +626,13 @@ export class StatisticsChart extends LitElement {
    });

    this._chartData = totalDataSets;
-    if (legendData.length !== this._legendData.length) {
+    if (legendData.length !== this._legendData?.length) {
      // only update the legend if it has changed or it will trigger options update
-      this._legendData = legendData.map(({ name }) => name);
+      this._legendData =
+        legendData.length > 1
+          ? legendData.map(({ id, name }) => ({ id, name }))
+          : // if there is only one entity, let the base chart handle the legend
+            undefined;
    }
    this._statisticIds = statisticIds;
  }
@@ -640,6 +661,22 @@ export class StatisticsChart extends LitElement {
    return Math.abs(value) < 1 ? value : roundingFn(value);
  }

+  private _formatYAxisLabel = (value: number) => {
+    // show the first significant digit for tiny values
+    const maximumFractionDigits = Math.max(
+      1,
+      // use the difference to the previous value to determine the number of significant digits #25526
+      -Math.floor(
+        Math.log10(Math.abs(value - this._previousYAxisLabelValue || 1))
+      )
+    );
+    const label = formatNumber(value, this.hass.locale, {
+      maximumFractionDigits,
+    });
+    this._previousYAxisLabelValue = value;
+    return label;
+  };
+
  static styles = css`
    :host {
      display: block;
@@ -152,7 +152,10 @@ export class DialogDataTableSettings extends LitElement {
            )}
          </ha-list>
        </ha-sortable>
-        <ha-button slot="secondaryAction" @click=${this._reset}
+        <ha-button
+          appearance="plain"
+          slot="secondaryAction"
+          @click=${this._reset}
          >${localize("ui.components.data-table.settings.restore")}</ha-button
        >
        <ha-button slot="primaryAction" @click=${this.closeDialog}>
@@ -932,7 +932,7 @@ export class HaDataTable extends LitElement {
        .find((el) =>
          [
            "ha-checkbox",
-            "mwc-button",
+            "ha-button",
            "ha-button",
            "ha-icon-button",
            "ha-assist-chip",
@@ -10,8 +10,8 @@ import {
 } from "../../data/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity_registry";
 import type { HomeAssistant } from "../../types";
-import "../ha-list-item";
-import "../ha-select";
+import "../ha-md-select-option";
+import "../ha-md-select";
 import { stopPropagation } from "../../common/dom/stop_propagation";

 const NO_AUTOMATION_KEY = "NO_AUTOMATION";
@@ -100,35 +100,35 @@ export abstract class HaDeviceAutomationPicker<
    }
    const value = this._value;
    return html`
-      <ha-select
+      <ha-md-select
        .label=${this.label}
        .value=${value}
-        @selected=${this._automationChanged}
+        @change=${this._automationChanged}
        @closed=${stopPropagation}
        .disabled=${this._automations.length === 0}
      >
        ${value === NO_AUTOMATION_KEY
-          ? html`<ha-list-item .value=${NO_AUTOMATION_KEY}>
+          ? html`<ha-md-select-option .value=${NO_AUTOMATION_KEY}>
              ${this.NO_AUTOMATION_TEXT}
-            </ha-list-item>`
-          : ""}
+            </ha-md-select-option>`
+          : nothing}
        ${value === UNKNOWN_AUTOMATION_KEY
-          ? html`<ha-list-item .value=${UNKNOWN_AUTOMATION_KEY}>
+          ? html`<ha-md-select-option .value=${UNKNOWN_AUTOMATION_KEY}>
              ${this.UNKNOWN_AUTOMATION_TEXT}
-            </ha-list-item>`
-          : ""}
+            </ha-md-select-option>`
+          : nothing}
        ${this._automations.map(
          (automation, idx) => html`
-            <ha-list-item .value=${`${automation.device_id}_${idx}`}>
+            <ha-md-select-option .value=${`${automation.device_id}_${idx}`}>
              ${this._localizeDeviceAutomation(
                this.hass,
                this._entityReg,
                automation
              )}
-            </ha-list-item>
+            </ha-md-select-option>
          `
        )}
-      </ha-select>
+      </ha-md-select>
    `;
  }

@@ -1,9 +1,11 @@
+import { mdiDrag } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
+import "../ha-sortable";
 import "./ha-entity-picker";
 import type { HaEntityPickerEntityFilterFunc } from "./ha-entity-picker";

@@ -76,6 +78,9 @@ class HaEntitiesPicker extends LitElement {

  @property({ attribute: false, type: Array }) public createDomains?: string[];

+  @property({ type: Boolean })
+  public reorder = false;
+
  protected render() {
    if (!this.hass) {
      return nothing;
@@ -84,28 +89,44 @@ class HaEntitiesPicker extends LitElement {
    const currentEntities = this._currentEntities;
    return html`
      ${this.label ? html`<label>${this.label}</label>` : nothing}
-      ${currentEntities.map(
-        (entityId) => html`
-          <div>
-            <ha-entity-picker
-              allow-custom-entity
-              .curValue=${entityId}
-              .hass=${this.hass}
-              .includeDomains=${this.includeDomains}
-              .excludeDomains=${this.excludeDomains}
-              .includeEntities=${this.includeEntities}
-              .excludeEntities=${this.excludeEntities}
-              .includeDeviceClasses=${this.includeDeviceClasses}
-              .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
-              .entityFilter=${this.entityFilter}
-              .value=${entityId}
-              .disabled=${this.disabled}
-              .createDomains=${this.createDomains}
-              @value-changed=${this._entityChanged}
-            ></ha-entity-picker>
-          </div>
-        `
-      )}
+      <ha-sortable
+        .disabled=${!this.reorder || this.disabled}
+        handle-selector=".entity-handle"
+        @item-moved=${this._entityMoved}
+      >
+        <div class="list">
+          ${currentEntities.map(
+            (entityId) => html`
+              <div class="entity">
+                <ha-entity-picker
+                  allow-custom-entity
+                  .curValue=${entityId}
+                  .hass=${this.hass}
+                  .includeDomains=${this.includeDomains}
+                  .excludeDomains=${this.excludeDomains}
+                  .includeEntities=${this.includeEntities}
+                  .excludeEntities=${this.excludeEntities}
+                  .includeDeviceClasses=${this.includeDeviceClasses}
+                  .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
+                  .entityFilter=${this.entityFilter}
+                  .value=${entityId}
+                  .disabled=${this.disabled}
+                  .createDomains=${this.createDomains}
+                  @value-changed=${this._entityChanged}
+                ></ha-entity-picker>
+                ${this.reorder
+                  ? html`
+                      <ha-svg-icon
+                        class="entity-handle"
+                        .path=${mdiDrag}
+                      ></ha-svg-icon>
+                    `
+                  : nothing}
+              </div>
+            `
+          )}
+        </div>
+      </ha-sortable>
      <div>
        <ha-entity-picker
          allow-custom-entity
@@ -131,6 +152,17 @@ class HaEntitiesPicker extends LitElement {
    `;
  }

+  private _entityMoved(e: CustomEvent) {
+    e.stopPropagation();
+    const { oldIndex, newIndex } = e.detail;
+    const currentEntities = this._currentEntities;
+    const movedEntity = currentEntities[oldIndex];
+    const newEntities = [...currentEntities];
+    newEntities.splice(oldIndex, 1);
+    newEntities.splice(newIndex, 0, movedEntity);
+    this._updateEntities(newEntities);
+  }
+
  private _excludeEntities = memoizeOne(
    (
      value: string[] | undefined,
@@ -201,6 +233,19 @@ class HaEntitiesPicker extends LitElement {
      display: block;
      margin: 0 0 8px;
    }
+    .entity {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    .entity ha-entity-picker {
+      flex: 1;
+    }
+    .entity-handle {
+      padding: 8px;
+      cursor: move; /* fallback if grab cursor is unsupported */
+      cursor: grab;
+    }
  `;
 }

@@ -2,18 +2,24 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
+import { ensureArray } from "../../common/array/ensure-array";
+import { fireEvent } from "../../common/dom/fire_event";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";

 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;

+interface AttributeOption {
+  value: string;
+  label: string;
+}
+
@customElement("ha-entity-attribute-picker")
 class HaEntityAttributePicker extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property({ attribute: false }) public entityId?: string;
+  @property({ attribute: false }) public entityId?: string | string[];

  /**
   * List of attributes to be hidden.
@@ -48,23 +54,40 @@ class HaEntityAttributePicker extends LitElement {
  }

  protected updated(changedProps: PropertyValues) {
-    if (changedProps.has("_opened") && this._opened) {
-      const entityState = this.entityId
-        ? this.hass.states[this.entityId]
-        : undefined;
-      (this._comboBox as any).items = entityState
-        ? Object.keys(entityState.attributes)
-            .filter((key) => !this.hideAttributes?.includes(key))
-            .map((key) => ({
-              value: key,
-              label: computeAttributeNameDisplay(
-                this.hass.localize,
-                entityState,
-                this.hass.entities,
-                key
-              ),
-            }))
-        : [];
+    if (
+      (changedProps.has("_opened") && this._opened) ||
+      changedProps.has("entityId") ||
+      changedProps.has("attribute")
+    ) {
+      const entityIds = this.entityId ? ensureArray(this.entityId) : [];
+      const entitiesOptions = entityIds.map<AttributeOption[]>((entityId) => {
+        const stateObj = this.hass.states[entityId];
+        if (!stateObj) {
+          return [];
+        }
+
+        const attributes = Object.keys(stateObj.attributes).filter(
+          (a) => !this.hideAttributes?.includes(a)
+        );
+
+        return attributes.map((a) => ({
+          value: a,
+          label: this.hass.formatEntityAttributeName(stateObj, a),
+        }));
+      });
+
+      const options: AttributeOption[] = [];
+      const optionsSet = new Set<string>();
+      for (const entityOptions of entitiesOptions) {
+        for (const option of entityOptions) {
+          if (!optionsSet.has(option.value)) {
+            optionsSet.add(option.value);
+            options.push(option);
+          }
+        }
+      }
+
+      (this._comboBox as any).filteredItems = options;
    }
  }

@@ -73,21 +96,10 @@ class HaEntityAttributePicker extends LitElement {
      return nothing;
    }

-    const stateObj = this.hass.states[this.entityId!] as HassEntity | undefined;
-
    return html`
      <ha-combo-box
        .hass=${this.hass}
-        .value=${this.value
-          ? stateObj
-            ? computeAttributeNameDisplay(
-                this.hass.localize,
-                stateObj,
-                this.hass.entities,
-                this.value
-              )
-            : this.value
-          : ""}
+        .value=${this.value}
        .autofocus=${this.autofocus}
        .label=${this.label ??
        this.hass.localize(
@@ -97,6 +109,7 @@ class HaEntityAttributePicker extends LitElement {
        .required=${this.required}
        .helper=${this.helper}
        .allowCustomValue=${this.allowCustomValue}
+        item-id-path="value"
        item-value-path="value"
        item-label-path="label"
        @opened-changed=${this._openedChanged}
@@ -106,12 +119,28 @@ class HaEntityAttributePicker extends LitElement {
    `;
  }

+  private get _value() {
+    return this.value || "";
+  }
+
  private _openedChanged(ev: ValueChangedEvent<boolean>) {
    this._opened = ev.detail.value;
  }

  private _valueChanged(ev: ValueChangedEvent<string>) {
-    this.value = ev.detail.value;
+    ev.stopPropagation();
+    const newValue = ev.detail.value;
+    if (newValue !== this._value) {
+      this._setValue(newValue);
+    }
+  }
+
+  private _setValue(value: string) {
+    this.value = value;
+    setTimeout(() => {
+      fireEvent(this, "value-changed", { value });
+      fireEvent(this, "change");
+    }, 0);
  }
 }

@@ -2,6 +2,7 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import { getStates } from "../../common/entity/get_states";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
@@ -10,11 +11,16 @@ import type { HaComboBox } from "../ha-combo-box";

 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;

+interface StateOption {
+  value: string;
+  label: string;
+}
+
@customElement("ha-entity-state-picker")
 class HaEntityStatePicker extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property({ attribute: false }) public entityId?: string;
+  @property({ attribute: false }) public entityId?: string | string[];

  @property() public attribute?: string;

@@ -30,6 +36,9 @@ class HaEntityStatePicker extends LitElement {
  @property({ type: Boolean, attribute: "allow-custom-value" })
  public allowCustomValue;

+  @property({ attribute: false })
+  public hideStates?: string[];
+
  @property() public label?: string;

  @property() public value?: string;
@@ -51,24 +60,42 @@ class HaEntityStatePicker extends LitElement {
      changedProps.has("attribute") ||
      changedProps.has("extraOptions")
    ) {
-      const stateObj = this.entityId
-        ? this.hass.states[this.entityId]
-        : undefined;
-      (this._comboBox as any).items = [
-        ...(this.extraOptions ?? []),
-        ...(this.entityId && stateObj
-          ? getStates(this.hass, stateObj, this.attribute).map((key) => ({
-              value: key,
-              label: !this.attribute
-                ? this.hass.formatEntityState(stateObj, key)
-                : this.hass.formatEntityAttributeValue(
-                    stateObj,
-                    this.attribute,
-                    key
-                  ),
-            }))
-          : []),
-      ];
+      const entityIds = this.entityId ? ensureArray(this.entityId) : [];
+
+      const entitiesOptions = entityIds.map<StateOption[]>((entityId) => {
+        const stateObj = this.hass.states[entityId] || {
+          entity_id: entityId,
+          attributes: {},
+        };
+
+        const states = getStates(this.hass, stateObj, this.attribute).filter(
+          (s) => !this.hideStates?.includes(s)
+        );
+
+        return states.map((s) => ({
+          value: s,
+          label: this.attribute
+            ? this.hass.formatEntityAttributeValue(stateObj, this.attribute, s)
+            : this.hass.formatEntityState(stateObj, s),
+        }));
+      });
+
+      const options: StateOption[] = [];
+      const optionsSet = new Set<string>();
+      for (const entityOptions of entitiesOptions) {
+        for (const option of entityOptions) {
+          if (!optionsSet.has(option.value)) {
+            optionsSet.add(option.value);
+            options.push(option);
+          }
+        }
+      }
+
+      if (this.extraOptions) {
+        options.unshift(...this.extraOptions);
+      }
+
+      (this._comboBox as any).filteredItems = options;
    }
  }

@@ -88,6 +115,7 @@ class HaEntityStatePicker extends LitElement {
        .required=${this.required}
        .helper=${this.helper}
        .allowCustomValue=${this.allowCustomValue}
+        item-id-path="value"
        item-value-path="value"
        item-label-path="label"
        @opened-changed=${this._openedChanged}
@@ -0,0 +1,149 @@
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
+import { repeat } from "lit/directives/repeat";
+import { fireEvent } from "../../common/dom/fire_event";
+import { ensureArray } from "../../common/array/ensure-array";
+import type { HomeAssistant } from "../../types";
+import "./ha-entity-state-picker";
+
+@customElement("ha-entity-states-picker")
+export class HaEntityStatesPicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public entityId?: string;
+
+  @property() public attribute?: string;
+
+  @property({ attribute: false }) public extraOptions?: any[];
+
+  @property({ type: Boolean, attribute: "allow-custom-value" })
+  public allowCustomValue;
+
+  @property() public label?: string;
+
+  @property({ type: Array }) public value?: string[];
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @property({ attribute: false })
+  public hideStates?: string[];
+
+  private _keys: string[] = [];
+
+  private _getKey(index: number) {
+    if (!this._keys[index]) {
+      this._keys[index] = Math.random().toString();
+    }
+    return this._keys[index];
+  }
+
+  protected willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
+    if (changedProps.has("value")) {
+      this.value = ensureArray(this.value);
+    }
+  }
+
+  protected render() {
+    if (!this.hass) {
+      return nothing;
+    }
+
+    const value = this.value || [];
+    const hide = [...(this.hideStates || []), ...value];
+
+    return html`
+      ${repeat(
+        value,
+        (_state, index) => this._getKey(index),
+        (state, index) => html`
+          <div>
+            <ha-entity-state-picker
+              .index=${index}
+              .hass=${this.hass}
+              .entityId=${this.entityId}
+              .attribute=${this.attribute}
+              .extraOptions=${this.extraOptions}
+              .hideStates=${hide.filter((v) => v !== state)}
+              .allowCustomValue=${this.allowCustomValue}
+              .label=${this.label}
+              .value=${state}
+              .disabled=${this.disabled}
+              .helper=${this.disabled && index === value.length - 1
+                ? this.helper
+                : undefined}
+              @value-changed=${this._valueChanged}
+            ></ha-entity-state-picker>
+          </div>
+        `
+      )}
+      <div>
+        ${this.disabled && value.length
+          ? nothing
+          : keyed(
+              value.length,
+              html`<ha-entity-state-picker
+                .hass=${this.hass}
+                .entityId=${this.entityId}
+                .attribute=${this.attribute}
+                .extraOptions=${this.extraOptions}
+                .hideStates=${hide}
+                .allowCustomValue=${this.allowCustomValue}
+                .label=${this.label}
+                .helper=${this.helper}
+                .disabled=${this.disabled}
+                .required=${this.required && !value.length}
+                @value-changed=${this._addValue}
+              ></ha-entity-state-picker>`
+            )}
+      </div>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const newState = ev.detail.value;
+    const newValue = [...this.value!];
+    const index = (ev.currentTarget as any)?.index;
+    if (index == null) {
+      return;
+    }
+    if (newState === undefined) {
+      newValue.splice(index, 1);
+      this._keys.splice(index, 1);
+      fireEvent(this, "value-changed", {
+        value: newValue,
+      });
+      return;
+    }
+    newValue[index] = newState;
+    fireEvent(this, "value-changed", {
+      value: newValue,
+    });
+  }
+
+  private _addValue(ev: CustomEvent) {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", {
+      value: [...(this.value || []), ev.detail.value],
+    });
+  }
+
+  static override styles = css`
+    div {
+      margin-top: 8px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-entity-states-picker": HaEntityStatesPicker;
+  }
+}
@@ -97,9 +97,6 @@ class HaAlert extends LitElement {
      content: "";
      border-radius: 4px;
    }
-    .icon {
-      z-index: 1;
-    }
    .icon.no-title {
      align-self: center;
    }
@@ -122,16 +119,16 @@ class HaAlert extends LitElement {
    .main-content {
      overflow-wrap: anywhere;
      word-break: break-word;
+      line-height: normal;
      margin-left: 8px;
      margin-right: 0;
      margin-inline-start: 8px;
-      margin-inline-end: 0;
+      margin-inline-end: 8px;
    }
    .title {
      margin-top: 2px;
      font-weight: var(--ha-font-weight-bold);
    }
-    .action mwc-button,
    .action ha-icon-button {
      --mdc-theme-primary: var(--primary-text-color);
      --mdc-icon-button-size: 36px;
@@ -411,6 +411,7 @@ export class HaAreaPicker extends LitElement {
          }
        },
      });
+      return;
    }

    this._setValue(value);
@@ -44,6 +44,10 @@ export class HaAreasFloorsDisplayEditor extends LitElement {

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

+  @property({ attribute: false }) public actionsRenderer?: () =>
+    | TemplateResult<1>
+    | typeof nothing;
+
  @property({ type: Boolean, attribute: "show-navigation-button" })
  public showNavigationButton = false;

@@ -109,6 +113,7 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
                  .items=${groupedAreasItems[floor.floor_id]}
                  .value=${value}
                  .floorId=${floor.floor_id}
+                  .actionsRenderer=${this.actionsRenderer}
                  @value-changed=${this._areaDisplayChanged}
                  .showNavigationButton=${this.showNavigationButton}
                ></ha-items-display-editor>
@@ -3,11 +3,15 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeAttributeNameDisplay } from "../common/entity/compute_attribute_display";
-import { STATE_ATTRIBUTES } from "../data/entity_attributes";
+import {
+  STATE_ATTRIBUTES,
+  STATE_ATTRIBUTES_DOMAIN_CLASS,
+} from "../data/entity_attributes";
 import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-attribute-value";
 import "./ha-expansion-panel";
+import { computeStateDomain } from "../common/entity/compute_state_domain";

@customElement("ha-attributes")
 class HaAttributes extends LitElement {
@@ -22,7 +26,12 @@ class HaAttributes extends LitElement {
  private get _filteredAttributes() {
    return this._computeDisplayAttributes(
      STATE_ATTRIBUTES.concat(
-        this.extraFilters ? this.extraFilters.split(",") : []
+        this.extraFilters ? this.extraFilters.split(",") : [],
+        (this.stateObj &&
+          STATE_ATTRIBUTES_DOMAIN_CLASS[computeStateDomain(this.stateObj)]?.[
+            this.stateObj.attributes?.device_class
+          ]) ||
+          []
      )
    );
  }
@@ -0,0 +1,231 @@
+import { mdiChevronUp } from "@mdi/js";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import "./ha-icon-button";
+
+@customElement("ha-automation-row")
+export class HaAutomationRow extends LitElement {
+  @property({ attribute: "left-chevron", type: Boolean })
+  public leftChevron = false;
+
+  @property({ type: Boolean, reflect: true })
+  public collapsed = false;
+
+  @property({ type: Boolean, reflect: true })
+  public selected = false;
+
+  @property({ type: Boolean, reflect: true, attribute: "sort-selected" })
+  public sortSelected = false;
+
+  @property({ type: Boolean, reflect: true })
+  public disabled = false;
+
+  @property({ type: Boolean, reflect: true, attribute: "building-block" })
+  public buildingBlock = false;
+
+  @property({ type: Boolean, reflect: true }) public highlight?: boolean;
+
+  @query(".row")
+  private _rowElement?: HTMLDivElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <div
+        class="row"
+        tabindex="0"
+        role="button"
+        @keydown=${this._handleKeydown}
+      >
+        ${this.leftChevron
+          ? html`
+              <ha-icon-button
+                class="expand-button"
+                .path=${mdiChevronUp}
+                @click=${this._handleExpand}
+                @keydown=${this._handleExpand}
+              ></ha-icon-button>
+            `
+          : nothing}
+        <div class="leading-icon-wrapper">
+          <slot name="leading-icon"></slot>
+        </div>
+        <slot class="header" name="header"></slot>
+        <slot name="icons"></slot>
+      </div>
+    `;
+  }
+
+  private async _handleExpand(ev) {
+    if (ev.defaultPrevented) {
+      return;
+    }
+    if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") {
+      return;
+    }
+    ev.stopPropagation();
+    ev.preventDefault();
+
+    fireEvent(this, "toggle-collapsed");
+  }
+
+  private async _handleKeydown(ev: KeyboardEvent): Promise<void> {
+    if (ev.defaultPrevented) {
+      return;
+    }
+
+    if (
+      ev.key !== "Enter" &&
+      ev.key !== " " &&
+      !(
+        (this.sortSelected || ev.altKey) &&
+        !(ev.ctrlKey || ev.metaKey) &&
+        !ev.shiftKey &&
+        (ev.key === "ArrowUp" || ev.key === "ArrowDown")
+      ) &&
+      !(
+        (ev.ctrlKey || ev.metaKey) &&
+        !ev.shiftKey &&
+        !ev.altKey &&
+        (ev.key === "c" ||
+          ev.key === "x" ||
+          ev.key === "Delete" ||
+          ev.key === "Backspace")
+      )
+    ) {
+      return;
+    }
+    ev.preventDefault();
+    ev.stopPropagation();
+
+    if (ev.key === "ArrowUp" || ev.key === "ArrowDown") {
+      if (ev.key === "ArrowUp") {
+        fireEvent(this, "move-up");
+        return;
+      }
+      fireEvent(this, "move-down");
+      return;
+    }
+    if (this.sortSelected && (ev.key === "Enter" || ev.key === " ")) {
+      fireEvent(this, "stop-sort-selection");
+      return;
+    }
+
+    if (ev.ctrlKey || ev.metaKey) {
+      if (ev.key === "c") {
+        fireEvent(this, "copy-row");
+        return;
+      }
+      if (ev.key === "x") {
+        fireEvent(this, "cut-row");
+        return;
+      }
+
+      if (ev.key === "Delete" || ev.key === "Backspace") {
+        fireEvent(this, "delete-row");
+        return;
+      }
+    }
+
+    this.click();
+  }
+
+  public focus() {
+    requestAnimationFrame(() => {
+      this._rowElement?.focus();
+    });
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+    .row {
+      display: flex;
+      padding: 0 8px;
+      min-height: 48px;
+      align-items: center;
+      cursor: pointer;
+      overflow: hidden;
+      font-weight: var(--ha-font-weight-medium);
+      outline: none;
+      border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
+    }
+    .row:focus {
+      outline: var(--wa-focus-ring);
+      outline-offset: -2px;
+    }
+    .expand-button {
+      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+      color: var(--ha-color-on-neutral-quiet);
+      margin-left: -8px;
+    }
+    :host([building-block]) .leading-icon-wrapper {
+      background-color: var(--ha-color-fill-neutral-loud-resting);
+      border-radius: var(--ha-border-radius-md);
+      padding: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transform: rotate(45deg);
+    }
+    ::slotted([slot="leading-icon"]) {
+      color: var(--ha-color-on-neutral-quiet);
+    }
+    :host([building-block]) ::slotted([slot="leading-icon"]) {
+      --mdc-icon-size: 20px;
+      color: var(--white-color);
+      transform: rotate(-45deg);
+    }
+    :host([collapsed]) .expand-button {
+      transform: rotate(180deg);
+    }
+    :host([selected]) .row,
+    :host([selected]) .row:focus {
+      outline: solid;
+      outline-color: var(--primary-color);
+      outline-offset: -2px;
+      outline-width: 2px;
+    }
+    :host([disabled]) .row {
+      border-top-right-radius: var(--ha-border-radius-square);
+      border-top-left-radius: var(--ha-border-radius-square);
+    }
+    ::slotted([slot="header"]) {
+      flex: 1;
+      overflow-wrap: anywhere;
+      margin: 0 12px;
+    }
+    :host([sort-selected]) .row {
+      outline: solid;
+      outline-color: rgba(var(--rgb-accent-color), 0.6);
+      outline-offset: -2px;
+      outline-width: 2px;
+      background-color: rgba(var(--rgb-accent-color), 0.08);
+    }
+    .row:hover {
+      background-color: rgba(var(--rgb-primary-text-color), 0.04);
+    }
+    :host([highlight]) .row {
+      background-color: rgba(var(--rgb-primary-color), 0.08);
+    }
+    :host([highlight]) .row:hover {
+      background-color: rgba(var(--rgb-primary-color), 0.16);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-row": HaAutomationRow;
+  }
+
+  interface HASSDomEvents {
+    "toggle-collapsed": undefined;
+    "stop-sort-selection": undefined;
+    "copy-row": undefined;
+    "cut-row": undefined;
+    "delete-row": undefined;
+  }
+}
--- a/Show More
+++ b/Show More