Bumped version to 20250731.0

* Fix line-height

* Fix script root buttons

.github/workflows/release.yaml

@@ -74,7 +74,7 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2025.07.0
+        uses: home-assistant/wheels@2025.03.0
         with:
           abi: cp313
           tag: musllinux_1_2

CODEOWNERS

@@ -1,8 +0,0 @@
-# People marked here will be automatically requested for a review
-# when the code that they own is touched.
-# https://github.com/blog/2392-introducing-code-owners
-# https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners
-
-# Part of the frontend that mobile developper should review
-src/external_app/ @bgoncal @TimoPtr
-test/external_app/ @bgoncal @TimoPtr

gallery/src/pages/components/ha-button.markdown

@@ -64,4 +64,4 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/butt
 **CSS Custom Properties**
 
 - `--ha-button-height` - Height of the button.
-- `--ha-button-border-radius` - Border radius of the button. Defaults to `var(--border-radius-pill)`.
+- `--ha-button-radius` - Border radius of the button. Defaults to `var(--wa-border-radius-pill)`.

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

@@ -21,8 +21,8 @@ import type { HomeAssistant } from "../../../../src/types";
 import type { HassioDatatiskDialogParams } from "./show-dialog-hassio-datadisk";
 
 const calculateMoveTime = memoizeOne((supervisor: Supervisor): number => {
-  // Assume a speed of 30 MB/s.
-  const moveTime = (supervisor.host.disk_used * 1000) / 60 / 30;
+  const speed = supervisor.host.disk_life_time !== "" ? 30 : 10;
+  const moveTime = (supervisor.host.disk_used * 1000) / 60 / speed;
   const rebootTime = (supervisor.host.startup_time * 4) / 60;
   return Math.ceil((moveTime + rebootTime) / 10) * 10;
 });

hassio/src/system/hassio-host-info.ts

@@ -143,12 +143,16 @@ class HassioHostInfo extends LitElement {
               : ""}
           </div>
           <div>
-            ${this.supervisor.host.disk_life_time !== null
+            ${this.supervisor.host.disk_life_time !== "" &&
+            this.supervisor.host.disk_life_time >= 10
               ? html` <ha-settings-row>
                   <span slot="heading">
-                    ${this.supervisor.localize("system.host.lifetime_used")}
+                    ${this.supervisor.localize(
+                      "system.host.emmc_lifetime_used"
+                    )}
                   </span>
                   <span slot="description">
+                    ${this.supervisor.host.disk_life_time - 10} % -
                     ${this.supervisor.host.disk_life_time} %
                   </span>
                 </ha-settings-row>`

landing-page/src/components/landing-page-logs.ts

@@ -3,26 +3,26 @@ import { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
 // eslint-disable-next-line import/extensions
 import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
 import { LitElement, type PropertyValues, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { fireEvent } from "../../../src/common/dom/fire_event";
+import { customElement, property, query, state } from "lit/decorators";
 import type {
   LandingPageKeys,
   LocalizeFunc,
 } from "../../../src/common/translations/localize";
-import { waitForSeconds } from "../../../src/common/util/wait";
-import "../../../src/components/ha-alert";
-import "../../../src/components/ha-ansi-to-html";
-import type { HaAnsiToHtml } from "../../../src/components/ha-ansi-to-html";
 import "../../../src/components/ha-button";
 import "../../../src/components/ha-icon-button";
 import "../../../src/components/ha-svg-icon";
-import { fileDownload } from "../../../src/util/file_download";
+import "../../../src/components/ha-ansi-to-html";
+import "../../../src/components/ha-alert";
+import type { HaAnsiToHtml } from "../../../src/components/ha-ansi-to-html";
 import {
   getObserverLogs,
   downloadUrl as observerLogsDownloadUrl,
 } from "../data/observer";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import { fileDownload } from "../../../src/util/file_download";
 import { getSupervisorLogs, getSupervisorLogsFollow } from "../data/supervisor";
+import { waitForSeconds } from "../../../src/common/util/wait";
 import { ASSUME_CORE_START_SECONDS } from "../ha-landing-page";
 
 const ERROR_CHECK = /^[\d\s-:]+(ERROR|CRITICAL)(.*)/gm;
@@ -108,8 +108,6 @@ class LandingPageLogs extends LitElement {
               !this._scrolledToBottomController.value) ||
             false,
         })}"
-        size="small"
-        appearance="filled"
         @click=${this._scrollToBottom}
       >
         <ha-svg-icon .path=${mdiArrowCollapseDown} slot="start"></ha-svg-icon>
@@ -311,14 +309,21 @@ class LandingPageLogs extends LitElement {
       }
 
       .new-logs-indicator {
+        --mdc-theme-primary: var(--text-primary-color);
+
         overflow: hidden;
         position: absolute;
-        bottom: 4px;
-        left: 4px;
+        bottom: 0;
+        left: 0;
+        right: 0;
         height: 0;
+        background-color: var(--primary-color);
+        border-radius: 8px;
 
         transition: height 0.4s ease-out;
         display: flex;
+        justify-content: space-between;
+        align-items: center;
       }
 
       .new-logs-indicator.visible {

package.json

@@ -160,8 +160,8 @@
     "@octokit/plugin-retry": "8.0.1",
     "@octokit/rest": "22.0.0",
     "@rsdoctor/rspack-plugin": "1.1.10",
-    "@rspack/cli": "1.4.11",
-    "@rspack/core": "1.4.11",
+    "@rspack/cli": "1.4.10",
+    "@rspack/core": "1.4.10",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.22",
     "@types/chromecast-caf-sender": "1.0.11",
@@ -173,7 +173,7 @@
     "@types/leaflet-draw": "1.0.12",
     "@types/leaflet.markercluster": "1.5.5",
     "@types/lodash.merge": "4.6.9",
-    "@types/luxon": "3.7.1",
+    "@types/luxon": "3.6.2",
     "@types/mocha": "10.0.10",
     "@types/qrcode": "1.5.5",
     "@types/sortablejs": "1.15.8",

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20250730.0"
+version      = "20250731.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/common/translations/localize.ts

@@ -22,8 +22,8 @@ export type LocalizeKeys =
   | `ui.dialogs.more_info_control.lawn_mower.${string}`
   | `ui.dialogs.more_info_control.vacuum.${string}`
   | `ui.dialogs.quick-bar.commands.${string}`
-  | `ui.dialogs.unhealthy.reasons.${string}`
-  | `ui.dialogs.unsupported.reasons.${string}`
+  | `ui.dialogs.unhealthy.reason.${string}`
+  | `ui.dialogs.unsupported.reason.${string}`
   | `ui.panel.config.${string}.${"caption" | "description"}`
   | `ui.panel.config.dashboard.${string}`
   | `ui.panel.config.zha.${string}`

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

@@ -29,6 +29,7 @@ import { formatTimeLabel } from "./axis-label";
 import { ensureArray } from "../../common/array/ensure-array";
 import "../chips/ha-assist-chip";
 import { downSampleLineData } from "./down-sample";
+import { colorVariables } from "../../resources/theme/color/color.globals";
 
 export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 const LEGEND_OVERFLOW_LIMIT = 10;
@@ -167,16 +168,14 @@ export class HaChartBase extends LitElement {
   }
 
   protected firstUpdated() {
-    if (this.isConnected) {
-      this._setupChart();
-    }
+    this._setupChart();
   }
 
   public willUpdate(changedProps: PropertyValues): void {
     if (!this.chart) {
       return;
     }
-    if (changedProps.has("_themes") && this.hasUpdated) {
+    if (changedProps.has("_themes")) {
       this._setupChart();
       return;
     }
@@ -343,8 +342,7 @@ export class HaChartBase extends LitElement {
         echarts.use(this.extraComponents);
       }
 
-      const style = getComputedStyle(this);
-      echarts.registerTheme("custom", this._createTheme(style));
+      echarts.registerTheme("custom", this._createTheme());
 
       this.chart = echarts.init(container, "custom");
       this.chart.on("datazoom", (e: any) => {
@@ -396,7 +394,7 @@ export class HaChartBase extends LitElement {
                         ...axis.axisPointer,
                         status: "show",
                         handle: {
-                          color: style.getPropertyValue("primary-color"),
+                          color: colorVariables["primary-color"],
                           margin: 0,
                           size: 20,
                           ...axis.axisPointer?.handle,
@@ -570,7 +568,8 @@ export class HaChartBase extends LitElement {
     return options;
   }
 
-  private _createTheme(style: CSSStyleDeclaration) {
+  private _createTheme() {
+    const style = getComputedStyle(this);
     return {
       color: getAllGraphColors(style),
       backgroundColor: "transparent",
@@ -803,7 +802,6 @@ export class HaChartBase extends LitElement {
         };
       }
     }
-
     const replaceMerge = options.series ? ["series"] : [];
     this.chart.setOption(options, { replaceMerge });
   }

src/components/chart/ha-network-graph.ts

@@ -105,14 +105,12 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
   }
 
   protected render() {
-    if (!GraphChart || !this.data.nodes?.length) {
+    if (!GraphChart) {
       return nothing;
     }
-
     const isMobile = window.matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
     ).matches;
-
     return html`<ha-chart-base
       .hass=${this.hass}
       .data=${this._getSeries(
@@ -245,7 +243,6 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
   ) {
     const containerWidth = this.clientWidth;
     const containerHeight = this.clientHeight;
-
     const positionedNodes: NetworkNode[] = nodes.map((node) => ({ ...node }));
     positionedNodes.forEach((node) => {
       if (nodePositions[node.id]) {

src/components/ha-button.ts

@@ -27,7 +27,7 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
  * @csspart spinner - The spinner that shows when the button is in the loading state.
  *
  * @cssprop --ha-button-height - The height of the button.
- * @cssprop --ha-button-border-radius - The border radius of the button. defaults to `var(--border-radius-pill)`.
+ * @cssprop --ha-button-radius - The border radius of the button. defaults to `var(--wa-border-radius-pill)`.
  *
  * @attr {("small"|"medium")} size - Sets the button size.
  * @attr {("brand"|"neutral"|"danger"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
@@ -55,9 +55,10 @@ export class HaButton extends Button {
           /* set theme vars */
           --wa-form-control-padding-inline: 16px;
           --wa-font-weight-action: var(--ha-font-weight-medium);
+          --wa-border-radius-pill: 9999px;
           --wa-form-control-border-radius: var(
-            --ha-button-border-radius,
-            var(--border-radius-pill)
+            --ha-button-radius,
+            var(--wa-border-radius-pill)
           );
 
           --wa-form-control-height: var(

src/components/ha-conversation-agent-picker.ts

@@ -5,8 +5,8 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { debounce } from "../common/util/debounce";
-import type { ConfigEntry, SubEntry } from "../data/config_entries";
-import { getConfigEntry, getSubEntries } from "../data/config_entries";
+import type { ConfigEntry } from "../data/config_entries";
+import { getConfigEntry } from "../data/config_entries";
 import type { Agent } from "../data/conversation";
 import { listAgents } from "../data/conversation";
 import { fetchIntegrationManifest } from "../data/integration";
@@ -16,7 +16,6 @@ import "./ha-list-item";
 import "./ha-select";
 import type { HaSelect } from "./ha-select";
 import { getExtendedEntityRegistryEntry } from "../data/entity_registry";
-import { showSubConfigFlowDialog } from "../dialogs/config-flow/show-dialog-sub-config-flow";
 
 const NONE = "__NONE_OPTION__";
 
@@ -38,8 +37,6 @@ export class HaConversationAgentPicker extends LitElement {
 
   @state() private _configEntry?: ConfigEntry;
 
-  @state() private _subConfigEntry?: SubEntry;
-
   protected render() {
     if (!this._agents) {
       return nothing;
@@ -104,11 +101,7 @@ export class HaConversationAgentPicker extends LitElement {
               ${agent.name}
             </ha-list-item>`
         )}</ha-select
-      >${(this._subConfigEntry &&
-        this._configEntry?.supported_subentry_types[
-          this._subConfigEntry.subentry_type
-        ]?.supports_reconfigure) ||
-      this._configEntry?.supports_options
+      >${this._configEntry?.supports_options
         ? html`<ha-icon-button
             .path=${mdiCog}
             @click=${this._openOptionsFlow}
@@ -149,17 +142,8 @@ export class HaConversationAgentPicker extends LitElement {
       this._configEntry = (
         await getConfigEntry(this.hass, regEntry.config_entry_id)
       ).config_entry;
-
-      if (!regEntry.config_subentry_id) {
-        this._subConfigEntry = undefined;
-      } else {
-        this._subConfigEntry = (
-          await getSubEntries(this.hass, regEntry.config_entry_id)
-        ).find((entry) => entry.subentry_id === regEntry.config_subentry_id);
-      }
     } catch (_err) {
       this._configEntry = undefined;
-      this._subConfigEntry = undefined;
     }
   }
 
@@ -198,25 +182,6 @@ export class HaConversationAgentPicker extends LitElement {
     if (!this._configEntry) {
       return;
     }
-
-    if (
-      this._subConfigEntry &&
-      this._configEntry.supported_subentry_types[
-        this._subConfigEntry.subentry_type
-      ]?.supports_reconfigure
-    ) {
-      showSubConfigFlowDialog(
-        this,
-        this._configEntry,
-        this._subConfigEntry.subentry_type,
-        {
-          startFlowHandler: this._configEntry.entry_id,
-          subEntryId: this._subConfigEntry.subentry_id,
-        }
-      );
-      return;
-    }
-
     showOptionsFlowDialog(this, this._configEntry, {
       manifest: await fetchIntegrationManifest(
         this.hass,

src/components/ha-fab.ts

@@ -20,18 +20,6 @@ export class HaFab extends FabBase {
         --mdc-typography-button-font-family: var(--ha-font-family-body);
         --mdc-typography-button-font-weight: var(--ha-font-weight-medium);
       }
-      :host .mdc-fab--extended {
-        border-radius: var(
-          --ha-button-border-radius,
-          var(--border-radius-pill)
-        );
-      }
-      :host .mdc-fab.mdc-fab--extended .ripple {
-        border-radius: var(
-          --ha-button-border-radius,
-          var(--border-radius-pill)
-        );
-      }
       :host .mdc-fab--extended .mdc-fab__icon {
         margin-inline-start: -8px;
         margin-inline-end: 12px;

src/data/hassio/host.ts

@@ -8,7 +8,7 @@ export interface HassioHostInfo {
   chassis: string;
   cpe: string;
   deployment: string;
-  disk_life_time: number | null;
+  disk_life_time: number | "";
   disk_free: number;
   disk_total: number;
   disk_used: number;

src/data/update.ts

@@ -4,7 +4,7 @@ import type {
   HassEntityBase,
   HassEvent,
 } from "home-assistant-js-websocket";
-import { BINARY_STATE_ON, BINARY_STATE_OFF } from "../common/const";
+import { BINARY_STATE_ON } from "../common/const";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { supportsFeature } from "../common/entity/supports-feature";
@@ -52,15 +52,6 @@ export const updateCanInstall = (
     (showSkipped && Boolean(entity.attributes.skipped_version))) &&
   supportsFeature(entity, UpdateEntityFeature.INSTALL);
 
-export const latestVersionIsSkipped = (entity: UpdateEntity): boolean =>
-  !!(
-    entity.attributes.latest_version &&
-    entity.attributes.skipped_version === entity.attributes.latest_version
-  );
-
-export const updateButtonIsDisabled = (entity: UpdateEntity): boolean =>
-  entity.state === BINARY_STATE_OFF && !latestVersionIsSkipped(entity);
-
 export const updateIsInstalling = (entity: UpdateEntity): boolean =>
   !!entity.attributes.in_progress;
 

src/dialogs/more-info/controls/more-info-update.ts

@@ -7,7 +7,6 @@ import { relativeTime } from "../../../common/datetime/relative_time";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-checkbox";
 import "../../../components/ha-faded";
 import "../../../components/ha-markdown";
@@ -27,8 +26,6 @@ import {
   UpdateEntityFeature,
   updateIsInstalling,
   updateReleaseNotes,
-  latestVersionIsSkipped,
-  updateButtonIsDisabled,
 } from "../../../data/update";
 import type { HomeAssistant } from "../../../types";
 import { showAlertDialog } from "../../generic/show-dialog-box";
@@ -183,6 +180,11 @@ class MoreInfoUpdate extends LitElement {
       return nothing;
     }
 
+    const skippedVersion =
+      this.stateObj.attributes.latest_version &&
+      this.stateObj.attributes.skipped_version ===
+        this.stateObj.attributes.latest_version;
+
     const createBackupTexts = this._computeCreateBackupTexts();
 
     return html`
@@ -310,7 +312,7 @@ class MoreInfoUpdate extends LitElement {
                 <ha-button
                   appearance="plain"
                   @click=${this._handleSkip}
-                  .disabled=${latestVersionIsSkipped(this.stateObj) ||
+                  .disabled=${skippedVersion ||
                   this.stateObj.state === BINARY_STATE_OFF ||
                   updateIsInstalling(this.stateObj)}
                 >
@@ -323,8 +325,9 @@ class MoreInfoUpdate extends LitElement {
             ? html`
                 <ha-button
                   @click=${this._handleInstall}
-                  .loading=${updateIsInstalling(this.stateObj)}
-                  .disabled=${updateButtonIsDisabled(this.stateObj)}
+                  .disabled=${(this.stateObj.state === BINARY_STATE_OFF &&
+                    !skippedVersion) ||
+                  updateIsInstalling(this.stateObj)}
                 >
                   ${this.hass.localize(
                     "ui.dialogs.more_info_control.update.update"

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -1,3 +1,4 @@
+import { formatInTimeZone, toDate } from "date-fns-tz";
 import {
   addDays,
   addHours,
@@ -5,7 +6,6 @@ import {
   differenceInMilliseconds,
   startOfHour,
 } from "date-fns";
-import { formatInTimeZone, toDate } from "date-fns-tz";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -18,11 +18,11 @@ import { supportsFeature } from "../../common/entity/supports-feature";
 import { isDate } from "../../common/string/is_date";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-alert";
-import "../../components/ha-button";
 import "../../components/ha-date-input";
 import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-formfield";
 import "../../components/ha-switch";
+import "../../components/ha-button";
 import "../../components/ha-textarea";
 import "../../components/ha-textfield";
 import "../../components/ha-time-input";
@@ -282,7 +282,6 @@ class DialogCalendarEventEditor extends LitElement {
                 ? html`
                     <ha-button
                       slot="secondaryAction"
-                      appearance="plain"
                       variant="danger"
                       @click=${this._deleteEvent}
                       .disabled=${this._submitting}

src/panels/config/automation/action/types/ha-automation-action-parallel.ts

@@ -15,8 +15,6 @@ export class HaParallelAction extends LitElement implements ActionElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public narrow = false;
-
   @property({ attribute: false }) public action!: ParallelAction;
 
   public static get defaultConfig(): ParallelAction {
@@ -31,7 +29,6 @@ export class HaParallelAction extends LitElement implements ActionElement {
     return html`
       <ha-automation-action
         .actions=${action.parallel}
-        .narrow=${this.narrow}
         .disabled=${this.disabled}
         @value-changed=${this._actionsChanged}
         .hass=${this.hass}

src/panels/config/automation/action/types/ha-automation-action-sequence.ts

@@ -15,8 +15,6 @@ export class HaSequenceAction extends LitElement implements ActionElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public narrow = false;
-
   @property({ attribute: false }) public action!: SequenceAction;
 
   public static get defaultConfig(): SequenceAction {
@@ -31,7 +29,6 @@ export class HaSequenceAction extends LitElement implements ActionElement {
     return html`
       <ha-automation-action
         .actions=${action.sequence}
-        .narrow=${this.narrow}
         .disabled=${this.disabled}
         @value-changed=${this._actionsChanged}
         .hass=${this.hass}

src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts

@@ -260,14 +260,12 @@ class DialogAutomationSave extends LitElement implements HassDialog {
             .path=${mdiClose}
           ></ha-icon-button>
           <span slot="title">${this._params.title || title}</span>
-          ${this._params.hideInputs
-            ? nothing
-            : html` <ha-suggest-with-ai-button
-                slot="actionItems"
-                .hass=${this.hass}
-                .generateTask=${this._generateTask}
-                @suggestion=${this._handleSuggestion}
-              ></ha-suggest-with-ai-button>`}
+          <ha-suggest-with-ai-button
+            slot="actionItems"
+            .hass=${this.hass}
+            .generateTask=${this._generateTask}
+            @suggestion=${this._handleSuggestion}
+          ></ha-suggest-with-ai-button>
         </ha-dialog-header>
         ${this._error
           ? html`<ha-alert alert-type="error"

src/panels/config/backup/dialogs/dialog-local-backup-location.ts

@@ -2,10 +2,10 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-form/ha-form";
+import "../../../../components/ha-alert";
 import type {
   HaFormSchema,
   SchemaUnion,
@@ -91,7 +91,6 @@ class LocalBackupLocationDialog extends LitElement {
         </ha-alert>
         <ha-button
           slot="secondaryAction"
-          appearance="plain"
           @click=${this.closeDialog}
           dialogInitialFocus
         >

src/panels/config/devices/ha-config-device-page.ts

@@ -1442,9 +1442,10 @@ export class HaConfigDevicePage extends LitElement {
   }
 
   private async _signUrl(ev) {
+    const anchor = ev.currentTarget.closest("a");
     const signedUrl = await getSignedPath(
       this.hass,
-      ev.currentTarget.getAttribute("href")
+      anchor.getAttribute("href")
     );
     fileDownload(signedUrl.path);
   }

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts

@@ -26,6 +26,7 @@ import {
 } from "../../../../../data/bluetooth";
 import type { DeviceRegistryEntry } from "../../../../../data/device_registry";
 import "../../../../../layouts/hass-subpage";
+import { colorVariables } from "../../../../../resources/theme/color/color.globals";
 import type { HomeAssistant, Route } from "../../../../../types";
 import { bluetoothAdvertisementMonitorTabs } from "./bluetooth-advertisement-monitor";
 
@@ -130,34 +131,33 @@ export class BluetoothNetworkVisualization extends LitElement {
       data: BluetoothDeviceData[],
       scanners: BluetoothScannersDetails
     ): NetworkData => {
-      const style = getComputedStyle(this);
       const categories = [
         {
           name: CORE_SOURCE_LABEL,
           symbol: "roundRect",
           itemStyle: {
-            color: style.getPropertyValue("--primary-color"),
+            color: colorVariables["primary-color"],
           },
         },
         {
           name: this.hass.localize("ui.panel.config.bluetooth.scanners"),
           symbol: "circle",
           itemStyle: {
-            color: style.getPropertyValue("--cyan-color"),
+            color: colorVariables["cyan-color"],
           },
         },
         {
           name: this.hass.localize("ui.panel.config.bluetooth.known_devices"),
           symbol: "circle",
           itemStyle: {
-            color: style.getPropertyValue("--teal-color"),
+            color: colorVariables["teal-color"],
           },
         },
         {
           name: this.hass.localize("ui.panel.config.bluetooth.unknown_devices"),
           symbol: "circle",
           itemStyle: {
-            color: style.getPropertyValue("--disabled-color"),
+            color: colorVariables["disabled-color"],
           },
         },
       ];
@@ -192,7 +192,7 @@ export class BluetoothNetworkVisualization extends LitElement {
           symbol: "none",
           lineStyle: {
             width: 3,
-            color: style.getPropertyValue("--primary-color"),
+            color: colorVariables["primary-color"],
           },
         });
       });
@@ -206,7 +206,7 @@ export class BluetoothNetworkVisualization extends LitElement {
             symbol: "none",
             lineStyle: {
               width: this._getLineWidth(node.rssi),
-              color: style.getPropertyValue("--primary-color"),
+              color: colorVariables["primary-color"],
             },
           });
           return;
@@ -227,8 +227,8 @@ export class BluetoothNetworkVisualization extends LitElement {
           lineStyle: {
             width: this._getLineWidth(node.rssi),
             color: device
-              ? style.getPropertyValue("--primary-color")
-              : style.getPropertyValue("--disabled-color"),
+              ? colorVariables["primary-color"]
+              : colorVariables["disabled-color"],
           },
         });
       });

src/panels/config/integrations/integration-panels/zha/dialog-zha-change-channel.ts

@@ -3,16 +3,16 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../../common/dom/stop_propagation";
+import type { HassDialog } from "../../../../../dialogs/make-dialog-manager";
+import { changeZHANetworkChannel } from "../../../../../data/zha";
+import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box";
+import { createCloseHeading } from "../../../../../components/ha-dialog";
+import type { HomeAssistant } from "../../../../../types";
 import "../../../../../components/buttons/ha-progress-button";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-button";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
-import "../../../../../components/ha-list-item";
 import "../../../../../components/ha-select";
-import { changeZHANetworkChannel } from "../../../../../data/zha";
-import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box";
-import type { HassDialog } from "../../../../../dialogs/make-dialog-manager";
-import type { HomeAssistant } from "../../../../../types";
+import "../../../../../components/ha-list-item";
 import type { ZHAChangeChannelDialogParams } from "./show-dialog-zha-change-channel";
 
 const VALID_CHANNELS = [
@@ -128,7 +128,6 @@ class DialogZHAChangeChannel extends LitElement implements HassDialog {
 
         <ha-button
           slot="secondaryAction"
-          appearance="plain"
           @click=${this.closeDialog}
           .disabled=${this._migrationInProgress}
           >${this.hass.localize("ui.common.cancel")}</ha-button

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -16,6 +16,7 @@ import type {
 import type { ZHADevice } from "../../../../../data/zha";
 import { fetchDevices, refreshTopology } from "../../../../../data/zha";
 import "../../../../../layouts/hass-tabs-subpage";
+import { colorVariables } from "../../../../../resources/theme/color/color.globals";
 import type { HomeAssistant, Route } from "../../../../../types";
 import { formatAsPaddedHex } from "./functions";
 import { zhaTabs } from "./zha-config-dashboard";
@@ -155,12 +156,10 @@ export class ZHANetworkVisualizationPage extends LitElement {
   }
 
   private _createChartData(devices: ZHADevice[]): NetworkData {
-    const style = getComputedStyle(this);
-
-    const primaryColor = style.getPropertyValue("--primary-color");
-    const routerColor = style.getPropertyValue("--cyan-color");
-    const endDeviceColor = style.getPropertyValue("--teal-color");
-    const offlineColor = style.getPropertyValue("--error-color");
+    const primaryColor = colorVariables["primary-color"];
+    const routerColor = colorVariables["cyan-color"];
+    const endDeviceColor = colorVariables["teal-color"];
+    const offlineColor = colorVariables["error-color"];
     const nodes: NetworkNode[] = [];
     const links: NetworkLink[] = [];
     const categories = [
@@ -283,7 +282,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
                 color:
                   route.route_status === "Active"
                     ? primaryColor
-                    : style.getPropertyValue("--disabled-color"),
+                    : colorVariables["disabled-color"],
                 type: ["Child", "Parent"].includes(neighbor.relationship)
                   ? "solid"
                   : "dotted",
@@ -323,7 +322,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
             symbolSize: 5,
             lineStyle: {
               width: 1,
-              color: style.getPropertyValue("--disabled-color"),
+              color: colorVariables["disabled-color"],
               type: "dotted",
             },
             ignoreForceLayout: true,

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts

@@ -157,387 +157,380 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
           .path=${mdiRefresh}
           .label=${this.hass!.localize("ui.common.refresh")}
         ></ha-icon-button>
-        <div class="container">
-          ${this._network
-            ? html`
-                <ha-card class="content network-status">
-                  <div class="card-content">
-                    <div class="heading">
-                      <div class="icon">
-                        ${this._status === "disconnected"
-                          ? html`<ha-spinner></ha-spinner>`
-                          : html`
-                              <ha-svg-icon
-                                .path=${this._icon}
-                                class="network-status-icon ${classMap({
-                                  [this._status!]: true,
-                                })}"
-                                slot="item-icon"
-                              ></ha-svg-icon>
-                            `}
-                      </div>
-                      ${this._status !== "disconnected"
-                        ? html`
-                            <div class="details">
-                              Z-Wave
-                              ${this.hass.localize(
-                                "ui.panel.config.zwave_js.common.network"
-                              )}
-                              ${this.hass.localize(
-                                `ui.panel.config.zwave_js.network_status.${this._status}`
-                              )}<br />
-                              <small>
-                                ${this.hass.localize(
-                                  `ui.panel.config.zwave_js.dashboard.devices`,
-                                  {
-                                    count:
-                                      this._network.controller.nodes.length +
-                                      provisioningDevices,
-                                  }
-                                )}
-                                ${notReadyDevices > 0
-                                  ? html`(${this.hass.localize(
-                                      `ui.panel.config.zwave_js.dashboard.not_ready`,
-                                      { count: notReadyDevices }
-                                    )})`
-                                  : nothing}
-                              </small>
-                            </div>
-                          `
-                        : nothing}
+        ${this._network
+          ? html`
+              <ha-card class="content network-status">
+                <div class="card-content">
+                  <div class="heading">
+                    <div class="icon">
+                      ${this._status === "disconnected"
+                        ? html`<ha-spinner></ha-spinner>`
+                        : html`
+                            <ha-svg-icon
+                              .path=${this._icon}
+                              class="network-status-icon ${classMap({
+                                [this._status!]: true,
+                              })}"
+                              slot="item-icon"
+                            ></ha-svg-icon>
+                          `}
                     </div>
-                  </div>
-                  <div class="card-actions">
-                    <ha-button
-                      appearance="plain"
-                      href=${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
-                    >
-                      ${this.hass.localize("ui.panel.config.devices.caption")}
-                    </ha-button>
-                    <ha-button
-                      appearance="plain"
-                      href=${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
-                    >
-                      ${this.hass.localize("ui.panel.config.entities.caption")}
-                    </ha-button>
-                    ${this._provisioningEntries?.length
-                      ? html`<ha-button
-                          appearance="plain"
-                          href=${`provisioned?config_entry=${this.configEntryId}`}
-                        >
-                          ${this.hass.localize(
-                            "ui.panel.config.zwave_js.dashboard.provisioned_devices"
-                          )}
-                        </ha-button>`
+                    ${this._status !== "disconnected"
+                      ? html`
+                          <div class="details">
+                            Z-Wave
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.common.network"
+                            )}
+                            ${this.hass.localize(
+                              `ui.panel.config.zwave_js.network_status.${this._status}`
+                            )}<br />
+                            <small>
+                              ${this.hass.localize(
+                                `ui.panel.config.zwave_js.dashboard.devices`,
+                                {
+                                  count:
+                                    this._network.controller.nodes.length +
+                                    provisioningDevices,
+                                }
+                              )}
+                              ${notReadyDevices > 0
+                                ? html`(${this.hass.localize(
+                                    `ui.panel.config.zwave_js.dashboard.not_ready`,
+                                    { count: notReadyDevices }
+                                  )})`
+                                : nothing}
+                            </small>
+                          </div>
+                        `
                       : nothing}
                   </div>
-                </ha-card>
-                <ha-card header="Diagnostics">
-                  <div class="card-content">
-                    <div class="row">
-                      <span>
+                </div>
+                <div class="card-actions">
+                  <ha-button
+                    appearance="plain"
+                    href=${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
+                  >
+                    ${this.hass.localize("ui.panel.config.devices.caption")}
+                  </ha-button>
+                  <ha-button
+                    appearance="plain"
+                    href=${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
+                  >
+                    ${this.hass.localize("ui.panel.config.entities.caption")}
+                  </ha-button>
+                  ${this._provisioningEntries?.length
+                    ? html`<ha-button
+                        appearance="plain"
+                        href=${`provisioned?config_entry=${this.configEntryId}`}
+                      >
                         ${this.hass.localize(
-                          "ui.panel.config.zwave_js.dashboard.driver_version"
-                        )}:
-                      </span>
-                      <span>${this._network.client.driver_version}</span>
-                    </div>
-                    <div class="row">
-                      <span>
+                          "ui.panel.config.zwave_js.dashboard.provisioned_devices"
+                        )}
+                      </ha-button>`
+                    : nothing}
+                </div>
+              </ha-card>
+              <ha-card header="Diagnostics">
+                <div class="card-content">
+                  <div class="row">
+                    <span>
+                      ${this.hass.localize(
+                        "ui.panel.config.zwave_js.dashboard.driver_version"
+                      )}:
+                    </span>
+                    <span>${this._network.client.driver_version}</span>
+                  </div>
+                  <div class="row">
+                    <span>
+                      ${this.hass.localize(
+                        "ui.panel.config.zwave_js.dashboard.server_version"
+                      )}:
+                    </span>
+                    <span>${this._network.client.server_version}</span>
+                  </div>
+                  <div class="row">
+                    <span>
+                      ${this.hass.localize(
+                        "ui.panel.config.zwave_js.dashboard.home_id"
+                      )}:
+                    </span>
+                    <span>${this._network.controller.home_id}</span>
+                  </div>
+                  <div class="row">
+                    <span>
+                      ${this.hass.localize(
+                        "ui.panel.config.zwave_js.dashboard.server_url"
+                      )}:
+                    </span>
+                    <span>${this._network.client.ws_server_url}</span>
+                  </div>
+                  <br />
+                  <ha-expansion-panel
+                    .header=${this.hass.localize(
+                      "ui.panel.config.zwave_js.dashboard.statistics.title"
+                    )}
+                  >
+                    <ha-list noninteractive>
+                      <ha-list-item twoline hasmeta>
+                        <span>
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.messages_tx.label"
+                          )}
+                        </span>
+                        <span slot="secondary">
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.messages_tx.tooltip"
+                          )}
+                        </span>
+                        <span slot="meta"
+                          >${this._statistics?.messages_tx ?? 0}</span
+                        >
+                      </ha-list-item>
+                      <ha-list-item twoline hasmeta>
+                        <span>
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.messages_rx.label"
+                          )}
+                        </span>
+                        <span slot="secondary">
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.messages_rx.tooltip"
+                          )}
+                        </span>
+                        <span slot="meta"
+                          >${this._statistics?.messages_rx ?? 0}</span
+                        >
+                      </ha-list-item>
+                      <ha-list-item twoline hasmeta>
+                        <span>
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_tx.label"
+                          )}
+                        </span>
+                        <span slot="secondary">
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_tx.tooltip"
+                          )}
+                        </span>
+                        <span slot="meta"
+                          >${this._statistics?.messages_dropped_tx ?? 0}</span
+                        >
+                      </ha-list-item>
+                      <ha-list-item twoline hasmeta>
+                        <span>
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_rx.label"
+                          )}
+                        </span>
+                        <span slot="secondary">
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_rx.tooltip"
+                          )}
+                        </span>
+                        <span slot="meta"
+                          >${this._statistics?.messages_dropped_rx ?? 0}</span
+                        >
+                      </ha-list-item>
+                      <ha-list-item twoline hasmeta>
+                        <span>
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.nak.label"
+                          )}
+                        </span>
+                        <span slot="secondary">
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.nak.tooltip"
+                          )}
+                        </span>
+                        <span slot="meta">${this._statistics?.nak ?? 0}</span>
+                      </ha-list-item>
+                      <ha-list-item twoline hasmeta>
+                        <span>
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.can.label"
+                          )}
+                        </span>
+                        <span slot="secondary">
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.can.tooltip"
+                          )}
+                        </span>
+                        <span slot="meta">${this._statistics?.can ?? 0}</span>
+                      </ha-list-item>
+                      <ha-list-item twoline hasmeta>
+                        <span>
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.timeout_ack.label"
+                          )}
+                        </span>
+                        <span slot="secondary">
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.timeout_ack.tooltip"
+                          )}
+                        </span>
+                        <span slot="meta"
+                          >${this._statistics?.timeout_ack ?? 0}</span
+                        >
+                      </ha-list-item>
+                      <ha-list-item twoline hasmeta>
+                        <span>
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.timeout_response.label"
+                          )}
+                        </span>
+                        <span slot="secondary">
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.timeout_response.tooltip"
+                          )}
+                        </span>
+                        <span slot="meta"
+                          >${this._statistics?.timeout_response ?? 0}</span
+                        >
+                      </ha-list-item>
+                      <ha-list-item twoline hasmeta>
+                        <span>
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.timeout_callback.label"
+                          )}
+                        </span>
+                        <span slot="secondary">
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.dashboard.statistics.timeout_callback.tooltip"
+                          )}
+                        </span>
+                        <span slot="meta"
+                          >${this._statistics?.timeout_callback ?? 0}</span
+                        >
+                      </ha-list-item>
+                    </ha-list>
+                  </ha-expansion-panel>
+                </div>
+                <div class="card-actions">
+                  <ha-button
+                    appearance="plain"
+                    @click=${this._removeNodeClicked}
+                    .disabled=${this._status !== "connected" ||
+                    (this._network?.controller.inclusion_state !==
+                      InclusionState.Idle &&
+                      this._network?.controller.inclusion_state !==
+                        InclusionState.SmartStart)}
+                  >
+                    ${this.hass.localize(
+                      "ui.panel.config.zwave_js.common.remove_a_node"
+                    )}
+                  </ha-button>
+                  <ha-button
+                    appearance="plain"
+                    @click=${this._rebuildNetworkRoutesClicked}
+                    .disabled=${this._status === "disconnected"}
+                  >
+                    ${this.hass.localize(
+                      "ui.panel.config.zwave_js.common.rebuild_network_routes"
+                    )}
+                  </ha-button>
+                </div>
+              </ha-card>
+              <ha-card>
+                <div class="card-header">
+                  <h1>Third-party data reporting</h1>
+                  ${this._dataCollectionOptIn !== undefined
+                    ? html`
+                        <ha-switch
+                          .checked=${this._dataCollectionOptIn === true}
+                          @change=${this._dataCollectionToggled}
+                        ></ha-switch>
+                      `
+                    : html` <ha-spinner size="small"></ha-spinner> `}
+                </div>
+                <div class="card-content">
+                  <p>
+                    Enable the reporting of anonymized telemetry and statistics
+                    to the <em>Z-Wave JS organization</em>. This data will be
+                    used to focus development efforts and improve the user
+                    experience. Information about the data that is collected and
+                    how it is used, including an example of the data collected,
+                    can be found in the
+                    <a
+                      target="_blank"
+                      href="https://zwave-js.github.io/node-zwave-js/#/data-collection/data-collection"
+                      >Z-Wave JS data collection documentation</a
+                    >.
+                  </p>
+                </div>
+              </ha-card>
+              <ha-card
+                .header=${this.hass.localize(
+                  "ui.panel.config.zwave_js.dashboard.nvm_backup.title"
+                )}
+              >
+                <div class="card-content">
+                  <p>
+                    ${this.hass.localize(
+                      "ui.panel.config.zwave_js.dashboard.nvm_backup.description"
+                    )}
+                  </p>
+                </div>
+                <div class="card-actions">
+                  ${this._backupProgress !== undefined
+                    ? html`<ha-progress-ring
+                          size="small"
+                          .value=${this._backupProgress}
+                        ></ha-progress-ring>
                         ${this.hass.localize(
-                          "ui.panel.config.zwave_js.dashboard.server_version"
-                        )}:
-                      </span>
-                      <span>${this._network.client.server_version}</span>
-                    </div>
-                    <div class="row">
-                      <span>
-                        ${this.hass.localize(
-                          "ui.panel.config.zwave_js.dashboard.home_id"
-                        )}:
-                      </span>
-                      <span>${this._network.controller.home_id}</span>
-                    </div>
-                    <div class="row">
-                      <span>
-                        ${this.hass.localize(
-                          "ui.panel.config.zwave_js.dashboard.server_url"
-                        )}:
-                      </span>
-                      <span>${this._network.client.ws_server_url}</span>
-                    </div>
-                    <br />
-                    <ha-expansion-panel
-                      .header=${this.hass.localize(
-                        "ui.panel.config.zwave_js.dashboard.statistics.title"
-                      )}
-                    >
-                      <ha-list noninteractive>
-                        <ha-list-item twoline hasmeta>
-                          <span>
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.messages_tx.label"
-                            )}
-                          </span>
-                          <span slot="secondary">
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.messages_tx.tooltip"
-                            )}
-                          </span>
-                          <span slot="meta"
-                            >${this._statistics?.messages_tx ?? 0}</span
-                          >
-                        </ha-list-item>
-                        <ha-list-item twoline hasmeta>
-                          <span>
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.messages_rx.label"
-                            )}
-                          </span>
-                          <span slot="secondary">
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.messages_rx.tooltip"
-                            )}
-                          </span>
-                          <span slot="meta"
-                            >${this._statistics?.messages_rx ?? 0}</span
-                          >
-                        </ha-list-item>
-                        <ha-list-item twoline hasmeta>
-                          <span>
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_tx.label"
-                            )}
-                          </span>
-                          <span slot="secondary">
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_tx.tooltip"
-                            )}
-                          </span>
-                          <span slot="meta"
-                            >${this._statistics?.messages_dropped_tx ?? 0}</span
-                          >
-                        </ha-list-item>
-                        <ha-list-item twoline hasmeta>
-                          <span>
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_rx.label"
-                            )}
-                          </span>
-                          <span slot="secondary">
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_rx.tooltip"
-                            )}
-                          </span>
-                          <span slot="meta"
-                            >${this._statistics?.messages_dropped_rx ?? 0}</span
-                          >
-                        </ha-list-item>
-                        <ha-list-item twoline hasmeta>
-                          <span>
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.nak.label"
-                            )}
-                          </span>
-                          <span slot="secondary">
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.nak.tooltip"
-                            )}
-                          </span>
-                          <span slot="meta">${this._statistics?.nak ?? 0}</span>
-                        </ha-list-item>
-                        <ha-list-item twoline hasmeta>
-                          <span>
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.can.label"
-                            )}
-                          </span>
-                          <span slot="secondary">
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.can.tooltip"
-                            )}
-                          </span>
-                          <span slot="meta">${this._statistics?.can ?? 0}</span>
-                        </ha-list-item>
-                        <ha-list-item twoline hasmeta>
-                          <span>
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.timeout_ack.label"
-                            )}
-                          </span>
-                          <span slot="secondary">
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.timeout_ack.tooltip"
-                            )}
-                          </span>
-                          <span slot="meta"
-                            >${this._statistics?.timeout_ack ?? 0}</span
-                          >
-                        </ha-list-item>
-                        <ha-list-item twoline hasmeta>
-                          <span>
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.timeout_response.label"
-                            )}
-                          </span>
-                          <span slot="secondary">
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.timeout_response.tooltip"
-                            )}
-                          </span>
-                          <span slot="meta"
-                            >${this._statistics?.timeout_response ?? 0}</span
-                          >
-                        </ha-list-item>
-                        <ha-list-item twoline hasmeta>
-                          <span>
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.timeout_callback.label"
-                            )}
-                          </span>
-                          <span slot="secondary">
-                            ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.statistics.timeout_callback.tooltip"
-                            )}
-                          </span>
-                          <span slot="meta"
-                            >${this._statistics?.timeout_callback ?? 0}</span
-                          >
-                        </ha-list-item>
-                      </ha-list>
-                    </ha-expansion-panel>
-                  </div>
-                  <div class="card-actions">
-                    <ha-button
-                      appearance="plain"
-                      @click=${this._removeNodeClicked}
-                      .disabled=${this._status !== "connected" ||
-                      (this._network?.controller.inclusion_state !==
-                        InclusionState.Idle &&
-                        this._network?.controller.inclusion_state !==
-                          InclusionState.SmartStart)}
-                    >
-                      ${this.hass.localize(
-                        "ui.panel.config.zwave_js.common.remove_a_node"
-                      )}
-                    </ha-button>
-                    <ha-button
-                      appearance="plain"
-                      @click=${this._rebuildNetworkRoutesClicked}
-                      .disabled=${this._status === "disconnected"}
-                    >
-                      ${this.hass.localize(
-                        "ui.panel.config.zwave_js.common.rebuild_network_routes"
-                      )}
-                    </ha-button>
-                  </div>
-                </ha-card>
-                <ha-card>
-                  <div class="card-header">
-                    <h1>
-                      ${this.hass.localize(
-                        "ui.panel.config.zwave_js.dashboard.data_collection.title"
-                      )}
-                    </h1>
-                    ${this._dataCollectionOptIn !== undefined
-                      ? html`
-                          <ha-switch
-                            .checked=${this._dataCollectionOptIn === true}
-                            @change=${this._dataCollectionToggled}
-                          ></ha-switch>
-                        `
-                      : html` <ha-spinner size="small"></ha-spinner> `}
-                  </div>
-                  <div class="card-content">
-                    <p>
-                      ${this.hass.localize(
-                        "ui.panel.config.zwave_js.dashboard.data_collection.description",
-                        {
-                          documentation_link: html`<a
-                            target="_blank"
-                            href="https://zwave-js.github.io/node-zwave-js/#/data-collection/data-collection"
-                            >${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.data_collection.documentation_link"
-                            )}</a
-                          >`,
-                        }
-                      )}
-                    </p>
-                  </div>
-                </ha-card>
-                <ha-card
-                  .header=${this.hass.localize(
-                    "ui.panel.config.zwave_js.dashboard.nvm_backup.title"
-                  )}
-                >
-                  <div class="card-content">
-                    <p>
-                      ${this.hass.localize(
-                        "ui.panel.config.zwave_js.dashboard.nvm_backup.description"
-                      )}
-                    </p>
-                  </div>
-                  <div class="card-actions">
-                    ${this._backupProgress !== undefined
+                          "ui.panel.config.zwave_js.dashboard.nvm_backup.creating"
+                        )}
+                        ${this._backupProgress}%`
+                    : this._restoreProgress !== undefined
                       ? html`<ha-progress-ring
                             size="small"
-                            .value=${this._backupProgress}
+                            .value=${this._restoreProgress}
                           ></ha-progress-ring>
                           ${this.hass.localize(
-                            "ui.panel.config.zwave_js.dashboard.nvm_backup.creating"
+                            "ui.panel.config.zwave_js.dashboard.nvm_backup.restoring"
                           )}
-                          ${this._backupProgress}%`
-                      : this._restoreProgress !== undefined
-                        ? html`<ha-progress-ring
-                              size="small"
-                              .value=${this._restoreProgress}
-                            ></ha-progress-ring>
+                          ${this._restoreProgress}%`
+                      : html`<ha-button
+                            appearance="plain"
+                            @click=${this._downloadBackup}
+                          >
                             ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.nvm_backup.restoring"
+                              "ui.panel.config.zwave_js.dashboard.nvm_backup.download_backup"
                             )}
-                            ${this._restoreProgress}%`
-                        : html`<ha-button
-                              appearance="plain"
-                              @click=${this._downloadBackup}
-                            >
-                              ${this.hass.localize(
-                                "ui.panel.config.zwave_js.dashboard.nvm_backup.download_backup"
-                              )}
-                            </ha-button>
-                            <div class="upload-button">
-                              <ha-button
-                                appearance="plain"
-                                @click=${this._restoreButtonClick}
-                                variant="danger"
-                              >
-                                <span class="button-content">
-                                  ${this.hass.localize(
-                                    "ui.panel.config.zwave_js.dashboard.nvm_backup.restore_backup"
-                                  )}
-                                </span>
-                              </ha-button>
-                              <input
-                                type="file"
-                                id="nvm-restore-file"
-                                accept=".bin"
-                                @change=${this._handleRestoreFileSelected}
-                                style="display: none"
-                              />
-                            </div>
+                          </ha-button>
+                          <div class="upload-button">
                             <ha-button
+                              appearance="plain"
+                              @click=${this._restoreButtonClick}
                               variant="danger"
-                              @click=${this._openConfigFlow}
-                              class="migrate-button"
                             >
-                              ${this.hass.localize(
-                                "ui.panel.config.zwave_js.dashboard.nvm_backup.migrate"
-                              )}
-                            </ha-button>`}
-                  </div>
-                </ha-card>
-              `
-            : nothing}
-        </div>
+                              <span class="button-content">
+                                ${this.hass.localize(
+                                  "ui.panel.config.zwave_js.dashboard.nvm_backup.restore_backup"
+                                )}
+                              </span>
+                            </ha-button>
+                            <input
+                              type="file"
+                              id="nvm-restore-file"
+                              accept=".bin"
+                              @change=${this._handleRestoreFileSelected}
+                              style="display: none"
+                            />
+                          </div>
+                          <ha-button
+                            variant="danger"
+                            @click=${this._openConfigFlow}
+                            class="migrate-button"
+                          >
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.nvm_backup.migrate"
+                            )}
+                          </ha-button>`}
+                </div>
+              </ha-card>
+            `
+          : nothing}
         <ha-fab
           slot="fab"
           .label=${this.hass.localize(
@@ -964,7 +957,6 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
         .card-actions {
           display: flex;
           align-items: center;
-          flex-wrap: wrap;
         }
 
         .card-actions ha-progress-ring {
@@ -992,10 +984,6 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
         .migrate-button {
           margin-left: auto;
         }
-
-        .container {
-          padding: 8px 16px 16px;
-        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-network-visualization.ts

@@ -25,6 +25,7 @@ import {
 } from "../../../../../data/zwave_js";
 import "../../../../../layouts/hass-tabs-subpage";
 import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
+import { colorVariables } from "../../../../../resources/theme/color/color.globals";
 import type { HomeAssistant, Route } from "../../../../../types";
 import { configTabs } from "./zwave_js-config-router";
 
@@ -146,10 +147,8 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
       nodeStatuses: Record<number, ZWaveJSNodeStatus>,
       nodeStatistics: Record<number, ZWaveJSNodeStatisticsUpdatedMessage>
     ): NetworkData => {
-      const style = getComputedStyle(this);
       const nodes: NetworkNode[] = [];
       const links: NetworkLink[] = [];
-
       const categories = [
         {
           name: this.hass.localize(
@@ -157,7 +156,7 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           ),
           symbol: "roundRect",
           itemStyle: {
-            color: style.getPropertyValue("--primary-color"),
+            color: colorVariables["primary-color"],
           },
         },
         {
@@ -166,7 +165,7 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           ),
           symbol: "circle",
           itemStyle: {
-            color: style.getPropertyValue("--cyan-color"),
+            color: colorVariables["cyan-color"],
           },
         },
         {
@@ -175,7 +174,7 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           ),
           symbol: "circle",
           itemStyle: {
-            color: style.getPropertyValue("--disabled-color"),
+            color: colorVariables["disabled-color"],
           },
         },
         {
@@ -184,7 +183,7 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           ),
           symbol: "circle",
           itemStyle: {
-            color: style.getPropertyValue("--error-color"),
+            color: colorVariables["error-color"],
           },
         },
       ];
@@ -215,12 +214,12 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
           itemStyle: {
             color:
               node.status === NodeStatus.Dead
-                ? style.getPropertyValue("--error-color")
+                ? colorVariables["error-color"]
                 : node.status === NodeStatus.Asleep
-                  ? style.getPropertyValue("--disabled-color")
+                  ? colorVariables["disabled-color"]
                   : node.is_controller_node
-                    ? style.getPropertyValue("--primary-color")
-                    : style.getPropertyValue("--cyan-color"),
+                    ? colorVariables["primary-color"]
+                    : colorVariables["cyan-color"],
           },
           polarDistance: node.is_controller_node
             ? 0
@@ -270,8 +269,8 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
                   width,
                   color:
                     repeater === controllerNode
-                      ? style.getPropertyValue("--primary-color")
-                      : style.getPropertyValue("--disabled-color"),
+                      ? colorVariables["primary-color"]
+                      : colorVariables["disabled-color"],
                   type: route.protocol_data_rate > 1 ? "solid" : "dotted",
                 },
                 symbolSize: width * 3,

src/panels/config/logs/error-log-card.ts

@@ -825,7 +825,6 @@ class ErrorLogCard extends LitElement {
       overflow: hidden;
       position: absolute;
       bottom: 4px;
-      left: 4px;
       height: 0;
       transition: height 0.4s ease-out;
     }

src/panels/config/logs/ha-config-logs.ts

@@ -250,21 +250,6 @@ export class HaConfigLogs extends LitElement {
         .content {
           direction: ltr;
         }
-        @media all and (max-width: 870px) {
-          ha-button-menu {
-            max-width: 50%;
-          }
-          ha-button {
-            max-width: 100%;
-          }
-          ha-button::part(label) {
-            overflow: hidden;
-            white-space: nowrap;
-          }
-        }
-        ha-list-item[selected] {
-          color: var(--primary-color);
-        }
       `,
     ];
   }

src/panels/config/network/supervisor-network.ts

@@ -260,6 +260,9 @@ export class HassioNetwork extends LitElement {
           : nothing}
       </div>
       <div class="card-actions">
+        <ha-button appearance="plain" @click=${this._clear}>
+          ${this.hass.localize("ui.panel.config.network.supervisor.reset")}
+        </ha-button>
         <ha-button
           .loading=${this._processing}
           @click=${this._updateNetwork}
@@ -267,9 +270,6 @@ export class HassioNetwork extends LitElement {
         >
           ${this.hass.localize("ui.common.save")}
         </ha-button>
-        <ha-button variant="danger" appearance="plain" @click=${this._clear}>
-          ${this.hass.localize("ui.panel.config.network.supervisor.reset")}
-        </ha-button>
       </div>`;
   }
 

src/panels/config/repairs/dialog-system-information.ts

@@ -250,7 +250,7 @@ class DialogSystemInformation extends LitElement {
                   rel="noreferrer"
                 >
                   ${this.hass.localize(
-                    `ui.dialogs.unsupported.reasons.${reason}`
+                    `ui.dialogs.unsupported.reason.${reason}`
                   ) || reason}
                 </a>
               </li>
@@ -279,7 +279,7 @@ class DialogSystemInformation extends LitElement {
                   rel="noreferrer"
                 >
                   ${this.hass.localize(
-                    `ui.dialogs.unhealthy.reasons.${reason}`
+                    `ui.dialogs.unhealthy.reason.${reason}`
                   ) || reason}
                 </a>
               </li>

src/panels/config/storage/dialog-move-datadisk.ts

@@ -30,8 +30,8 @@ import { bytesToString } from "../../../util/bytes-to-string";
 import type { MoveDatadiskDialogParams } from "./show-dialog-move-datadisk";
 
 const calculateMoveTime = memoizeOne((hostInfo: HassioHostInfo): number => {
-  // Assume a speed of 30 MB/s.
-  const moveTime = (hostInfo.disk_used * 1000) / 60 / 30;
+  const speed = hostInfo.disk_life_time !== "" ? 30 : 10;
+  const moveTime = (hostInfo.disk_used * 1000) / 60 / speed;
   const rebootTime = (hostInfo.startup_time * 4) / 60;
   return Math.ceil((moveTime + rebootTime) / 10) * 10;
 });

src/panels/config/storage/ha-config-section-storage.ts

@@ -117,17 +117,16 @@ class HaConfigSectionStorage extends LitElement {
                         }
                       )}
                     </div>
-                    ${this._hostInfo.disk_life_time !== null
+                    ${this._hostInfo.disk_life_time !== "" &&
+                    this._hostInfo.disk_life_time >= 10
                       ? // prettier-ignore
                         html`
                           <ha-metric
                             .heading=${this.hass.localize(
-                              "ui.panel.config.storage.lifetime_used"
+                              "ui.panel.config.storage.emmc_lifetime_used"
                             )}
                             .value=${this._hostInfo.disk_life_time}
-                            .tooltip=${this.hass.localize(
-                              "ui.panel.config.storage.lifetime_used_description"
-                            )}
+                            .tooltip=${`${this._hostInfo.disk_life_time - 10}% - ${this._hostInfo.disk_life_time}%`}
                             class="emmc"
                           ></ha-metric>
                         `

src/panels/lovelace/cards/hui-picture-glance-card.ts

@@ -30,14 +30,7 @@ import type {
 } from "./types";
 import type { PersonEntity } from "../../../data/person";
 
-const STATES_OFF = new Set([
-  "closed",
-  "locked",
-  "not_home",
-  "off",
-  "unavailable",
-  "unknown",
-]);
+const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]);
 
 @customElement("hui-picture-glance-card")
 class HuiPictureGlanceCard extends LitElement implements LovelaceCard {

src/panels/lovelace/components/hui-energy-period-selector.ts

@@ -208,7 +208,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
           ? html`<ha-button
               appearance="filled"
               size="small"
-              @click=${this._pickNow}
+              click=${this._pickNow}
             >
               ${this.hass.localize(
                 "ui.panel.lovelace.components.energy_period_selector.now"

src/panels/lovelace/entity-rows/hui-scene-entity-row.ts

@@ -47,7 +47,7 @@ class HuiSceneEntityRow extends LitElement implements LovelaceRow {
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         <ha-button
-          appearance="plain"
+          appearance="filled"
           size="small"
           @click=${this._callService}
           .disabled=${stateObj.state === UNAVAILABLE}

src/panels/lovelace/entity-rows/hui-script-entity-row.ts

@@ -49,9 +49,8 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         ${stateObj.state === "on"
           ? html`<ha-button
-              appearance="plain"
+              appearance="filled"
               size="small"
-              variant="danger"
               @click=${this._cancelScript}
             >
               ${stateObj.attributes.mode !== "single" &&
@@ -62,10 +61,10 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
                   })
                 : this.hass.localize("ui.card.script.cancel")}
             </ha-button>`
-          : nothing}
+          : ""}
         ${stateObj.state === "off" || stateObj.attributes.max
           ? html`<ha-button
-              appearance="plain"
+              appearance="filled"
               size="small"
               @click=${this._runScript}
               .disabled=${isUnavailableState(stateObj.state) ||
@@ -74,7 +73,7 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
               ${this._config.action_name ||
               this.hass!.localize("ui.card.script.run")}
             </ha-button>`
-          : nothing}
+          : ""}
       </hui-generic-entity-row>
     `;
   }

src/resources/theme/color/color.globals.ts

@@ -1,5 +1,8 @@
 import { css } from "lit";
-import { extractVar } from "../../../common/style/derived-css-vars";
+import {
+  extractVar,
+  extractVars,
+} from "../../../common/style/derived-css-vars";
 import { coreColorVariables } from "./core.globals";
 
 export const colorStyles = css`
@@ -362,6 +365,7 @@ export const darkColorStyles = css`
     --ha-button-neutral-light-color: #6a7081;
   }
 `;
+export const colorVariables = extractVars(colorStyles);
 
 export const DefaultPrimaryColor = extractVar(
   colorStyles,

src/resources/theme/color/core.globals.ts

@@ -1,13 +1,6 @@
 import { css } from "lit";
 import { extractVars } from "../../../common/style/derived-css-vars";
 
-/*
- * Core color tokens are the foundational color values used throughout the design system.
- * These tokens represent raw, brand-independent colors such as grayscale shades, base hues, and accent tones.
- * Core tokens shouldn't be tied to any specific UI purpose or role. Instead, they serve as building blocks from which semantic tokens are derived.
- * Changes to core tokens will cascade into semantic tokens that reference them, enabling flexible theming and consistent design language.
- * Please note that these core tokens are not intended to be used directly in components or styles.
- */
 export const coreColorStyles = css`
   html {
     --white: #ffffff;
@@ -28,17 +21,17 @@ export const coreColorStyles = css`
     --color-primary-95: #eff9fe;
 
     /* neutral */
-    --color-neutral-05: #141414;
-    --color-neutral-10: #202020;
-    --color-neutral-20: #363636;
-    --color-neutral-30: #4a4a4a;
-    --color-neutral-40: #5e5e5e;
-    --color-neutral-50: #7a7a7a;
-    --color-neutral-60: #989898;
-    --color-neutral-70: #b1b1b1;
-    --color-neutral-80: #b1b1b1;
-    --color-neutral-90: #e6e6e6;
-    --color-neutral-95: #f3f3f3;
+    --color-neutral-05: #101219;
+    --color-neutral-10: #1b1d26;
+    --color-neutral-20: #2f323f;
+    --color-neutral-30: #424554;
+    --color-neutral-40: #545868;
+    --color-neutral-50: #717584;
+    --color-neutral-60: #9194a2;
+    --color-neutral-70: #abaeb9;
+    --color-neutral-80: #c7c9d0;
+    --color-neutral-90: #e4e5e9;
+    --color-neutral-95: #f1f2f3;
 
     /* orange */
     --color-orange-05: #280700;

src/resources/theme/color/semantic.globals.ts

@@ -1,10 +1,5 @@
 import { css } from "lit";
 
-/*
- * Semantic color tokens are abstractions built on top of core color tokens to represent colors based on their usage or purpose.
- * These tokens are named according to their semantic role in the UI (e.g., "primary," "success," "error"), making it easier to maintain consistency and scalability in design.
- * Semantic tokens use core tokens to reference the actual color values. This separation allows for adjustments in color schemes without affecting the semantic meaning or intent.
- */
 export const semanticColorStyles = css`
   html {
     --color-overlay-modal: rgba(0, 0, 0, 0.25);
@@ -158,6 +153,9 @@ export const semanticColorStyles = css`
     --color-on-success-quiet: var(--color-green-50);
     --color-on-success-normal: var(--color-green-40);
     --color-on-success-loud: var(--white);
+
+    /* logo */
+    --color-logo-primary: var(--color-primary-50);
   }
 `;
 

src/resources/theme/core.globals.ts

@@ -1,24 +0,0 @@
-import { css } from "lit";
-import { extractDerivedVars } from "../../common/style/derived-css-vars";
-
-export const coreStyles = css`
-  html {
-    --border-width-sm: 1px;
-    --border-width-md: 2px;
-    --border-width-lg: 3px;
-
-    --border-radius-sm: 4px;
-    --border-radius-md: 8px;
-    --border-radius-lg: 12px;
-    --border-radius-xl: 16px;
-    --border-radius-2xl: 24px;
-    --border-radius-3xl: 28px;
-    --border-radius-4xl: 32px;
-    --border-radius-5xl: 36px;
-    --border-radius-pill: 9999px;
-    --border-radius-circle: 50%;
-    --border-radius-square: 0;
-  }
-`;
-
-export const coreDerivedVariables = extractDerivedVars(coreStyles);

src/resources/theme/theme.ts

@@ -1,6 +1,5 @@
 import { fontStyles } from "../roboto";
 import { colorDerivedVariables, colorStylesCollection } from "./color";
-import { coreDerivedVariables, coreStyles } from "./core.globals";
 import { mainDerivedVariables, mainStyles } from "./main.globals";
 import {
   typographyDerivedVariables,
@@ -9,7 +8,6 @@ import {
 import { waMainDerivedVariables, waMainStyles } from "./wa.globals";
 
 export const themeStyles = [
-  coreStyles.toString(),
   mainStyles.toString(),
   typographyStyles.toString(),
   ...colorStylesCollection,
@@ -18,7 +16,6 @@ export const themeStyles = [
 ].join("");
 
 export const derivedStyles = {
-  ...coreDerivedVariables,
   ...mainDerivedVariables,
   ...typographyDerivedVariables,
   ...colorDerivedVariables,

src/translations/en.json

@@ -1972,11 +1972,11 @@
         },
         "google_home": {
           "header": "Share from Google Home",
-          "step_1": "Find your device in the Google Home app. Tap the gear icon to open the device settings, then tap on Device information.",
+          "step_1": "Find your device in the Google Home app. Tap the gear icon to open the device settings.",
           "step_2": "Tap {linked_matter_apps_services}.",
           "step_3": "Tap {link_apps_services} and choose {home_assistant} from the list.",
           "linked_matter_apps_services": "Linked Matter apps and services",
-          "link_apps_services": "Link apps and services",
+          "link_apps_services": "Link apps & services",
           "no_home_assistant": "I can't find Home Assistant on the list",
           "redirect": "You are redirected to the Home Assistant app. Please follow the instructions."
         },
@@ -5921,11 +5921,6 @@
               "restoring": "Restoring backup",
               "migrate": "Migrate adapter"
             },
-            "data_collection": {
-              "title": "Third-party data reporting",
-              "description": "Enable the reporting of anonymized telemetry and statistics to the Z-Wave JS organization. This data will be used to focus development efforts and improve the user experience. Information about the data that is collected and how it is used, including an example of the data collected, can be found in the {documentation_link}.",
-              "documentation_link": "Z-Wave JS data collection documentation"
-            },
             "statistics": {
               "title": "Adapter statistics",
               "messages_tx": {
@@ -6619,8 +6614,7 @@
           "description": "{percent_used} used - {free_space} free",
           "used_space": "Used space",
           "detailed_description": "{used} used of {total} total, {free_space} remaining",
-          "lifetime_used": "Lifetime used",
-          "lifetime_used_description": "The drive’s wear level is shown as a percentage, based on endurance indicators reported by the device via NVMe SMART or eMMC lifetime estimate fields.",
+          "emmc_lifetime_used": "eMMC lifetime used",
           "disk_metrics": "Disk metrics",
           "datadisk": {
             "title": "Move data disk",
@@ -9434,7 +9428,7 @@
         "operating_system": "Operating system",
         "docker_version": "Docker version",
         "deployment": "Deployment",
-        "lifetime_used": "Lifetime used",
+        "emmc_lifetime_used": "eMMC lifetime used",
         "reboot_host": "Reboot host",
         "confirm_reboot": "Are you sure you want to reboot the host?",
         "confirm_shutdown": "Are you sure you want to shut down the host?",

yarn.lock

@@ -3252,58 +3252,58 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@module-federation/error-codes@npm:0.17.1":
-  version: 0.17.1
-  resolution: "@module-federation/error-codes@npm:0.17.1"
-  checksum: 10/5f5f02a90a423479c84e4ff4398a3a9e31b66bd545e7c978ecb8a417f33162b86e749356baab14c006e741c9cebae549335a4c99e94ce7ef54210269fdf74f7f
+"@module-federation/error-codes@npm:0.17.0":
+  version: 0.17.0
+  resolution: "@module-federation/error-codes@npm:0.17.0"
+  checksum: 10/24fc0147737415b1834a612911bd31bab682a1b165c3ea588fa2a9c3052bbbd26609be59c4ec67d902253a791a57fe1b1dcfa2a9964c9dd91bc97ac91b6d6f5d
   languageName: node
   linkType: hard
 
-"@module-federation/runtime-core@npm:0.17.1":
-  version: 0.17.1
-  resolution: "@module-federation/runtime-core@npm:0.17.1"
+"@module-federation/runtime-core@npm:0.17.0":
+  version: 0.17.0
+  resolution: "@module-federation/runtime-core@npm:0.17.0"
   dependencies:
-    "@module-federation/error-codes": "npm:0.17.1"
-    "@module-federation/sdk": "npm:0.17.1"
-  checksum: 10/b0c945379bde13af84ceb833e3bfe3c8cf11fd265af0ad7640a1506017529458f408a4a3f1bd0f4b5983da71438913d5c25ed25e20908eb1f789bd1483616650
+    "@module-federation/error-codes": "npm:0.17.0"
+    "@module-federation/sdk": "npm:0.17.0"
+  checksum: 10/0378bb5b4080f9c7ddbcaff7b2259f7e3630cc2cebb41a667d5d3db6cf6c81a7ad3c7c089a99065e4c99e3b04ae29e6fc1715cb7c50c9d515ed31d7b9cf74cf4
   languageName: node
   linkType: hard
 
-"@module-federation/runtime-tools@npm:0.17.1":
-  version: 0.17.1
-  resolution: "@module-federation/runtime-tools@npm:0.17.1"
+"@module-federation/runtime-tools@npm:0.17.0":
+  version: 0.17.0
+  resolution: "@module-federation/runtime-tools@npm:0.17.0"
   dependencies:
-    "@module-federation/runtime": "npm:0.17.1"
-    "@module-federation/webpack-bundler-runtime": "npm:0.17.1"
-  checksum: 10/2e183e357b644dbe015d0e51df3fe601852ca79ffe3a30c582eee7a2050d7600eb3253f5de15e476c60741d0a1dd70add1ade7b5a3537cd2ee12bfee286284ea
+    "@module-federation/runtime": "npm:0.17.0"
+    "@module-federation/webpack-bundler-runtime": "npm:0.17.0"
+  checksum: 10/330b145a37065d0fd99445e7dbd745b6dee4d739b54547bbd9c5cacd83cbbd4ab4ae0d0c1ffd3bc27370e917bae491176b78fd10002b3112f4b2e05c7c36db11
   languageName: node
   linkType: hard
 
-"@module-federation/runtime@npm:0.17.1":
-  version: 0.17.1
-  resolution: "@module-federation/runtime@npm:0.17.1"
+"@module-federation/runtime@npm:0.17.0":
+  version: 0.17.0
+  resolution: "@module-federation/runtime@npm:0.17.0"
   dependencies:
-    "@module-federation/error-codes": "npm:0.17.1"
-    "@module-federation/runtime-core": "npm:0.17.1"
-    "@module-federation/sdk": "npm:0.17.1"
-  checksum: 10/f5405968dff4fa2cf510127701ec1722105f44298fd09eafeecead450b7bb95a05450749157fe2fc39caf6241bec9e45caa9a55375b48e7f195db84799a8df0c
+    "@module-federation/error-codes": "npm:0.17.0"
+    "@module-federation/runtime-core": "npm:0.17.0"
+    "@module-federation/sdk": "npm:0.17.0"
+  checksum: 10/442ac331316d727db2fcfe68017f10fefb550234213f68053b9080cb0538e578e8ee32e75a9233af61cbd785cb40325556ebc13952e14fe61bd328da75dcfbb3
   languageName: node
   linkType: hard
 
-"@module-federation/sdk@npm:0.17.1":
-  version: 0.17.1
-  resolution: "@module-federation/sdk@npm:0.17.1"
-  checksum: 10/daaaa49ed900c00a69641130cf673ad5d5b8623d82fb4bd03a67c839a6da760a0a5ae29b836ba66eeb95ee5392e558588ffd987a2c00b05c2b0a7c5039ed042d
+"@module-federation/sdk@npm:0.17.0":
+  version: 0.17.0
+  resolution: "@module-federation/sdk@npm:0.17.0"
+  checksum: 10/fec4e4243953274368ae16d668cd7fba9bbc01c7e38954f2a8e1261dd6159828ba3471c1a160092dde86ebe32a5d824abe75d1645f0155b2127a9f50518e7b40
   languageName: node
   linkType: hard
 
-"@module-federation/webpack-bundler-runtime@npm:0.17.1":
-  version: 0.17.1
-  resolution: "@module-federation/webpack-bundler-runtime@npm:0.17.1"
+"@module-federation/webpack-bundler-runtime@npm:0.17.0":
+  version: 0.17.0
+  resolution: "@module-federation/webpack-bundler-runtime@npm:0.17.0"
   dependencies:
-    "@module-federation/runtime": "npm:0.17.1"
-    "@module-federation/sdk": "npm:0.17.1"
-  checksum: 10/72e5030529dbc53df6271fa78bdb63976d0601fe9fde5105f8a7325e0fa296bc35277b9b084e52995cd314b89e12d33f8b869c1d63a13231c2948d4c741e72fd
+    "@module-federation/runtime": "npm:0.17.0"
+    "@module-federation/sdk": "npm:0.17.0"
+  checksum: 10/ce3e9dd45a16fb62f1645105cce6d19f1f62a2b68c65c8835f69bf9a2729cebac23d8a9b046c5ea53e974d2df025011e746ab95e0086237d24124bddd78cb40c
   languageName: node
   linkType: hard
 
@@ -3964,92 +3964,92 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rspack/binding-darwin-arm64@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-darwin-arm64@npm:1.4.11"
+"@rspack/binding-darwin-arm64@npm:1.4.10":
+  version: 1.4.10
+  resolution: "@rspack/binding-darwin-arm64@npm:1.4.10"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rspack/binding-darwin-x64@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-darwin-x64@npm:1.4.11"
+"@rspack/binding-darwin-x64@npm:1.4.10":
+  version: 1.4.10
+  resolution: "@rspack/binding-darwin-x64@npm:1.4.10"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@rspack/binding-linux-arm64-gnu@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-linux-arm64-gnu@npm:1.4.11"
+"@rspack/binding-linux-arm64-gnu@npm:1.4.10":
+  version: 1.4.10
+  resolution: "@rspack/binding-linux-arm64-gnu@npm:1.4.10"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rspack/binding-linux-arm64-musl@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-linux-arm64-musl@npm:1.4.11"
+"@rspack/binding-linux-arm64-musl@npm:1.4.10":
+  version: 1.4.10
+  resolution: "@rspack/binding-linux-arm64-musl@npm:1.4.10"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rspack/binding-linux-x64-gnu@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-linux-x64-gnu@npm:1.4.11"
+"@rspack/binding-linux-x64-gnu@npm:1.4.10":
+  version: 1.4.10
+  resolution: "@rspack/binding-linux-x64-gnu@npm:1.4.10"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rspack/binding-linux-x64-musl@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-linux-x64-musl@npm:1.4.11"
+"@rspack/binding-linux-x64-musl@npm:1.4.10":
+  version: 1.4.10
+  resolution: "@rspack/binding-linux-x64-musl@npm:1.4.10"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rspack/binding-wasm32-wasi@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-wasm32-wasi@npm:1.4.11"
+"@rspack/binding-wasm32-wasi@npm:1.4.10":
+  version: 1.4.10
+  resolution: "@rspack/binding-wasm32-wasi@npm:1.4.10"
   dependencies:
     "@napi-rs/wasm-runtime": "npm:^1.0.1"
   conditions: cpu=wasm32
   languageName: node
   linkType: hard
 
-"@rspack/binding-win32-arm64-msvc@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-win32-arm64-msvc@npm:1.4.11"
+"@rspack/binding-win32-arm64-msvc@npm:1.4.10":
+  version: 1.4.10
+  resolution: "@rspack/binding-win32-arm64-msvc@npm:1.4.10"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rspack/binding-win32-ia32-msvc@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-win32-ia32-msvc@npm:1.4.11"
+"@rspack/binding-win32-ia32-msvc@npm:1.4.10":
+  version: 1.4.10
+  resolution: "@rspack/binding-win32-ia32-msvc@npm:1.4.10"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@rspack/binding-win32-x64-msvc@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-win32-x64-msvc@npm:1.4.11"
+"@rspack/binding-win32-x64-msvc@npm:1.4.10":
+  version: 1.4.10
+  resolution: "@rspack/binding-win32-x64-msvc@npm:1.4.10"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@rspack/binding@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding@npm:1.4.11"
+"@rspack/binding@npm:1.4.10":
+  version: 1.4.10
+  resolution: "@rspack/binding@npm:1.4.10"
   dependencies:
-    "@rspack/binding-darwin-arm64": "npm:1.4.11"
-    "@rspack/binding-darwin-x64": "npm:1.4.11"
-    "@rspack/binding-linux-arm64-gnu": "npm:1.4.11"
-    "@rspack/binding-linux-arm64-musl": "npm:1.4.11"
-    "@rspack/binding-linux-x64-gnu": "npm:1.4.11"
-    "@rspack/binding-linux-x64-musl": "npm:1.4.11"
-    "@rspack/binding-wasm32-wasi": "npm:1.4.11"
-    "@rspack/binding-win32-arm64-msvc": "npm:1.4.11"
-    "@rspack/binding-win32-ia32-msvc": "npm:1.4.11"
-    "@rspack/binding-win32-x64-msvc": "npm:1.4.11"
+    "@rspack/binding-darwin-arm64": "npm:1.4.10"
+    "@rspack/binding-darwin-x64": "npm:1.4.10"
+    "@rspack/binding-linux-arm64-gnu": "npm:1.4.10"
+    "@rspack/binding-linux-arm64-musl": "npm:1.4.10"
+    "@rspack/binding-linux-x64-gnu": "npm:1.4.10"
+    "@rspack/binding-linux-x64-musl": "npm:1.4.10"
+    "@rspack/binding-wasm32-wasi": "npm:1.4.10"
+    "@rspack/binding-win32-arm64-msvc": "npm:1.4.10"
+    "@rspack/binding-win32-ia32-msvc": "npm:1.4.10"
+    "@rspack/binding-win32-x64-msvc": "npm:1.4.10"
   dependenciesMeta:
     "@rspack/binding-darwin-arm64":
       optional: true
@@ -4071,13 +4071,13 @@ __metadata:
       optional: true
     "@rspack/binding-win32-x64-msvc":
       optional: true
-  checksum: 10/8bb94774204f41888ff442afec06f019d008abba79964b74d566acf64f7216a148a1842f90c44b3bf680e69b697d8e5cd0f1cca6fd0b8a94df5f97c2a3f05510
+  checksum: 10/65da06db1317ce780176d5eab8bac62ecf42a2e78433e4fe5aa0a2ea3f02e878a5588606e16b8b91908eba0894c0d66351d03275a474bc6a5781e90612e8d100
   languageName: node
   linkType: hard
 
-"@rspack/cli@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/cli@npm:1.4.11"
+"@rspack/cli@npm:1.4.10":
+  version: 1.4.10
+  resolution: "@rspack/cli@npm:1.4.10"
   dependencies:
     "@discoveryjs/json-ext": "npm:^0.5.7"
     "@rspack/dev-server": "npm:~1.1.3"
@@ -4091,23 +4091,23 @@ __metadata:
     "@rspack/core": ^1.0.0-alpha || ^1.x
   bin:
     rspack: bin/rspack.js
-  checksum: 10/0a6f2feb1d5e58fd1c373350178cfa56bffce4acb88e335eef83ebbfc227c099c096ed13e51ee929701a07006e59901963dc32e743eea0bc95b666108b92669c
+  checksum: 10/91350c731ef7729e826dcd4f2a552b6df0fe8c9b8a6aae91971ab3952857b9190a9f1a76c273456d0a4dd232f5944aab095459e967ccd3319b0076c0a9978a14
   languageName: node
   linkType: hard
 
-"@rspack/core@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/core@npm:1.4.11"
+"@rspack/core@npm:1.4.10":
+  version: 1.4.10
+  resolution: "@rspack/core@npm:1.4.10"
   dependencies:
-    "@module-federation/runtime-tools": "npm:0.17.1"
-    "@rspack/binding": "npm:1.4.11"
+    "@module-federation/runtime-tools": "npm:0.17.0"
+    "@rspack/binding": "npm:1.4.10"
     "@rspack/lite-tapable": "npm:1.0.1"
   peerDependencies:
     "@swc/helpers": ">=0.5.1"
   peerDependenciesMeta:
     "@swc/helpers":
       optional: true
-  checksum: 10/77d463bd90feb2d24f7bc56df198f0b7ad310a9eb676070eac8d78014d151e783943c5b44c64700a51a36708c626a341eeaa9b3287e358616d09dfe25ab04e77
+  checksum: 10/51534697062ed351d85b75d958253b760fcca7e426cb39b053ac4816f84e0a7bad3d969f48d0cf76ab7733b0e5695cf82770e6b8f5c95e22fa4a697cb5dd286b
   languageName: node
   linkType: hard
 
@@ -4732,10 +4732,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/luxon@npm:3.7.1":
-  version: 3.7.1
-  resolution: "@types/luxon@npm:3.7.1"
-  checksum: 10/c7bc164c278393ea0be938f986c74b4cddfab9013b1aff4495b016f771ded1d5b7b7b4825b2c7f0b8799edce19c5f531c28ff434ab3dedf994ac2d99a20fd4c4
+"@types/luxon@npm:3.6.2":
+  version: 3.6.2
+  resolution: "@types/luxon@npm:3.6.2"
+  checksum: 10/73ca30059e0b1e352ce3a208837bc042e0bae9cf6e5b42f63de9ddfe15348a9e9bf9fcde3d4034038be24cb24adc579ae984cadff3bf70432e54fed1ad249d12
   languageName: node
   linkType: hard
 
@@ -9409,8 +9409,8 @@ __metadata:
     "@octokit/rest": "npm:22.0.0"
     "@replit/codemirror-indentation-markers": "npm:6.5.3"
     "@rsdoctor/rspack-plugin": "npm:1.1.10"
-    "@rspack/cli": "npm:1.4.11"
-    "@rspack/core": "npm:1.4.11"
+    "@rspack/cli": "npm:1.4.10"
+    "@rspack/core": "npm:1.4.10"
     "@shoelace-style/shoelace": "npm:2.20.1"
     "@swc/helpers": "npm:0.5.17"
     "@thomasloven/round-slider": "npm:0.6.0"
@@ -9427,7 +9427,7 @@ __metadata:
     "@types/leaflet-draw": "npm:1.0.12"
     "@types/leaflet.markercluster": "npm:1.5.5"
     "@types/lodash.merge": "npm:4.6.9"
-    "@types/luxon": "npm:3.7.1"
+    "@types/luxon": "npm:3.6.2"
     "@types/mocha": "npm:10.0.10"
     "@types/qrcode": "npm:1.5.5"
     "@types/sortablejs": "npm:1.15.8"