Use large width on system log dialogs (#29879 )

Revert "Add render icon property to ha-control-select-menu"
This reverts commit b23cf8eba4.
2026-02-27 11:57:46 +00:00 · 2026-02-27 12:46:10 +01:00 · 2026-02-27 12:21:23 +01:00 · 2026-02-27 12:20:52 +01:00 · 2026-02-27 11:18:49 +01:00 · 2026-02-27 09:11:28 +01:00
30 changed files with 537 additions and 544 deletions
--- a/gallery/src/pages/components/ha-adaptive-dialog.ts
+++ b/gallery/src/pages/components/ha-adaptive-dialog.ts
@@ -515,6 +515,14 @@ export class DemoHaAdaptiveDialog extends LitElement {
              <td><code>--ha-dialog-surface-background</code></td>
              <td>Dialog/sheet background color.</td>
            </tr>
+            <tr>
+              <td><code>--ha-dialog-surface-backdrop-filter</code></td>
+              <td>Dialog/sheet surface backdrop filter.</td>
+            </tr>
+            <tr>
+              <td><code>--dialog-box-shadow</code></td>
+              <td>Dialog surface box shadow (dialog mode only).</td>
+            </tr>
            <tr>
              <td><code>--ha-dialog-border-radius</code></td>
              <td>Border radius of the dialog surface (dialog mode only).</td>
@@ -527,6 +535,34 @@ export class DemoHaAdaptiveDialog extends LitElement {
              <td><code>--ha-dialog-hide-duration</code></td>
              <td>Hide animation duration (dialog mode only).</td>
            </tr>
+            <tr>
+              <td><code>--ha-dialog-scrim-backdrop-filter</code></td>
+              <td>Dialog/sheet scrim backdrop filter.</td>
+            </tr>
+            <tr>
+              <td><code>--dialog-backdrop-filter</code></td>
+              <td>Dialog/sheet scrim backdrop filter (legacy fallback).</td>
+            </tr>
+            <tr>
+              <td><code>--mdc-dialog-scrim-color</code></td>
+              <td>Dialog/sheet scrim color (legacy compatibility).</td>
+            </tr>
+            <tr>
+              <td><code>--ha-bottom-sheet-surface-background</code></td>
+              <td>Bottom sheet background color (sheet mode only).</td>
+            </tr>
+            <tr>
+              <td><code>--ha-bottom-sheet-surface-backdrop-filter</code></td>
+              <td>Bottom sheet surface backdrop filter (sheet mode only).</td>
+            </tr>
+            <tr>
+              <td><code>--ha-bottom-sheet-scrim-backdrop-filter</code></td>
+              <td>Bottom sheet scrim backdrop filter (sheet mode only).</td>
+            </tr>
+            <tr>
+              <td><code>--ha-bottom-sheet-scrim-color</code></td>
+              <td>Bottom sheet scrim color (sheet mode only).</td>
+            </tr>
          </tbody>
        </table>

--- a/gallery/src/pages/components/ha-dialog.ts
+++ b/gallery/src/pages/components/ha-dialog.ts
@@ -380,13 +380,29 @@ export class DemoHaDialog extends LitElement {
              <td><code>--ha-dialog-surface-background</code></td>
              <td>Dialog background color.</td>
            </tr>
+            <tr>
+              <td><code>--ha-dialog-surface-backdrop-filter</code></td>
+              <td>Backdrop filter applied to the dialog surface.</td>
+            </tr>
+            <tr>
+              <td><code>--dialog-box-shadow</code></td>
+              <td>Dialog surface box shadow.</td>
+            </tr>
            <tr>
              <td><code>--ha-dialog-border-radius</code></td>
              <td>Border radius of the dialog surface.</td>
            </tr>
            <tr>
-              <td><code>--dialog-z-index</code></td>
-              <td>Z-index for the dialog.</td>
+              <td><code>--ha-dialog-scrim-backdrop-filter</code></td>
+              <td>Backdrop filter applied to the dialog scrim.</td>
+            </tr>
+            <tr>
+              <td><code>--dialog-backdrop-filter</code></td>
+              <td>Legacy fallback for the dialog scrim backdrop filter.</td>
+            </tr>
+            <tr>
+              <td><code>--mdc-dialog-scrim-color</code></td>
+              <td>Dialog scrim color (legacy compatibility).</td>
            </tr>
            <tr>
              <td><code>--dialog-surface-margin-top</code></td>
--- a/package.json
+++ b/package.json
@@ -149,7 +149,7 @@
    "@babel/plugin-transform-runtime": "7.29.0",
    "@babel/preset-env": "7.29.0",
    "@bundle-stats/plugin-webpack-filter": "4.21.10",
-    "@html-eslint/eslint-plugin": "0.56.0",
+    "@html-eslint/eslint-plugin": "0.57.0",
    "@lokalise/node-api": "15.6.1",
    "@octokit/auth-oauth-device": "8.0.3",
    "@octokit/plugin-retry": "8.1.0",
@@ -214,7 +214,7 @@
    "terser-webpack-plugin": "5.3.16",
    "ts-lit-plugin": "2.0.2",
    "typescript": "5.9.3",
-    "typescript-eslint": "8.56.0",
+    "typescript-eslint": "8.56.1",
    "vite-tsconfig-paths": "6.1.1",
    "vitest": "4.0.18",
    "webpack-stats-plugin": "1.1.3",
--- a/src/components/ha-adaptive-dialog.ts
+++ b/src/components/ha-adaptive-dialog.ts
@@ -31,9 +31,18 @@ type DialogSheetMode = "dialog" | "bottom-sheet";
 * @slot footer - Dialog/sheet footer content.
 *
 * @cssprop --ha-dialog-surface-background - Dialog/sheet background color.
+ * @cssprop --ha-dialog-surface-backdrop-filter - Dialog/sheet backdrop filter.
+ * @cssprop --dialog-box-shadow - Dialog box shadow (dialog mode only).
 * @cssprop --ha-dialog-border-radius - Border radius of the dialog surface (dialog mode only).
 * @cssprop --ha-dialog-show-duration - Show animation duration (dialog mode only).
 * @cssprop --ha-dialog-hide-duration - Hide animation duration (dialog mode only).
+ * @cssprop --ha-dialog-scrim-backdrop-filter - Dialog/sheet scrim backdrop filter.
+ * @cssprop --dialog-backdrop-filter - Dialog/sheet scrim backdrop filter (legacy).
+ * @cssprop --mdc-dialog-scrim-color - Dialog/sheet scrim color (legacy).
+ * @cssprop --ha-bottom-sheet-surface-background - Bottom sheet background color (sheet mode only).
+ * @cssprop --ha-bottom-sheet-surface-backdrop-filter - Bottom sheet backdrop filter (sheet mode only).
+ * @cssprop --ha-bottom-sheet-scrim-backdrop-filter - Bottom sheet scrim backdrop filter (sheet mode only).
+ * @cssprop --ha-bottom-sheet-scrim-color - Bottom sheet scrim color (sheet mode only).
 *
 * @attr {boolean} open - Controls the dialog/sheet open state.
 * @attr {("alert"|"standard")} type - Dialog type (dialog mode only). Defaults to "standard".
--- a/src/components/ha-bottom-sheet.ts
+++ b/src/components/ha-bottom-sheet.ts
@@ -25,6 +25,27 @@ const SWIPE_LOCKED_COMPONENTS = new Set([

 const SWIPE_LOCKED_CLASSES = new Set(["volume-slider-container", "forecast"]);

+/**
+ * Home Assistant bottom sheet component.
+ *
+ * @element ha-bottom-sheet
+ * @extends {LitElement}
+ *
+ * @cssprop --ha-bottom-sheet-height - Preferred height of the bottom sheet.
+ * @cssprop --ha-bottom-sheet-max-height - Maximum height of the bottom sheet.
+ * @cssprop --ha-bottom-sheet-max-width - Maximum width of the bottom sheet.
+ * @cssprop --ha-bottom-sheet-border-radius - Top border radius of the bottom sheet.
+ * @cssprop --ha-bottom-sheet-surface-background - Bottom sheet background color.
+ * @cssprop --ha-bottom-sheet-surface-backdrop-filter - Bottom sheet surface backdrop filter.
+ * @cssprop --ha-bottom-sheet-scrim-backdrop-filter - Bottom sheet scrim backdrop filter.
+ * @cssprop --ha-bottom-sheet-scrim-color - Bottom sheet scrim color.
+ *
+ * @cssprop --ha-dialog-surface-background - Bottom sheet background color fallback.
+ * @cssprop --ha-dialog-surface-backdrop-filter - Bottom sheet surface backdrop filter fallback.
+ * @cssprop --ha-dialog-scrim-backdrop-filter - Bottom sheet scrim backdrop filter fallback.
+ * @cssprop --dialog-backdrop-filter - Bottom sheet scrim backdrop filter legacy fallback.
+ * @cssprop --mdc-dialog-scrim-color - Bottom sheet scrim color legacy fallback.
+ */
@customElement("ha-bottom-sheet")
 export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
  @property({ attribute: false }) public hass?: HomeAssistant;
@@ -141,6 +162,9 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
  private _handleKeyDown = (ev: KeyboardEvent) => {
    if (ev.key === "Escape") {
      this._escapePressed = true;
+      if (this.preventScrimClose) {
+        ev.preventDefault();
+      }
      ev.stopPropagation();
      (ev.currentTarget as WaDrawer).open = false;
    }
@@ -382,6 +406,26 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
          transform: var(--dialog-transform);
          transition: var(--dialog-transition);
        }
+        wa-drawer::part(dialog)::backdrop {
+          -webkit-backdrop-filter: var(
+            --ha-bottom-sheet-scrim-backdrop-filter,
+            var(
+              --ha-dialog-scrim-backdrop-filter,
+              var(--dialog-backdrop-filter, none)
+            )
+          );
+          backdrop-filter: var(
+            --ha-bottom-sheet-scrim-backdrop-filter,
+            var(
+              --ha-dialog-scrim-backdrop-filter,
+              var(--dialog-backdrop-filter, none)
+            )
+          );
+          background-color: var(
+            --ha-bottom-sheet-scrim-color,
+            var(--mdc-dialog-scrim-color, none)
+          );
+        }
        wa-drawer::part(body) {
          max-width: var(--ha-bottom-sheet-max-width);
          width: 100%;
@@ -396,7 +440,18 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
          );
          background-color: var(
            --ha-bottom-sheet-surface-background,
-            var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
+            var(
+              --ha-dialog-surface-background,
+              var(--card-background-color, var(--ha-color-surface-default))
+            )
+          );
+          -webkit-backdrop-filter: var(
+            --ha-bottom-sheet-surface-backdrop-filter,
+            var(--ha-dialog-surface-backdrop-filter, none)
+          );
+          backdrop-filter: var(
+            --ha-bottom-sheet-surface-backdrop-filter,
+            var(--ha-dialog-surface-backdrop-filter, none)
          );
          padding: var(
            --ha-bottom-sheet-padding,
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -52,7 +52,12 @@ type DialogHideEvent = CustomEvent<{ source?: Element }>;
 * @cssprop --ha-dialog-show-duration - Show animation duration.
 * @cssprop --ha-dialog-hide-duration - Hide animation duration.
 * @cssprop --ha-dialog-surface-background - Dialog background color.
+ * @cssprop --ha-dialog-surface-backdrop-filter - Dialog backdrop filter.
+ * @cssprop --dialog-box-shadow - Dialog box shadow.
 * @cssprop --ha-dialog-border-radius - Border radius of the dialog surface.
+ * @cssprop --ha-dialog-scrim-backdrop-filter - Dialog scrim backdrop filter.
+ * @cssprop --dialog-backdrop-filter - Dialog scrim backdrop filter (legacy).
+ * @cssprop --mdc-dialog-scrim-color - Dialog scrim color (legacy).
 * @cssprop --dialog-surface-margin-top - Top margin for the dialog surface.
 *
 * @attr {boolean} open - Controls the dialog open state.
@@ -239,6 +244,9 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
  private _handleKeyDown(ev: KeyboardEvent) {
    if (ev.key === "Escape") {
      this._escapePressed = true;
+      if (this.preventScrimClose) {
+        ev.preventDefault();
+      }
      ev.stopPropagation();
      (ev.currentTarget as WaDialog).open = false;
    }
@@ -268,10 +276,6 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
          --spacing: var(--dialog-content-padding, var(--ha-space-6));
          --show-duration: var(--ha-dialog-show-duration, 200ms);
          --hide-duration: var(--ha-dialog-hide-duration, 200ms);
-          --ha-dialog-surface-background: var(
-            --card-background-color,
-            var(--ha-color-surface-default)
-          );
          --wa-color-surface-raised: var(
            --ha-dialog-surface-background,
            var(--card-background-color, var(--ha-color-surface-default))
@@ -302,6 +306,12 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
        }

        wa-dialog::part(dialog) {
+          -webkit-backdrop-filter: var(
+            --ha-dialog-surface-backdrop-filter,
+            none
+          );
+          backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
+          box-shadow: var(--dialog-box-shadow, var(--wa-shadow-l));
          color: var(--primary-text-color);
          min-width: var(--width, var(--full-width));
          max-width: var(--width, var(--full-width));
@@ -331,6 +341,18 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
          overflow: hidden;
        }

+        wa-dialog::part(dialog)::backdrop {
+          -webkit-backdrop-filter: var(
+            --ha-dialog-scrim-backdrop-filter,
+            var(--dialog-backdrop-filter, none)
+          );
+          backdrop-filter: var(
+            --ha-dialog-scrim-backdrop-filter,
+            var(--dialog-backdrop-filter, none)
+          );
+          background-color: var(--mdc-dialog-scrim-color, none);
+        }
+
        @media all and (max-width: 450px), all and (max-height: 500px) {
          :host([type="standard"]) {
            --ha-dialog-border-radius: 0;
--- a/src/components/ha-icon-button-toggle.ts
+++ b/src/components/ha-icon-button-toggle.ts
@@ -37,6 +37,9 @@ export class HaIconButtonToggle extends HaIconButton {
        background-color: transparent;
        border: 2px solid var(--primary-text-color);
      }
+      :host([selected]) ha-button::after {
+        opacity: 0;
+      }
      :host([selected]) ha-button::part(base) {
        color: var(--primary-background-color);
        background-color: unset;
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -288,7 +288,7 @@ export class QuickBar extends LitElement {
      <ha-combo-box-item
        tabindex="-1"
        type="button"
-        style="--mdc-icon-size: 32px;"
+        style="--mdc-icon-size: 24px;"
      >
        ${"stateObj" in item && item.stateObj
          ? html`
@@ -302,6 +302,7 @@ export class QuickBar extends LitElement {
            ? html`
                <ha-domain-icon
                  slot="start"
+                  style="margin: var(--ha-space-1);"
                  .hass=${this.hass}
                  .domain=${item.domain}
                  brand-fallback
@@ -319,7 +320,11 @@ export class QuickBar extends LitElement {
                  />
                `
              : item.icon
-                ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
+                ? html`<ha-icon
+                    style="margin: var(--ha-space-1);"
+                    slot="start"
+                    .icon=${item.icon}
+                  ></ha-icon>`
                : "iconColor" in item && item.iconColor
                  ? html`
                      <div
@@ -333,7 +338,11 @@ export class QuickBar extends LitElement {
                      </div>
                    `
                  : html`
-                      <ha-svg-icon slot="start" .path=${iconPath}></ha-svg-icon>
+                      <ha-svg-icon
+                        style="margin: var(--ha-space-1);"
+                        slot="start"
+                        .path=${iconPath}
+                      ></ha-svg-icon>
                    `}
        <span slot="headline">${item.primary}</span>
        ${item.secondary
--- a/src/panels/config/dashboard/ha-config-dashboard.ts
+++ b/src/panels/config/dashboard/ha-config-dashboard.ts
@@ -36,7 +36,7 @@ import { showQuickBar } from "../../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart";
 import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import { haStyle, haStyleScrollbar } from "../../../resources/styles";
+import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { isMac } from "../../../util/is_mac";
@@ -255,90 +255,88 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
          </ha-dropdown-item>
        </ha-dropdown>

-        <div class="content ha-scrollbar">
-          <ha-config-section
-            .narrow=${this.narrow}
-            .isWide=${this.isWide}
-            full-width
-          >
-            ${repairsIssues.length || canInstallUpdates.length
-              ? html`<ha-card outlined>
-                  ${repairsIssues.length
-                    ? html`
-                        <ha-config-repairs
-                          .hass=${this.hass}
-                          .narrow=${this.narrow}
-                          .total=${totalRepairIssues}
-                          .repairsIssues=${repairsIssues}
-                        ></ha-config-repairs>
-                        ${totalRepairIssues > repairsIssues.length
-                          ? html`
-                              <ha-assist-chip
-                                href="/config/repairs"
-                                .label=${this.hass.localize(
-                                  "ui.panel.config.repairs.more_repairs",
-                                  {
-                                    count:
-                                      totalRepairIssues - repairsIssues.length,
-                                  }
-                                )}
-                              >
-                              </ha-assist-chip>
-                            `
-                          : ""}
-                      `
-                    : ""}
-                  ${repairsIssues.length && canInstallUpdates.length
-                    ? html`<hr />`
-                    : ""}
-                  ${canInstallUpdates.length
-                    ? html`
-                        <ha-config-updates
-                          .hass=${this.hass}
-                          .narrow=${this.narrow}
-                          .total=${totalUpdates}
-                          .updateEntities=${canInstallUpdates}
-                          .isInstallable=${true}
-                        ></ha-config-updates>
-                        ${totalUpdates > canInstallUpdates.length
-                          ? html`
-                              <ha-assist-chip
-                                href="/config/updates"
-                                label=${this.hass.localize(
-                                  "ui.panel.config.updates.more_updates",
-                                  {
-                                    count:
-                                      totalUpdates - canInstallUpdates.length,
-                                  }
-                                )}
-                              >
-                              </ha-assist-chip>
-                            `
-                          : ""}
-                      `
-                    : ""}
-                </ha-card>`
-              : ""}
-            ${this._pages(
-              this.cloudStatus,
-              isComponentLoaded(this.hass, "cloud"),
-              this.hass.auth.external?.config.hasSettingsScreen
-            ).map((categoryPages) =>
-              categoryPages.length === 0
-                ? nothing
-                : html`
-                    <ha-card outlined>
-                      <ha-config-navigation
+        <ha-config-section
+          .narrow=${this.narrow}
+          .isWide=${this.isWide}
+          full-width
+        >
+          ${repairsIssues.length || canInstallUpdates.length
+            ? html`<ha-card outlined>
+                ${repairsIssues.length
+                  ? html`
+                      <ha-config-repairs
                        .hass=${this.hass}
                        .narrow=${this.narrow}
-                        .pages=${categoryPages}
-                      ></ha-config-navigation>
-                    </ha-card>
-                  `
-            )}
-            <ha-tip .hass=${this.hass}>${this._tip}</ha-tip>
-          </ha-config-section>
-        </div>
+                        .total=${totalRepairIssues}
+                        .repairsIssues=${repairsIssues}
+                      ></ha-config-repairs>
+                      ${totalRepairIssues > repairsIssues.length
+                        ? html`
+                            <ha-assist-chip
+                              href="/config/repairs"
+                              .label=${this.hass.localize(
+                                "ui.panel.config.repairs.more_repairs",
+                                {
+                                  count:
+                                    totalRepairIssues - repairsIssues.length,
+                                }
+                              )}
+                            >
+                            </ha-assist-chip>
+                          `
+                        : ""}
+                    `
+                  : ""}
+                ${repairsIssues.length && canInstallUpdates.length
+                  ? html`<hr />`
+                  : ""}
+                ${canInstallUpdates.length
+                  ? html`
+                      <ha-config-updates
+                        .hass=${this.hass}
+                        .narrow=${this.narrow}
+                        .total=${totalUpdates}
+                        .updateEntities=${canInstallUpdates}
+                        .isInstallable=${true}
+                      ></ha-config-updates>
+                      ${totalUpdates > canInstallUpdates.length
+                        ? html`
+                            <ha-assist-chip
+                              href="/config/updates"
+                              label=${this.hass.localize(
+                                "ui.panel.config.updates.more_updates",
+                                {
+                                  count:
+                                    totalUpdates - canInstallUpdates.length,
+                                }
+                              )}
+                            >
+                            </ha-assist-chip>
+                          `
+                        : ""}
+                    `
+                  : ""}
+              </ha-card>`
+            : ""}
+          ${this._pages(
+            this.cloudStatus,
+            isComponentLoaded(this.hass, "cloud"),
+            this.hass.auth.external?.config.hasSettingsScreen
+          ).map((categoryPages) =>
+            categoryPages.length === 0
+              ? nothing
+              : html`
+                  <ha-card outlined>
+                    <ha-config-navigation
+                      .hass=${this.hass}
+                      .narrow=${this.narrow}
+                      .pages=${categoryPages}
+                    ></ha-config-navigation>
+                  </ha-card>
+                `
+          )}
+          <ha-tip .hass=${this.hass}>${this._tip}</ha-tip>
+        </ha-config-section>
      </ha-top-app-bar-fixed>
    `;
  }
@@ -394,36 +392,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
  static get styles(): CSSResultGroup {
    return [
      haStyle,
-      haStyleScrollbar,
      css`
-        :host {
-          display: block;
-          height: 100%;
-        }
-
-        ha-top-app-bar-fixed {
-          height: 100%;
-          overflow: hidden;
-        }
-
-        .content {
-          height: calc(
-            100vh - var(--header-height, 0px) - var(
-                --safe-area-inset-top,
-                0px
-              ) - var(--safe-area-inset-bottom, 0px)
-          );
-          height: calc(
-            100dvh - var(--header-height, 0px) - var(
-                --safe-area-inset-top,
-                0px
-              ) - var(--safe-area-inset-bottom, 0px)
-          );
-          padding-bottom: var(--ha-space-5);
-          box-sizing: border-box;
-          overflow-x: hidden;
-        }
-
        :host(:not([narrow])) ha-card:last-child {
          margin-bottom: 24px;
        }
--- a/src/panels/config/logs/dialog-system-log-detail.ts
+++ b/src/panels/config/logs/dialog-system-log-detail.ts
@@ -86,6 +86,7 @@ class DialogSystemLogDetail extends LitElement {
      <ha-dialog
        .hass=${this.hass}
        .open=${this._open}
+        width="large"
        @closed=${this._dialogClosed}
      >
        <span slot="headerTitle">${title}</span>
--- a/src/panels/config/repairs/ha-config-repairs.ts
+++ b/src/panels/config/repairs/ha-config-repairs.ts
@@ -143,8 +143,7 @@ class HaConfigRepairs extends LitElement {
      }
    } else if (
      issue.domain === "vacuum" &&
-      (issue.translation_key === "segments_changed" ||
-        issue.translation_key === "segments_mapping_not_configured")
+      issue.translation_key === "segments_changed"
    ) {
      const data = await fetchRepairsIssueData(
        this.hass.connection,
--- a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
+++ b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
@@ -670,10 +670,10 @@ export class AssistPipelineDebug extends LitElement {
      background-color: var(--light-primary-color);
      color: var(--text-light-primary-color, var(--primary-text-color));
      direction: var(--direction);
-      --primary-text-color: var(
-        --text-light-primary-color,
-        var(--primary-text-color)
-      );
+    }
+
+    .tool_result [slot="header"] {
+      color: var(--text-light-primary-color, var(--primary-text-color));
    }

    .message.user,
--- a/src/panels/energy/strategies/power-view-strategy.ts
+++ b/src/panels/energy/strategies/power-view-strategy.ts
@@ -7,11 +7,7 @@ import type { HomeAssistant } from "../../../types";
 import { DEFAULT_ENERGY_COLLECTION_KEY } from "../ha-panel-energy";
 import { shouldShowFloorsAndAreas } from "./show-floors-and-areas";
 import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
-import {
-  LARGE_SCREEN_CONDITION,
-  SMALL_SCREEN_CONDITION,
-} from "../../lovelace/strategies/helpers/screen-conditions";
-import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
+import type { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";

@customElement("power-view-strategy")
 export class PowerViewStrategy extends ReactiveElement {
@@ -49,22 +45,15 @@ export class PowerViewStrategy extends ReactiveElement {
      (source) => source.type === "gas" && source.stat_rate
    );

-    const tileSection: LovelaceSectionConfig = {
-      type: "grid",
-      cards: [],
-      column_span: 2,
-    };
    const chartsSection: LovelaceSectionConfig = {
      type: "grid",
      cards: [],
-      column_span: 2,
    };
-    const tiles: LovelaceCardConfig[] = [];
+    const badges: LovelaceBadgeConfig[] = [];

    const view: LovelaceViewConfig = {
      type: "sections",
-      sections: [tileSection, chartsSection],
-      max_columns: 2,
+      sections: [chartsSection],
    };

    // No sources configured
@@ -80,11 +69,10 @@ export class PowerViewStrategy extends ReactiveElement {
    }

    if (hasPowerSources) {
-      const card = {
+      badges.push({
        type: "power-total",
        collection_key: collectionKey,
-      };
-      tiles.push(card);
+      });

      chartsSection.cards!.push({
        title: hass.localize("ui.panel.energy.cards.power_sources_graph_title"),
@@ -97,19 +85,17 @@ export class PowerViewStrategy extends ReactiveElement {
    }

    if (hasGasSources) {
-      const card = {
+      badges.push({
        type: "gas-total",
        collection_key: collectionKey,
-      };
-      tiles.push({ ...card });
+      });
    }

    if (hasWaterSources) {
-      const card = {
+      badges.push({
        type: "water-total",
        collection_key: collectionKey,
-      };
-      tiles.push({ ...card });
+      });
    }

    if (hasPowerDevices) {
@@ -148,21 +134,8 @@ export class PowerViewStrategy extends ReactiveElement {
      });
    }

-    tiles.forEach((card) => {
-      tileSection.cards!.push({
-        ...card,
-        grid_options: { columns: 24 / tiles.length },
-      });
-    });
-
-    if (tiles.length > 2) {
-      // On small screens with 3 tiles, show them in 1 column
-      tileSection.visibility = [LARGE_SCREEN_CONDITION];
-      view.sections!.unshift({
-        type: "grid",
-        cards: tiles,
-        visibility: [SMALL_SCREEN_CONDITION],
-      });
+    if (badges.length) {
+      view.badges = badges;
    }

    return view;
--- a/src/panels/lovelace/badges/energy/hui-gas-total-badge.ts
+++ b/src/panels/lovelace/badges/energy/hui-gas-total-badge.ts
@@ -3,11 +3,8 @@ import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../../components/ha-card";
+import "../../../../components/ha-badge";
 import "../../../../components/ha-svg-icon";
-import "../../../../components/tile/ha-tile-container";
-import "../../../../components/tile/ha-tile-icon";
-import "../../../../components/tile/ha-tile-info";
 import type { EnergyData, EnergyPreferences } from "../../../../data/energy";
 import {
  formatFlowRateShort,
@@ -16,18 +13,17 @@ import {
 } from "../../../../data/energy";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../../types";
-import type { LovelaceCard, LovelaceGridOptions } from "../../types";
-import { tileCardStyle } from "../tile/tile-card-style";
-import type { GasTotalCardConfig } from "../types";
+import type { LovelaceBadge } from "../../types";
+import type { GasTotalBadgeConfig } from "../types";

-@customElement("hui-gas-total-card")
-export class HuiGasTotalCard
+@customElement("hui-gas-total-badge")
+export class HuiGasTotalBadge
  extends SubscribeMixin(LitElement)
-  implements LovelaceCard
+  implements LovelaceBadge
 {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @state() private _config?: GasTotalCardConfig;
+  @state() private _config?: GasTotalBadgeConfig;

  @state() private _data?: EnergyData;

@@ -35,7 +31,7 @@ export class HuiGasTotalCard

  protected hassSubscribeRequiredHostProps = ["_config"];

-  public setConfig(config: GasTotalCardConfig): void {
+  public setConfig(config: GasTotalBadgeConfig): void {
    this._config = config;
  }

@@ -49,34 +45,19 @@ export class HuiGasTotalCard
    ];
  }

-  public getCardSize(): Promise<number> | number {
-    return 1;
-  }
-
-  getGridOptions(): LovelaceGridOptions {
-    return {
-      columns: 12,
-      min_columns: 6,
-      rows: 1,
-      min_rows: 1,
-    };
-  }
-
  protected shouldUpdate(changedProps: PropertyValues): boolean {
    if (changedProps.has("_config") || changedProps.has("_data")) {
      return true;
    }

-    // Check if any of the tracked entity states have changed
    if (changedProps.has("hass")) {
      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
      if (!oldHass || !this._entities.size) {
        return true;
      }

-      // Only update if one of our tracked entities changed
      for (const entityId of this._entities) {
-        if (oldHass.states[entityId] !== this.hass.states[entityId]) {
+        if (oldHass.states[entityId] !== this.hass?.states[entityId]) {
          return true;
        }
      }
@@ -122,32 +103,22 @@ export class HuiGasTotalCard
      this.hass.localize("ui.panel.lovelace.cards.energy.gas_total_title");

    return html`
-      <ha-card>
-        <ha-tile-container .interactive=${false}>
-          <ha-tile-icon slot="icon" data-domain="sensor" data-state="active">
-            <ha-svg-icon slot="icon" .path=${mdiFire}></ha-svg-icon>
-          </ha-tile-icon>
-          <ha-tile-info slot="info">
-            <span slot="primary" class="primary">${name}</span>
-            <span slot="secondary" class="secondary">${displayValue}</span>
-          </ha-tile-info>
-        </ha-tile-container>
-      </ha-card>
+      <ha-badge .label=${name}>
+        <ha-svg-icon slot="icon" .path=${mdiFire}></ha-svg-icon>
+        ${displayValue}
+      </ha-badge>
    `;
  }

-  static styles = [
-    tileCardStyle,
-    css`
-      :host {
-        --tile-color: var(--energy-gas-color);
-      }
-    `,
-  ];
+  static styles = css`
+    ha-badge {
+      --badge-color: var(--energy-gas-color);
+    }
+  `;
 }

 declare global {
  interface HTMLElementTagNameMap {
-    "hui-gas-total-card": HuiGasTotalCard;
+    "hui-gas-total-badge": HuiGasTotalBadge;
  }
 }
--- a/src/panels/lovelace/badges/energy/hui-power-total-badge.ts
+++ b/src/panels/lovelace/badges/energy/hui-power-total-badge.ts
@@ -4,11 +4,8 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatNumber } from "../../../../common/number/format_number";
-import "../../../../components/ha-card";
+import "../../../../components/ha-badge";
 import "../../../../components/ha-svg-icon";
-import "../../../../components/tile/ha-tile-container";
-import "../../../../components/tile/ha-tile-icon";
-import "../../../../components/tile/ha-tile-info";
 import type { EnergyData, EnergyPreferences } from "../../../../data/energy";
 import {
  getEnergyDataCollection,
@@ -16,18 +13,17 @@ import {
 } from "../../../../data/energy";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../../types";
-import type { LovelaceCard, LovelaceGridOptions } from "../../types";
-import { tileCardStyle } from "../tile/tile-card-style";
-import type { PowerTotalCardConfig } from "../types";
+import type { LovelaceBadge } from "../../types";
+import type { PowerTotalBadgeConfig } from "../types";

-@customElement("hui-power-total-card")
-export class HuiPowerTotalCard
+@customElement("hui-power-total-badge")
+export class HuiPowerTotalBadge
  extends SubscribeMixin(LitElement)
-  implements LovelaceCard
+  implements LovelaceBadge
 {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @state() private _config?: PowerTotalCardConfig;
+  @state() private _config?: PowerTotalBadgeConfig;

  @state() private _data?: EnergyData;

@@ -35,7 +31,7 @@ export class HuiPowerTotalCard

  protected hassSubscribeRequiredHostProps = ["_config"];

-  public setConfig(config: PowerTotalCardConfig): void {
+  public setConfig(config: PowerTotalBadgeConfig): void {
    this._config = config;
  }

@@ -49,34 +45,19 @@ export class HuiPowerTotalCard
    ];
  }

-  public getCardSize(): Promise<number> | number {
-    return 1;
-  }
-
-  getGridOptions(): LovelaceGridOptions {
-    return {
-      columns: 12,
-      min_columns: 6,
-      rows: 1,
-      min_rows: 1,
-    };
-  }
-
  protected shouldUpdate(changedProps: PropertyValues): boolean {
    if (changedProps.has("_config") || changedProps.has("_data")) {
      return true;
    }

-    // Check if any of the tracked entity states have changed
    if (changedProps.has("hass")) {
      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
      if (!oldHass || !this._entities.size) {
        return true;
      }

-      // Only update if one of our tracked entities changed
      for (const entityId of this._entities) {
-        if (oldHass.states[entityId] !== this.hass.states[entityId]) {
+        if (oldHass.states[entityId] !== this.hass?.states[entityId]) {
          return true;
        }
      }
@@ -94,10 +75,10 @@ export class HuiPowerTotalCard
    this._entities.clear();

    let solar = 0;
-    let from_grid = 0;
-    let to_grid = 0;
-    let from_battery = 0;
-    let to_battery = 0;
+    let fromGrid = 0;
+    let toGrid = 0;
+    let fromBattery = 0;
+    let toBattery = 0;

    prefs.energy_sources.forEach((source) => {
      if (source.type === "solar" && source.stat_rate) {
@@ -105,17 +86,17 @@ export class HuiPowerTotalCard
        if (value > 0) solar += value;
      } else if (source.type === "grid" && source.stat_rate) {
        const value = this._getCurrentPower(source.stat_rate);
-        if (value > 0) from_grid += value;
-        else if (value < 0) to_grid += Math.abs(value);
+        if (value > 0) fromGrid += value;
+        else if (value < 0) toGrid += Math.abs(value);
      } else if (source.type === "battery" && source.stat_rate) {
        const value = this._getCurrentPower(source.stat_rate);
-        if (value > 0) from_battery += value;
-        else if (value < 0) to_battery += Math.abs(value);
+        if (value > 0) fromBattery += value;
+        else if (value < 0) toBattery += Math.abs(value);
      }
    });

-    const used_total = from_grid + solar + from_battery - to_grid - to_battery;
-    return Math.max(0, used_total);
+    const usedTotal = fromGrid + solar + fromBattery - toGrid - toBattery;
+    return Math.max(0, usedTotal);
  }

  protected render() {
@@ -141,35 +122,22 @@ export class HuiPowerTotalCard
      this.hass.localize("ui.panel.lovelace.cards.energy.power_total_title");

    return html`
-      <ha-card>
-        <ha-tile-container .interactive=${false}>
-          <ha-tile-icon slot="icon" data-domain="sensor" data-state="active">
-            <ha-svg-icon
-              slot="icon"
-              .path=${mdiHomeLightningBolt}
-            ></ha-svg-icon>
-          </ha-tile-icon>
-          <ha-tile-info slot="info">
-            <span slot="primary" class="primary">${name}</span>
-            <span slot="secondary" class="secondary">${displayValue}</span>
-          </ha-tile-info>
-        </ha-tile-container>
-      </ha-card>
+      <ha-badge .label=${name}>
+        <ha-svg-icon slot="icon" .path=${mdiHomeLightningBolt}></ha-svg-icon>
+        ${displayValue}
+      </ha-badge>
    `;
  }

-  static styles = [
-    tileCardStyle,
-    css`
-      :host {
-        --tile-color: var(--primary-color);
-      }
-    `,
-  ];
+  static styles = css`
+    ha-badge {
+      --badge-color: var(--primary-color);
+    }
+  `;
 }

 declare global {
  interface HTMLElementTagNameMap {
-    "hui-power-total-card": HuiPowerTotalCard;
+    "hui-power-total-badge": HuiPowerTotalBadge;
  }
 }
--- a/src/panels/lovelace/badges/energy/hui-water-total-badge.ts
+++ b/src/panels/lovelace/badges/energy/hui-water-total-badge.ts
@@ -3,11 +3,8 @@ import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../../components/ha-card";
+import "../../../../components/ha-badge";
 import "../../../../components/ha-svg-icon";
-import "../../../../components/tile/ha-tile-container";
-import "../../../../components/tile/ha-tile-icon";
-import "../../../../components/tile/ha-tile-info";
 import type { EnergyData, EnergyPreferences } from "../../../../data/energy";
 import {
  formatFlowRateShort,
@@ -16,18 +13,17 @@ import {
 } from "../../../../data/energy";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../../types";
-import type { LovelaceCard, LovelaceGridOptions } from "../../types";
-import { tileCardStyle } from "../tile/tile-card-style";
-import type { WaterTotalCardConfig } from "../types";
+import type { LovelaceBadge } from "../../types";
+import type { WaterTotalBadgeConfig } from "../types";

-@customElement("hui-water-total-card")
-export class HuiWaterTotalCard
+@customElement("hui-water-total-badge")
+export class HuiWaterTotalBadge
  extends SubscribeMixin(LitElement)
-  implements LovelaceCard
+  implements LovelaceBadge
 {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @state() private _config?: WaterTotalCardConfig;
+  @state() private _config?: WaterTotalBadgeConfig;

  @state() private _data?: EnergyData;

@@ -35,7 +31,7 @@ export class HuiWaterTotalCard

  protected hassSubscribeRequiredHostProps = ["_config"];

-  public setConfig(config: WaterTotalCardConfig): void {
+  public setConfig(config: WaterTotalBadgeConfig): void {
    this._config = config;
  }

@@ -49,34 +45,19 @@ export class HuiWaterTotalCard
    ];
  }

-  public getCardSize(): Promise<number> | number {
-    return 1;
-  }
-
-  getGridOptions(): LovelaceGridOptions {
-    return {
-      columns: 12,
-      min_columns: 6,
-      rows: 1,
-      min_rows: 1,
-    };
-  }
-
  protected shouldUpdate(changedProps: PropertyValues): boolean {
    if (changedProps.has("_config") || changedProps.has("_data")) {
      return true;
    }

-    // Check if any of the tracked entity states have changed
    if (changedProps.has("hass")) {
      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
      if (!oldHass || !this._entities.size) {
        return true;
      }

-      // Only update if one of our tracked entities changed
      for (const entityId of this._entities) {
-        if (oldHass.states[entityId] !== this.hass.states[entityId]) {
+        if (oldHass.states[entityId] !== this.hass?.states[entityId]) {
          return true;
        }
      }
@@ -122,32 +103,22 @@ export class HuiWaterTotalCard
      this.hass.localize("ui.panel.lovelace.cards.energy.water_total_title");

    return html`
-      <ha-card>
-        <ha-tile-container .interactive=${false}>
-          <ha-tile-icon slot="icon" data-domain="sensor" data-state="active">
-            <ha-svg-icon slot="icon" .path=${mdiWater}></ha-svg-icon>
-          </ha-tile-icon>
-          <ha-tile-info slot="info">
-            <span slot="primary" class="primary">${name}</span>
-            <span slot="secondary" class="secondary">${displayValue}</span>
-          </ha-tile-info>
-        </ha-tile-container>
-      </ha-card>
+      <ha-badge .label=${name}>
+        <ha-svg-icon slot="icon" .path=${mdiWater}></ha-svg-icon>
+        ${displayValue}
+      </ha-badge>
    `;
  }

-  static styles = [
-    tileCardStyle,
-    css`
-      :host {
-        --tile-color: var(--energy-water-color);
-      }
-    `,
-  ];
+  static styles = css`
+    ha-badge {
+      --badge-color: var(--energy-water-color);
+    }
+  `;
 }

 declare global {
  interface HTMLElementTagNameMap {
-    "hui-water-total-card": HuiWaterTotalCard;
+    "hui-water-total-badge": HuiWaterTotalBadge;
  }
 }
--- a/src/panels/lovelace/badges/types.ts
+++ b/src/panels/lovelace/badges/types.ts
@@ -48,3 +48,20 @@ export interface EntityBadgeConfig extends LovelaceBadgeConfig {
   */
  display_type?: DisplayType;
 }
+
+interface EnergyTotalBadgeConfig extends LovelaceBadgeConfig {
+  title?: string;
+  collection_key?: string;
+}
+
+export interface PowerTotalBadgeConfig extends EnergyTotalBadgeConfig {
+  type: "power-total";
+}
+
+export interface WaterTotalBadgeConfig extends EnergyTotalBadgeConfig {
+  type: "water-total";
+}
+
+export interface GasTotalBadgeConfig extends EnergyTotalBadgeConfig {
+  type: "gas-total";
+}
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -265,21 +265,6 @@ export interface PowerSourcesGraphCardConfig extends EnergyCardBaseConfig {
  show_legend?: boolean;
 }

-export interface PowerTotalCardConfig extends EnergyCardBaseConfig {
-  type: "power-total";
-  title?: string;
-}
-
-export interface WaterTotalCardConfig extends EnergyCardBaseConfig {
-  type: "water-total";
-  title?: string;
-}
-
-export interface GasTotalCardConfig extends EnergyCardBaseConfig {
-  type: "gas-total";
-  title?: string;
-}
-
 export interface PowerSankeyCardConfig extends EnergyCardBaseConfig {
  type: "power-sankey";
  title?: string;
--- a/src/panels/lovelace/create-element/create-badge-element.ts
+++ b/src/panels/lovelace/create-element/create-badge-element.ts
@@ -10,6 +10,9 @@ const ALWAYS_LOADED_TYPES = new Set(["error", "entity"]);
 const LAZY_LOAD_TYPES = {
  "entity-filter": () => import("../badges/hui-entity-filter-badge"),
  "state-label": () => import("../badges/hui-state-label-badge"),
+  "power-total": () => import("../badges/energy/hui-power-total-badge"),
+  "gas-total": () => import("../badges/energy/hui-gas-total-badge"),
+  "water-total": () => import("../badges/energy/hui-water-total-badge"),
 };

 // This will not return an error card but will throw the error
--- a/src/panels/lovelace/create-element/create-card-element.ts
+++ b/src/panels/lovelace/create-element/create-card-element.ts
@@ -71,9 +71,6 @@ const LAZY_LOAD_TYPES = {
    import("../cards/water/hui-water-flow-sankey-card"),
  "power-sources-graph": () =>
    import("../cards/energy/hui-power-sources-graph-card"),
-  "power-total": () => import("../cards/energy/hui-power-total-card"),
-  "water-total": () => import("../cards/energy/hui-water-total-card"),
-  "gas-total": () => import("../cards/energy/hui-gas-total-card"),
  "power-sankey": () => import("../cards/energy/hui-power-sankey-card"),
  "entity-filter": () => import("../cards/hui-entity-filter-card"),
  error: () => import("../cards/hui-error-card"),
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -631,11 +631,8 @@ class HUIRoot extends LitElement {
    `;
  }

-  private _handleContainerScroll = () => {
-    this.toggleAttribute(
-      "scrolled",
-      this._viewRoot ? this._viewRoot.scrollTop !== 0 : false
-    );
+  private _handleWindowScroll = () => {
+    this.toggleAttribute("scrolled", window.scrollY !== 0);
  };

  private _locationChanged = () => {
@@ -666,7 +663,7 @@ class HUIRoot extends LitElement {

  protected firstUpdated(changedProps: PropertyValues) {
    super.firstUpdated(changedProps);
-    this._viewRoot?.addEventListener("scroll", this._handleContainerScroll, {
+    window.addEventListener("scroll", this._handleWindowScroll, {
      passive: true,
    });
    this._handleUrlChanged();
@@ -677,7 +674,7 @@ class HUIRoot extends LitElement {

  public connectedCallback(): void {
    super.connectedCallback();
-    this._viewRoot?.addEventListener("scroll", this._handleContainerScroll, {
+    window.addEventListener("scroll", this._handleWindowScroll, {
      passive: true,
    });
    window.addEventListener("popstate", this._handlePopState);
@@ -688,13 +685,10 @@ class HUIRoot extends LitElement {

  public disconnectedCallback(): void {
    super.disconnectedCallback();
-    this._viewRoot?.removeEventListener("scroll", this._handleContainerScroll);
+    window.removeEventListener("scroll", this._handleWindowScroll);
    window.removeEventListener("popstate", this._handlePopState);
    window.removeEventListener("location-changed", this._locationChanged);
-    this.toggleAttribute(
-      "scrolled",
-      this._viewRoot ? this._viewRoot.scrollTop !== 0 : false
-    );
+    this.toggleAttribute("scrolled", window.scrollY !== 0);
    // Re-enable history scroll restoration when leaving the page
    window.history.scrollRestoration = "auto";
  }
@@ -827,11 +821,9 @@ class HUIRoot extends LitElement {
            (this._restoreScroll && this._viewScrollPositions[newSelectView]) ||
            0;
          this._restoreScroll = false;
-          requestAnimationFrame(() => {
-            if (this._viewRoot) {
-              this._viewRoot.scrollTo({ behavior: "auto", top: position });
-            }
-          });
+          requestAnimationFrame(() =>
+            scrollTo({ behavior: "auto", top: position })
+          );
        }
        this._selectView(newSelectView, force);
      });
@@ -1156,7 +1148,7 @@ class HUIRoot extends LitElement {
      const path = this.config.views[viewIndex].path || viewIndex;
      this._navigateToView(path);
    } else if (!this._editMode) {
-      this._viewRoot?.scrollTo({ behavior: "smooth", top: 0 });
+      scrollTo({ behavior: "smooth", top: 0 });
    }
  }

@@ -1167,7 +1159,7 @@ class HUIRoot extends LitElement {

    // Save scroll position of current view
    if (this._curView != null) {
-      this._viewScrollPositions[this._curView] = this._viewRoot?.scrollTop ?? 0;
+      this._viewScrollPositions[this._curView] = window.scrollY;
    }

    viewIndex = viewIndex === undefined ? 0 : viewIndex;
@@ -1474,15 +1466,10 @@ class HUIRoot extends LitElement {
        }
        hui-view-container {
          position: relative;
-          display: grid;
-          height: calc(
-            100vh - var(--header-height) - var(--safe-area-inset-top) - var(
-                --view-container-padding-top,
-                0px
-              )
-          );
+          display: flex;
+          min-height: 100vh;
          box-sizing: border-box;
-          margin-top: calc(
+          padding-top: calc(
            var(--header-height) + var(--safe-area-inset-top) +
              var(--view-container-padding-top, 0px)
          );
@@ -1498,23 +1485,14 @@ class HUIRoot extends LitElement {
          padding-inline-start: var(--safe-area-inset-left);
        }
        hui-view-container > * {
-          grid-area: 1 / 1;
-          min-width: 0;
+          flex: 1 1 100%;
          max-width: 100%;
        }
-        hui-view-container > :not(hui-view-background) {
-          z-index: 1;
-        }
        /**
         * In edit mode we have the tab bar on a new line *
         */
        hui-view-container.has-tab-bar {
-          height: calc(
-            100vh - var(--header-height, 56px) - calc(
-                var(--tab-bar-height, 56px) - 2px
-              ) - var(--safe-area-inset-top, 0px)
-          );
-          margin-top: calc(
+          padding-top: calc(
            var(--header-height, 56px) +
              calc(var(--tab-bar-height, 56px) - 2px) +
              var(--safe-area-inset-top, 0px)
--- a/src/panels/lovelace/views/hui-sections-view.ts
+++ b/src/panels/lovelace/views/hui-sections-view.ts
@@ -418,15 +418,11 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
  }

  private _toggleView() {
-    // The scroll container is the hui-view-container parent
-    const scrollContainer = this.closest("hui-view-container");
-    const scrollTop = scrollContainer?.scrollTop ?? 0;
-
    // Save current scroll position
    if (this._sidebarTabActive) {
-      this._sidebarScrollTop = scrollTop;
+      this._sidebarScrollTop = window.scrollY;
    } else {
-      this._contentScrollTop = scrollTop;
+      this._contentScrollTop = window.scrollY;
    }

    this._sidebarTabActive = !this._sidebarTabActive;
@@ -442,7 +438,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
      const scrollY = this._sidebarTabActive
        ? this._sidebarScrollTop
        : this._contentScrollTop;
-      scrollContainer?.scrollTo(0, scrollY);
+      window.scrollTo(0, scrollY);
    });
  }

--- a/src/panels/lovelace/views/hui-view-background.ts
+++ b/src/panels/lovelace/views/hui-view-background.ts
@@ -139,17 +139,18 @@ export class HUIViewBackground extends LitElement {
      display: block;
      z-index: -1;
      position: fixed;
+      background-attachment: scroll !important;
+    }
+    :host(:not([fixed-background])) {
+      z-index: -1;
+      position: absolute;
+    }
+    :host {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
-      background-attachment: scroll !important;
-    }
-    :host(:not([fixed-background])) {
-      z-index: 0;
-      pointer-events: none;
-    }
-    :host {
+      height: 100%;
      width: 100%;
      background: var(
        --view-background,
--- a/src/panels/lovelace/views/hui-view-container.ts
+++ b/src/panels/lovelace/views/hui-view-container.ts
@@ -4,7 +4,6 @@ import { customElement, property, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { listenMediaQuery } from "../../../common/dom/media_query";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
-import { haStyleScrollbar } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";

 type BackgroundConfig = LovelaceViewConfig["background"];
@@ -23,7 +22,6 @@ class HuiViewContainer extends LitElement {

  public connectedCallback(): void {
    super.connectedCallback();
-    this.classList.add("ha-scrollbar");
    this._setUpMediaQuery();
    this._applyTheme();
  }
@@ -76,16 +74,11 @@ class HuiViewContainer extends LitElement {
    }
  }

-  static styles = [
-    haStyleScrollbar,
-    css`
-      :host {
-        display: block;
-        height: 100%;
-        -webkit-overflow-scrolling: touch;
-      }
-    `,
-  ];
+  static styles = css`
+    :host {
+      display: relative;
+    }
+  `;
 }

 declare global {
--- a/src/panels/my/ha-panel-my.ts
+++ b/src/panels/my/ha-panel-my.ts
@@ -102,6 +102,14 @@ export const getMyRedirects = (): Redirects => ({
    component: "zwave_js",
    redirect: "/config/zwave_js/dashboard",
  },
+  config_matter: {
+    component: "matter",
+    redirect: "/config/matter/dashboard",
+  },
+  config_thread: {
+    component: "thread",
+    redirect: "/config/thread",
+  },
  add_zigbee_device: {
    component: "zha",
    redirect: "/config/zha/add",
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -244,20 +244,17 @@ export const haStyleDialogFixedTop = css`
 `;

 export const haStyleScrollbar = css`
-  .ha-scrollbar::-webkit-scrollbar,
-  :host(.ha-scrollbar)::-webkit-scrollbar {
+  .ha-scrollbar::-webkit-scrollbar {
    width: 0.4rem;
    height: 0.4rem;
  }

-  .ha-scrollbar::-webkit-scrollbar-thumb,
-  :host(.ha-scrollbar)::-webkit-scrollbar-thumb {
+  .ha-scrollbar::-webkit-scrollbar-thumb {
    border-radius: var(--ha-border-radius-sm);
    background: var(--scrollbar-thumb-color);
  }

-  .ha-scrollbar,
-  :host(.ha-scrollbar) {
+  .ha-scrollbar {
    overflow-y: auto;
    scrollbar-color: var(--scrollbar-thumb-color) transparent;
    scrollbar-width: thin;
--- a/src/resources/theme/color/color.globals.ts
+++ b/src/resources/theme/color/color.globals.ts
@@ -359,6 +359,8 @@ export const darkColorStyles = css`
    --outline-hover-color: rgba(225, 225, 225, 0.24);
    --shadow-color: rgba(0, 0, 0, 0.48);

+    --scrollbar-thumb-color: rgb(110, 110, 110);
+
    --mdc-ripple-color: #aaaaaa;
    --mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.1);

--- a/src/resources/theme/main.globals.ts
+++ b/src/resources/theme/main.globals.ts
@@ -51,6 +51,21 @@ export const mainStyles = css`

    /* dialog backdrop filter */
    --ha-dialog-scrim-backdrop-filter: brightness(68%);
+
+    /* scrollbar */
+    scrollbar-color: var(--scrollbar-thumb-color) transparent;
+    scrollbar-width: thin;
+  }
+
+  html::-webkit-scrollbar {
+    width: 0.4rem;
+    height: 0.4rem;
+  }
+
+  html::-webkit-scrollbar-thumb {
+    border-radius: var(--ha-border-radius-sm);
+    background: var(--scrollbar-thumb-color);
+    border: 3px solid transparent;
  }
 `;

--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -548,7 +548,7 @@
        },
        "template": {
          "yaml_warning": "It appears you may be writing YAML into this template field (saw ''{string}''), which is likely incorrect. This field is intended for templates only (e.g. '{{ states(sensor.test) > 0 }}' ).",
-          "learn_more": "Learn more about templating."
+          "learn_more": "Learn more about templating"
        },
        "text": {
          "show_password": "Show password",
@@ -679,9 +679,9 @@
          "no_entities": "You don't have any entities",
          "no_match": "No entities found for {term}",
          "show_entities": "Show entities",
-          "new_entity": "Create a new entity",
+          "new_entity": "Creates a new entity",
          "placeholder": "Select an entity",
-          "create_helper": "Create a new {domain, select, \n undefined {} \n other {{domain} }\n } helper.",
+          "create_helper": "Create a new {domain, select, \n undefined {} \n other {{domain} }\n }helper",
          "unknown": "Unknown entity selected"
        },
        "entity-name-picker": {
@@ -3811,7 +3811,7 @@
          "grid": {
            "title": "Electricity grid",
            "sub": "Configure the amount of energy that you consume from the grid and, if you produce energy, give back to the grid. This allows Home Assistant to track your whole home energy usage.",
-            "learn_more": "More information on how to get started.",
+            "learn_more": "More information on how to get started",
            "grid_connections": "Grid connections",
            "add_connection": "Add grid connection",
            "edit_connection": "Edit grid connection",
@@ -3872,7 +3872,7 @@
          "solar": {
            "title": "Solar panels",
            "sub": "Let Home Assistant monitor your solar panels and give you insight on their performance.",
-            "learn_more": "More information on how to get started.",
+            "learn_more": "More information on how to get started",
            "solar_production": "Solar production",
            "edit_solar_production": "Edit solar production",
            "delete_solar_production": "Remove solar production",
@@ -3895,7 +3895,7 @@
          "battery": {
            "title": "Home battery storage",
            "sub": "If you have a battery system, you can configure it to monitor how much energy was stored and used from your battery.",
-            "learn_more": "More information on how to get started.",
+            "learn_more": "More information on how to get started",
            "battery_systems": "Battery systems",
            "edit_battery_system": "Edit battery system",
            "delete_battery_system": "Remove battery system",
@@ -3922,7 +3922,7 @@
          "gas": {
            "title": "Gas consumption",
            "sub": "Let Home Assistant monitor your gas usage.",
-            "learn_more": "More information on how to get started.",
+            "learn_more": "More information on how to get started",
            "gas_consumption": "Gas consumption",
            "edit_gas_source": "Edit gas source",
            "delete_gas_source": "Remove gas source",
@@ -3951,7 +3951,7 @@
          "water": {
            "title": "Water consumption",
            "sub": "Let Home Assistant monitor your water usage.",
-            "learn_more": "More information on how to get started.",
+            "learn_more": "More information on how to get started",
            "water_consumption": "Water consumption",
            "edit_water_source": "Edit water source",
            "delete_water_source": "Remove water source",
@@ -3977,7 +3977,7 @@
          "device_consumption": {
            "title": "Individual electrical devices",
            "sub": "Tracking the energy usage of individual devices allows Home Assistant to break down your energy usage by device.",
-            "learn_more": "More information on how to get started.",
+            "learn_more": "More information on how to get started",
            "add_stat": "Pick entity to track energy of",
            "selected_stat": "Tracking energy for",
            "devices": "Devices",
@@ -3996,7 +3996,7 @@
          "device_consumption_water": {
            "title": "Individual water devices",
            "sub": "Tracking the water usage of individual devices allows Home Assistant to break down your water usage by device.",
-            "learn_more": "More information on how to get started.",
+            "learn_more": "More information on how to get started",
            "devices": "Devices",
            "add_device": "Add device",
            "dialog": {
@@ -5748,7 +5748,7 @@
              "key_not_null": "The field key must not be empty.",
              "key_not_unique": "The field key must not be the same value as another field.",
              "fields": "Fields",
-              "link_help_fields": "Learn more about fields.",
+              "link_help_fields": "Learn more about fields",
              "add_fields": "Add fields",
              "add_field": "Add field",
              "field": "field",
@@ -5776,7 +5776,7 @@
            "delete_confirm_text": "{name} will be permanently deleted.",
            "sequence": "Sequence",
            "sequence_sentence": "The sequence of actions of this script.",
-            "link_available_actions": "Learn more about available actions.",
+            "link_available_actions": "Learn more about available actions",
            "leave": {
              "unsaved_new_title": "Save new script?",
              "unsaved_new_text": "You can save your changes, or delete this script. You can't undo this action.",
@@ -6049,7 +6049,7 @@
              "no_hooks_yet_link_integration": "webhook-based integration",
              "no_hooks_yet2": " or by creating a ",
              "no_hooks_yet_link_automation": "webhook automation",
-              "link_learn_more": "Learn more about creating webhook-powered automations.",
+              "link_learn_more": "Learn more about creating webhook-powered automations",
              "loading": "Loading…",
              "manage": "Manage",
              "disable_hook_error_msg": "Failed to disable webhook:"
--- a/yarn.lock
+++ b/yarn.lock
@@ -1990,74 +1990,75 @@ __metadata:
  languageName: node
  linkType: hard

-"@html-eslint/core@npm:^0.56.0":
-  version: 0.56.0
-  resolution: "@html-eslint/core@npm:0.56.0"
+"@html-eslint/core@npm:^0.57.0":
+  version: 0.57.0
+  resolution: "@html-eslint/core@npm:0.57.0"
  dependencies:
-    "@html-eslint/types": "npm:^0.56.0"
+    "@html-eslint/types": "npm:^0.57.0"
    eslint: "npm:^9.39.1"
    html-standard: "npm:^0.0.13"
-  checksum: 10/0722e7405e56b256c471229dbd0ccb49cf0edd3e5224a087240f1954c74af0a6f289e5be0b83957480f1fa5abf6f7cbad7212134a6872a3fd66e1dc1ad879d66
+  checksum: 10/18b7aaf455969008dc5b79f6fd4b38792d893053e77c098c56a9238fe9b3ac3fa36441a88b908ade71de2f5179d5b4c45f552d7da5beff1d5c8df9cb3fd14e63
  languageName: node
  linkType: hard

-"@html-eslint/eslint-plugin@npm:0.56.0":
-  version: 0.56.0
-  resolution: "@html-eslint/eslint-plugin@npm:0.56.0"
+"@html-eslint/eslint-plugin@npm:0.57.0":
+  version: 0.57.0
+  resolution: "@html-eslint/eslint-plugin@npm:0.57.0"
  dependencies:
    "@eslint/plugin-kit": "npm:^0.4.1"
-    "@html-eslint/core": "npm:^0.56.0"
-    "@html-eslint/parser": "npm:^0.56.0"
-    "@html-eslint/template-parser": "npm:^0.56.0"
-    "@html-eslint/template-syntax-parser": "npm:^0.56.0"
-    "@html-eslint/types": "npm:^0.56.0"
+    "@html-eslint/core": "npm:^0.57.0"
+    "@html-eslint/parser": "npm:^0.57.0"
+    "@html-eslint/template-parser": "npm:^0.57.0"
+    "@html-eslint/template-syntax-parser": "npm:^0.57.0"
+    "@html-eslint/types": "npm:^0.57.0"
+    "@rviscomi/capo.js": "npm:^2.1.0"
  peerDependencies:
    eslint: ">=8.0.0 || ^10.0.0-0"
-  checksum: 10/16c5d638045266ca201b5dc154b3706262801668b2edde4f0905bdba9ba2e14b7175eacf9ca7d2ad5a5a03e3369843822d34ee607b6b7fbbeb020ac7f87629fb
+  checksum: 10/34cf11eaab3c07436c9c8b2896ed331c3ba5d591db5d8a8ff79d19b174e6e090323eb71e1368ad93d2afa945d4740749c599436a03be1195d4e4a4b0d3d9e9b6
  languageName: node
  linkType: hard

-"@html-eslint/parser@npm:^0.56.0":
-  version: 0.56.0
-  resolution: "@html-eslint/parser@npm:0.56.0"
+"@html-eslint/parser@npm:^0.57.0":
+  version: 0.57.0
+  resolution: "@html-eslint/parser@npm:0.57.0"
  dependencies:
    "@eslint/css-tree": "npm:^3.6.9"
-    "@html-eslint/template-syntax-parser": "npm:^0.56.0"
-    "@html-eslint/types": "npm:^0.56.0"
+    "@html-eslint/template-syntax-parser": "npm:^0.57.0"
+    "@html-eslint/types": "npm:^0.57.0"
    css-tree: "npm:^3.1.0"
    es-html-parser: "npm:0.3.1"
-  checksum: 10/1fead2be97481f461ee7030f4ea9274e5f969540118b4429e3eea361f62138660c1b7538668c7f8d55a8ae6985deff3056968d71bae62b91fb001d4209a24b50
+  checksum: 10/d742a26ef8122eab82e35ab27de6fe40cd45d2ac59ade9bed9d16df0da3cd18425c7892fedd245b9d60da2a4fbfb8c6afe05b1b6415033ab8fad996b94be020e
  languageName: node
  linkType: hard

-"@html-eslint/template-parser@npm:^0.56.0":
-  version: 0.56.0
-  resolution: "@html-eslint/template-parser@npm:0.56.0"
+"@html-eslint/template-parser@npm:^0.57.0":
+  version: 0.57.0
+  resolution: "@html-eslint/template-parser@npm:0.57.0"
  dependencies:
-    "@html-eslint/types": "npm:^0.56.0"
+    "@html-eslint/types": "npm:^0.57.0"
    es-html-parser: "npm:0.3.1"
-  checksum: 10/45e41dc8fb46336f40d1b78ef55ee3150d7a1034d393529eb40ce37a7d0a8fa04f6ed8f9a63478ff884d9588b1359b97a799681a37cd485d237dce867b7f9d20
+  checksum: 10/160d7f6156f242ed7bd4e7f13d79c350bf5db7fef089ba7b404ef770d80547620e9ee860ead8892a4079668db1cdccf6a6c6b91183a8c478a634314b39efea32
  languageName: node
  linkType: hard

-"@html-eslint/template-syntax-parser@npm:^0.56.0":
-  version: 0.56.0
-  resolution: "@html-eslint/template-syntax-parser@npm:0.56.0"
+"@html-eslint/template-syntax-parser@npm:^0.57.0":
+  version: 0.57.0
+  resolution: "@html-eslint/template-syntax-parser@npm:0.57.0"
  dependencies:
-    "@html-eslint/types": "npm:^0.56.0"
-  checksum: 10/2cc4f2cbfa58c6381b2542ca86e424a97429326aa0b8b6b09e0a51d27b0e26fd723a4550e4c17536e00cfd506cbd0c61d8fd3dff1c829714c4432406096b4a01
+    "@html-eslint/types": "npm:^0.57.0"
+  checksum: 10/147d8d15ebc5ea9b75eea04463b9f29cfc476be2e98c5a2129442be6f66d32a9e8bb11a1be13cc3778df25e14d7ed1cd345342951ecec05292545f64bb3d92c6
  languageName: node
  linkType: hard

-"@html-eslint/types@npm:^0.56.0":
-  version: 0.56.0
-  resolution: "@html-eslint/types@npm:0.56.0"
+"@html-eslint/types@npm:^0.57.0":
+  version: 0.57.0
+  resolution: "@html-eslint/types@npm:0.57.0"
  dependencies:
    "@types/css-tree": "npm:^2.3.11"
    "@types/estree": "npm:^1.0.6"
    es-html-parser: "npm:0.3.1"
    eslint: "npm:^9.39.1"
-  checksum: 10/5359ccfb8f431ccedfe7d9c0b20d883d19bbb6a24eee925c036c7774d6f2177eda021826abbc6f947b59c2364d7cf25a596591e852c1141000a3fab6ea70acc9
+  checksum: 10/44d0bde592786a2da966beab13c3d543e6669b1e38b6e5feea0f01121eec928be0081969df3ada1f27c9bd43d6286596afa56a2e075da843251079a940cf0825
  languageName: node
  linkType: hard

@@ -4257,6 +4258,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@rviscomi/capo.js@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "@rviscomi/capo.js@npm:2.1.0"
+  checksum: 10/83ce30106ec6bd4b4791af12556119c568cb9d0ec7550b7b015a8c2c1c49687d8c6605564415d9d85e991581958212109ee5caa0db4166c1d3628033175e80b8
+  languageName: node
+  linkType: hard
+
 "@shoelace-style/animations@npm:^1.2.0":
  version: 1.2.0
  resolution: "@shoelace-style/animations@npm:1.2.0"
@@ -5063,138 +5071,138 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/eslint-plugin@npm:8.56.0":
-  version: 8.56.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:8.56.0"
+"@typescript-eslint/eslint-plugin@npm:8.56.1":
+  version: 8.56.1
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.56.1"
  dependencies:
    "@eslint-community/regexpp": "npm:^4.12.2"
-    "@typescript-eslint/scope-manager": "npm:8.56.0"
-    "@typescript-eslint/type-utils": "npm:8.56.0"
-    "@typescript-eslint/utils": "npm:8.56.0"
-    "@typescript-eslint/visitor-keys": "npm:8.56.0"
+    "@typescript-eslint/scope-manager": "npm:8.56.1"
+    "@typescript-eslint/type-utils": "npm:8.56.1"
+    "@typescript-eslint/utils": "npm:8.56.1"
+    "@typescript-eslint/visitor-keys": "npm:8.56.1"
    ignore: "npm:^7.0.5"
    natural-compare: "npm:^1.4.0"
    ts-api-utils: "npm:^2.4.0"
  peerDependencies:
-    "@typescript-eslint/parser": ^8.56.0
+    "@typescript-eslint/parser": ^8.56.1
    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/44201eae518c759cf3110f7e0a374372ef22bffa3cca61685aebe916b06bcb5f3ed6ffedba252199dca0006dfc22c54b132cd0337fd15e8c083eda22f9cf6b0c
+  checksum: 10/669d19cff91fcad5fe34dba97cc8c0c2df3160ae14646759fb23dfd6ffbb861d00d8d081e74d1060d544bfba0ea4d05588c5b73ae104907af26cc18189c0d139
  languageName: node
  linkType: hard

-"@typescript-eslint/parser@npm:8.56.0":
-  version: 8.56.0
-  resolution: "@typescript-eslint/parser@npm:8.56.0"
+"@typescript-eslint/parser@npm:8.56.1":
+  version: 8.56.1
+  resolution: "@typescript-eslint/parser@npm:8.56.1"
  dependencies:
-    "@typescript-eslint/scope-manager": "npm:8.56.0"
-    "@typescript-eslint/types": "npm:8.56.0"
-    "@typescript-eslint/typescript-estree": "npm:8.56.0"
-    "@typescript-eslint/visitor-keys": "npm:8.56.0"
+    "@typescript-eslint/scope-manager": "npm:8.56.1"
+    "@typescript-eslint/types": "npm:8.56.1"
+    "@typescript-eslint/typescript-estree": "npm:8.56.1"
+    "@typescript-eslint/visitor-keys": "npm:8.56.1"
    debug: "npm:^4.4.3"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/9bdb2c7915665a1031499049974997020bbc34557803a8c3718b323d5583a3fdfc27797ec714b617743225c8dce9ab589eb442b71c435b464ad45365a6fbba57
+  checksum: 10/280b041a69153caf9e721b307781830483dd39d881b02d993156635bd8600e30e6a816aaead8bdd662ae5149b8870aef7b3823d3b98ec974d924c23a786fb6d9
  languageName: node
  linkType: hard

-"@typescript-eslint/project-service@npm:8.56.0":
-  version: 8.56.0
-  resolution: "@typescript-eslint/project-service@npm:8.56.0"
+"@typescript-eslint/project-service@npm:8.56.1":
+  version: 8.56.1
+  resolution: "@typescript-eslint/project-service@npm:8.56.1"
  dependencies:
-    "@typescript-eslint/tsconfig-utils": "npm:^8.56.0"
-    "@typescript-eslint/types": "npm:^8.56.0"
+    "@typescript-eslint/tsconfig-utils": "npm:^8.56.1"
+    "@typescript-eslint/types": "npm:^8.56.1"
    debug: "npm:^4.4.3"
  peerDependencies:
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/b46cc78bfb50ee84cb12e2e99c1a3d9606161980cf56ba33be6244ccff2ba4c78ceec46706ad597508fda167e0f965d849c1c516400ad41259027be3fbd815eb
+  checksum: 10/5e7fdc95aebcefc72fec77806bb0821a9a59e5e88f86d72b15ad011eb6110da05419b803875f021716a219fc7fb8517331a6736364344c8613a90209539a6d32
  languageName: node
  linkType: hard

-"@typescript-eslint/scope-manager@npm:8.56.0":
-  version: 8.56.0
-  resolution: "@typescript-eslint/scope-manager@npm:8.56.0"
+"@typescript-eslint/scope-manager@npm:8.56.1":
+  version: 8.56.1
+  resolution: "@typescript-eslint/scope-manager@npm:8.56.1"
  dependencies:
-    "@typescript-eslint/types": "npm:8.56.0"
-    "@typescript-eslint/visitor-keys": "npm:8.56.0"
-  checksum: 10/3662355120ea8e21ce01c999decbd2a09fe4edb1c01e376fe347952d968ecfedff99b9484334e133e41284a15f2e1bc8efd490b1e73a16980614445c25b07b0d
+    "@typescript-eslint/types": "npm:8.56.1"
+    "@typescript-eslint/visitor-keys": "npm:8.56.1"
+  checksum: 10/f358cf8bd32952eed005d4f34c1e95805baefe35abee96d866222b0eff8027cc02f831cee04b308707d74db2b415437a134191207b4213ee8acbc6d67a435616
  languageName: node
  linkType: hard

-"@typescript-eslint/tsconfig-utils@npm:8.56.0, @typescript-eslint/tsconfig-utils@npm:^8.56.0":
-  version: 8.56.0
-  resolution: "@typescript-eslint/tsconfig-utils@npm:8.56.0"
+"@typescript-eslint/tsconfig-utils@npm:8.56.1, @typescript-eslint/tsconfig-utils@npm:^8.56.1":
+  version: 8.56.1
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.56.1"
  peerDependencies:
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/b1834aeffcdc07835eae0bf52aca573cba7e6528b5c1483e9b1f7f4f9e1f6450a8650796be11140e0437caf7eb1b0f9711c22989c8294547534f12614a759760
+  checksum: 10/d509f1ae4b14969173e498db6d15c833b6407db456c7fca9e25396798a35014229a73754691f353c4a99f5f0bbb4535b4144f42f84e596645a16d88a2022135f
  languageName: node
  linkType: hard

-"@typescript-eslint/type-utils@npm:8.56.0":
-  version: 8.56.0
-  resolution: "@typescript-eslint/type-utils@npm:8.56.0"
+"@typescript-eslint/type-utils@npm:8.56.1":
+  version: 8.56.1
+  resolution: "@typescript-eslint/type-utils@npm:8.56.1"
  dependencies:
-    "@typescript-eslint/types": "npm:8.56.0"
-    "@typescript-eslint/typescript-estree": "npm:8.56.0"
-    "@typescript-eslint/utils": "npm:8.56.0"
+    "@typescript-eslint/types": "npm:8.56.1"
+    "@typescript-eslint/typescript-estree": "npm:8.56.1"
+    "@typescript-eslint/utils": "npm:8.56.1"
    debug: "npm:^4.4.3"
    ts-api-utils: "npm:^2.4.0"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/f272b9acc004f125cbf0df18265a43ba50cd3666262afc663585acdd1be6b6b30724bd8cf4cd5aa2757b7f10ceafa92fd1af30c1931fb22ac38521eda7f79c89
+  checksum: 10/2b07c674c26d797d05c05779ac5c89761b6b96680ecaf01440957727d12c6d06a2e48f0b139e45752eb4b53bf13c03940628656c519d362082b716d6a0ece6d9
  languageName: node
  linkType: hard

-"@typescript-eslint/types@npm:8.56.0, @typescript-eslint/types@npm:^8.56.0":
-  version: 8.56.0
-  resolution: "@typescript-eslint/types@npm:8.56.0"
-  checksum: 10/d7549535c99d9202742bf0191bcc2822c2d18a03e206be9ad5a6f6b0902de7381c93e8c238754fe5d1dfdcc22d7e3bbafa032f63ba165d6dc03e180f84b138f9
+"@typescript-eslint/types@npm:8.56.1, @typescript-eslint/types@npm:^8.56.1":
+  version: 8.56.1
+  resolution: "@typescript-eslint/types@npm:8.56.1"
+  checksum: 10/4bcffab5b0fd48adb731fcade86a776ca4a66e229defa5a282b58ba9c95af16ffc459a7d188e27c988a35be1f6fb5b812f9cf0952692eac38d5b3e87daafb20a
  languageName: node
  linkType: hard

-"@typescript-eslint/typescript-estree@npm:8.56.0":
-  version: 8.56.0
-  resolution: "@typescript-eslint/typescript-estree@npm:8.56.0"
+"@typescript-eslint/typescript-estree@npm:8.56.1":
+  version: 8.56.1
+  resolution: "@typescript-eslint/typescript-estree@npm:8.56.1"
  dependencies:
-    "@typescript-eslint/project-service": "npm:8.56.0"
-    "@typescript-eslint/tsconfig-utils": "npm:8.56.0"
-    "@typescript-eslint/types": "npm:8.56.0"
-    "@typescript-eslint/visitor-keys": "npm:8.56.0"
+    "@typescript-eslint/project-service": "npm:8.56.1"
+    "@typescript-eslint/tsconfig-utils": "npm:8.56.1"
+    "@typescript-eslint/types": "npm:8.56.1"
+    "@typescript-eslint/visitor-keys": "npm:8.56.1"
    debug: "npm:^4.4.3"
-    minimatch: "npm:^9.0.5"
+    minimatch: "npm:^10.2.2"
    semver: "npm:^7.7.3"
    tinyglobby: "npm:^0.2.15"
    ts-api-utils: "npm:^2.4.0"
  peerDependencies:
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/55c8cfc7e265f320d780e69a677838821225fad8b853108ce2095f01509bf2ee8943280df9ac75560ed86265ef0e0a979ae4cb375d712f648b336032de79d19b
+  checksum: 10/af39dae0a8fada72295a11f0efb49f311241134b0a3d819100eeda6a2f92368844645873ba785de5513ad541cd9c2ba17b9bfed2679daac4682fa2a3b627f087
  languageName: node
  linkType: hard

-"@typescript-eslint/utils@npm:8.56.0":
-  version: 8.56.0
-  resolution: "@typescript-eslint/utils@npm:8.56.0"
+"@typescript-eslint/utils@npm:8.56.1":
+  version: 8.56.1
+  resolution: "@typescript-eslint/utils@npm:8.56.1"
  dependencies:
    "@eslint-community/eslint-utils": "npm:^4.9.1"
-    "@typescript-eslint/scope-manager": "npm:8.56.0"
-    "@typescript-eslint/types": "npm:8.56.0"
-    "@typescript-eslint/typescript-estree": "npm:8.56.0"
+    "@typescript-eslint/scope-manager": "npm:8.56.1"
+    "@typescript-eslint/types": "npm:8.56.1"
+    "@typescript-eslint/typescript-estree": "npm:8.56.1"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/f357bd15fe568cba0b89371e9a724eda38d78361a21dc0c4f49b0af4a23a140c77e2a8c6285c6fe8d8277e256a8a137aef7bcf6d97428eecd0c6e72ef08849ae
+  checksum: 10/528cbd187d8288a8cfce24a043f993b93711087f53d2b6f95cdd615a1a4087af1dab083a747761af97474a621c7b14f11c84ee50c250f31566ebc64cf73867fe
  languageName: node
  linkType: hard

-"@typescript-eslint/visitor-keys@npm:8.56.0":
-  version: 8.56.0
-  resolution: "@typescript-eslint/visitor-keys@npm:8.56.0"
+"@typescript-eslint/visitor-keys@npm:8.56.1":
+  version: 8.56.1
+  resolution: "@typescript-eslint/visitor-keys@npm:8.56.1"
  dependencies:
-    "@typescript-eslint/types": "npm:8.56.0"
+    "@typescript-eslint/types": "npm:8.56.1"
    eslint-visitor-keys: "npm:^5.0.0"
-  checksum: 10/1eaa26ffe8a2c83d42d428beef207d793aef73c2e306f94e716d39519eaaa07547da898c7d63a5c406a3662895d735b4b1f33b513a1addb69473c65e7d92a2b5
+  checksum: 10/efed6a9867e7be203eec543e5a65da5aaec96aae55fba6fe74a305bf600e57c707764835e82bb8eb541f49a9b70442ff1e1a0ecf3543c78c91b84dda43b95c53
  languageName: node
  linkType: hard

@@ -9192,7 +9200,7 @@ __metadata:
    "@fullcalendar/luxon3": "npm:6.1.20"
    "@fullcalendar/timegrid": "npm:6.1.20"
    "@home-assistant/webawesome": "npm:3.2.1-ha.3"
-    "@html-eslint/eslint-plugin": "npm:0.56.0"
+    "@html-eslint/eslint-plugin": "npm:0.57.0"
    "@lezer/highlight": "npm:1.2.3"
    "@lit-labs/motion": "npm:1.1.0"
    "@lit-labs/observers": "npm:2.1.0"
@@ -9335,7 +9343,7 @@ __metadata:
    tinykeys: "npm:3.0.0"
    ts-lit-plugin: "npm:2.0.2"
    typescript: "npm:5.9.3"
-    typescript-eslint: "npm:8.56.0"
+    typescript-eslint: "npm:8.56.1"
    ua-parser-js: "npm:2.0.9"
    vite-tsconfig-paths: "npm:6.1.1"
    vitest: "npm:4.0.18"
@@ -11117,15 +11125,6 @@ __metadata:
  languageName: node
  linkType: hard

-"minimatch@npm:^9.0.5":
-  version: 9.0.5
-  resolution: "minimatch@npm:9.0.5"
-  dependencies:
-    brace-expansion: "npm:^2.0.1"
-  checksum: 10/dd6a8927b063aca6d910b119e1f2df6d2ce7d36eab91de83167dd136bb85e1ebff97b0d3de1cb08bd1f7e018ca170b4962479fefab5b2a69e2ae12cb2edc8348
-  languageName: node
-  linkType: hard
-
 "minimist@npm:^1.2.0, minimist@npm:^1.2.6":
  version: 1.2.8
  resolution: "minimist@npm:1.2.8"
@@ -14212,18 +14211,18 @@ __metadata:
  languageName: node
  linkType: hard

-"typescript-eslint@npm:8.56.0":
-  version: 8.56.0
-  resolution: "typescript-eslint@npm:8.56.0"
+"typescript-eslint@npm:8.56.1":
+  version: 8.56.1
+  resolution: "typescript-eslint@npm:8.56.1"
  dependencies:
-    "@typescript-eslint/eslint-plugin": "npm:8.56.0"
-    "@typescript-eslint/parser": "npm:8.56.0"
-    "@typescript-eslint/typescript-estree": "npm:8.56.0"
-    "@typescript-eslint/utils": "npm:8.56.0"
+    "@typescript-eslint/eslint-plugin": "npm:8.56.1"
+    "@typescript-eslint/parser": "npm:8.56.1"
+    "@typescript-eslint/typescript-estree": "npm:8.56.1"
+    "@typescript-eslint/utils": "npm:8.56.1"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/7c07af35e6b4eaaebad4b50c37bc6dd50f0cecebe5a4e648ef117fd43a8496f3132020061e19a2fbaf826978e91c100054e638701bf89db8f342dd1353bb5b7e
+  checksum: 10/e18cd347ddce0f0e5b28121346f27736a418adf68e73d613690ea3a1d0adfe03bc393f77a8872c2cef77ca74bcc0974212d1775c360de33a9987a94cda11a05b
  languageName: node
  linkType: hard
Author	SHA1	Message	Date
Aidan Timson	08231dbbb0	Use large width on system log dialogs (#29879 )	2026-02-27 12:46:10 +01:00
Paul Bottein	0ca656933d	Revert "Add render icon property to ha-control-select-menu" This reverts commit `b23cf8eba4`.	2026-02-27 12:21:23 +01:00
Paul Bottein	b23cf8eba4	Add render icon property to ha-control-select-menu	2026-02-27 12:20:52 +01:00
Robert Resch	61b546415d	Revert "Add vacuum mapping not configured issue" (#29876 )	2026-02-27 11:18:49 +01:00
Brandon Chen	4e1b709303	Fix YAML content invisible in dark mode for conversation debug result… (#29874 )	2026-02-27 09:11:28 +01:00
renovate[bot]	34e65b302d	Update dependency typescript-eslint to v8.56.1 (#29868 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-02-26 18:08:04 +00:00
renovate[bot]	336d0e1b9d	Update dependency @html-eslint/eslint-plugin to v0.57.0 (#29863 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-02-26 17:25:10 +01:00
Paul Bottein	58d4cf8d84	Fix scrollbar in 2026.3 (#29865 )	2026-02-26 16:44:12 +01:00
Aidan Timson	d3453aff37	Add missing theming variable support to dialog and bottom sheet (#29857 )	2026-02-26 16:43:20 +01:00
Aidan Timson	64ff2e414c	Add thread configuration my link (#29861 )	2026-02-26 15:06:46 +00:00
Wendelin	2ca25c980f	Fix quick search icon size (#29858 )	2026-02-26 15:59:27 +01:00
Aidan Timson	73d93bc601	Add matter configuration my link (#29859 )	2026-02-26 14:41:43 +00:00
Wendelin	5ca6a8aced	Fix `ha-icon-button-toggle` selected style (#29856 )	2026-02-26 13:02:12 +00:00
Aidan Timson	7ff4993e0b	Fix esc closing dialogs with prevent scrim close (#29851 )	2026-02-26 13:20:05 +02:00
Norbert Rittel	4e6fbacccc	Remove trailing periods from "Learn more" etc. links / tooltips (#29835 )	2026-02-26 10:38:54 +00:00
Petar Petrov	2958d49e36	Convert Energy Now tiles to badges (#29845 )	2026-02-26 10:38:01 +00:00
Norbert Rittel	92289dc7ea	Improve "Create a new … helper" option in entity picker (#29853 )	2026-02-26 10:34:42 +00:00