Add entity filter section strategy

Fix accessibility in add helper dialog (#24627 )
Revert "Unified safe area (insets) for Android and iOS" (#24629 )
2026-07-09 11:19:49 +00:00 · 2025-03-14 12:20:48 +01:00 · 2025-03-14 11:15:59 +01:00 · 2025-03-14 11:03:50 +01:00 · 2025-03-14 10:01:31 +01:00 · 2025-03-14 09:50:34 +01:00
533 changed files with 21228 additions and 11671 deletions
@@ -5,12 +5,15 @@
    "context": ".."
  },
  "appPort": "8124:8123",
-  "postCreateCommand": "sudo apt update && sudo apt upgrade -y && sudo apt install -y libpcap-dev",
+  "postCreateCommand": "./.devcontainer/post_create.sh",
  "postStartCommand": "script/bootstrap",
  "containerEnv": {
    "DEV_CONTAINER": "1",
    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
  },
+  "remoteEnv": {
+    "NODE_OPTIONS": "--max_old_space_size=8192"
+  },
  "customizations": {
    "vscode": {
      "extensions": [
@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# This script will run after the container is created
+
+# add github cli
+(type -p wget >/dev/null || (sudo apt update && sudo apt-get install wget -y)) \
+	&& sudo mkdir -p -m 755 /etc/apt/keyrings \
+        && out=$(mktemp) && wget -nv -O$out https://cli.github.com/packages/githubcli-archive-keyring.gpg \
+        && cat $out | sudo tee /etc/apt/keyrings/githubcli-archive-keyring.gpg > /dev/null \
+	&& sudo chmod go+r /etc/apt/keyrings/githubcli-archive-keyring.gpg \
+	&& echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
+
+# Update package lists
+sudo apt-get update
+
+sudo apt upgrade -y
+
+# Install necessary packages
+sudo apt-get install -y libpcap-dev gh
+
+# Display a message
+echo "Post-create script has been executed successfully."
@@ -26,7 +26,7 @@ jobs:
          ref: dev

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

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

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

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

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

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

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

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

      - name: Upload translations
-        uses: actions/upload-artifact@v4.6.0
+        uses: actions/upload-artifact@v4.6.1
        with:
          name: translations
          path: translations.tar.gz
@@ -18,6 +18,6 @@ jobs:
      pull-requests: read
    runs-on: ubuntu-latest
    steps:
-      - uses: release-drafter/release-drafter@v6.0.0
+      - uses: release-drafter/release-drafter@v6.1.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -34,7 +34,7 @@ jobs:
        uses: home-assistant/actions/helpers/verify-version@master

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

      - name: Build wheels
-        uses: home-assistant/wheels@2024.11.0
+        uses: home-assistant/wheels@2025.02.0
        with:
          abi: cp313
          tag: musllinux_1_2
@@ -92,7 +92,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -121,7 +121,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 90 days stale policy
-        uses: actions/stale@v9.0.0
+        uses: actions/stale@v9.1.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          days-before-stale: 90
@@ -1,6 +1,42 @@
 {
  "version": "2.0.0",
  "tasks": [
+    {
+      "label": "Develop and serve Frontend",
+      "type": "shell",
+      "command": "script/develop_and_serve -c ${input:coreUrl}",
+      // Sync changes here to other tasks until issue resolved
+      // https://github.com/Microsoft/vscode/issues/61497
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
    {
      "label": "Develop Frontend",
      "type": "gulp",
@@ -241,6 +277,12 @@
      "id": "supervisorToken",
      "type": "promptString",
      "description": "The token for the Remote API proxy add-on"
+    },
+    {
+      "id": "coreUrl",
+      "type": "promptString",
+      "description": "The URL of the Home Assistant Core instance",
+      "default": "http://127.0.0.1:8123"
    }
  ]
 }
@@ -6,4 +6,4 @@ enableGlobalCache: false

 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.6.0.cjs
+yarnPath: .yarn/releases/yarn-4.7.0.cjs
@@ -55,7 +55,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
  __STATIC_PATH__: "/static/",
  __HASS_URL__: `\`${
    "HASS_URL" in process.env
-      ? process.env["HASS_URL"]
+      ? process.env.HASS_URL
      : "${location.protocol}//${location.host}"
  }\``,
  "process.env.NODE_ENV": JSON.stringify(
@@ -1,16 +1,16 @@
+// @ts-check
+
+import tseslint from "typescript-eslint";
 import rootConfig from "../eslint.config.mjs";

-export default [
-  ...rootConfig,
-  {
-    rules: {
-      "no-console": "off",
-      "import/no-extraneous-dependencies": "off",
-      "import/extensions": "off",
-      "import/no-dynamic-require": "off",
-      "global-require": "off",
-      "@typescript-eslint/no-require-imports": "off",
-      "prefer-arrow-callback": "off",
-    },
+export default tseslint.config(...rootConfig, {
+  rules: {
+    "no-console": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/extensions": "off",
+    "import/no-dynamic-require": "off",
+    "global-require": "off",
+    "@typescript-eslint/no-require-imports": "off",
+    "prefer-arrow-callback": "off",
  },
-];
+});
@@ -56,6 +56,7 @@ const getCommonTemplateVars = () => {
  );
  return {
    modernRegex: compileRegex(browserRegexes.concat(haMacOSRegex)).toString(),
+    hassUrl: process.env.HASS_URL || "",
  };
 };

@@ -90,6 +90,10 @@ function copyMapPanel(staticDir) {
    npmPath("leaflet/dist/leaflet.css"),
    staticPath("images/leaflet/")
  );
+  copyFileDir(
+    npmPath("leaflet.markercluster/dist/MarkerCluster.css"),
+    staticPath("images/leaflet/")
+  );
  fs.copySync(
    npmPath("leaflet/dist/images"),
    staticPath("images/leaflet/images/")
@@ -3,7 +3,7 @@ const path = require("path");
 const rspack = require("@rspack/core");
 const { RsdoctorRspackPlugin } = require("@rsdoctor/rspack-plugin");
 const { StatsWriterPlugin } = require("webpack-stats-plugin");
-const filterStats = require("@bundle-stats/plugin-webpack-filter").default;
+const filterStats = require("@bundle-stats/plugin-webpack-filter");
 const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("rspack-manifest-plugin");
 const log = require("fancy-log");
@@ -5,7 +5,7 @@ import { until } from "lit/directives/until";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-button";
-import "../../../src/components/ha-circular-progress";
+import "../../../src/components/ha-spinner";
 import type { LovelaceCardConfig } from "../../../src/data/lovelace/config/card";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import type {
@@ -44,9 +44,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
        <div class="picker">
          <div class="label">
            ${this._switching
-              ? html`
-                  <ha-circular-progress indeterminate></ha-circular-progress>
-                `
+              ? html`<ha-spinner></ha-spinner>`
              : until(
                  selectedDemoConfig.then(
                    (conf) => html`
@@ -65,6 +65,7 @@ export class HaDemo extends HomeAssistantAppEl {
    mockEntityRegistry(hass, [
      {
        config_entry_id: "co2signal",
+        config_subentry_id: null,
        device_id: "co2signal",
        area_id: null,
        disabled_by: null,
@@ -85,6 +86,7 @@ export class HaDemo extends HomeAssistantAppEl {
      },
      {
        config_entry_id: "co2signal",
+        config_subentry_id: null,
        device_id: "co2signal",
        area_id: null,
        disabled_by: null,
@@ -1,9 +1,10 @@
+import type { validateConfig } from "../../../src/data/config";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

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

 export const mockConfigEntries = (hass: MockHomeAssistant) => {
-  hass.mockWS("config_entries/get", () => ({
-    entry_id: "co2signal",
-    domain: "co2signal",
-    title: "Electricity Maps",
-    source: "user",
-    state: "loaded",
-    supports_options: false,
-    supports_remove_device: false,
-    supports_unload: true,
-    supports_reconfigure: true,
-    pref_disable_new_entities: false,
-    pref_disable_polling: false,
-    disabled_by: null,
-    reason: null,
-  }));
+  hass.mockWS<typeof getConfigEntries>("config_entries/get", () => [
+    {
+      entry_id: "mock-entry-co2signal",
+      domain: "co2signal",
+      title: "Electricity Maps",
+      source: "user",
+      state: "loaded",
+      supports_options: false,
+      supports_remove_device: false,
+      supports_unload: true,
+      supports_reconfigure: true,
+      supported_subentry_types: {},
+      pref_disable_new_entities: false,
+      pref_disable_polling: false,
+      disabled_by: null,
+      reason: null,
+      num_subentries: 0,
+      error_reason_translation_key: null,
+      error_reason_translation_placeholders: null,
+    },
+  ]);
 };
@@ -1,11 +1,16 @@
+// @ts-check
+
 /* eslint-disable import/no-extraneous-dependencies */
 import unusedImports from "eslint-plugin-unused-imports";
 import globals from "globals";
-import tsParser from "@typescript-eslint/parser";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
+import tseslint from "typescript-eslint";
+import eslintConfigPrettier from "eslint-config-prettier";
+import { configs as litConfigs } from "eslint-plugin-lit";
+import { configs as wcConfigs } from "eslint-plugin-wc";

 const _filename = fileURLToPath(import.meta.url);
 const _dirname = path.dirname(_filename);
@@ -15,17 +20,14 @@ const compat = new FlatCompat({
  allConfig: js.configs.all,
 });

-export default [
-  ...compat.extends(
-    "airbnb-base",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/strict",
-    "plugin:@typescript-eslint/stylistic",
-    "plugin:wc/recommended",
-    "plugin:lit/all",
-    "plugin:lit-a11y/recommended",
-    "prettier"
-  ),
+export default tseslint.config(
+  ...compat.extends("airbnb-base", "plugin:lit-a11y/recommended"),
+  eslintConfigPrettier,
+  litConfigs["flat/all"],
+  tseslint.configs.recommended,
+  tseslint.configs.strict,
+  tseslint.configs.stylistic,
+  wcConfigs["flat/recommended"],
  {
    plugins: {
      "unused-imports": unusedImports,
@@ -43,7 +45,7 @@ export default [
        Polymer: true,
      },

-      parser: tsParser,
+      parser: tseslint.parser,
      ecmaVersion: 2020,
      sourceType: "module",

@@ -184,5 +186,5 @@ export default [
      ],
      "no-use-before-define": "off",
    },
-  },
-];
+  }
+);
@@ -1,10 +1,10 @@
+// @ts-check
+
+import tseslint from "typescript-eslint";
 import rootConfig from "../eslint.config.mjs";

-export default [
-  ...rootConfig,
-  {
-    rules: {
-      "no-console": "off",
-    },
+export default tseslint.config(...rootConfig, {
+  rules: {
+    "no-console": "off",
  },
-];
+});
@@ -0,0 +1,10 @@
+<svg width="94" height="64" viewBox="0 0 94 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="94" height="64" rx="8" fill="white"/>
+<rect x="0.5" y="0.5" width="93" height="63" rx="7.5" stroke="black" stroke-opacity="0.12"/>
+<path d="M8 14C8 10.6863 10.6863 8 14 8H33C36.3137 8 39 10.6863 39 14C39 17.3137 36.3137 20 33 20H14C10.6863 20 8 17.3137 8 14Z" fill="black" fill-opacity="0.32"/>
+<path d="M8 27C8 25.3431 9.34315 24 11 24H31C32.6569 24 34 25.3431 34 27V29C34 30.6569 32.6569 32 31 32H11C9.34315 32 8 30.6569 8 29V27Z" fill="black" fill-opacity="0.12"/>
+<path d="M38 27C38 25.3431 39.3431 24 41 24H83C84.6569 24 86 25.3431 86 27V29C86 30.6569 84.6569 32 83 32H41C39.3431 32 38 30.6569 38 29V27Z" fill="black" fill-opacity="0.12"/>
+<path d="M8 39C8 37.3431 9.34315 36 11 36H53C54.6569 36 56 37.3431 56 39V41C56 42.6569 54.6569 44 53 44H11C9.34315 44 8 42.6569 8 41V39Z" fill="black" fill-opacity="0.12"/>
+<path d="M60 39C60 37.3431 61.3431 36 63 36H83C84.6569 36 86 37.3431 86 39V41C86 42.6569 84.6569 44 83 44H63C61.3431 44 60 42.6569 60 41V39Z" fill="black" fill-opacity="0.12"/>
+<path d="M8 51C8 49.3431 9.34315 48 11 48H31C32.6569 48 34 49.3431 34 51V53C34 54.6569 32.6569 56 31 56H11C9.34315 56 8 54.6569 8 53V51Z" fill="black" fill-opacity="0.12"/>
+</svg>
@@ -0,0 +1,7 @@
+<svg width="94" height="48" viewBox="0 0 94 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11C0 9.34315 1.34315 8 3 8H23C24.6569 8 26 9.34315 26 11V13C26 14.6569 24.6569 16 23 16H3C1.34315 16 0 14.6569 0 13V11Z" fill="black" fill-opacity="0.12"/>
+<path d="M30 11C30 9.34315 31.3431 8 33 8H91C92.6569 8 94 9.34315 94 11V13C94 14.6569 92.6569 16 91 16H33C31.3431 16 30 14.6569 30 13V11Z" fill="black" fill-opacity="0.12"/>
+<path d="M0 23C0 21.3431 1.34315 20 3 20H61C62.6569 20 64 21.3431 64 23V25C64 26.6569 62.6569 28 61 28H3C1.34315 28 0 26.6569 0 25V23Z" fill="black" fill-opacity="0.12"/>
+<path d="M68 23C68 21.3431 69.3431 20 71 20H91C92.6569 20 94 21.3431 94 23V25C94 26.6569 92.6569 28 91 28H71C69.3431 28 68 26.6569 68 25V23Z" fill="black" fill-opacity="0.12"/>
+<path d="M0 35C0 33.3431 1.34315 32 3 32H23C24.6569 32 26 33.3431 26 35V37C26 38.6569 24.6569 40 23 40H3C1.34315 40 0 38.6569 0 37V35Z" fill="black" fill-opacity="0.12"/>
+</svg>
@@ -1,63 +0,0 @@
-import type { TemplateResult } from "lit";
-import { html, css, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../../src/components/ha-bar";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-circular-progress";
-import "@material/web/progress/circular-progress";
-import type { HomeAssistant } from "../../../../src/types";
-
-@customElement("demo-components-ha-circular-progress")
-export class DemoHaCircularProgress extends LitElement {
-  @property({ attribute: false }) hass!: HomeAssistant;
-
-  protected render(): TemplateResult {
-    return html`<ha-card header="Basic circular progress">
-        <div class="card-content">
-          <ha-circular-progress indeterminate></ha-circular-progress></div
-      ></ha-card>
-      <ha-card header="Different circular progress sizes">
-        <div class="card-content">
-          <ha-circular-progress
-            indeterminate
-            size="tiny"
-          ></ha-circular-progress>
-          <ha-circular-progress
-            indeterminate
-            size="small"
-          ></ha-circular-progress>
-          <ha-circular-progress
-            indeterminate
-            size="medium"
-          ></ha-circular-progress>
-          <ha-circular-progress
-            indeterminate
-            size="large"
-          ></ha-circular-progress></div
-      ></ha-card>
-      <ha-card header="Circular progress with an aria-label">
-        <div class="card-content">
-          <ha-circular-progress
-            indeterminate
-            aria-label="Doing something..."
-          ></ha-circular-progress>
-          <ha-circular-progress
-            indeterminate
-            .ariaLabel=${"Doing something..."}
-          ></ha-circular-progress></div
-      ></ha-card>`;
-  }
-
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-circular-progress": DemoHaCircularProgress;
-  }
-}
@@ -48,6 +48,7 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: "bedroom",
    configuration_url: null,
    config_entries: ["config_entry_1"],
+    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -71,6 +72,7 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: "backyard",
    configuration_url: null,
    config_entries: ["config_entry_2"],
+    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -94,6 +96,7 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: null,
    configuration_url: null,
    config_entries: ["config_entry_3"],
+    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -124,6 +127,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -135,6 +140,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -146,6 +153,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -0,0 +1,3 @@
+---
+title: Select box
+---
@@ -0,0 +1,152 @@
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-select-box";
+import type { SelectBoxOption } from "../../../../src/components/ha-select-box";
+
+const basicOptions: SelectBoxOption[] = [
+  {
+    value: "text-only",
+    label: "Text only",
+  },
+  {
+    value: "card",
+    label: "Card",
+  },
+  {
+    value: "disabled",
+    label: "Disabled option",
+    disabled: true,
+  },
+];
+
+const fullOptions: SelectBoxOption[] = [
+  {
+    value: "text-only",
+    label: "Text only",
+    description: "Only text, no border and background",
+    image: "/images/select_box/text_only.svg",
+  },
+  {
+    value: "card",
+    label: "Card",
+    description: "With border and background",
+    image: "/images/select_box/card.svg",
+  },
+  {
+    value: "disabled",
+    label: "Disabled",
+    description: "Option that can not be selected",
+    disabled: true,
+  },
+];
+
+const selects: {
+  id: string;
+  label: string;
+  class?: string;
+  options: SelectBoxOption[];
+  disabled?: boolean;
+}[] = [
+  {
+    id: "basic",
+    label: "Basic",
+    options: basicOptions,
+  },
+  {
+    id: "full",
+    label: "With description and image",
+    options: fullOptions,
+  },
+];
+
+@customElement("demo-components-ha-select-box")
+export class DemoHaSelectBox extends LitElement {
+  @state() private value?: string = "off";
+
+  handleValueChanged(e: CustomEvent) {
+    this.value = e.detail.value as string;
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      ${repeat(selects, (select) => {
+        const { id, label, options } = select;
+        return html`
+          <ha-card>
+            <div class="card-content">
+              <label id=${id}>${label}</label>
+              <ha-select-box
+                .value=${this.value}
+                .options=${options}
+                @value-changed=${this.handleValueChanged}
+              >
+              </ha-select-box>
+            </div>
+          </ha-card>
+        `;
+      })}
+      <ha-card>
+        <div class="card-content">
+          <p class="title"><b>Column layout</b></p>
+          <div class="vertical-selects">
+            ${repeat(selects, (select) => {
+              const { options } = select;
+              return html`
+                <ha-select-box
+                  .value=${this.value}
+                  .options=${options}
+                  .maxColumns=${1}
+                  @value-changed=${this.handleValueChanged}
+                >
+                </ha-select-box>
+              `;
+            })}
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    pre {
+      margin-top: 0;
+      margin-bottom: 8px;
+    }
+    p {
+      margin: 0;
+    }
+    label {
+      font-weight: 600;
+      margin-bottom: 8px;
+      display: block;
+    }
+    .custom {
+      --mdc-icon-size: 24px;
+      --control-select-color: var(--state-fan-active-color);
+      --control-select-thickness: 130px;
+      --control-select-border-radius: 36px;
+    }
+
+    p.title {
+      margin-bottom: 12px;
+    }
+
+    .vertical-selects ha-select-box {
+      display: block;
+      margin-bottom: 24px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-select-box": DemoHaSelectBox;
+  }
+}
@@ -47,6 +47,7 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: "bedroom",
    configuration_url: null,
    config_entries: ["config_entry_1"],
+    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -70,6 +71,7 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: "backyard",
    configuration_url: null,
    config_entries: ["config_entry_2"],
+    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -93,6 +95,7 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: null,
    configuration_url: null,
    config_entries: ["config_entry_3"],
+    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -123,6 +126,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -134,6 +139,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -145,6 +152,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -1,4 +1,4 @@
 ---
-title: Circular Progress
+title: Spinner
 subtitle: Can be used to indicate an ongoing task.
 ---
@@ -0,0 +1,44 @@
+import type { TemplateResult } from "lit";
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../../src/components/ha-bar";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-spinner";
+import type { HomeAssistant } from "../../../../src/types";
+
+@customElement("demo-components-ha-spinner")
+export class DemoHaSpinner extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    return html`<ha-card header="Basic spinner">
+        <div class="card-content">
+          <ha-spinner></ha-spinner></div
+      ></ha-card>
+      <ha-card header="Different spinner sizes">
+        <div class="card-content">
+          <ha-spinner size="tiny"></ha-spinner>
+          <ha-spinner size="small"></ha-spinner>
+          <ha-spinner size="medium"></ha-spinner>
+          <ha-spinner size="large"></ha-spinner></div
+      ></ha-card>
+      <ha-card header="Spinner with an aria-label">
+        <div class="card-content">
+          <ha-spinner aria-label="Doing something..."></ha-spinner>
+          <ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner></div
+      ></ha-card>`;
+  }
+
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-spinner": DemoHaSpinner;
+  }
+}
@@ -0,0 +1,30 @@
+---
+title: Tooltip
+---
+
+A tooltip's target is its _first child element_, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.
+
+Tooltips use `display: contents` so they won't interfere with how elements are positioned in a flex or grid layout.
+
+<ha-tooltip content="This is a tooltip">
+  <ha-button>Hover Me</ha-button>
+</ha-tooltip>
+
+```
+<ha-tooltip content="This is a tooltip">
+  <ha-button>Hover Me</ha-button>
+</ha-tooltip>
+```
+
+## Documentation
+
+This element is based on sholace `sl-tooltip` it only sets some css tokens and has a custom show/hide animation.
+
+<a href="https://shoelace.style/components/tooltip" target="_blank" rel="noopener noreferrer">Shoelace documentation</a>
+
+### HA style tokens
+
+In your theme settings use this without the prefixed `--`.
+
+- `--ha-tooltip-border-radius` (Default: 4px)
+- `--ha-tooltip-arrow-size` (Default: 8px)
@@ -0,0 +1,2 @@
+import "../../../../src/components/ha-tooltip";
+import "../../../../src/components/ha-button";
@@ -32,6 +32,8 @@ const createConfigEntry = (
  supports_remove_device: false,
  supports_unload: true,
  supports_reconfigure: true,
+  supported_subentry_types: {},
+  num_subentries: 0,
  disabled_by: null,
  pref_disable_new_entities: false,
  pref_disable_polling: false,
@@ -188,6 +190,7 @@ const createEntityRegistryEntries = (
 ): EntityRegistryEntry[] => [
  {
    config_entry_id: item.entry_id,
+    config_subentry_id: null,
    device_id: "mock-device-id",
    area_id: null,
    disabled_by: null,
@@ -214,6 +217,7 @@ const createDeviceRegistryEntries = (
  {
    entry_type: null,
    config_entries: [item.entry_id],
+    config_entries_subentries: {},
    connections: [],
    manufacturer: "ESPHome",
    model: "Mock Device",
@@ -1,7 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-spinner";
 import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
@@ -21,7 +21,7 @@ class HassioAddonConfigDashboard extends LitElement {

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

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

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

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

  protected render(): TemplateResult {
    if (!this.addon) {
-      return html`
-        <ha-circular-progress indeterminate></ha-circular-progress>
-      `;
+      return html` <ha-spinner></ha-spinner> `;
    }
    return html`
      <div class="search">
@@ -253,13 +253,9 @@ export class HassioBackups extends LitElement {
                          "backup.delete_selected"
                        )}
                        .path=${mdiDelete}
-                        id="delete-btn"
                        class="warning"
                        @click=${this._deleteSelected}
                      ></ha-icon-button>
-                      <simple-tooltip animation-delay="0" for="delete-btn">
-                        ${this.supervisor.localize("backup.delete_selected")}
-                      </simple-tooltip>
                    `}
              </div>
            </div> `
@@ -1,8 +1,6 @@
 import type { IFuseOptions } from "fuse.js";
 import Fuse from "fuse.js";
-import { stripDiacritics } from "../../../src/common/string/strip-diacritics";
 import type { StoreAddon } from "../../../src/data/supervisor/store";
-import { getStripDiacriticsFn } from "../../../src/util/fuse";

 export function filterAndSort(addons: StoreAddon[], filter: string) {
  const options: IFuseOptions<StoreAddon> = {
@@ -10,8 +8,8 @@ export function filterAndSort(addons: StoreAddon[], filter: string) {
    isCaseSensitive: false,
    minMatchCharLength: Math.min(filter.length, 2),
    threshold: 0.2,
-    getFn: getStripDiacriticsFn,
+    ignoreDiacritics: true,
  };
  const fuse = new Fuse(addons, options);
-  return fuse.search(stripDiacritics(filter)).map((result) => result.item);
+  return fuse.search(filter).map((result) => result.item);
 }
@@ -3,7 +3,6 @@ import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
-import "../../../src/components/ha-circular-progress";
 import "../../../src/components/ha-file-upload";
 import type { HassioBackup } from "../../../src/data/hassio/backup";
 import { uploadBackup } from "../../../src/data/hassio/backup";
@@ -14,7 +13,7 @@ import type { LocalizeFunc } from "../../../src/common/translations/localize";

 declare global {
  interface HASSDomEvents {
-    "backup-uploaded": { backup: HassioBackup };
+    "hassio-backup-uploaded": { backup: HassioBackup };
    "backup-cleared": undefined;
  }
 }
@@ -70,7 +69,7 @@ export class HassioUploadBackup extends LitElement {
    this._uploading = true;
    try {
      const backup = await uploadBackup(this.hass, file);
-      fireEvent(this, "backup-uploaded", { backup: backup.data });
+      fireEvent(this, "hassio-backup-uploaded", { backup: backup.data });
    } catch (err: any) {
      showAlertDialog(this, {
        title: "Upload failed",
@@ -5,7 +5,6 @@ import { customElement, property, query } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { formatDate } from "../../../src/common/datetime/format_date";
 import { formatDateTime } from "../../../src/common/datetime/format_date_time";
-import type { LocalizeFunc } from "../../../src/common/translations/localize";
 import "../../../src/components/ha-checkbox";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-textfield";
@@ -19,13 +18,10 @@ import type {
 } from "../../../src/data/hassio/backup";
 import type { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { mdiHomeAssistant } from "../../../src/resources/home-assistant-logo-svg";
-import type { HomeAssistant, TranslationDict } from "../../../src/types";
+import type { HomeAssistant } from "../../../src/types";
 import "./supervisor-formfield-label";
 import type { HaTextField } from "../../../src/components/ha-textfield";

-type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] &
-  keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"];
-
 interface CheckboxItem {
  slug: string;
  checked: boolean;
@@ -67,8 +63,6 @@ const _computeAddons = (addons): AddonCheckboxItem[] =>
 export class SupervisorBackupContent extends LitElement {
  @property({ attribute: false }) public hass?: HomeAssistant;

-  @property({ attribute: false }) public localize?: LocalizeFunc;
-
  @property({ attribute: false }) public supervisor?: Supervisor;

  @property({ attribute: false }) public backup?: HassioBackupDetail;
@@ -115,10 +109,6 @@ export class SupervisorBackupContent extends LitElement {
    this._focusTarget?.focus();
  }

-  private _localize = (key: BackupOrRestoreKey) =>
-    this.supervisor?.localize(`backup.${key}`) ||
-    this.localize!(`ui.panel.page-onboarding.restore.${key}`);
-
  protected render() {
    if (!this.onboarding && !this.supervisor) {
      return nothing;
@@ -132,8 +122,8 @@ export class SupervisorBackupContent extends LitElement {
      ${this.backup
        ? html`<div class="details">
            ${this.backup.type === "full"
-              ? this._localize("full_backup")
-              : this._localize("partial_backup")}
+              ? this.supervisor?.localize("backup.full_backup")
+              : this.supervisor?.localize("backup.partial_backup")}
            (${Math.ceil(this.backup.size * 10) / 10 + " MB"})<br />
            ${this.hass
              ? formatDateTime(
@@ -145,7 +135,7 @@ export class SupervisorBackupContent extends LitElement {
          </div>`
        : html`<ha-textfield
            name="backupName"
-            .label=${this._localize("name")}
+            .label=${this.supervisor?.localize("backup.name")}
            .value=${this.backupName}
            @change=${this._handleTextValueChanged}
          >
@@ -153,11 +143,13 @@ export class SupervisorBackupContent extends LitElement {
      ${!this.backup || this.backup.type === "full"
        ? html`<div class="sub-header">
              ${!this.backup
-                ? this._localize("type")
-                : this._localize("select_type")}
+                ? this.supervisor?.localize("backup.type")
+                : this.supervisor?.localize("backup.select_type")}
            </div>
            <div class="backup-types">
-              <ha-formfield .label=${this._localize("full_backup")}>
+              <ha-formfield
+                .label=${this.supervisor?.localize("backup.full_backup")}
+              >
                <ha-radio
                  @change=${this._handleRadioValueChanged}
                  value="full"
@@ -166,7 +158,9 @@ export class SupervisorBackupContent extends LitElement {
                >
                </ha-radio>
              </ha-formfield>
-              <ha-formfield .label=${this._localize("partial_backup")}>
+              <ha-formfield
+                .label=${this.supervisor?.localize("backup.partial_backup")}
+              >
                <ha-radio
                  @change=${this._handleRadioValueChanged}
                  value="partial"
@@ -202,7 +196,7 @@ export class SupervisorBackupContent extends LitElement {
              ? html`
                  <ha-formfield
                    .label=${html`<supervisor-formfield-label
-                      .label=${this._localize("folders")}
+                      .label=${this.supervisor?.localize("backup.folders")}
                      .iconPath=${mdiFolder}
                    >
                    </supervisor-formfield-label>`}
@@ -222,7 +216,7 @@ export class SupervisorBackupContent extends LitElement {
              ? html`
                  <ha-formfield
                    .label=${html`<supervisor-formfield-label
-                      .label=${this._localize("addons")}
+                      .label=${this.supervisor?.localize("backup.addons")}
                      .iconPath=${mdiPuzzle}
                    >
                    </supervisor-formfield-label>`}
@@ -247,7 +241,7 @@ export class SupervisorBackupContent extends LitElement {
      ${!this.backup
        ? html`<ha-formfield
            class="password"
-            .label=${this._localize("password_protection")}
+            .label=${this.supervisor?.localize("backup.password_protection")}
          >
            <ha-checkbox
              .checked=${this.backupHasPassword}
@@ -259,7 +253,7 @@ export class SupervisorBackupContent extends LitElement {
      ${this.backupHasPassword
        ? html`
            <ha-password-field
-              .label=${this._localize("password")}
+              .label=${this.supervisor?.localize("backup.password")}
              name="backupPassword"
              .value=${this.backupPassword}
              @change=${this._handleTextValueChanged}
@@ -267,7 +261,7 @@ export class SupervisorBackupContent extends LitElement {
            </ha-password-field>
            ${!this.backup
              ? html`<ha-password-field
-                  .label=${this._localize("confirm_password")}
+                  .label=${this.supervisor?.localize("backup.confirm_password")}
                  name="confirmBackupPassword"
                  .value=${this.confirmBackupPassword}
                  @change=${this._handleTextValueChanged}
@@ -72,7 +72,7 @@ export class DialogHassioBackupUpload
          </ha-header-bar>
        </div>
        <hassio-upload-backup
-          @backup-uploaded=${this._backupUploaded}
+          @hassio-backup-uploaded=${this._backupUploaded}
          .hass=${this.hass}
        ></hassio-upload-backup>
      </ha-dialog>
@@ -12,6 +12,7 @@ import "../../../../src/components/ha-md-dialog";
 import "../../../../src/components/ha-dialog-header";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-header-bar";
@@ -35,7 +36,6 @@ import { fileDownload } from "../../../../src/util/file_download";
 import "../../components/supervisor-backup-content";
 import type { SupervisorBackupContent } from "../../components/supervisor-backup-content";
 import type { HassioBackupDialogParams } from "./show-dialog-hassio-backup";
-import type { BackupOrRestoreKey } from "../../util/translations";
 import type { HaMdDialog } from "../../../../src/components/ha-md-dialog";

@customElement("dialog-hassio-backup")
@@ -43,7 +43,7 @@ class HassioBackupDialog
  extends LitElement
  implements HassDialog<HassioBackupDialogParams>
 {
-  @property({ attribute: false }) public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private _error?: string;

@@ -62,9 +62,13 @@ class HassioBackupDialog
    this._dialogParams = dialogParams;
    this._backup = await fetchHassioBackupInfo(this.hass, dialogParams.slug);
    if (!this._backup) {
-      this._error = this._localize("no_backup_found");
+      this._error = this._dialogParams.supervisor?.localize(
+        "backup.no_backup_found"
+      );
    } else if (this._dialogParams.onboarding && !this._backup.homeassistant) {
-      this._error = this._localize("restore_no_home_assistant");
+      this._error = this._dialogParams.supervisor?.localize(
+        "backup.restore_no_home_assistant"
+      );
    }
    this._restoringBackup = false;
  }
@@ -82,13 +86,6 @@ class HassioBackupDialog
    return true;
  }

-  private _localize(key: BackupOrRestoreKey) {
-    return (
-      this._dialogParams!.supervisor?.localize(`backup.${key}`) ||
-      this._dialogParams!.localize!(`ui.panel.page-onboarding.restore.${key}`)
-    );
-  }
-
  protected render() {
    if (!this._dialogParams || !this._backup) {
      return nothing;
@@ -102,7 +99,7 @@ class HassioBackupDialog
        <ha-dialog-header slot="headline">
          <ha-icon-button
            slot="navigationIcon"
-            .label=${this._localize("close")}
+            .label=${this._dialogParams.supervisor?.localize("backup.close")}
            .path=${mdiClose}
            @click=${this.closeDialog}
            .disabled=${this._restoringBackup}
@@ -142,7 +139,7 @@ class HassioBackupDialog
            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
            : this._restoringBackup
              ? html`<div class="loading">
-                  <ha-circular-progress indeterminate></ha-circular-progress>
+                  <ha-spinner></ha-spinner>
                </div>`
              : html`
                  <supervisor-backup-content
@@ -150,7 +147,6 @@ class HassioBackupDialog
                    .supervisor=${this._dialogParams.supervisor}
                    .backup=${this._backup}
                    .onboarding=${this._dialogParams.onboarding || false}
-                    .localize=${this._dialogParams.localize}
                    dialogInitialFocus
                  >
                  </supervisor-backup-content>
@@ -161,7 +157,7 @@ class HassioBackupDialog
            .disabled=${this._restoringBackup || !!this._error}
            @click=${this._restoreClicked}
          >
-            ${this._localize("restore")}
+            ${this._dialogParams.supervisor?.localize("backup.restore")}
          </ha-button>
        </div>
      </ha-md-dialog>
@@ -196,18 +192,22 @@ class HassioBackupDialog
    }
    if (
      !(await showConfirmationDialog(this, {
-        title: this._localize(
-          this._backup!.type === "full"
-            ? "confirm_restore_full_backup_title"
-            : "confirm_restore_partial_backup_title"
+        title: supervisor?.localize(
+          `backup.${
+            this._backup!.type === "full"
+              ? "confirm_restore_full_backup_title"
+              : "confirm_restore_partial_backup_title"
+          }`
        ),
-        text: this._localize(
-          this._backup!.type === "full"
-            ? "confirm_restore_full_backup_text"
-            : "confirm_restore_partial_backup_text"
+        text: supervisor?.localize(
+          `backup.${
+            this._backup!.type === "full"
+              ? "confirm_restore_full_backup_text"
+              : "confirm_restore_partial_backup_text"
+          }`
        ),
-        confirmText: this._localize("restore"),
-        dismissText: this._localize("cancel"),
+        confirmText: supervisor?.localize("backup.restore"),
+        dismissText: supervisor?.localize("backup.cancel"),
      }))
    ) {
      this._restoringBackup = false;
@@ -227,7 +227,8 @@ class HassioBackupDialog
      this.closeDialog();
    } catch (error: any) {
      this._error =
-        error?.body?.message || this._localize("restore_start_failed");
+        error?.body?.message ||
+        supervisor?.localize("backup.restore_start_failed");
    } finally {
      this._restoringBackup = false;
    }
@@ -286,7 +287,7 @@ class HassioBackupDialog
        title: supervisor.localize("backup.remote_download_title"),
        text: supervisor.localize("backup.remote_download_text"),
        confirmText: supervisor.localize("backup.download"),
-        dismissText: this._localize("cancel"),
+        dismissText: supervisor?.localize("backup.cancel"),
      });
      if (!confirm) {
        return;
@@ -302,7 +303,7 @@ class HassioBackupDialog
  private get _computeName() {
    return this._backup
      ? this._backup.name || this._backup.slug
-      : this._localize("unnamed_backup");
+      : this._dialogParams!.supervisor?.localize("backup.unnamed_backup") || "";
  }

  static get styles(): CSSResultGroup {
@@ -310,10 +311,6 @@ class HassioBackupDialog
      haStyle,
      haStyleDialog,
      css`
-        ha-circular-progress {
-          display: block;
-          text-align: center;
-        }
        ha-header-bar {
          --mdc-theme-on-primary: var(--primary-text-color);
          --mdc-theme-primary: var(--mdc-theme-surface);
@@ -5,6 +5,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-spinner";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import {
  createHassioFullBackup,
@@ -58,7 +59,7 @@ class HassioCreateBackupDialog extends LitElement {
        )}
      >
        ${this._creatingBackup
-          ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
+          ? html`<ha-spinner></ha-spinner>`
          : html`<supervisor-backup-content
              .hass=${this.hass}
              .supervisor=${this._dialogParams.supervisor}
@@ -142,10 +143,6 @@ class HassioCreateBackupDialog extends LitElement {
        :host {
          direction: var(--direction);
        }
-        ha-circular-progress {
-          display: block;
-          text-align: center;
-        }
      `,
    ];
  }
@@ -1,5 +1,4 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import type { LocalizeFunc } from "../../../../src/common/translations/localize";
 import type { Supervisor } from "../../../../src/data/supervisor/supervisor";

 export interface HassioBackupDialogParams {
@@ -8,7 +7,6 @@ export interface HassioBackupDialogParams {
  onRestoring?: () => void;
  onboarding?: boolean;
  supervisor?: Supervisor;
-  localize?: LocalizeFunc;
 }

 export const showHassioBackupDialog = (
@@ -4,7 +4,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-select";
 import "../../../../src/components/ha-dialog";
 import {
@@ -69,12 +69,7 @@ class HassioDatadiskDialog extends LitElement {
        ?hideActions=${this.moving}
      >
        ${this.moving
-          ? html` <ha-circular-progress
-                aria-label="Moving"
-                size="large"
-                indeterminate
-              >
-              </ha-circular-progress>
+          ? html`<ha-spinner aria-label="Moving" size="large"></ha-spinner>
              <p class="progress-text">
                ${this.dialogParams.supervisor.localize(
                  "dialog.datadisk_move.moving_desc"
@@ -166,7 +161,7 @@ class HassioDatadiskDialog extends LitElement {
        ha-select {
          width: 100%;
        }
-        ha-circular-progress {
+        ha-spinner {
          display: block;
          margin: 32px;
          text-align: center;
@@ -10,7 +10,7 @@ import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
 import "../../../../src/components/ha-formfield";
@@ -161,12 +161,8 @@ export class DialogHassioNetwork
                  .disabled=${this._scanning}
                >
                  ${this._scanning
-                    ? html`<ha-circular-progress
-                        aria-label="Scanning"
-                        indeterminate
-                        size="small"
-                      >
-                      </ha-circular-progress>`
+                    ? html`<ha-spinner aria-label="Scanning" size="small">
+                      </ha-spinner>`
                    : this.supervisor.localize("dialog.network.scan_ap")}
                </mwc-button>
                ${this._accessPoints &&
@@ -282,8 +278,7 @@ export class DialogHassioNetwork
        </mwc-button>
        <mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
          ${this._processing
-            ? html`<ha-circular-progress indeterminate size="small">
-              </ha-circular-progress>`
+            ? html`<ha-spinner size="small"> </ha-spinner>`
            : this.supervisor.localize("common.save")}
        </mwc-button>
      </div>`;
@@ -1,6 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import { mdiDelete, mdiDeleteOff } from "@mdi/js";
-import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -8,7 +7,8 @@ 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-circular-progress";
+import "../../../../src/components/ha-tooltip";
+import "../../../../src/components/ha-spinner";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-icon-button";
 import type {
@@ -118,28 +118,27 @@ class HassioRepositoriesDialog extends LitElement {
                        <div>${repo.maintainer}</div>
                        <div>${repo.url}</div>
                      </div>
-                      <div class="delete" slot="end">
-                        <ha-icon-button
-                          .disabled=${usedRepositories.includes(repo.slug)}
-                          .slug=${repo.slug}
-                          .path=${usedRepositories.includes(repo.slug)
-                            ? mdiDeleteOff
-                            : mdiDelete}
-                          @click=${this._removeRepository}
-                        >
-                        </ha-icon-button>
-                        <simple-tooltip
-                          animation-delay="0"
-                          position="bottom"
-                          offset="1"
-                        >
-                          ${this._dialogParams!.supervisor.localize(
-                            usedRepositories.includes(repo.slug)
-                              ? "dialog.repositories.used"
-                              : "dialog.repositories.remove"
-                          )}
-                        </simple-tooltip>
-                      </div>
+                      <ha-tooltip
+                        class="delete"
+                        slot="end"
+                        .content=${this._dialogParams!.supervisor.localize(
+                          usedRepositories.includes(repo.slug)
+                            ? "dialog.repositories.used"
+                            : "dialog.repositories.remove"
+                        )}
+                      >
+                        <div>
+                          <ha-icon-button
+                            .disabled=${usedRepositories.includes(repo.slug)}
+                            .slug=${repo.slug}
+                            .path=${usedRepositories.includes(repo.slug)
+                              ? mdiDeleteOff
+                              : mdiDelete}
+                            @click=${this._removeRepository}
+                          >
+                          </ha-icon-button>
+                        </div>
+                      </ha-tooltip>
                    </ha-md-list-item>
                  `
                )
@@ -162,10 +161,7 @@ class HassioRepositoriesDialog extends LitElement {
            ></ha-textfield>
            <mwc-button @click=${this._addRepository}>
              ${this._processing
-                ? html`<ha-circular-progress
-                    indeterminate
-                    size="small"
-                  ></ha-circular-progress>`
+                ? html`<ha-spinner size="small"></ha-spinner>`
                : this._dialogParams!.supervisor.localize(
                    "dialog.repositories.add"
                  )}
@@ -203,7 +199,7 @@ class HassioRepositoriesDialog extends LitElement {
          margin-inline-start: 8px;
          margin-inline-end: initial;
        }
-        ha-circular-progress {
+        ha-spinner {
          display: block;
          margin: 32px;
          text-align: center;
@@ -9,16 +9,22 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 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-alert";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-spinner";
 import "../../../src/components/ha-checkbox";
 import "../../../src/components/ha-faded";
 import "../../../src/components/ha-icon-button";
 import "../../../src/components/ha-markdown";
+import "../../../src/components/ha-md-list";
+import "../../../src/components/ha-md-list-item";
 import "../../../src/components/ha-svg-icon";
+import "../../../src/components/ha-switch";
+import type { HaSwitch } from "../../../src/components/ha-switch";
 import type { HassioAddonDetails } from "../../../src/data/hassio/addon";
 import {
  fetchHassioAddonChangelog,
@@ -121,6 +127,8 @@ class UpdateAvailableCard extends LitElement {

    const changelog = changelogUrl(this._updateType, this._version_latest);

+    const createBackupTexts = this._computeCreateBackupTexts();
+
    return html`
      <ha-card
        outlined
@@ -160,13 +168,35 @@ class UpdateAvailableCard extends LitElement {
                      )}
                    </p>
                  </div>
+                  ${createBackupTexts
+                    ? html`
+                        <hr />
+                        <ha-md-list>
+                          <ha-md-list-item>
+                            <span slot="headline">
+                              ${createBackupTexts.title}
+                            </span>
+
+                            ${createBackupTexts.description
+                              ? html`
+                                  <span slot="supporting-text">
+                                    ${createBackupTexts.description}
+                                  </span>
+                                `
+                              : nothing}
+                            <ha-switch
+                              slot="end"
+                              id="create-backup"
+                            ></ha-switch>
+                          </ha-md-list-item>
+                        </ha-md-list>
+                      `
+                    : nothing}
                `
-              : html`<ha-circular-progress
+              : html`<ha-spinner
                    aria-label="Updating"
                    size="large"
-                    indeterminate
-                  >
-                  </ha-circular-progress>
+                  ></ha-spinner>
                  <p class="progress-text">
                    ${this.supervisor.localize("update_available.updating", {
                      name: this._name,
@@ -227,6 +257,48 @@ class UpdateAvailableCard extends LitElement {
    }
  }

+  private _computeCreateBackupTexts():
+    | { title: string; description?: string }
+    | undefined {
+    // Addon backup
+    if (
+      this._updateType === "addon" &&
+      atLeastVersion(this.hass.config.version, 2025, 2, 0)
+    ) {
+      const version = this._version;
+      return {
+        title: this.supervisor.localize("update_available.create_backup.addon"),
+        description: this.supervisor.localize(
+          "update_available.create_backup.addon_description",
+          { version: version }
+        ),
+      };
+    }
+
+    // Old behavior
+    if (this._updateType && ["core", "addon"].includes(this._updateType)) {
+      return {
+        title: this.supervisor.localize(
+          "update_available.create_backup.generic"
+        ),
+      };
+    }
+    return undefined;
+  }
+
+  get _shouldCreateBackup(): boolean {
+    if (this._updateType && !["core", "addon"].includes(this._updateType)) {
+      return false;
+    }
+    const createBackupSwitch = this.shadowRoot?.getElementById(
+      "create-backup"
+    ) as HaSwitch;
+    if (createBackupSwitch) {
+      return createBackupSwitch.checked;
+    }
+    return true;
+  }
+
  get _version(): string {
    return this._updateType
      ? this._updateType === "addon"
@@ -341,14 +413,22 @@ class UpdateAvailableCard extends LitElement {
  }

  private async _update() {
+    if (this._shouldCreateBackup && this.supervisor.info.state === "freeze") {
+      this._error = this.supervisor.localize("backup.backup_already_running");
+      return;
+    }
    this._error = undefined;
    this._updating = true;

    try {
      if (this._updateType === "addon") {
-        await updateHassioAddon(this.hass, this.addonSlug!);
+        await updateHassioAddon(
+          this.hass,
+          this.addonSlug!,
+          this._shouldCreateBackup
+        );
      } else if (this._updateType === "core") {
-        await updateCore(this.hass);
+        await updateCore(this.hass, this._shouldCreateBackup);
      } else if (this._updateType === "os") {
        await updateOS(this.hass);
      } else if (this._updateType === "supervisor") {
@@ -384,7 +464,7 @@ class UpdateAvailableCard extends LitElement {
          justify-content: space-between;
        }

-        ha-circular-progress {
+        ha-spinner {
          display: block;
          margin: 32px;
          text-align: center;
@@ -403,6 +483,17 @@ class UpdateAvailableCard extends LitElement {
          border-bottom: none;
          margin: 16px 0 0 0;
        }
+
+        ha-md-list {
+          padding: 0;
+          margin-bottom: -16px;
+        }
+
+        ha-md-list-item {
+          --md-list-item-leading-space: 0;
+          --md-list-item-trailing-space: 0;
+          --md-item-overflow: visible;
+        }
      `,
    ];
  }
@@ -1,4 +0,0 @@
-import type { TranslationDict } from "../../../src/types";
-
-export type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] &
-  keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"];
@@ -22,6 +22,8 @@ import {
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import { fileDownload } from "../../../src/util/file_download";
 import { getSupervisorLogs, getSupervisorLogsFollow } from "../data/supervisor";
+import { waitForSeconds } from "../../../src/common/util/wait";
+import { ASSUME_CORE_START_SECONDS } from "../ha-landing-page";

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

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

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

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

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

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

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

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

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

-  private _scheduleFetchSupervisorInfo() {
-    setTimeout(
-      () => this._fetchSupervisorInfo(),
-      SCHEDULE_FETCH_NETWORK_INFO_SECONDS * 1000
-    );
-  }
-
-  private async _fetchSupervisorInfo() {
-    let data;
-    try {
-      const response = await getSupervisorNetworkInfo();
-      if (!response.ok) {
-        throw new Error("Failed to fetch network info");
-      }
-
-      ({ data } = await response.json());
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(err);
-      this._getNetworkInfoError = true;
-      this._dnsPrimaryInterfaceNameservers = undefined;
-      this._dnsPrimaryInterface = undefined;
-      return;
-    }
-
-    this._getNetworkInfoError = false;
-
-    const primaryInterface = data.interfaces.find(
-      (intf) => intf.primary && intf.enabled
-    );
-    if (primaryInterface) {
-      this._dnsPrimaryInterfaceNameservers = [
+  private _getPrimaryNameservers = memoizeOne(
+    (primaryInterface: NetworkInterface) =>
+      [
        ...(primaryInterface.ipv4?.nameservers || []),
        ...(primaryInterface.ipv6?.nameservers || []),
-      ].join(", ");
-
-      this._dnsPrimaryInterface = primaryInterface.interface;
-    } else {
-      this._dnsPrimaryInterfaceNameservers = undefined;
-      this._dnsPrimaryInterface = undefined;
-    }
-
-    if (!data.host_internet) {
-      this._networkIssue = true;
-    } else {
-      this._networkIssue = false;
-    }
-
-    fireEvent(this, "value-changed", {
-      value: this._networkIssue,
-    });
-    this._scheduleFetchSupervisorInfo();
-  }
+      ].join(", ")
+  );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 [project]
 name         = "home-assistant-frontend"
-version      = "20241224.0"
+version      = "20250226.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"
@@ -64,7 +64,7 @@ echo Core is used from ${coreUrl}
 HASS_URL="$coreUrl" ./script/develop &

 # serve the frontend
-yarn dlx serve -l $frontendPort ./hass_frontend -s &
+./node_modules/.bin/serve -p $frontendPort --single --no-port-switching --config ../script/serve-config.json ./hass_frontend &

 # keep the script running while serving
 wait
@@ -0,0 +1,3 @@
+{
+  "cleanUrls": false
+}
@@ -1,3 +1,4 @@
+import memoizeOne from "memoize-one";
 import { theme2hex } from "./convert-color";

 export const COLORS = [
@@ -74,3 +75,12 @@ export function getGraphColorByIndex(
    getColorByIndex(index);
  return theme2hex(themeColor);
 }
+
+export const getAllGraphColors = memoizeOne(
+  (style: CSSStyleDeclaration) =>
+    COLORS.map((_color, index) => getGraphColorByIndex(index, style)),
+  (newArgs: [CSSStyleDeclaration], lastArgs: [CSSStyleDeclaration]) =>
+    // this is not ideal, but we need to memoize the colors
+    newArgs[0].getPropertyValue("--graph-color-1") ===
+    lastArgs[0].getPropertyValue("--graph-color-1")
+);
@@ -136,11 +136,18 @@ export function theme2hex(themeColor: string): string {
  }

  const rgbFromColorName = colors[themeColor];
-  if (!rgbFromColorName) {
-    // We have a named color, and there's nothing in the table,
-    // so nothing further we can do with it.
-    // Compare/border/background color will all be the same.
-    return themeColor;
+  if (rgbFromColorName) {
+    return rgb2hex(rgbFromColorName);
  }
-  return rgb2hex(rgbFromColorName);
+
+  const rgbMatch = themeColor.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  if (rgbMatch) {
+    const [, r, g, b] = rgbMatch.map(Number);
+    return rgb2hex([r, g, b]);
+  }
+
+  // We have a named color, and there's nothing in the table,
+  // so nothing further we can do with it.
+  // Compare/border/background color will all be the same.
+  return themeColor;
 }
@@ -26,6 +26,20 @@ const formatDateTimeMem = memoizeOne(
    })
 );

+export const formatDateTimeWithBrowserDefaults = (dateObj: Date) =>
+  formatDateTimeWithBrowserDefaultsMem().format(dateObj);
+
+const formatDateTimeWithBrowserDefaultsMem = memoizeOne(
+  () =>
+    new Intl.DateTimeFormat(undefined, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    })
+);
+
 // Aug 9, 2021, 8:23 AM
 export const formatShortDateTimeWithYear = (
  dateObj: Date,
@@ -65,6 +79,18 @@ const formatShortDateTimeMem = memoizeOne(
    })
 );

+export const formatShortDateTimeWithConditionalYear = (
+  dateObj: Date,
+  locale: FrontendLocaleData,
+  config: HassConfig
+) => {
+  const now = new Date();
+  if (now.getFullYear() === dateObj.getFullYear()) {
+    return formatShortDateTime(dateObj, locale, config);
+  }
+  return formatShortDateTimeWithYear(dateObj, locale, config);
+};
+
 // August 9, 2021, 8:23:15 AM
 export const formatDateTimeWithSeconds = (
  dateObj: Date,
@@ -16,11 +16,22 @@ export const setupLeafletMap = async (
  const Leaflet = (await import("leaflet")).default as LeafletModuleType;
  Leaflet.Icon.Default.imagePath = "/static/images/leaflet/images/";

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

  const tileLayer = createTileLayer(Leaflet).addTo(map);
@@ -1,2 +1,2 @@
 export const computeDomain = (entityId: string): string =>
-  entityId.substr(0, entityId.indexOf("."));
+  entityId.substring(0, entityId.indexOf("."));
@@ -120,11 +120,6 @@ export const computeStateDisplayFromEntityAttributes = (
    return value;
  }

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

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

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

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

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

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

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

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

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

-  // Case 4 - both includes and excludes specified
-  // Case 4a - include domain specified
-  //  - if domain is included, pass if entity not excluded
-  //  - if domain is not included, pass if entity is included
-  // note: if both include and exclude domains specified,
-  //   the exclude domains are ignored
-  if (includeDomainsSet.size) {
-    return (entityId) =>
-      includeDomainsSet.has(computeDomain(entityId))
-        ? !excludeEntitiesSet.has(entityId)
-        : includeEntitiesSet.has(entityId);
-  }
-
-  // Case 4b - exclude domain specified
-  //  - if domain is excluded, pass if entity is included
-  //  - if domain is not excluded, pass if entity not excluded
-  if (excludeDomainsSet.size) {
-    return (entityId) =>
-      excludeDomainsSet.has(computeDomain(entityId))
-        ? includeEntitiesSet.has(entityId)
-        : !excludeEntitiesSet.has(entityId);
-  }
-
-  // Case 4c - neither include or exclude domain specified
-  //  - Only pass if entity is included.  Ignore entity excludes.
-  return (entityId) => includeEntitiesSet.has(entityId);
+    return true;
+  };
 };
@@ -1,6 +1,9 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { computeStateDomain } from "./compute_state_domain";
 import { UNAVAILABLE_STATES } from "../../data/entity";
+import type { HomeAssistant } from "../../types";
+import { computeDomain } from "./compute_domain";
+import { stringCompare } from "../string/compare";

 export const FIXED_DOMAIN_STATES = {
  alarm_control_panel: [
@@ -237,6 +240,7 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
 };

 export const getStates = (
+  hass: HomeAssistant,
  state: HassEntity,
  attribute: string | undefined = undefined
 ): string[] => {
@@ -269,7 +273,19 @@ export const getStates = (
    case "device_tracker":
    case "person":
      if (!attribute) {
-        result.push("home", "not_home");
+        result.push(
+          ...Object.entries(hass.states)
+            .filter(
+              ([entityId, stateObj]) =>
+                computeDomain(entityId) === "zone" &&
+                entityId !== "zone.home" &&
+                stateObj.attributes.friendly_name
+            )
+            .map(([_entityId, stateObj]) => stateObj.attributes.friendly_name!)
+            .sort((zone1, zone2) =>
+              stringCompare(zone1, zone2, hass.locale.language)
+            )
+        );
      }
      break;
    case "event":
@@ -0,0 +1,32 @@
+import type { LatLngExpression, Layer, Map, MarkerOptions } from "leaflet";
+import { Marker } from "leaflet";
+
+export class DecoratedMarker extends Marker {
+  decorationLayer: Layer | undefined;
+
+  constructor(
+    latlng: LatLngExpression,
+    decorationLayer?: Layer,
+    options?: MarkerOptions
+  ) {
+    super(latlng, options);
+
+    this.decorationLayer = decorationLayer;
+  }
+
+  onAdd(map: Map) {
+    super.onAdd(map);
+
+    // If decoration has been provided, add it to the map as well
+    this.decorationLayer?.addTo(map);
+
+    return this;
+  }
+
+  onRemove(map: Map) {
+    // If decoration has been provided, remove it from the map as well
+    this.decorationLayer?.remove();
+
+    return super.onRemove(map);
+  }
+}
@@ -0,0 +1,6 @@
+export const waitForMs = (ms: number) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+export const waitForSeconds = (seconds: number) => waitForMs(seconds * 1000);
@@ -3,7 +3,7 @@ import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../ha-circular-progress";
+import "../ha-spinner";
 import "../ha-svg-icon";

@customElement("ha-progress-button")
@@ -35,13 +35,8 @@ export class HaProgressButton extends LitElement {
                : this._result === "error"
                  ? html`<ha-svg-icon .path=${mdiAlertOctagram}></ha-svg-icon>`
                  : this.progress
-                    ? html`
-                        <ha-circular-progress
-                          size="small"
-                          indeterminate
-                        ></ha-circular-progress>
-                      `
-                    : ""}
+                    ? html`<ha-spinner size="small"></ha-spinner>`
+                    : nothing}
            </div>
          `}
    `;
@@ -117,6 +112,9 @@ export class HaProgressButton extends LitElement {
    mwc-button.error slot {
      visibility: hidden;
    }
+    :host([destructive]) {
+      --mdc-theme-primary: var(--error-color);
+    }
  `;
 }

--- a/Show More
+++ b/Show More