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(--ha-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 speed = supervisor.host.disk_life_time !== "" ? 30 : 10;
-  const moveTime = (supervisor.host.disk_used * 1000) / 60 / 30;
+  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;
+        bottom: 0;
-        left: 4px;
+        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

@@ -108,7 +108,7 @@
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
     "dialog-polyfill": "0.5.6",
-    "echarts": "6.0.0",
+    "echarts": "5.6.0",
     "element-internals-polyfill": "3.0.2",
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
@@ -124,7 +124,7 @@
     "lit": "3.3.1",
     "lit-html": "3.3.1",
     "luxon": "3.7.1",
-    "marked": "16.1.2",
+    "marked": "16.1.1",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
     "object-hash": "3.0.0",
@@ -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/cli": "1.4.10",
-    "@rspack/core": "1.4.11",
+    "@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",
@@ -205,7 +205,7 @@
     "husky": "9.1.7",
     "jsdom": "26.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.1.4",
+    "lint-staged": "16.1.2",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",

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.unhealthy.reason.${string}`
-  | `ui.dialogs.unsupported.reasons.${string}`
+  | `ui.dialogs.unsupported.reason.${string}`
   | `ui.panel.config.${string}.${"caption" | "description"}`
   | `ui.panel.config.dashboard.${string}`
   | `ui.panel.config.zha.${string}`

src/components/buttons/ha-progress-button.ts

@@ -117,7 +117,7 @@ export class HaProgressButton extends LitElement {
     }
 
     ha-svg-icon {
-      color: var(--white-color);
+      color: var(--white);
     }
   `;
 }

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());
-      echarts.registerTheme("custom", this._createTheme(style));
 
       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(--ha-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,
+            --ha-button-radius,
-            var(--ha-border-radius-pill)
+            var(--wa-border-radius-pill)
           );
 
           --wa-form-control-height: var(
@@ -78,102 +79,61 @@ export class HaButton extends Button {
         }
 
         :host([variant="brand"]) {
-          --button-color-fill-normal-active: var(
+          --color-fill-normal-active: var(--color-fill-primary-normal-active);
-            --ha-color-fill-primary-normal-active
+          --color-fill-normal-hover: var(--color-fill-primary-normal-hover);
-          );
+          --color-fill-loud-active: var(--color-fill-primary-loud-active);
-          --button-color-fill-normal-hover: var(
+          --color-fill-loud-hover: var(--color-fill-primary-loud-hover);
-            --ha-color-fill-primary-normal-hover
-          );
-          --button-color-fill-loud-active: var(
-            --ha-color-fill-primary-loud-active
-          );
-          --button-color-fill-loud-hover: var(
-            --ha-color-fill-primary-loud-hover
-          );
         }
 
         :host([variant="neutral"]) {
-          --button-color-fill-normal-active: var(
+          --color-fill-normal-active: var(--color-fill-neutral-normal-active);
-            --ha-color-fill-neutral-normal-active
+          --color-fill-normal-hover: var(--color-fill-neutral-normal-hover);
-          );
+          --color-fill-loud-active: var(--color-fill-neutral-loud-active);
-          --button-color-fill-normal-hover: var(
+          --color-fill-loud-hover: var(--color-fill-neutral-loud-hover);
-            --ha-color-fill-neutral-normal-hover
-          );
-          --button-color-fill-loud-active: var(
-            --ha-color-fill-neutral-loud-active
-          );
-          --button-color-fill-loud-hover: var(
-            --ha-color-fill-neutral-loud-hover
-          );
         }
 
         :host([variant="success"]) {
-          --button-color-fill-normal-active: var(
+          --color-fill-normal-active: var(--color-fill-success-normal-active);
-            --ha-color-fill-success-normal-active
+          --color-fill-normal-hover: var(--color-fill-success-normal-hover);
-          );
+          --color-fill-loud-active: var(--color-fill-success-loud-active);
-          --button-color-fill-normal-hover: var(
+          --color-fill-loud-hover: var(--color-fill-success-loud-hover);
-            --ha-color-fill-success-normal-hover
-          );
-          --button-color-fill-loud-active: var(
-            --ha-color-fill-success-loud-active
-          );
-          --button-color-fill-loud-hover: var(
-            --ha-color-fill-success-loud-hover
-          );
         }
 
         :host([variant="warning"]) {
-          --button-color-fill-normal-active: var(
+          --color-fill-normal-active: var(--color-fill-warning-normal-active);
-            --ha-color-fill-warning-normal-active
+          --color-fill-normal-hover: var(--color-fill-warning-normal-hover);
-          );
+          --color-fill-loud-active: var(--color-fill-warning-loud-active);
-          --button-color-fill-normal-hover: var(
+          --color-fill-loud-hover: var(--color-fill-warning-loud-hover);
-            --ha-color-fill-warning-normal-hover
-          );
-          --button-color-fill-loud-active: var(
-            --ha-color-fill-warning-loud-active
-          );
-          --button-color-fill-loud-hover: var(
-            --ha-color-fill-warning-loud-hover
-          );
         }
 
         :host([variant="danger"]) {
-          --button-color-fill-normal-active: var(
+          --color-fill-normal-active: var(--color-fill-danger-normal-active);
-            --ha-color-fill-danger-normal-active
+          --color-fill-normal-hover: var(--color-fill-danger-normal-hover);
-          );
+          --color-fill-loud-active: var(--color-fill-danger-loud-active);
-          --button-color-fill-normal-hover: var(
+          --color-fill-loud-hover: var(--color-fill-danger-loud-hover);
-            --ha-color-fill-danger-normal-hover
-          );
-          --button-color-fill-loud-active: var(
-            --ha-color-fill-danger-loud-active
-          );
-          --button-color-fill-loud-hover: var(
-            --ha-color-fill-danger-loud-hover
-          );
         }
 
         :host([appearance~="plain"]) .button {
           color: var(--wa-color-on-normal);
-          background-color: transparent;
         }
         :host([appearance~="plain"]) .button.disabled {
-          background-color: transparent;
+          background-color: var(--transparent-none);
-          color: var(--ha-color-on-disabled-quiet);
+          color: var(--color-on-disabled-quiet);
         }
 
         :host([appearance~="outlined"]) .button.disabled {
-          background-color: transparent;
+          background-color: var(--transparent-none);
-          color: var(--ha-color-on-disabled-quiet);
+          color: var(--color-on-disabled-quiet);
         }
 
         @media (hover: hover) {
           :host([appearance~="filled"])
             .button:not(.disabled):not(.loading):hover {
-            background-color: var(--button-color-fill-normal-hover);
+            background-color: var(--color-fill-normal-hover);
           }
           :host([appearance~="accent"])
             .button:not(.disabled):not(.loading):hover {
-            background-color: var(--button-color-fill-loud-hover);
+            background-color: var(--color-fill-loud-hover);
           }
           :host([appearance~="plain"])
             .button:not(.disabled):not(.loading):hover {
@@ -182,11 +142,11 @@ export class HaButton extends Button {
         }
         :host([appearance~="filled"])
           .button:not(.disabled):not(.loading):active {
-          background-color: var(--button-color-fill-normal-active);
+          background-color: var(--color-fill-normal-active);
         }
         :host([appearance~="filled"]) .button.disabled {
-          background-color: var(--ha-color-fill-disabled-normal-resting);
+          background-color: var(--color-fill-disabled-normal-resting);
-          color: var(--ha-color-on-disabled-normal);
+          color: var(--color-on-disabled-normal);
         }
 
         :host([appearance~="accent"]) .button {
@@ -197,11 +157,11 @@ export class HaButton extends Button {
         }
         :host([appearance~="accent"])
           .button:not(.disabled):not(.loading):active {
-          background-color: var(--button-color-fill-loud-active);
+          background-color: var(--color-fill-loud-active);
         }
         :host([appearance~="accent"]) .button.disabled {
-          background-color: var(--ha-color-fill-disabled-loud-resting);
+          background-color: var(--color-fill-disabled-loud-resting);
-          color: var(--ha-color-on-disabled-loud);
+          color: var(--color-on-disabled-loud);
         }
 
         :host([loading]) {

src/components/ha-control-slider.ts

@@ -506,7 +506,7 @@ export class HaControlSlider extends LitElement {
       width: 100%;
     }
     .slider .slider-track-bar {
-      --ha-border-radius: var(--control-slider-border-radius);
+      --border-radius: var(--control-slider-border-radius);
       --slider-size: 100%;
       position: absolute;
       height: 100%;

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 type { ConfigEntry } from "../data/config_entries";
-import { getConfigEntry, getSubEntries } 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?.supports_options
-        this._configEntry?.supported_subentry_types[
-          this._subConfigEntry.subentry_type
-        ]?.supports_reconfigure) ||
-      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(--ha-border-radius-pill)
-        );
-      }
-      :host .mdc-fab.mdc-fab--extended .ripple {
-        border-radius: var(
-          --ha-button-border-radius,
-          var(--ha-border-radius-pill)
-        );
-      }
       :host .mdc-fab--extended .mdc-fab__icon {
         margin-inline-start: -8px;
         margin-inline-end: 12px;

src/components/media-player/dialog-media-manage.ts

@@ -116,7 +116,7 @@ class DialogMediaManage extends LitElement {
               `
             : html`
                 <ha-button
-                  variant="danger"
+                  class="danger"
                   slot="navigationIcon"
                   .disabled=${this._deleting}
                   @click=${this._handleDelete}
@@ -327,6 +327,10 @@ class DialogMediaManage extends LitElement {
           display: block;
         }
 
+        .danger {
+          --mdc-theme-primary: var(--error-color);
+        }
+
         ha-tip {
           margin: 16px;
         }

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=${(this.stateObj.state === BINARY_STATE_OFF &&
-                  .disabled=${updateButtonIsDisabled(this.stateObj)}
+                    !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
+          <ha-suggest-with-ai-button
-            ? nothing
+            slot="actionItems"
-            : html` <ha-suggest-with-ai-button
+            .hass=${this.hass}
-                slot="actionItems"
+            .generateTask=${this._generateTask}
-                .hass=${this.hass}
+            @suggestion=${this._handleSuggestion}
-                .generateTask=${this._generateTask}
+          ></ha-suggest-with-ai-button>
-                @suggestion=${this._handleSuggestion}
-              ></ha-suggest-with-ai-button>`}
         </ha-dialog-header>
         ${this._error
           ? html`<ha-alert alert-type="error"

src/panels/config/automation/ha-automation-editor.ts

@@ -487,7 +487,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                           .disabled=${Boolean(this._readOnly)}
                           .dirty=${this._dirty}
                           @value-changed=${this._valueChanged}
-                          @editor-save=${this._handleSaveAutomation}
                         ></manual-automation-editor>
                       `}
                 </div>
@@ -518,7 +517,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                     .defaultValue=${this._preprocessYaml()}
                     .readOnly=${this._readOnly}
                     @value-changed=${this._yamlChanged}
-                    @editor-save=${this._handleSaveAutomation}
                     .showErrors=${false}
                     disable-fullscreen
                   ></ha-yaml-editor>`

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/core/ai-task-pref.ts

@@ -2,20 +2,19 @@ import "@material/mwc-button";
 import { mdiHelpCircle, mdiStarFourPoints } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
-import "../../../components/entity/ha-entity-picker";
-import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-card";
 import "../../../components/ha-settings-row";
+import "../../../components/entity/ha-entity-picker";
+import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
+import type { HomeAssistant } from "../../../types";
+import { brandsUrl } from "../../../util/brands-url";
 import {
   fetchAITaskPreferences,
   saveAITaskPreferences,
   type AITaskPreferences,
 } from "../../../data/ai_task";
-import type { HomeAssistant } from "../../../types";
-import { brandsUrl } from "../../../util/brands-url";
 import { documentationUrl } from "../../../util/documentation-url";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 
 @customElement("ai-task-pref")
 export class AITaskPref extends LitElement {
@@ -25,8 +24,6 @@ export class AITaskPref extends LitElement {
 
   @state() private _prefs?: AITaskPreferences;
 
-  private _gen_data_entity_id?: string | null;
-
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     if (!this.hass || !isComponentLoaded(this.hass, "ai_task")) {
@@ -89,51 +86,30 @@ export class AITaskPref extends LitElement {
               .hass=${this.hass}
               .disabled=${this._prefs === undefined &&
               isComponentLoaded(this.hass, "ai_task")}
-              .value=${this._gen_data_entity_id ||
+              .value=${this._prefs?.gen_data_entity_id}
-              this._prefs?.gen_data_entity_id}
               .includeDomains=${["ai_task"]}
               @value-changed=${this._handlePrefChange}
             ></ha-entity-picker>
           </ha-settings-row>
         </div>
-        <div class="card-actions">
-          <ha-progress-button @click=${this._update}>
-            ${this.hass!.localize("ui.common.save")}
-          </ha-progress-button>
-        </div>
       </ha-card>
     `;
   }
 
-  private _handlePrefChange(ev: CustomEvent<{ value: string | undefined }>) {
+  private async _handlePrefChange(
+    ev: CustomEvent<{ value: string | undefined }>
+  ) {
     const input = ev.target as HaEntityPicker;
-    const key = input.dataset.name as keyof AITaskPreferences;
+    const key = input.getAttribute("data-name") as keyof AITaskPreferences;
-    const value = ev.detail.value || null;
+    const entityId = ev.detail.value || null;
-    this[`_${key}`] = value;
-  }
-
-  private async _update(ev) {
-    const button = ev.target as HaProgressButton;
-    if (button.progress) {
-      return;
-    }
-    button.progress = true;
-
     const oldPrefs = this._prefs;
-    const update: Partial<AITaskPreferences> = {
+    this._prefs = { ...this._prefs!, [key]: entityId };
-      gen_data_entity_id: this._gen_data_entity_id,
-    };
-    this._prefs = { ...this._prefs!, ...update };
     try {
       this._prefs = await saveAITaskPreferences(this.hass, {
-        ...update,
+        [key]: entityId,
       });
-      button.actionSuccess();
     } catch (_err: any) {
-      button.actionError();
       this._prefs = oldPrefs;
-    } finally {
-      button.progress = false;
     }
   }
 
@@ -169,9 +145,6 @@ export class AITaskPref extends LitElement {
       direction: var(--direction);
       color: var(--secondary-text-color);
     }
-    .card-actions {
-      text-align: right;
-    }
     ha-entity-picker {
       flex: 1;
       margin-left: 16px;

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")
+              ? colorVariables["primary-color"]
-              : style.getPropertyValue("--disabled-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 "../../../../../components/ha-list-item";
-import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box";
-import type { HassDialog } from "../../../../../dialogs/make-dialog-manager";
-import type { HomeAssistant } from "../../../../../types";
 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 = colorVariables["primary-color"];
-
+    const routerColor = colorVariables["cyan-color"];
-    const primaryColor = style.getPropertyValue("--primary-color");
+    const endDeviceColor = colorVariables["teal-color"];
-    const routerColor = style.getPropertyValue("--cyan-color");
+    const offlineColor = colorVariables["error-color"];
-    const endDeviceColor = style.getPropertyValue("--teal-color");
-    const offlineColor = style.getPropertyValue("--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,388 +157,380 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
           .path=${mdiRefresh}
           .label=${this.hass!.localize("ui.common.refresh")}
         ></ha-icon-button>
-        <div class="container">
+        ${this._network
-          ${this._network
+          ? html`
-            ? html`
+              <ha-card class="content network-status">
-                <ha-card class="content network-status">
+                <div class="card-content">
-                  <div class="card-content">
+                  <div class="heading">
-                    <div class="heading">
+                    <div class="icon">
-                      <div class="icon">
+                      ${this._status === "disconnected"
-                        ${this._status === "disconnected"
+                        ? html`<ha-spinner></ha-spinner>`
-                          ? html`<ha-spinner></ha-spinner>`
+                        : html`
-                          : html`
+                            <ha-svg-icon
-                              <ha-svg-icon
+                              .path=${this._icon}
-                                .path=${this._icon}
+                              class="network-status-icon ${classMap({
-                                class="network-status-icon ${classMap({
+                                [this._status!]: true,
-                                  [this._status!]: true,
+                              })}"
-                                })}"
+                              slot="item-icon"
-                                slot="item-icon"
+                            ></ha-svg-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}
                     </div>
-                  </div>
+                    ${this._status !== "disconnected"
-                  <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>`
-                      : nothing}
-                    <ha-button
-                      class="remove-node-button"
-                      @click=${this._removeNodeClicked}
-                      appearance="filled"
-                      .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>
-                  </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._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
+                          <div class="details">
-                            .checked=${this._dataCollectionOptIn === true}
+                            Z-Wave
-                            @change=${this._dataCollectionToggled}
+                            ${this.hass.localize(
-                          ></ha-switch>
+                              "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>
                         `
-                      : html` <ha-spinner size="small"></ha-spinner> `}
+                      : nothing}
                   </div>
-                  <div class="card-content">
+                </div>
-                    <p>
+                <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>`
+                    : 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.data_collection.description",
+                        "ui.panel.config.zwave_js.dashboard.driver_version"
-                        {
+                      )}:
-                          documentation_link: html`<a
+                    </span>
-                            target="_blank"
+                    <span>${this._network.client.driver_version}</span>
-                            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>
+                  <div class="row">
-                <ha-card
+                    <span>
-                  .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"
+                        "ui.panel.config.zwave_js.dashboard.server_version"
-                      )}
+                      )}:
-                    </p>
+                    </span>
+                    <span>${this._network.client.server_version}</span>
                   </div>
-                  <div class="card-actions">
+                  <div class="row">
-                    ${this._backupProgress !== undefined
+                    <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.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}%`
-                      : this._restoreProgress !== undefined
+                      : html`<ha-button
-                        ? html`<ha-progress-ring
+                            appearance="plain"
-                              size="small"
+                            @click=${this._downloadBackup}
-                              .value=${this._restoreProgress}
+                          >
-                            ></ha-progress-ring>
                             ${this.hass.localize(
-                              "ui.panel.config.zwave_js.dashboard.nvm_backup.restoring"
+                              "ui.panel.config.zwave_js.dashboard.nvm_backup.download_backup"
                             )}
-                            ${this._restoreProgress}%`
+                          </ha-button>
-                        : html`<ha-button
+                          <div class="upload-button">
+                            <ha-button
                               appearance="plain"
-                              @click=${this._downloadBackup}
+                              @click=${this._restoreButtonClick}
+                              variant="danger"
                             >
-                              ${this.hass.localize(
+                              <span class="button-content">
-                                "ui.panel.config.zwave_js.dashboard.nvm_backup.download_backup"
-                              )}
-                            </ha-button>
-                            <div class="right-buttons">
-                              <div class="upload-button">
-                                <ha-button
-                                  appearance="filled"
-                                  @click=${this._restoreButtonClick}
-                                >
-                                  <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
-                                appearance="filled"
-                                @click=${this._openConfigFlow}
-                              >
                                 ${this.hass.localize(
-                                  "ui.panel.config.zwave_js.dashboard.nvm_backup.migrate"
+                                  "ui.panel.config.zwave_js.dashboard.nvm_backup.restore_backup"
                                 )}
-                              </ha-button>
+                              </span>
-                            </div>`}
+                            </ha-button>
-                  </div>
+                            <input
-                </ha-card>
+                              type="file"
-              `
+                              id="nvm-restore-file"
-            : nothing}
+                              accept=".bin"
-        </div>
+                              @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(
@@ -965,7 +957,6 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
         .card-actions {
           display: flex;
           align-items: center;
-          flex-wrap: wrap;
         }
 
         .card-actions ha-progress-ring {
@@ -990,19 +981,9 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
           pointer-events: none;
         }
 
-        .remove-node-button {
+        .migrate-button {
           margin-left: auto;
         }
-
-        .right-buttons {
-          display: flex;
-          gap: 8px;
-          margin-left: auto;
-        }
-
-        .container {
-          padding: 8px 16px 16px;
-        }
       `,
     ];
   }

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

@@ -162,7 +162,6 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
         textarea {
           flex-grow: 1;
           padding: 16px;
-          font-family: var(--ha-font-family-code);
         }
         ha-card {
           margin: 16px 0;

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")
+                    ? colorVariables["primary-color"]
-                    : style.getPropertyValue("--cyan-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")
+                      ? colorVariables["primary-color"]
-                      : style.getPropertyValue("--disabled-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/scene/ha-scene-editor.ts

@@ -320,7 +320,6 @@ export class HaSceneEditor extends PreventUnsavedMixin(
       .hass=${this.hass}
       .defaultValue=${this._config}
       @value-changed=${this._yamlChanged}
-      @editor-save=${this._saveScene}
       .showErrors=${false}
       disable-fullscreen
     ></ha-yaml-editor>`;

src/panels/config/script/ha-script-editor.ts

@@ -438,7 +438,6 @@ export class HaScriptEditor extends SubscribeMixin(
                           .disabled=${this._readOnly}
                           .dirty=${this._dirty}
                           @value-changed=${this._valueChanged}
-                          @editor-save=${this._handleSave}
                         ></manual-script-editor>
                       `}
                 </div>
@@ -451,7 +450,6 @@ export class HaScriptEditor extends SubscribeMixin(
                   .readOnly=${this._readOnly}
                   disable-fullscreen
                   @value-changed=${this._yamlChanged}
-                  @editor-save=${this._handleSave}
                   .showErrors=${false}
                 ></ha-yaml-editor>`
               : nothing}

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 speed = hostInfo.disk_life_time !== "" ? 30 : 10;
-  const moveTime = (hostInfo.disk_used * 1000) / 60 / 30;
+  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(
+                            .tooltip=${`${this._hostInfo.disk_life_time - 10}% - ${this._hostInfo.disk_life_time}%`}
-                              "ui.panel.config.storage.lifetime_used_description"
-                            )}
                             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([
+const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]);
-  "closed",
-  "locked",
-  "not_home",
-  "off",
-  "unavailable",
-  "unknown",
-]);
 
 @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/panels/lovelace/special-rows/hui-button-row.ts

@@ -101,6 +101,11 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+    ha-button {
+      margin-right: -0.57em;
+      margin-inline-end: -0.57em;
+      margin-inline-start: initial;
+    }
   `;
 
   private _handleAction(ev: ActionHandlerEvent) {

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

@@ -1,18 +1,21 @@
 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`
   html {
     /* text */
-    --primary-text-color: var(--ha-color-text-primary);
+    --primary-text-color: var(--color-text-primary);
-    --secondary-text-color: var(--ha-color-text-secondary);
+    --secondary-text-color: var(--color-text-secondary);
     --text-primary-color: #ffffff;
     --text-light-primary-color: #212121;
     --disabled-text-color: #bdbdbd;
 
     /* main interface colors */
-    --primary-color: var(--ha-color-primary-40);
+    --primary-color: var(--color-primary-40);
     --dark-primary-color: #0288d1;
     --darker-primary-color: #016194;
     --light-primary-color: #b3e5fc;
@@ -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,79 +1,76 @@
 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;
+    --black: #000000;
+    --transparent-none: rgba(255, 255, 255, 0);
+
     /* primary */
-    --ha-color-primary-05: #001721;
+    --color-primary-05: #001721;
-    --ha-color-primary-10: #002e3e;
+    --color-primary-10: #002e3e;
-    --ha-color-primary-20: #004156;
+    --color-primary-20: #004156;
-    --ha-color-primary-30: #006787;
+    --color-primary-30: #006787;
-    --ha-color-primary-40: #009ac7;
+    --color-primary-40: #009ac7;
-    --ha-color-primary-50: #18bcf2;
+    --color-primary-50: #18bcf2;
-    --ha-color-primary-60: #37c8fd;
+    --color-primary-60: #37c8fd;
-    --ha-color-primary-70: #7bd4fb;
+    --color-primary-70: #7bd4fb;
-    --ha-color-primary-80: #b9e6fc;
+    --color-primary-80: #b9e6fc;
-    --ha-color-primary-90: #dff3fc;
+    --color-primary-90: #dff3fc;
-    --ha-color-primary-95: #eff9fe;
+    --color-primary-95: #eff9fe;
 
     /* neutral */
-    --ha-color-neutral-05: #141414;
+    --color-neutral-05: #101219;
-    --ha-color-neutral-10: #202020;
+    --color-neutral-10: #1b1d26;
-    --ha-color-neutral-20: #363636;
+    --color-neutral-20: #2f323f;
-    --ha-color-neutral-30: #4a4a4a;
+    --color-neutral-30: #424554;
-    --ha-color-neutral-40: #5e5e5e;
+    --color-neutral-40: #545868;
-    --ha-color-neutral-50: #7a7a7a;
+    --color-neutral-50: #717584;
-    --ha-color-neutral-60: #989898;
+    --color-neutral-60: #9194a2;
-    --ha-color-neutral-70: #b1b1b1;
+    --color-neutral-70: #abaeb9;
-    --ha-color-neutral-80: #b1b1b1;
+    --color-neutral-80: #c7c9d0;
-    --ha-color-neutral-90: #e6e6e6;
+    --color-neutral-90: #e4e5e9;
-    --ha-color-neutral-95: #f3f3f3;
+    --color-neutral-95: #f1f2f3;
 
     /* orange */
-    --ha-color-orange-05: #280700;
+    --color-orange-05: #280700;
-    --ha-color-orange-10: #3b0f00;
+    --color-orange-10: #3b0f00;
-    --ha-color-orange-20: #5e1c00;
+    --color-orange-20: #5e1c00;
-    --ha-color-orange-30: #7e2900;
+    --color-orange-30: #7e2900;
-    --ha-color-orange-40: #9d3800;
+    --color-orange-40: #9d3800;
-    --ha-color-orange-50: #c94e00;
+    --color-orange-50: #c94e00;
-    --ha-color-orange-60: #f36d00;
+    --color-orange-60: #f36d00;
-    --ha-color-orange-70: #ff9342;
+    --color-orange-70: #ff9342;
-    --ha-color-orange-80: #ffbb89;
+    --color-orange-80: #ffbb89;
-    --ha-color-orange-90: #ffe0c8;
+    --color-orange-90: #ffe0c8;
-    --ha-color-orange-95: #fff0e4;
+    --color-orange-95: #fff0e4;
 
     /* red */
-    --ha-color-red-05: #2a040b;
+    --color-red-05: #2a040b;
-    --ha-color-red-10: #3e0913;
+    --color-red-10: #3e0913;
-    --ha-color-red-20: #631323;
+    --color-red-20: #631323;
-    --ha-color-red-30: #8a132c;
+    --color-red-30: #8a132c;
-    --ha-color-red-40: #b30532;
+    --color-red-40: #b30532;
-    --ha-color-red-50: #dc3146;
+    --color-red-50: #dc3146;
-    --ha-color-red-60: #f3676c;
+    --color-red-60: #f3676c;
-    --ha-color-red-70: #fd8f90;
+    --color-red-70: #fd8f90;
-    --ha-color-red-80: #ffb8b6;
+    --color-red-80: #ffb8b6;
-    --ha-color-red-90: #ffdedc;
+    --color-red-90: #ffdedc;
-    --ha-color-red-95: #fff0ef;
+    --color-red-95: #fff0ef;
 
     /* green */
-    --ha-color-green-05: #031608;
+    --color-green-05: #031608;
-    --ha-color-green-10: #052310;
+    --color-green-10: #052310;
-    --ha-color-green-20: #0a3a1d;
+    --color-green-20: #0a3a1d;
-    --ha-color-green-30: #0a5027;
+    --color-green-30: #0a5027;
-    --ha-color-green-40: #036730;
+    --color-green-40: #036730;
-    --ha-color-green-50: #00883c;
+    --color-green-50: #00883c;
-    --ha-color-green-60: #00ac49;
+    --color-green-60: #00ac49;
-    --ha-color-green-70: #5dc36f;
+    --color-green-70: #5dc36f;
-    --ha-color-green-80: #93da98;
+    --color-green-80: #93da98;
-    --ha-color-green-90: #c2f2c1;
+    --color-green-90: #c2f2c1;
-    --ha-color-green-95: #e3f9e3;
+    --color-green-95: #e3f9e3;
   }
 `;
 

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

@@ -1,284 +1,293 @@
 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 {
-    --ha-color-focus: var(--ha-color-orange-60);
+    --color-overlay-modal: rgba(0, 0, 0, 0.25);
+    --color-focus: var(--color-orange-60);
+
+    /* surface */
+    --color-surface-lower: var(--color-neutral-90);
+    --color-surface-low: var(--color-neutral-95);
+    --color-surface-default: var(--white);
 
     /* text */
-    --ha-color-text-primary: var(--ha-color-neutral-05);
+    --color-text-primary: var(--color-neutral-05);
-    --ha-color-text-secondary: var(--ha-color-neutral-40);
+    --color-text-secondary: var(--color-neutral-40);
-    --ha-color-text-disabled: var(--ha-color-neutral-60);
+    --color-text-disabled: var(--color-neutral-60);
-    --ha-color-text-link: var(--ha-color-primary-40);
+    --color-text-link: var(--color-primary-40);
     /* border primary */
-    --ha-color-border-quiet: var(--ha-color-primary-80);
+    --color-border-quiet: var(--color-primary-80);
-    --ha-color-border-normal: var(--ha-color-primary-70);
+    --color-border-normal: var(--color-primary-70);
-    --ha-color-border-loud: var(--ha-color-primary-40);
+    --color-border-loud: var(--color-primary-40);
 
     /* border neutral */
-    --ha-color-border-neutral-quiet: var(--ha-color-neutral-80);
+    --color-border-neutral-quiet: var(--color-neutral-80);
-    --ha-color-border-neutral-normal: var(--ha-color-neutral-60);
+    --color-border-neutral-normal: var(--color-neutral-60);
-    --ha-color-border-neutral-loud: var(--ha-color-neutral-40);
+    --color-border-neutral-loud: var(--color-neutral-40);
 
     /* border danger */
-    --ha-color-border-danger-quiet: var(--ha-color-red-80);
+    --color-border-danger-quiet: var(--color-red-80);
-    --ha-color-border-danger-normal: var(--ha-color-red-70);
+    --color-border-danger-normal: var(--color-red-70);
-    --ha-color-border-danger-loud: var(--ha-color-red-40);
+    --color-border-danger-loud: var(--color-red-40);
 
     /* border warning */
-    --ha-color-border-warning-quiet: var(--ha-color-orange-80);
+    --color-border-warning-quiet: var(--color-orange-80);
-    --ha-color-border-warning-normal: var(--ha-color-orange-70);
+    --color-border-warning-normal: var(--color-orange-70);
-    --ha-color-border-warning-loud: var(--ha-color-orange-40);
+    --color-border-warning-loud: var(--color-orange-40);
 
     /* border success */
-    --ha-color-border-success-quiet: var(--ha-color-green-80);
+    --color-border-success-quiet: var(--color-green-80);
-    --ha-color-border-success-normal: var(--ha-color-green-70);
+    --color-border-success-normal: var(--color-green-70);
-    --ha-color-border-success-loud: var(--ha-color-green-40);
+    --color-border-success-loud: var(--color-green-40);
 
     /* fill primary quiet */
-    --ha-color-fill-primary-quiet-resting: var(--ha-color-primary-95);
+    --color-fill-primary-quiet-resting: var(--color-primary-95);
-    --ha-color-fill-primary-quiet-hover: var(--ha-color-primary-90);
+    --color-fill-primary-quiet-hover: var(--color-primary-90);
-    --ha-color-fill-primary-quiet-active: var(--ha-color-primary-95);
+    --color-fill-primary-quiet-active: var(--color-primary-95);
 
     /* fill primary normal */
-    --ha-color-fill-primary-normal-resting: var(--ha-color-primary-90);
+    --color-fill-primary-normal-resting: var(--color-primary-90);
-    --ha-color-fill-primary-normal-hover: var(--ha-color-primary-80);
+    --color-fill-primary-normal-hover: var(--color-primary-80);
-    --ha-color-fill-primary-normal-active: var(--ha-color-primary-90);
+    --color-fill-primary-normal-active: var(--color-primary-90);
 
     /* fill primary loud */
-    --ha-color-fill-primary-loud-resting: var(--ha-color-primary-40);
+    --color-fill-primary-loud-resting: var(--color-primary-40);
-    --ha-color-fill-primary-loud-hover: var(--ha-color-primary-30);
+    --color-fill-primary-loud-hover: var(--color-primary-30);
-    --ha-color-fill-primary-loud-active: var(--ha-color-primary-40);
+    --color-fill-primary-loud-active: var(--color-primary-40);
 
     /* fill neutral quiet */
-    --ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-95);
+    --color-fill-neutral-quiet-resting: var(--color-neutral-95);
-    --ha-color-fill-neutral-quiet-hover: var(--ha-color-neutral-90);
+    --color-fill-neutral-quiet-hover: var(--color-neutral-90);
-    --ha-color-fill-neutral-quiet-active: var(--ha-color-neutral-95);
+    --color-fill-neutral-quiet-active: var(--color-neutral-95);
 
     /* fill neutral normal */
-    --ha-color-fill-neutral-normal-resting: var(--ha-color-neutral-90);
+    --color-fill-neutral-normal-resting: var(--color-neutral-90);
-    --ha-color-fill-neutral-normal-hover: var(--ha-color-neutral-80);
+    --color-fill-neutral-normal-hover: var(--color-neutral-80);
-    --ha-color-fill-neutral-normal-active: var(--ha-color-neutral-90);
+    --color-fill-neutral-normal-active: var(--color-neutral-90);
 
     /* fill neutral loud */
-    --ha-color-fill-neutral-loud-resting: var(--ha-color-neutral-40);
+    --color-fill-neutral-loud-resting: var(--color-neutral-40);
-    --ha-color-fill-neutral-loud-hover: var(--ha-color-neutral-30);
+    --color-fill-neutral-loud-hover: var(--color-neutral-30);
-    --ha-color-fill-neutral-loud-active: var(--ha-color-neutral-40);
+    --color-fill-neutral-loud-active: var(--color-neutral-40);
 
     /* fill disabled quiet */
-    --ha-color-fill-disabled-quiet-resting: var(--ha-color-neutral-95);
+    --color-fill-disabled-quiet-resting: var(--color-neutral-95);
 
     /* fill disabled normal */
-    --ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-95);
+    --color-fill-disabled-normal-resting: var(--color-neutral-95);
 
     /* fill disabled loud */
-    --ha-color-fill-disabled-loud-resting: var(--ha-color-neutral-80);
+    --color-fill-disabled-loud-resting: var(--color-neutral-80);
 
     /* fill danger quiet */
-    --ha-color-fill-danger-quiet-resting: var(--ha-color-red-95);
+    --color-fill-danger-quiet-resting: var(--color-red-95);
-    --ha-color-fill-danger-quiet-hover: var(--ha-color-red-90);
+    --color-fill-danger-quiet-hover: var(--color-red-90);
-    --ha-color-fill-danger-quiet-active: var(--ha-color-red-95);
+    --color-fill-danger-quiet-active: var(--color-red-95);
 
     /* fill danger normal */
-    --ha-color-fill-danger-normal-resting: var(--ha-color-red-90);
+    --color-fill-danger-normal-resting: var(--color-red-90);
-    --ha-color-fill-danger-normal-hover: var(--ha-color-red-80);
+    --color-fill-danger-normal-hover: var(--color-red-80);
-    --ha-color-fill-danger-normal-active: var(--ha-color-red-90);
+    --color-fill-danger-normal-active: var(--color-red-90);
 
     /* fill danger loud */
-    --ha-color-fill-danger-loud-resting: var(--ha-color-red-50);
+    --color-fill-danger-loud-resting: var(--color-red-50);
-    --ha-color-fill-danger-loud-hover: var(--ha-color-red-40);
+    --color-fill-danger-loud-hover: var(--color-red-40);
-    --ha-color-fill-danger-loud-active: var(--ha-color-red-50);
+    --color-fill-danger-loud-active: var(--color-red-50);
 
     /* fill warning quiet */
-    --ha-color-fill-warning-quiet-resting: var(--ha-color-orange-95);
+    --color-fill-warning-quiet-resting: var(--color-orange-95);
-    --ha-color-fill-warning-quiet-hover: var(--ha-color-orange-90);
+    --color-fill-warning-quiet-hover: var(--color-orange-90);
-    --ha-color-fill-warning-quiet-active: var(--ha-color-orange-95);
+    --color-fill-warning-quiet-active: var(--color-orange-95);
 
     /* fill warning normal */
-    --ha-color-fill-warning-normal-resting: var(--ha-color-orange-90);
+    --color-fill-warning-normal-resting: var(--color-orange-90);
-    --ha-color-fill-warning-normal-hover: var(--ha-color-orange-80);
+    --color-fill-warning-normal-hover: var(--color-orange-80);
-    --ha-color-fill-warning-normal-active: var(--ha-color-orange-90);
+    --color-fill-warning-normal-active: var(--color-orange-90);
 
     /* fill warning loud */
-    --ha-color-fill-warning-loud-resting: var(--ha-color-orange-70);
+    --color-fill-warning-loud-resting: var(--color-orange-70);
-    --ha-color-fill-warning-loud-hover: var(--ha-color-orange-50);
+    --color-fill-warning-loud-hover: var(--color-orange-50);
-    --ha-color-fill-warning-loud-active: var(--ha-color-orange-70);
+    --color-fill-warning-loud-active: var(--color-orange-70);
 
     /* fill success quiet */
-    --ha-color-fill-success-quiet-resting: var(--ha-color-green-95);
+    --color-fill-success-quiet-resting: var(--color-green-95);
-    --ha-color-fill-success-quiet-hover: var(--ha-color-green-90);
+    --color-fill-success-quiet-hover: var(--color-green-90);
-    --ha-color-fill-success-quiet-active: var(--ha-color-green-95);
+    --color-fill-success-quiet-active: var(--color-green-95);
 
     /* fill success normal */
-    --ha-color-fill-success-normal-resting: var(--ha-color-green-90);
+    --color-fill-success-normal-resting: var(--color-green-90);
-    --ha-color-fill-success-normal-hover: var(--ha-color-green-80);
+    --color-fill-success-normal-hover: var(--color-green-80);
-    --ha-color-fill-success-normal-active: var(--ha-color-green-90);
+    --color-fill-success-normal-active: var(--color-green-90);
 
     /* fill success loud */
-    --ha-color-fill-success-loud-resting: var(--ha-color-green-50);
+    --color-fill-success-loud-resting: var(--color-green-50);
-    --ha-color-fill-success-loud-hover: var(--ha-color-green-40);
+    --color-fill-success-loud-hover: var(--color-green-40);
-    --ha-color-fill-success-loud-active: var(--ha-color-green-50);
+    --color-fill-success-loud-active: var(--color-green-50);
 
     /* on primary */
-    --ha-color-on-primary-quiet: var(--ha-color-primary-50);
+    --color-on-primary-quiet: var(--color-primary-50);
-    --ha-color-on-primary-normal: var(--ha-color-primary-40);
+    --color-on-primary-normal: var(--color-primary-40);
-    --ha-color-on-primary-loud: var(--white-color);
+    --color-on-primary-loud: var(--white);
 
     /* on neutral */
-    --ha-color-on-neutral-quiet: var(--ha-color-neutral-50);
+    --color-on-neutral-quiet: var(--color-neutral-50);
-    --ha-color-on-neutral-normal: var(--ha-color-neutral-40);
+    --color-on-neutral-normal: var(--color-neutral-40);
-    --ha-color-on-neutral-loud: var(--white-color);
+    --color-on-neutral-loud: var(--white);
 
     /* on disabled */
-    --ha-color-on-disabled-quiet: var(--ha-color-neutral-80);
+    --color-on-disabled-quiet: var(--color-neutral-80);
-    --ha-color-on-disabled-normal: var(--ha-color-neutral-70);
+    --color-on-disabled-normal: var(--color-neutral-70);
-    --ha-color-on-disabled-loud: var(--ha-color-neutral-95);
+    --color-on-disabled-loud: var(--color-neutral-95);
 
     /* on danger */
-    --ha-color-on-danger-quiet: var(--ha-color-red-50);
+    --color-on-danger-quiet: var(--color-red-50);
-    --ha-color-on-danger-normal: var(--ha-color-red-40);
+    --color-on-danger-normal: var(--color-red-40);
-    --ha-color-on-danger-loud: var(--white-color);
+    --color-on-danger-loud: var(--white);
 
     /* on warning */
-    --ha-color-on-warning-quiet: var(--ha-color-orange-50);
+    --color-on-warning-quiet: var(--color-orange-50);
-    --ha-color-on-warning-normal: var(--ha-color-orange-40);
+    --color-on-warning-normal: var(--color-orange-40);
-    --ha-color-on-warning-loud: var(--white-color);
+    --color-on-warning-loud: var(--white);
 
     /* on success */
-    --ha-color-on-success-quiet: var(--ha-color-green-50);
+    --color-on-success-quiet: var(--color-green-50);
-    --ha-color-on-success-normal: var(--ha-color-green-40);
+    --color-on-success-normal: var(--color-green-40);
-    --ha-color-on-success-loud: var(--white-color);
+    --color-on-success-loud: var(--white);
+
+    /* logo */
+    --color-logo-primary: var(--color-primary-50);
   }
 `;
 
 export const darkSemanticColorStyles = css`
   html {
+    /* surface */
+    --color-surface-lower: var(--black);
+    --color-surface-low: var(--color-neutral-05);
+    --color-surface-default: var(--color-neutral-10);
+
     /* text */
-    --ha-color-text-primary: var(--white-color);
+    --color-text-primary: var(--white);
-    --ha-color-text-secondary: var(--ha-color-neutral-80);
+    --color-text-secondary: var(--color-neutral-80);
-    --ha-color-text-link: var(--ha-color-primary-60);
+    --color-text-link: var(--color-primary-60);
 
     /* border primary */
-    --ha-color-border-normal: var(--ha-color-primary-50);
+    --color-border-normal: var(--color-primary-50);
 
     /* border neutral */
-    --ha-color-border-neutral-quiet: var(--ha-color-neutral-40);
+    --color-border-neutral-quiet: var(--color-neutral-40);
-    --ha-color-border-neutral-normal: var(--ha-color-neutral-50);
+    --color-border-neutral-normal: var(--color-neutral-50);
-    --ha-color-border-neutral-loud: var(--ha-color-neutral-70);
+    --color-border-neutral-loud: var(--color-neutral-70);
 
     /* border danger */
-    --ha-color-border-danger-normal: var(--ha-color-red-50);
+    --color-border-danger-normal: var(--color-red-50);
-    --ha-color-border-danger-loud: var(--ha-color-red-50);
+    --color-border-danger-loud: var(--color-red-50);
 
     /* border warning */
-    --ha-color-border-warning-normal: var(--ha-color-orange-50);
+    --color-border-warning-normal: var(--color-orange-50);
-    --ha-color-border-warning-loud: var(--ha-color-orange-50);
+    --color-border-warning-loud: var(--color-orange-50);
 
     /* fill primary quiet */
-    --ha-color-fill-primary-quiet-resting: var(--ha-color-primary-05);
+    --color-fill-primary-quiet-resting: var(--color-primary-05);
-    --ha-color-fill-primary-quiet-hover: var(--ha-color-primary-10);
+    --color-fill-primary-quiet-hover: var(--color-primary-10);
-    --ha-color-fill-primary-quiet-active: var(--ha-color-primary-05);
+    --color-fill-primary-quiet-active: var(--color-primary-05);
 
     /* fill primary normal */
-    --ha-color-fill-primary-normal-resting: var(--ha-color-primary-10);
+    --color-fill-primary-normal-resting: var(--color-primary-10);
-    --ha-color-fill-primary-normal-hover: var(--ha-color-primary-20);
+    --color-fill-primary-normal-hover: var(--color-primary-20);
-    --ha-color-fill-primary-normal-active: var(--ha-color-primary-10);
+    --color-fill-primary-normal-active: var(--color-primary-10);
 
     /* fill neutral quiet */
-    --ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-05);
+    --color-fill-neutral-quiet-resting: var(--color-neutral-05);
-    --ha-color-fill-neutral-quiet-hover: var(--ha-color-neutral-10);
+    --color-fill-neutral-quiet-hover: var(--color-neutral-10);
-    --ha-color-fill-neutral-quiet-active: var(--ha-color-neutral-00);
+    --color-fill-neutral-quiet-active: var(--color-neutral-00);
 
     /* fill neutral normal */
-    --ha-color-fill-neutral-normal-resting: var(--ha-color-neutral-10);
+    --color-fill-neutral-normal-resting: var(--color-neutral-10);
-    --ha-color-fill-neutral-normal-hover: var(--ha-color-neutral-20);
+    --color-fill-neutral-normal-hover: var(--color-neutral-20);
-    --ha-color-fill-neutral-normal-active: var(--ha-color-neutral-10);
+    --color-fill-neutral-normal-active: var(--color-neutral-10);
 
     /* fill disabled quiet */
-    --ha-color-fill-disabled-quiet-resting: var(--ha-color-neutral-10);
+    --color-fill-disabled-quiet-resting: var(--color-neutral-10);
 
     /* fill disabled normal */
-    --ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-20);
+    --color-fill-disabled-normal-resting: var(--color-neutral-20);
 
     /* fill disabled loud */
-    --ha-color-fill-disabled-loud-resting: var(--ha-color-neutral-30);
+    --color-fill-disabled-loud-resting: var(--color-neutral-30);
 
     /* fill danger quiet */
-    --ha-color-fill-danger-quiet-resting: var(--ha-color-red-05);
+    --color-fill-danger-quiet-resting: var(--color-red-05);
-    --ha-color-fill-danger-quiet-hover: var(--ha-color-red-10);
+    --color-fill-danger-quiet-hover: var(--color-red-10);
-    --ha-color-fill-danger-quiet-active: var(--ha-color-red-05);
+    --color-fill-danger-quiet-active: var(--color-red-05);
 
     /* fill danger normal */
-    --ha-color-fill-danger-normal-resting: var(--ha-color-red-10);
+    --color-fill-danger-normal-resting: var(--color-red-10);
-    --ha-color-fill-danger-normal-hover: var(--ha-color-red-20);
+    --color-fill-danger-normal-hover: var(--color-red-20);
-    --ha-color-fill-danger-normal-active: var(--ha-color-red-10);
+    --color-fill-danger-normal-active: var(--color-red-10);
 
     /* fill danger loud */
-    --ha-color-fill-danger-loud-resting: var(--ha-color-red-40);
+    --color-fill-danger-loud-resting: var(--color-red-40);
-    --ha-color-fill-danger-loud-hover: var(--ha-color-red-30);
+    --color-fill-danger-loud-hover: var(--color-red-30);
-    --ha-color-fill-danger-loud-active: var(--ha-color-red-40);
+    --color-fill-danger-loud-active: var(--color-red-40);
 
     /* fill warning quiet */
-    --ha-color-fill-warning-quiet-resting: var(--ha-color-orange-05);
+    --color-fill-warning-quiet-resting: var(--color-orange-05);
-    --ha-color-fill-warning-quiet-hover: var(--ha-color-orange-10);
+    --color-fill-warning-quiet-hover: var(--color-orange-10);
-    --ha-color-fill-warning-quiet-active: var(--ha-color-orange-05);
+    --color-fill-warning-quiet-active: var(--color-orange-05);
 
     /* fill warning normal */
-    --ha-color-fill-warning-normal-resting: var(--ha-color-orange-10);
+    --color-fill-warning-normal-resting: var(--color-orange-10);
-    --ha-color-fill-warning-normal-hover: var(--ha-color-orange-20);
+    --color-fill-warning-normal-hover: var(--color-orange-20);
-    --ha-color-fill-warning-normal-active: var(--ha-color-orange-10);
+    --color-fill-warning-normal-active: var(--color-orange-10);
 
     /* fill warning loud */
-    --ha-color-fill-warning-loud-resting: var(--ha-color-orange-40);
+    --color-fill-warning-loud-resting: var(--color-orange-40);
-    --ha-color-fill-warning-loud-hover: var(--ha-color-orange-30);
+    --color-fill-warning-loud-hover: var(--color-orange-30);
-    --ha-color-fill-warning-loud-active: var(--ha-color-orange-40);
+    --color-fill-warning-loud-active: var(--color-orange-40);
 
     /* fill success quiet */
-    --ha-color-fill-success-quiet-resting: var(--ha-color-green-05);
+    --color-fill-success-quiet-resting: var(--color-green-05);
-    --ha-color-fill-success-quiet-hover: var(--ha-color-green-10);
+    --color-fill-success-quiet-hover: var(--color-green-10);
-    --ha-color-fill-success-quiet-active: var(--ha-color-green-05);
+    --color-fill-success-quiet-active: var(--color-green-05);
 
     /* fill success normal */
-    --ha-color-fill-success-normal-resting: var(--ha-color-green-10);
+    --color-fill-success-normal-resting: var(--color-green-10);
-    --ha-color-fill-success-normal-hover: var(--ha-color-green-20);
+    --color-fill-success-normal-hover: var(--color-green-20);
-    --ha-color-fill-success-normal-active: var(--ha-color-green-10);
+    --color-fill-success-normal-active: var(--color-green-10);
 
     /* fill success loud */
-    --ha-color-fill-success-loud-resting: var(--ha-color-green-40);
+    --color-fill-success-loud-resting: var(--color-green-40);
-    --ha-color-fill-success-loud-hover: var(--ha-color-green-30);
+    --color-fill-success-loud-hover: var(--color-green-30);
-    --ha-color-fill-success-loud-active: var(--ha-color-green-40);
+    --color-fill-success-loud-active: var(--color-green-40);
 
     /* on primary */
-    --ha-color-on-primary-quiet: var(--ha-color-primary-70);
+    --color-on-primary-quiet: var(--color-primary-70);
-    --ha-color-on-primary-normal: var(--ha-color-primary-60);
+    --color-on-primary-normal: var(--color-primary-60);
 
     /* on neutral */
-    --ha-color-on-neutral-quiet: var(--ha-color-neutral-70);
+    --color-on-neutral-quiet: var(--color-neutral-70);
-    --ha-color-on-neutral-normal: var(--ha-color-neutral-60);
+    --color-on-neutral-normal: var(--color-neutral-60);
-    --ha-color-on-neutral-loud: var(--white-color);
+    --color-on-neutral-loud: var(--white);
 
     /* on disabled */
-    --ha-color-on-disabled-quiet: var(--ha-color-neutral-40);
+    --color-on-disabled-quiet: var(--color-neutral-40);
-    --ha-color-on-disabled-normal: var(--ha-color-neutral-50);
+    --color-on-disabled-normal: var(--color-neutral-50);
-    --ha-color-on-disabled-loud: var(--ha-color-neutral-50);
+    --color-on-disabled-loud: var(--color-neutral-50);
 
     /* on danger */
-    --ha-color-on-danger-quiet: var(--ha-color-red-70);
+    --color-on-danger-quiet: var(--color-red-70);
-    --ha-color-on-danger-normal: var(--ha-color-red-60);
+    --color-on-danger-normal: var(--color-red-60);
-    --ha-color-on-danger-loud: var(--white-color);
+    --color-on-danger-loud: var(--white);
 
     /* on warning */
-    --ha-color-on-warning-quiet: var(--ha-color-orange-70);
+    --color-on-warning-quiet: var(--color-orange-70);
-    --ha-color-on-warning-normal: var(--ha-color-orange-60);
+    --color-on-warning-normal: var(--color-orange-60);
-    --ha-color-on-warning-loud: var(--white-color);
+    --color-on-warning-loud: var(--white);
 
     /* on success */
-    --ha-color-on-success-quiet: var(--ha-color-green-70);
+    --color-on-success-quiet: var(--color-green-70);
-    --ha-color-on-success-normal: var(--ha-color-green-60);
+    --color-on-success-normal: var(--color-green-60);
-    --ha-color-on-success-loud: var(--white-color);
+    --color-on-success-loud: var(--white);
   }
 `;

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

@@ -2,56 +2,56 @@ import { css } from "lit";
 
 export const waColorStyles = css`
   html {
-    --wa-color-brand-fill-loud: var(--ha-color-fill-primary-loud-resting);
+    --wa-color-brand-fill-loud: var(--color-fill-primary-loud-resting);
-    --wa-color-brand-fill-normal: var(--ha-color-fill-primary-normal-resting);
+    --wa-color-brand-fill-normal: var(--color-fill-primary-normal-resting);
-    --wa-color-brand-fill-quiet: var(--ha-color-fill-primary-quiet-resting);
+    --wa-color-brand-fill-quiet: var(--color-fill-primary-quiet-resting);
-    --wa-color-brand-border-loud: var(--ha-color-border-loud);
+    --wa-color-brand-border-loud: var(--color-border-loud);
-    --wa-color-brand-border-normal: var(--ha-color-primary-50);
+    --wa-color-brand-border-normal: var(--color-primary-50);
-    --wa-color-brand-border-quiet: var(--ha-color-border-quiet);
+    --wa-color-brand-border-quiet: var(--color-border-quiet);
-    --wa-color-brand-on-loud: var(--ha-color-on-primary-loud);
+    --wa-color-brand-on-loud: var(--color-on-primary-loud);
-    --wa-color-brand-on-normal: var(--ha-color-on-primary-normal);
+    --wa-color-brand-on-normal: var(--color-on-primary-normal);
-    --wa-color-brand-on-quiet: var(--ha-color-on-primary-quiet);
+    --wa-color-brand-on-quiet: var(--color-on-primary-quiet);
 
-    --wa-color-neutral-fill-loud: var(--ha-color-fill-neutral-loud-resting);
+    --wa-color-neutral-fill-loud: var(--color-fill-neutral-loud-resting);
-    --wa-color-neutral-fill-normal: var(--ha-color-fill-neutral-normal-resting);
+    --wa-color-neutral-fill-normal: var(--color-fill-neutral-normal-resting);
-    --wa-color-neutral-fill-quiet: var(--ha-color-fill-neutral-quiet-resting);
+    --wa-color-neutral-fill-quiet: var(--color-fill-neutral-quiet-resting);
-    --wa-color-neutral-border-loud: var(--ha-color-border-neutral-loud);
+    --wa-color-neutral-border-loud: var(--color-border-neutral-loud);
-    --wa-color-neutral-border-normal: var(--ha-color-border-neutral-normal);
+    --wa-color-neutral-border-normal: var(--color-border-neutral-normal);
-    --wa-color-neutral-border-quiet: var(--ha-color-border-neutral-quiet);
+    --wa-color-neutral-border-quiet: var(--color-border-neutral-quiet);
-    --wa-color-neutral-on-loud: var(--ha-color-on-neutral-loud);
+    --wa-color-neutral-on-loud: var(--color-on-neutral-loud);
-    --wa-color-neutral-on-normal: var(--ha-color-on-neutral-normal);
+    --wa-color-neutral-on-normal: var(--color-on-neutral-normal);
-    --wa-color-neutral-on-quiet: var(--ha-color-on-neutral-quiet);
+    --wa-color-neutral-on-quiet: var(--color-on-neutral-quiet);
 
-    --wa-color-success-fill-loud: var(--ha-color-fill-success-loud-resting);
+    --wa-color-success-fill-loud: var(--color-fill-success-loud-resting);
-    --wa-color-success-fill-normal: var(--ha-color-fill-success-normal-resting);
+    --wa-color-success-fill-normal: var(--color-fill-success-normal-resting);
-    --wa-color-success-fill-quiet: var(--ha-color-fill-success-quiet-resting);
+    --wa-color-success-fill-quiet: var(--color-fill-success-quiet-resting);
-    --wa-color-success-border-loud: var(--ha-color-border-success-loud);
+    --wa-color-success-border-loud: var(--color-border-success-loud);
-    --wa-color-success-border-normal: var(--ha-color-border-success-normal);
+    --wa-color-success-border-normal: var(--color-border-success-normal);
-    --wa-color-success-border-quiet: var(--ha-color-border-success-quiet);
+    --wa-color-success-border-quiet: var(--color-border-success-quiet);
-    --wa-color-success-on-loud: var(--ha-color-on-success-loud);
+    --wa-color-success-on-loud: var(--color-on-success-loud);
-    --wa-color-success-on-normal: var(--ha-color-on-success-normal);
+    --wa-color-success-on-normal: var(--color-on-success-normal);
-    --wa-color-success-on-quiet: var(--ha-color-on-success-quiet);
+    --wa-color-success-on-quiet: var(--color-on-success-quiet);
 
-    --wa-color-warning-fill-loud: var(--ha-color-fill-warning-loud-resting);
+    --wa-color-warning-fill-loud: var(--color-fill-warning-loud-resting);
-    --wa-color-warning-fill-normal: var(--ha-color-fill-warning-normal-resting);
+    --wa-color-warning-fill-normal: var(--color-fill-warning-normal-resting);
-    --wa-color-warning-fill-quiet: var(--ha-color-fill-warning-quiet-resting);
+    --wa-color-warning-fill-quiet: var(--color-fill-warning-quiet-resting);
-    --wa-color-warning-border-loud: var(--ha-color-border-warning-loud);
+    --wa-color-warning-border-loud: var(--color-border-warning-loud);
-    --wa-color-warning-border-normal: var(--ha-color-border-warning-normal);
+    --wa-color-warning-border-normal: var(--color-border-warning-normal);
-    --wa-color-warning-border-quiet: var(--ha-color-border-warning-quiet);
+    --wa-color-warning-border-quiet: var(--color-border-warning-quiet);
-    --wa-color-warning-on-loud: var(--ha-color-on-warning-loud);
+    --wa-color-warning-on-loud: var(--color-on-warning-loud);
-    --wa-color-warning-on-normal: var(--ha-color-on-warning-normal);
+    --wa-color-warning-on-normal: var(--color-on-warning-normal);
-    --wa-color-warning-on-quiet: var(--ha-color-on-warning-quiet);
+    --wa-color-warning-on-quiet: var(--color-on-warning-quiet);
 
-    --wa-color-danger-fill-loud: var(--ha-color-fill-danger-loud-resting);
+    --wa-color-danger-fill-loud: var(--color-fill-danger-loud-resting);
-    --wa-color-danger-fill-normal: var(--ha-color-fill-danger-normal-resting);
+    --wa-color-danger-fill-normal: var(--color-fill-danger-normal-resting);
-    --wa-color-danger-fill-quiet: var(--ha-color-fill-danger-quiet-resting);
+    --wa-color-danger-fill-quiet: var(--color-fill-danger-quiet-resting);
-    --wa-color-danger-border-loud: var(--ha-color-border-danger-loud);
+    --wa-color-danger-border-loud: var(--color-border-danger-loud);
-    --wa-color-danger-border-normal: var(--ha-color-border-danger-normal);
+    --wa-color-danger-border-normal: var(--color-border-danger-normal);
-    --wa-color-danger-border-quiet: var(--ha-color-border-danger-quiet);
+    --wa-color-danger-border-quiet: var(--color-border-danger-quiet);
-    --wa-color-danger-on-loud: var(--ha-color-on-danger-loud);
+    --wa-color-danger-on-loud: var(--color-on-danger-loud);
-    --wa-color-danger-on-normal: var(--ha-color-on-danger-normal);
+    --wa-color-danger-on-normal: var(--color-on-danger-normal);
-    --wa-color-danger-on-quiet: var(--ha-color-on-danger-quiet);
+    --wa-color-danger-on-quiet: var(--color-on-danger-quiet);
 
-    --wa-focus-ring-color: var(--ha-color-neutral-60);
+    --wa-focus-ring-color: var(--color-neutral-60);
   }
 `;

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 {
-    --ha-border-width-sm: 1px;
-    --ha-border-width-md: 2px;
-    --ha-border-width-lg: 3px;
-
-    --ha-border-radius-sm: 4px;
-    --ha-border-radius-md: 8px;
-    --ha-border-radius-lg: 12px;
-    --ha-border-radius-xl: 16px;
-    --ha-border-radius-2xl: 24px;
-    --ha-border-radius-3xl: 28px;
-    --ha-border-radius-4xl: 32px;
-    --ha-border-radius-5xl: 36px;
-    --ha-border-radius-pill: 9999px;
-    --ha-border-radius-circle: 50%;
-    --ha-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."
         },
@@ -2275,9 +2275,9 @@
         },
         "ai_task": {
           "header": "AI suggestions",
-          "description": "Home Assistant can use generative AI to help you with tasks. Look for the button with the {button} icon throughout Home Assistant to get suggestions. Select an AI task entity to use this feature.",
+          "description": "Home Assistant can use generative AI to help you with tasks like writing automations, creating scripts, and more. Look for the button with the {button} icon throughout Home Assistant to get suggestions.",
           "gen_data_header": "Data generation tasks",
-          "gen_data_description": "Suggest automation names."
+          "gen_data_description": "Suggest automation names or dashboards."
         },
         "category": {
           "caption": "Categories",
@@ -4418,9 +4418,9 @@
                   "no_conditions": "[%key:ui::panel::config::devices::automation::conditions::no_conditions%]",
                   "sequence": "Actions",
                   "description": {
-                    "picker": "Choose what to do based on conditions (Similar to If-then, but more powerful).",
+                    "picker": "Choose what to do based on conditions (Similar to If-Then, but more powerful).",
-                    "full": "Choose {number, plural,\n one {an option}\n other{between {number} options}\n}",
+                    "full": "Choose {number, plural,\n one {an action}\n other{between {number} actions}\n}",
-                    "no_action": "Choose an option"
+                    "no_action": "Choose an action"
                   }
                 },
                 "if": {
@@ -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",
+          "emmc_lifetime_used": "eMMC 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.",
           "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":
+"@module-federation/error-codes@npm:0.17.0":
-  version: 0.17.1
+  version: 0.17.0
-  resolution: "@module-federation/error-codes@npm:0.17.1"
+  resolution: "@module-federation/error-codes@npm:0.17.0"
-  checksum: 10/5f5f02a90a423479c84e4ff4398a3a9e31b66bd545e7c978ecb8a417f33162b86e749356baab14c006e741c9cebae549335a4c99e94ce7ef54210269fdf74f7f
+  checksum: 10/24fc0147737415b1834a612911bd31bab682a1b165c3ea588fa2a9c3052bbbd26609be59c4ec67d902253a791a57fe1b1dcfa2a9964c9dd91bc97ac91b6d6f5d
   languageName: node
   linkType: hard
 
-"@module-federation/runtime-core@npm:0.17.1":
+"@module-federation/runtime-core@npm:0.17.0":
-  version: 0.17.1
+  version: 0.17.0
-  resolution: "@module-federation/runtime-core@npm:0.17.1"
+  resolution: "@module-federation/runtime-core@npm:0.17.0"
   dependencies:
-    "@module-federation/error-codes": "npm:0.17.1"
+    "@module-federation/error-codes": "npm:0.17.0"
-    "@module-federation/sdk": "npm:0.17.1"
+    "@module-federation/sdk": "npm:0.17.0"
-  checksum: 10/b0c945379bde13af84ceb833e3bfe3c8cf11fd265af0ad7640a1506017529458f408a4a3f1bd0f4b5983da71438913d5c25ed25e20908eb1f789bd1483616650
+  checksum: 10/0378bb5b4080f9c7ddbcaff7b2259f7e3630cc2cebb41a667d5d3db6cf6c81a7ad3c7c089a99065e4c99e3b04ae29e6fc1715cb7c50c9d515ed31d7b9cf74cf4
   languageName: node
   linkType: hard
 
-"@module-federation/runtime-tools@npm:0.17.1":
+"@module-federation/runtime-tools@npm:0.17.0":
-  version: 0.17.1
+  version: 0.17.0
-  resolution: "@module-federation/runtime-tools@npm:0.17.1"
+  resolution: "@module-federation/runtime-tools@npm:0.17.0"
   dependencies:
-    "@module-federation/runtime": "npm:0.17.1"
+    "@module-federation/runtime": "npm:0.17.0"
-    "@module-federation/webpack-bundler-runtime": "npm:0.17.1"
+    "@module-federation/webpack-bundler-runtime": "npm:0.17.0"
-  checksum: 10/2e183e357b644dbe015d0e51df3fe601852ca79ffe3a30c582eee7a2050d7600eb3253f5de15e476c60741d0a1dd70add1ade7b5a3537cd2ee12bfee286284ea
+  checksum: 10/330b145a37065d0fd99445e7dbd745b6dee4d739b54547bbd9c5cacd83cbbd4ab4ae0d0c1ffd3bc27370e917bae491176b78fd10002b3112f4b2e05c7c36db11
   languageName: node
   linkType: hard
 
-"@module-federation/runtime@npm:0.17.1":
+"@module-federation/runtime@npm:0.17.0":
-  version: 0.17.1
+  version: 0.17.0
-  resolution: "@module-federation/runtime@npm:0.17.1"
+  resolution: "@module-federation/runtime@npm:0.17.0"
   dependencies:
-    "@module-federation/error-codes": "npm:0.17.1"
+    "@module-federation/error-codes": "npm:0.17.0"
-    "@module-federation/runtime-core": "npm:0.17.1"
+    "@module-federation/runtime-core": "npm:0.17.0"
-    "@module-federation/sdk": "npm:0.17.1"
+    "@module-federation/sdk": "npm:0.17.0"
-  checksum: 10/f5405968dff4fa2cf510127701ec1722105f44298fd09eafeecead450b7bb95a05450749157fe2fc39caf6241bec9e45caa9a55375b48e7f195db84799a8df0c
+  checksum: 10/442ac331316d727db2fcfe68017f10fefb550234213f68053b9080cb0538e578e8ee32e75a9233af61cbd785cb40325556ebc13952e14fe61bd328da75dcfbb3
   languageName: node
   linkType: hard
 
-"@module-federation/sdk@npm:0.17.1":
+"@module-federation/sdk@npm:0.17.0":
-  version: 0.17.1
+  version: 0.17.0
-  resolution: "@module-federation/sdk@npm:0.17.1"
+  resolution: "@module-federation/sdk@npm:0.17.0"
-  checksum: 10/daaaa49ed900c00a69641130cf673ad5d5b8623d82fb4bd03a67c839a6da760a0a5ae29b836ba66eeb95ee5392e558588ffd987a2c00b05c2b0a7c5039ed042d
+  checksum: 10/fec4e4243953274368ae16d668cd7fba9bbc01c7e38954f2a8e1261dd6159828ba3471c1a160092dde86ebe32a5d824abe75d1645f0155b2127a9f50518e7b40
   languageName: node
   linkType: hard
 
-"@module-federation/webpack-bundler-runtime@npm:0.17.1":
+"@module-federation/webpack-bundler-runtime@npm:0.17.0":
-  version: 0.17.1
+  version: 0.17.0
-  resolution: "@module-federation/webpack-bundler-runtime@npm:0.17.1"
+  resolution: "@module-federation/webpack-bundler-runtime@npm:0.17.0"
   dependencies:
-    "@module-federation/runtime": "npm:0.17.1"
+    "@module-federation/runtime": "npm:0.17.0"
-    "@module-federation/sdk": "npm:0.17.1"
+    "@module-federation/sdk": "npm:0.17.0"
-  checksum: 10/72e5030529dbc53df6271fa78bdb63976d0601fe9fde5105f8a7325e0fa296bc35277b9b084e52995cd314b89e12d33f8b869c1d63a13231c2948d4c741e72fd
+  checksum: 10/ce3e9dd45a16fb62f1645105cce6d19f1f62a2b68c65c8835f69bf9a2729cebac23d8a9b046c5ea53e974d2df025011e746ab95e0086237d24124bddd78cb40c
   languageName: node
   linkType: hard
 
@@ -3964,92 +3964,92 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rspack/binding-darwin-arm64@npm:1.4.11":
+"@rspack/binding-darwin-arm64@npm:1.4.10":
-  version: 1.4.11
+  version: 1.4.10
-  resolution: "@rspack/binding-darwin-arm64@npm:1.4.11"
+  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":
+"@rspack/binding-darwin-x64@npm:1.4.10":
-  version: 1.4.11
+  version: 1.4.10
-  resolution: "@rspack/binding-darwin-x64@npm:1.4.11"
+  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":
+"@rspack/binding-linux-arm64-gnu@npm:1.4.10":
-  version: 1.4.11
+  version: 1.4.10
-  resolution: "@rspack/binding-linux-arm64-gnu@npm:1.4.11"
+  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":
+"@rspack/binding-linux-arm64-musl@npm:1.4.10":
-  version: 1.4.11
+  version: 1.4.10
-  resolution: "@rspack/binding-linux-arm64-musl@npm:1.4.11"
+  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":
+"@rspack/binding-linux-x64-gnu@npm:1.4.10":
-  version: 1.4.11
+  version: 1.4.10
-  resolution: "@rspack/binding-linux-x64-gnu@npm:1.4.11"
+  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":
+"@rspack/binding-linux-x64-musl@npm:1.4.10":
-  version: 1.4.11
+  version: 1.4.10
-  resolution: "@rspack/binding-linux-x64-musl@npm:1.4.11"
+  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":
+"@rspack/binding-wasm32-wasi@npm:1.4.10":
-  version: 1.4.11
+  version: 1.4.10
-  resolution: "@rspack/binding-wasm32-wasi@npm:1.4.11"
+  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":
+"@rspack/binding-win32-arm64-msvc@npm:1.4.10":
-  version: 1.4.11
+  version: 1.4.10
-  resolution: "@rspack/binding-win32-arm64-msvc@npm:1.4.11"
+  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":
+"@rspack/binding-win32-ia32-msvc@npm:1.4.10":
-  version: 1.4.11
+  version: 1.4.10
-  resolution: "@rspack/binding-win32-ia32-msvc@npm:1.4.11"
+  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":
+"@rspack/binding-win32-x64-msvc@npm:1.4.10":
-  version: 1.4.11
+  version: 1.4.10
-  resolution: "@rspack/binding-win32-x64-msvc@npm:1.4.11"
+  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":
+"@rspack/binding@npm:1.4.10":
-  version: 1.4.11
+  version: 1.4.10
-  resolution: "@rspack/binding@npm:1.4.11"
+  resolution: "@rspack/binding@npm:1.4.10"
   dependencies:
-    "@rspack/binding-darwin-arm64": "npm:1.4.11"
+    "@rspack/binding-darwin-arm64": "npm:1.4.10"
-    "@rspack/binding-darwin-x64": "npm:1.4.11"
+    "@rspack/binding-darwin-x64": "npm:1.4.10"
-    "@rspack/binding-linux-arm64-gnu": "npm:1.4.11"
+    "@rspack/binding-linux-arm64-gnu": "npm:1.4.10"
-    "@rspack/binding-linux-arm64-musl": "npm:1.4.11"
+    "@rspack/binding-linux-arm64-musl": "npm:1.4.10"
-    "@rspack/binding-linux-x64-gnu": "npm:1.4.11"
+    "@rspack/binding-linux-x64-gnu": "npm:1.4.10"
-    "@rspack/binding-linux-x64-musl": "npm:1.4.11"
+    "@rspack/binding-linux-x64-musl": "npm:1.4.10"
-    "@rspack/binding-wasm32-wasi": "npm:1.4.11"
+    "@rspack/binding-wasm32-wasi": "npm:1.4.10"
-    "@rspack/binding-win32-arm64-msvc": "npm:1.4.11"
+    "@rspack/binding-win32-arm64-msvc": "npm:1.4.10"
-    "@rspack/binding-win32-ia32-msvc": "npm:1.4.11"
+    "@rspack/binding-win32-ia32-msvc": "npm:1.4.10"
-    "@rspack/binding-win32-x64-msvc": "npm:1.4.11"
+    "@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":
+"@rspack/cli@npm:1.4.10":
-  version: 1.4.11
+  version: 1.4.10
-  resolution: "@rspack/cli@npm:1.4.11"
+  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":
+"@rspack/core@npm:1.4.10":
-  version: 1.4.11
+  version: 1.4.10
-  resolution: "@rspack/core@npm:1.4.11"
+  resolution: "@rspack/core@npm:1.4.10"
   dependencies:
-    "@module-federation/runtime-tools": "npm:0.17.1"
+    "@module-federation/runtime-tools": "npm:0.17.0"
-    "@rspack/binding": "npm:1.4.11"
+    "@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":
+"@types/luxon@npm:3.6.2":
-  version: 3.7.1
+  version: 3.6.2
-  resolution: "@types/luxon@npm:3.7.1"
+  resolution: "@types/luxon@npm:3.6.2"
-  checksum: 10/c7bc164c278393ea0be938f986c74b4cddfab9013b1aff4495b016f771ded1d5b7b7b4825b2c7f0b8799edce19c5f531c28ff434ab3dedf994ac2d99a20fd4c4
+  checksum: 10/73ca30059e0b1e352ce3a208837bc042e0bae9cf6e5b42f63de9ddfe15348a9e9bf9fcde3d4034038be24cb24adc579ae984cadff3bf70432e54fed1ad249d12
   languageName: node
   linkType: hard
 
@@ -7540,13 +7540,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"echarts@npm:6.0.0":
+"echarts@npm:5.6.0":
-  version: 6.0.0
+  version: 5.6.0
-  resolution: "echarts@npm:6.0.0"
+  resolution: "echarts@npm:5.6.0"
   dependencies:
     tslib: "npm:2.3.0"
-    zrender: "npm:6.0.0"
+    zrender: "npm:5.6.1"
-  checksum: 10/8dbb160cf22e99a2bce04174db756b73e52ba5c00048901c5dbda0c10e6e7b514e5344daa49aa2cdd9c620c9dcc2f4eb15c0614bb2d8a97d9d33e17552ae3655
+  checksum: 10/e73344abb777fd8401c0b89a5d83b65c7a81a11540e2047d51f4aae9419baf4dc2524a5d9561f9ca0fe8d6b432c58b7a1d518f2a4338041046506db8257a1332
   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/cli": "npm:1.4.10"
-    "@rspack/core": "npm:1.4.11"
+    "@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"
@@ -9457,7 +9457,7 @@ __metadata:
     deep-freeze: "npm:0.0.1"
     del: "npm:8.0.0"
     dialog-polyfill: "npm:0.5.6"
-    echarts: "npm:6.0.0"
+    echarts: "npm:5.6.0"
     element-internals-polyfill: "npm:3.0.2"
     eslint: "npm:9.32.0"
     eslint-config-airbnb-base: "npm:15.0.0"
@@ -9490,7 +9490,7 @@ __metadata:
     leaflet: "npm:1.9.4"
     leaflet-draw: "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch"
     leaflet.markercluster: "npm:1.5.3"
-    lint-staged: "npm:16.1.4"
+    lint-staged: "npm:16.1.2"
     lit: "npm:3.3.1"
     lit-analyzer: "npm:2.0.3"
     lit-html: "npm:3.3.1"
@@ -9498,7 +9498,7 @@ __metadata:
     lodash.template: "npm:4.5.0"
     luxon: "npm:3.7.1"
     map-stream: "npm:0.0.7"
-    marked: "npm:16.1.2"
+    marked: "npm:16.1.1"
     memoize-one: "npm:6.0.0"
     node-vibrant: "npm:4.0.3"
     object-hash: "npm:3.0.0"
@@ -10869,15 +10869,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lint-staged@npm:16.1.4":
+"lint-staged@npm:16.1.2":
-  version: 16.1.4
+  version: 16.1.2
-  resolution: "lint-staged@npm:16.1.4"
+  resolution: "lint-staged@npm:16.1.2"
   dependencies:
     chalk: "npm:^5.4.1"
     commander: "npm:^14.0.0"
     debug: "npm:^4.4.1"
     lilconfig: "npm:^3.1.3"
-    listr2: "npm:^9.0.1"
+    listr2: "npm:^8.3.3"
     micromatch: "npm:^4.0.8"
     nano-spawn: "npm:^1.0.2"
     pidtree: "npm:^0.6.0"
@@ -10885,13 +10885,13 @@ __metadata:
     yaml: "npm:^2.8.0"
   bin:
     lint-staged: bin/lint-staged.js
-  checksum: 10/71330be72e1ca37715f4098eefdc634c6cb4948323ba1e88717b11376f18d8add9b851e5289f0814f10d25aa379aa77efba73ef0b717931632b8f6aae6c3f61d
+  checksum: 10/90df77c2f59cdc5ebeb8a60767f07025a8aed9161f604fea6cf1ca895ff3b56995a00145a3e0b5c0bf22e8f667a6182256b68e001e5f3118e46a3c5150bede82
   languageName: node
   linkType: hard
 
-"listr2@npm:^9.0.1":
+"listr2@npm:^8.3.3":
-  version: 9.0.1
+  version: 8.3.3
-  resolution: "listr2@npm:9.0.1"
+  resolution: "listr2@npm:8.3.3"
   dependencies:
     cli-truncate: "npm:^4.0.0"
     colorette: "npm:^2.0.20"
@@ -10899,7 +10899,7 @@ __metadata:
     log-update: "npm:^6.1.0"
     rfdc: "npm:^1.4.1"
     wrap-ansi: "npm:^9.0.0"
-  checksum: 10/ac5f98317fe17588d304bb4dce47ea22892f223511948656f588c5ab47b99d5d97ca4b812b4fb1237db8ec8d86a504875d8d6a0bb24c877553537eab44941983
+  checksum: 10/92f1bb60e9a0f4fed9bff89fbab49d80fc889d29cf47c0a612f5a62a036dead49d3f697d3a79e36984768529bd3bfacb3343859eafceba179a8e66c034d99300
   languageName: node
   linkType: hard
 
@@ -11187,12 +11187,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"marked@npm:16.1.2":
+"marked@npm:16.1.1":
-  version: 16.1.2
+  version: 16.1.1
-  resolution: "marked@npm:16.1.2"
+  resolution: "marked@npm:16.1.1"
   bin:
     marked: bin/marked.js
-  checksum: 10/190d9b206f05d87a7acac3b50ab19505878297971a0c5652a9d4fa2b022407f22d2b79e1aa1e9f23a32c0158b1f5852ad33da2e83cc12100116a8fc0afc2b17e
+  checksum: 10/9f4d2d8f862e1d874f03f1b8614fbf859ae788b4a1b4174be83a65c8ea5ecabf0c991c455dcb6b650e7106fb5b65a94865b9de45667bb2471ca2272e1798971d
   languageName: node
   linkType: hard
 
@@ -16135,12 +16135,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zrender@npm:6.0.0":
+"zrender@npm:5.6.1":
-  version: 6.0.0
+  version: 5.6.1
-  resolution: "zrender@npm:6.0.0"
+  resolution: "zrender@npm:5.6.1"
   dependencies:
     tslib: "npm:2.3.0"
-  checksum: 10/d7b6572ebe400d40d9dc6e066a3a5841d4da1fdea3a9c1fd605239e116ffe05553002a351cbb236bcfbf516a41d3bd67f85ef39a43ccc7ffdc5b70a0ceec6aa8
+  checksum: 10/25dfd476be243f051614f131675855d184eb05e8b9a39dc41146a3a553a17aad5ceba77e166d525be9c4adc2bb237c56dfdfb3456667940bbeddb05eef3deac7
   languageName: node
   linkType: hard