Bumped version to 20251001.4

* Don't hardcode width height on mobile for all dialogs

* Don't set min width on desktop

.github/workflows/cast_deployment.yaml

@@ -42,7 +42,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=cast/dist --alias dev
+          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --alias dev
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
@@ -77,7 +77,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=cast/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}

.github/workflows/demo_deployment.yaml

@@ -43,7 +43,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
@@ -78,7 +78,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}

.github/workflows/design_deployment.yaml

@@ -35,7 +35,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=gallery/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}

.github/workflows/design_preview.yaml

@@ -40,7 +40,7 @@ jobs:
       - name: Deploy preview to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
+          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
             --json > deploy_output.json
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

cast/src/media/entrypoint.ts

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

cast/src/receiver/entrypoint.ts

@@ -40,8 +40,7 @@ const playDummyMedia = (viewTitle?: string) => {
   loadRequestData.media.contentId =
     "https://cast.home-assistant.io/images/google-nest-hub.png";
   loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType =
+  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
-    "NONE" as framework.messages.StreamType.NONE;
   const metadata = new framework.messages.GenericMediaMetadata();
   metadata.title = viewTitle;
   loadRequestData.media.metadata = metadata;
@@ -90,7 +89,7 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: "json" as framework.system.MessageType.JSON,
+  [CAST_NS]: framework.system.MessageType.JSON,
 };
 
 castContext.addCustomMessageListener(
@@ -98,7 +97,9 @@ castContext.addCustomMessageListener(
   // @ts-ignore
   (ev: ReceivedMessage<HassMessage>) => {
     // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
-    if (playerManager.getPlayerState() !== "IDLE") {
+    if (
+      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
+    ) {
       playerManager.stop();
     } else {
       showLovelaceController();
@@ -112,7 +113,7 @@ castContext.addCustomMessageListener(
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  "LOAD" as framework.messages.MessageType.LOAD,
+  framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     if (
       loadRequestData.media.contentId ===
@@ -126,23 +127,24 @@ playerManager.setMessageInterceptor(
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
+      media.streamType = framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
+        framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }
 );
 
 playerManager.addEventListener(
-  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
+  framework.events.EventType.MEDIA_STATUS,
   (event) => {
     if (
-      event.mediaStatus?.playerState === "IDLE" &&
+      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
       event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !== "INTERRUPTED"
+      event.mediaStatus?.idleReason !==
+        framework.messages.IdleReason.INTERRUPTED
     ) {
       // media finished or stopped, return to default Lovelace
       showLovelaceController();

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

@@ -34,3 +34,5 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/slid
 **CSS Custom Properties**
 
 - `--ha-slider-track-size` - Height of the slider track. Defaults to `4px`.
+- `--ha-slider-thumb-color` - Color of the slider thumb. Defaults to `var(--primary-color)`.
+- `--ha-slider-indicator-color` - Color of the filled portion of the slider track. Defaults to `var(--primary-color)`.

package.json

@@ -52,7 +52,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-beta.4.ha.3",
+    "@home-assistant/webawesome": "3.0.0-beta.6.ha.4",
     "@lezer/highlight": "1.2.1",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",
@@ -161,7 +161,7 @@
     "@rspack/core": "1.5.5",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.24",
+    "@types/chromecast-caf-receiver": "6.0.22",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
     "@types/culori": "4.0.1",
@@ -203,7 +203,7 @@
     "husky": "9.1.7",
     "jsdom": "27.0.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.2.0",
+    "lint-staged": "16.1.6",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -213,7 +213,7 @@
     "rspack-manifest-plugin": "5.1.0",
     "serve": "14.2.5",
     "sinon": "21.0.0",
-    "tar": "7.4.4",
+    "tar": "7.4.3",
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.2",

pyproject.toml

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

src/common/keyboard/shortcuts.ts

@@ -1,93 +0,0 @@
-import { tinykeys } from "tinykeys";
-import { canOverrideAlphanumericInput } from "../dom/can-override-input";
-
-export type ShortcutHandler = (event: KeyboardEvent) => void;
-
-interface ShortcutEntry {
-  /**
-   * The keys that the shortcut is registered to.
-   */
-  keys: Set<string>;
-  /**
-   * A function to remove the shortcuts.
-   */
-  disposer: () => void;
-}
-
-/**
- * Register keyboard shortcuts using tinykeys.
- *
- * @param shortcuts - Key combinations mapped to handler functions.
- * @returns A function to remove the shortcuts.
- */
-function registerShortcuts(
-  shortcuts: Record<string, ShortcutHandler>
-): () => void {
-  const wrappedShortcuts: Record<string, ShortcutHandler> = {};
-
-  Object.entries(shortcuts).forEach(([key, handler]) => {
-    wrappedShortcuts[key] = (event: KeyboardEvent) => {
-      // Don't capture the event if the user is not focused on an input
-      if (!canOverrideAlphanumericInput(event.composedPath())) {
-        return;
-      }
-      // Don't capture the event if the user is selecting text
-      if (window.getSelection()?.toString()) {
-        return;
-      }
-      handler(event);
-    };
-  });
-
-  return tinykeys(window, wrappedShortcuts);
-}
-
-/**
- * A class that can add and remove keyboard shortcuts.
- */
-export class ShortcutManager {
-  public shortcutEntries: ShortcutEntry[] = [];
-
-  /**
-   * Add a group of keyboard shortcuts to the manager.
-   *
-   * @param shortcuts - Key combinations mapped to handler functions.
-   *   Uses tinykeys syntax. See https://github.com/jamiebuilds/tinykeys#usage.
-   */
-  public add(shortcuts: Record<string, ShortcutHandler>) {
-    const disposer = registerShortcuts(shortcuts);
-    const keys = new Set(Object.keys(shortcuts));
-    const entry: ShortcutEntry = { keys, disposer };
-    this.shortcutEntries.push(entry);
-  }
-
-  /**
-   * Remove shortcuts from the manager.
-   *
-   * @param keys - Optional array of specific key combinations to remove. If provided,
-   *   only shortcuts matching these keys will be removed. If omitted, all shortcuts
-   *   from this manager will be removed.
-   */
-  public remove(keys?: string[]) {
-    if (keys) {
-      const entriesToRemove: ShortcutEntry[] = [];
-
-      for (const entry of this.shortcutEntries) {
-        if (keys.some((key) => entry.keys.has(key))) {
-          entry.disposer();
-          entriesToRemove.push(entry);
-        }
-      }
-
-      entriesToRemove.forEach((entry) => {
-        const index = this.shortcutEntries.indexOf(entry);
-        if (index !== -1) {
-          this.shortcutEntries.splice(index, 1);
-        }
-      });
-    } else {
-      this.shortcutEntries.forEach((entry) => entry.disposer());
-      this.shortcutEntries.length = 0;
-    }
-  }
-}

src/common/util/xss.ts

@@ -0,0 +1,8 @@
+import xss from "xss";
+
+export const filterXSS = (html: string) =>
+  xss(html, {
+    whiteList: {},
+    stripIgnoreTag: true,
+    stripIgnoreTagBody: true,
+  });

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

@@ -25,6 +25,7 @@ import type { ECOption } from "../../resources/echarts";
 import type { HomeAssistant } from "../../types";
 import { isMac } from "../../util/is_mac";
 import "../ha-icon-button";
+import { filterXSS } from "../../common/util/xss";
 import { formatTimeLabel } from "./axis-label";
 import { ensureArray } from "../../common/array/ensure-array";
 import "../chips/ha-assist-chip";
@@ -811,7 +812,8 @@ export class HaChartBase extends LitElement {
           };
         }
       }
-      return { ...s, data };
+      const name = filterXSS(String(s.name ?? s.id ?? ""));
+      return { ...s, name, data };
     });
     return series as ECOption["series"];
   }

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

@@ -9,6 +9,7 @@ import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type { HomeAssistant } from "../../types";
 import type { ECOption } from "../../resources/echarts";
 import { measureTextWidth } from "../../util/text";
+import { filterXSS } from "../../common/util/xss";
 import "./ha-chart-base";
 import { NODE_SIZE } from "../trace/hat-graph-const";
 import "../ha-alert";
@@ -92,12 +93,12 @@ export class HaSankeyChart extends LitElement {
       : data.value;
     if (data.id) {
       const node = this.data.nodes.find((n) => n.id === data.id);
-      return `${params.marker} ${node?.label ?? data.id}<br>${value}`;
+      return `${params.marker} ${filterXSS(node?.label ?? data.id)}<br>${value}`;
     }
     if (data.source && data.target) {
       const source = this.data.nodes.find((n) => n.id === data.source);
       const target = this.data.nodes.find((n) => n.id === data.target);
-      return `${source?.label ?? data.source} → ${target?.label ?? data.target}<br>${value}`;
+      return `${filterXSS(source?.label ?? data.source)} → ${filterXSS(target?.label ?? data.target)}<br>${value}`;
     }
     return null;
   };

src/components/ha-analytics.ts

@@ -1,5 +1,5 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
@@ -73,14 +73,18 @@ export class HaAnalytics extends LitElement {
                 .checked=${this.analytics?.preferences[preference]}
                 .preference=${preference}
                 name=${preference}
-                ?disabled=${baseEnabled}
               >
               </ha-switch>
-              <ha-tooltip .for="switch-${preference}" placement="right">
+              ${baseEnabled
-                ${this.localize(
+                ? nothing
-                  `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
+                : html`<ha-tooltip
-                )}
+                    .for="switch-${preference}"
-              </ha-tooltip>
+                    placement="right"
+                  >
+                    ${this.localize(
+                      `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
+                    )}
+                  </ha-tooltip>`}
             </span>
           </ha-settings-row>
         `

src/components/ha-bottom-sheet.ts

@@ -42,8 +42,8 @@ export class HaBottomSheet extends LitElement {
   static styles = css`
     wa-drawer {
       --wa-color-surface-raised: var(
-        --ha-dialog-surface-background,
+        --ha-bottom-sheet-surface-background,
-        var(--mdc-theme-surface, #fff)
+        var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
       );
       --spacing: 0;
       --size: auto;
@@ -51,8 +51,14 @@ export class HaBottomSheet extends LitElement {
       --hide-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
     }
     wa-drawer::part(dialog) {
-      border-top-left-radius: var(--ha-border-radius-lg);
+      border-top-left-radius: var(
-      border-top-right-radius: var(--ha-border-radius-lg);
+        --ha-bottom-sheet-border-radius,
+        var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
+      );
+      border-top-right-radius: var(
+        --ha-bottom-sheet-border-radius,
+        var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
+      );
       max-height: 90vh;
       padding-bottom: var(--safe-area-inset-bottom);
       padding-left: var(--safe-area-inset-left);

src/components/ha-button.ts

@@ -41,8 +41,7 @@ export class HaButton extends Button {
     return [
       Button.styles,
       css`
-        .button {
+        :host {
-          /* set theme vars */
           --wa-form-control-padding-inline: 16px;
           --wa-font-weight-action: var(--ha-font-weight-medium);
           --wa-form-control-border-radius: var(
@@ -54,7 +53,8 @@ export class HaButton extends Button {
             --ha-button-height,
             var(--button-height, 40px)
           );
-
+        }
+        .button {
           font-size: var(--ha-font-size-m);
           line-height: 1;
 

src/components/ha-dialog.ts

@@ -121,7 +121,7 @@ export class HaDialog extends DialogBase {
         position: var(--dialog-surface-position, relative);
         top: var(--dialog-surface-top);
         margin-top: var(--dialog-surface-margin-top);
-        min-width: var(--mdc-dialog-min-width, 100vw);
+        min-width: var(--mdc-dialog-min-width, auto);
         min-height: var(--mdc-dialog-min-height, auto);
         border-radius: var(--ha-dialog-border-radius, 24px);
         -webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
@@ -130,23 +130,13 @@ export class HaDialog extends DialogBase {
           --ha-dialog-surface-background,
           var(--mdc-theme-surface, #fff)
         );
+        padding: var(--dialog-surface-padding);
       }
       :host([flexContent]) .mdc-dialog .mdc-dialog__content {
         display: flex;
         flex-direction: column;
       }
 
-      @media all and (max-width: 450px), all and (max-height: 500px) {
-        .mdc-dialog .mdc-dialog__surface {
-          min-height: 100vh;
-          max-height: 100vh;
-          padding-top: var(--safe-area-inset-top);
-          padding-bottom: var(--safe-area-inset-bottom);
-          padding-left: var(--safe-area-inset-left);
-          padding-right: var(--safe-area-inset-right);
-        }
-      }
-
       .header_title {
         display: flex;
         align-items: center;

src/components/ha-resizable-bottom-sheet.ts

@@ -1,6 +1,5 @@
 import { css, html, LitElement } from "lit";
 import { customElement, query, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../common/dom/fire_event";
 import { BOTTOM_SHEET_ANIMATION_DURATION_MS } from "./ha-bottom-sheet";
 
@@ -37,13 +36,14 @@ export class HaResizableBottomSheet extends LitElement {
     return html`<dialog
       open
       @transitionend=${this._handleTransitionEnd}
-      style=${styleMap({
+      style=${`
-        height: this._dialogViewportHeight
+        --height: ${this._dialogViewportHeight}vh;
-          ? `${this._dialogViewportHeight}vh`
+        --height: ${this._dialogViewportHeight}dvh;
-          : "auto",
+        --max-height: ${this._dialogMaxViewpointHeight}vh;
-        maxHeight: `${this._dialogMaxViewpointHeight}vh`,
+        --max-height: ${this._dialogMaxViewpointHeight}dvh;
-        minHeight: `${this._dialogMinViewpointHeight}vh`,
+        --min-height: ${this._dialogMinViewpointHeight}vh;
-      })}
+        --min-height: ${this._dialogMinViewpointHeight}dvh;
+      `}
     >
       <div class="handle-wrapper">
         <div
@@ -213,12 +213,14 @@ export class HaResizableBottomSheet extends LitElement {
       cursor: grabbing;
     }
     dialog {
-      height: auto;
+      height: var(--height, auto);
-      max-height: 70vh;
+      max-height: var(--max-height, 70vh);
-      min-height: 30vh;
+      max-height: var(--max-height, 70dvh);
+      min-height: var(--min-height, 30vh);
+      min-height: var(--min-height, 30dvh);
       background-color: var(
-        --ha-dialog-surface-background,
+        --ha-bottom-sheet-surface-background,
-        var(--mdc-theme-surface, #fff)
+        var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
       );
       display: flex;
       flex-direction: column;
@@ -239,12 +241,12 @@ export class HaResizableBottomSheet extends LitElement {
       inset-inline-start: 0;
       box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.2);
       border-top-left-radius: var(
-        --ha-dialog-border-radius,
+        --ha-bottom-sheet-border-radius,
-        var(--ha-border-radius-2xl)
+        var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
       );
       border-top-right-radius: var(
-        --ha-dialog-border-radius,
+        --ha-bottom-sheet-border-radius,
-        var(--ha-border-radius-2xl)
+        var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
       );
       transform: translateY(100%);
       transition: transform ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms ease;
@@ -254,7 +256,6 @@ export class HaResizableBottomSheet extends LitElement {
       border-bottom-width: 0;
       border-style: var(--ha-bottom-sheet-border-style);
       border-color: var(--ha-bottom-sheet-border-color);
-      margin-bottom: var(--safe-area-inset-bottom);
       margin-left: var(--safe-area-inset-left);
       margin-right: var(--safe-area-inset-right);
     }

src/components/ha-segmented-bar.ts

@@ -39,22 +39,24 @@ class HaSegmentedBar extends LitElement {
           <slot name="extra"></slot>
         </div>
         <div class="bar">
-          ${this.segments.map((segment) => {
+          ${this.segments.map(
-            const bar = html`<div
+            (segment, index) => html`
-              style=${styleMap({
+              ${this.hideTooltip || !segment.label
-                width: `${(segment.value / totalValue) * 100}%`,
+                ? nothing
-                backgroundColor: segment.color,
+                : html`
-              })}
+                    <ha-tooltip for="segment-${index}" placement="top">
-            ></div>`;
+                      ${segment.label}
-            return this.hideTooltip && !segment.label
+                    </ha-tooltip>
-              ? bar
+                  `}
-              : html`
+              <div
-                  <ha-tooltip>
+                id="segment-${index}"
-                    <span slot="content">${segment.label}</span>
+                style=${styleMap({
-                    ${bar}
+                  width: `${(segment.value / totalValue) * 100}%`,
-                  </ha-tooltip>
+                  backgroundColor: segment.color,
-                `;
+                })}
-          })}
+              ></div>
+            `
+          )}
         </div>
         ${this.hideLegend
           ? nothing

src/components/ha-selector/ha-selector-number.ts

@@ -82,12 +82,12 @@ export class HaNumberSelector extends LitElement {
                 labeled
                 .min=${this.selector.number!.min}
                 .max=${this.selector.number!.max}
-                .value=${this.value ?? ""}
+                .value=${this.value}
                 .step=${sliderStep}
                 .disabled=${this.disabled}
                 .required=${this.required}
                 @change=${this._handleSliderChange}
-                .ticks=${this.selector.number?.slider_ticks}
+                .withMarkers=${this.selector.number?.slider_ticks || false}
               >
               </ha-slider>
             `

src/components/ha-slider.ts

@@ -19,7 +19,6 @@ export class HaSlider extends Slider {
       Slider.styles,
       css`
         :host {
-          --wa-form-control-activated-color: var(--primary-color);
           --track-size: var(--ha-slider-track-size, 4px);
           --marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
           --marker-width: calc(var(--ha-slider-track-size, 4px) / 2);
@@ -54,6 +53,7 @@ export class HaSlider extends Slider {
 
         #thumb {
           border: none;
+          background-color: var(--ha-slider-thumb-color, var(--primary-color));
         }
 
         #slider:focus-visible:not(.disabled) #thumb,
@@ -62,14 +62,21 @@ export class HaSlider extends Slider {
           outline: var(--wa-focus-ring);
         }
 
+        #indicator {
+          background-color: var(
+            --ha-slider-indicator-color,
+            var(--primary-color)
+          );
+        }
+
         :host([size="medium"]) {
-          --thumb-width: var(--ha-font-size-l, 1.25em);
+          --thumb-width: 20px;
-          --thumb-height: var(--ha-font-size-l, 1.25em);
+          --thumb-height: 20px;
         }
 
         :host([size="small"]) {
-          --thumb-width: var(--ha-font-size-m, 1em);
+          --thumb-width: 16px;
-          --thumb-height: var(--ha-font-size-m, 1em);
+          --thumb-height: 16px;
         }
       `,
     ];

src/components/ha-tab-group-tab.ts

@@ -18,6 +18,8 @@ export class HaTabGroupTab extends Tab {
           opacity: 0.8;
 
           color: inherit;
+
+          --wa-space-l: 16px;
         }
 
         :host([active]:not([disabled])) {

src/components/ha-tooltip.ts

@@ -17,7 +17,7 @@ export class HaTooltip extends Tooltip {
       css`
         :host {
           --wa-tooltip-background-color: var(--secondary-background-color);
-          --wa-tooltip-color: var(--primary-text-color);
+          --wa-tooltip-content-color: var(--primary-text-color);
           --wa-tooltip-font-family: var(
             --ha-tooltip-font-family,
             var(--ha-font-family-body)

src/data/config_flow.ts

@@ -12,6 +12,7 @@ export const DISCOVERY_SOURCES = [
   "bluetooth",
   "dhcp",
   "discovery",
+  "esphome",
   "hardware",
   "hassio",
   "homekit",

src/data/lovelace/config/badge.ts

@@ -4,6 +4,7 @@ export interface LovelaceBadgeConfig {
   type: string;
   [key: string]: any;
   visibility?: Condition[];
+  disabled?: boolean;
 }
 
 export const ensureBadgeConfig = (

src/dialogs/config-flow/step-flow-loading.ts

@@ -26,20 +26,21 @@ class StepFlowLoading extends LitElement {
       this.step
     );
     return html`
-      <div class="init-spinner">
+      <div class="content">
+        <ha-spinner size="large"></ha-spinner>
         ${description ? html`<div>${description}</div>` : ""}
-        <ha-spinner></ha-spinner>
       </div>
     `;
   }
 
   static styles = css`
-    .init-spinner {
+    .content {
+      margin-top: 0;
       padding: 50px 100px;
       text-align: center;
     }
     ha-spinner {
-      margin-top: 16px;
+      margin-bottom: 16px;
     }
   `;
 }

src/dialogs/config-flow/step-flow-progress.ts

@@ -34,7 +34,7 @@ class StepFlowProgress extends LitElement {
                 )}%</ha-progress-ring
               >
             `
-          : html` <ha-spinner size="large"></ha-spinner> `}
+          : html`<ha-spinner size="large"></ha-spinner>`}
         ${this.flowConfig.renderShowFormProgressDescription(
           this.hass,
           this.step
@@ -48,6 +48,7 @@ class StepFlowProgress extends LitElement {
       configFlowContentStyles,
       css`
         .content {
+          margin-top: 0;
           padding: 50px 100px;
           text-align: center;
         }

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

@@ -9,8 +9,9 @@ import {
   mdiVolumeOff,
   mdiVolumePlus,
 } from "@mdi/js";
+import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { classMap } from "lit/directives/class-map";
 import { stateActive } from "../../../common/entity/state_active";
@@ -19,7 +20,7 @@ import { formatDurationDigital } from "../../../common/datetime/format_duration"
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
 import "../../../components/ha-select";
-import "../../../components/ha-slider";
+import type { HaSlider } from "../../../components/ha-slider";
 import "../../../components/ha-button";
 import "../../../components/ha-svg-icon";
 import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
@@ -30,6 +31,8 @@ import type {
   MediaPlayerEntity,
 } from "../../../data/media-player";
 import {
+  cleanupMediaTitle,
+  computeMediaDescription,
   computeMediaControls,
   handleMediaControlClick,
   MediaPlayerEntityFeature,
@@ -48,10 +51,20 @@ class MoreInfoMediaPlayer extends LitElement {
 
   @property({ attribute: false }) public stateObj?: MediaPlayerEntity;
 
-  private _formateDuration(duration: number) {
+  @query("#position-slider")
+  private _positionSlider?: HaSlider;
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    if (this._positionSlider) {
+      this._positionSlider.valueFormatter = (value: number) =>
+        this._formatDuration(value);
+    }
+  }
+
+  private _formatDuration(duration: number) {
     const hours = Math.floor(duration / 3600);
     const minutes = Math.floor((duration % 3600) / 60);
-    const seconds = duration % 60;
+    const seconds = Math.floor(duration % 60);
     return formatDurationDigital(this.hass.locale, {
       hours,
       minutes,
@@ -258,16 +271,19 @@ class MoreInfoMediaPlayer extends LitElement {
 
     const stateObj = this.stateObj;
     const controls = computeMediaControls(stateObj, true);
-    const coverUrl = stateObj.attributes.entity_picture || "";
+    const coverUrl =
+      stateObj.attributes.entity_picture_local ||
+      stateObj.attributes.entity_picture ||
+      "";
     const playerObj = new HassMediaPlayerEntity(this.hass, this.stateObj);
-    const position = Math.floor(playerObj.currentProgress) || 0;
+
-    const duration = stateObj.attributes.media_duration || 0;
+    const position = Math.max(Math.floor(playerObj.currentProgress || 0), 0);
-    const remaining = duration - position;
+    const duration = Math.max(stateObj.attributes.media_duration || 0, 0);
-    const durationFormated =
+    const remaining = Math.max(duration - position, 0);
-      remaining > 0 ? this._formateDuration(remaining) : 0;
+    const remainingFormatted = this._formatDuration(remaining);
-    const postionFormated = this._formateDuration(position);
+    const positionFormatted = this._formatDuration(position);
-    const primaryTitle = playerObj.primaryTitle;
+    const primaryTitle = cleanupMediaTitle(stateObj.attributes.media_title);
-    const secondaryTitle = playerObj.secondaryTitle;
+    const secondaryTitle = computeMediaDescription(stateObj);
     const turnOn = controls?.find((c) => c.action === "turn_on");
     const turnOff = controls?.find((c) => c.action === "turn_off");
 
@@ -313,6 +329,7 @@ class MoreInfoMediaPlayer extends LitElement {
         ? html`
             <div class="position-bar">
               <ha-slider
+                id="position-slider"
                 min="0"
                 max=${duration}
                 step="1"
@@ -323,11 +340,10 @@ class MoreInfoMediaPlayer extends LitElement {
                 @change=${this._handleMediaSeekChanged}
                 ?disabled=${!stateActive(stateObj) ||
                 !supportsFeature(stateObj, MediaPlayerEntityFeature.SEEK)}
-              ></ha-slider>
+              >
-              <div class="position-info-row">
+                <span slot="reference">${positionFormatted}</span>
-                <span class="position-time">${postionFormated}</span>
+                <span slot="reference">${remainingFormatted}</span>
-                <span class="duration-time">${durationFormated}</span>
+              </ha-slider>
-              </div>
             </div>
           `
         : nothing}
@@ -348,28 +364,31 @@ class MoreInfoMediaPlayer extends LitElement {
                     </ha-icon-button>`
                   : html`<span class="spacer"></span>`;
               })}
-              ${["media_play_pause", "media_pause", "media_play"].map(
+              ${[
-                (action) => {
+                "media_play_pause",
-                  const control = controls?.find((c) => c.action === action);
+                "media_pause",
-                  return control
+                "media_play",
-                    ? html`<ha-button
+                "media_stop",
-                        variant="brand"
+              ].map((action) => {
-                        appearance="filled"
+                const control = controls?.find((c) => c.action === action);
-                        size="medium"
+                return control
-                        action=${action}
+                  ? html`<ha-button
-                        @click=${this._handleClick}
+                      variant="brand"
-                        class="center-control"
+                      appearance="filled"
-                      >
+                      size="medium"
-                        <ha-svg-icon
+                      action=${action}
-                          .path=${control.icon}
+                      @click=${this._handleClick}
-                          aria-label=${this.hass.localize(
+                      class="center-control"
-                            `ui.card.media_player.${control.action}`
+                    >
-                          )}
+                      <ha-svg-icon
-                        ></ha-svg-icon>
+                        .path=${control.icon}
-                      </ha-button>`
+                        aria-label=${this.hass.localize(
-                    : nothing;
+                          `ui.card.media_player.${control.action}`
-                }
+                        )}
-              )}
+                      ></ha-svg-icon>
+                    </ha-button>`
+                  : nothing;
+              })}
               ${["media_next_track", "shuffle_set"].map((action) => {
                 const control = controls?.find((c) => c.action === action);
                 return control
@@ -477,6 +496,22 @@ class MoreInfoMediaPlayer extends LitElement {
       height: 320px;
     }
 
+    @media (max-height: 750px) {
+      .cover-container {
+        height: 120px;
+      }
+
+      .cover-image {
+        width: 100px;
+        height: 100px;
+      }
+
+      .cover-image--playing {
+        width: 120px;
+        height: 120px;
+      }
+    }
+
     .empty-cover {
       background-color: var(--secondary-background-color);
       font-size: 1.5em;
@@ -548,13 +583,8 @@ class MoreInfoMediaPlayer extends LitElement {
       flex-direction: column;
     }
 
-    .position-info-row {
+    .position-bar ha-slider::part(references) {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
       color: var(--secondary-text-color);
-      padding: 0 8px;
-      font-size: var(--ha-font-size-s);
     }
 
     .media-info-row {

src/dialogs/tts-try/dialog-tts-try.ts

@@ -8,6 +8,7 @@ import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-textarea";
 import type { HaTextArea } from "../../components/ha-textarea";
 import { convertTextToSpeech } from "../../data/tts";
+import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { showAlertDialog } from "../generic/show-dialog-box";
 import type { TTSTryDialogParams } from "./show-dialog-tts-try";
@@ -149,21 +150,24 @@ export class TTSTryDialog extends LitElement {
     });
   }
 
-  static styles = css`
+  static styles = [
-    ha-dialog {
+    haStyleDialog,
-      --mdc-dialog-max-width: 500px;
+    css`
-    }
+      ha-dialog {
-    ha-textarea,
+        --mdc-dialog-max-width: 500px;
-    ha-select {
+      }
-      width: 100%;
+      ha-textarea,
-    }
+      ha-select {
-    ha-select {
+        width: 100%;
-      margin-top: 8px;
+      }
-    }
+      ha-select {
-    .loading {
+        margin-top: 8px;
-      height: 36px;
+      }
-    }
+      .loading {
-  `;
+        height: 36px;
+      }
+    `,
+  ];
 }
 
 declare global {

src/layouts/hass-subpage.ts

@@ -5,8 +5,8 @@ import { restoreScroll } from "../common/decorators/restore-scroll";
 import { goBack } from "../common/navigate";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
-import type { HomeAssistant } from "../types";
 import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
 
 @customElement("hass-subpage")
 class HassSubpage extends LitElement {
@@ -154,9 +154,15 @@ class HassSubpage extends LitElement {
               1px - var(--header-height, 0px) - var(
                 --safe-area-inset-top,
                 0px
-              ) - var(--safe-area-inset-bottom, 0px)
+              ) - var(
+                --hass-subpage-bottom-inset,
+                var(--safe-area-inset-bottom, 0px)
+              )
+          );
+          margin-bottom: var(
+            --hass-subpage-bottom-inset,
+            var(--safe-area-inset-bottom)
           );
-          margin-bottom: var(--safe-area-inset-bottom);
           margin-right: var(--safe-area-inset-right);
           overflow-y: auto;
           overflow: auto;

src/mixins/keyboard-shortcut-mixin.ts

@@ -12,11 +12,11 @@ export const KeyboardShortcutMixin = <T extends Constructor<LitElement>>(
   class extends superClass {
     private _keydownEvent = (event: KeyboardEvent) => {
       const supportedShortcuts = this.supportedShortcuts();
+      const key = event.shiftKey ? event.key.toUpperCase() : event.key;
       if (
         (event.ctrlKey || event.metaKey) &&
-        !event.shiftKey &&
         !event.altKey &&
-        event.key in supportedShortcuts
+        key in supportedShortcuts
       ) {
         // Only capture the event if the user is not focused on an input
         if (!canOverrideAlphanumericInput(event.composedPath())) {
@@ -27,14 +27,14 @@ export const KeyboardShortcutMixin = <T extends Constructor<LitElement>>(
           return;
         }
         event.preventDefault();
-        supportedShortcuts[event.key]();
+        supportedShortcuts[key]();
         return;
       }
 
       const supportedSingleKeyShortcuts = this.supportedSingleKeyShortcuts();
-      if (event.key in supportedSingleKeyShortcuts) {
+      if (key in supportedSingleKeyShortcuts) {
         event.preventDefault();
-        supportedSingleKeyShortcuts[event.key]();
+        supportedSingleKeyShortcuts[key]();
       }
     };
 

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

@@ -1,5 +1,6 @@
 import { consume } from "@lit/context";
 import {
+  mdiAppleKeyboardCommand,
   mdiCog,
   mdiContentSave,
   mdiDebugStepOver,
@@ -73,8 +74,10 @@ import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info
 import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
+import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { Entries, HomeAssistant, Route } from "../../../types";
+import { isMac } from "../../../util/is_mac";
 import { showToast } from "../../../util/toast";
 import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
 import "../ha-config-section";
@@ -86,7 +89,6 @@ import {
 import "./blueprint-automation-editor";
 import "./manual-automation-editor";
 import type { HaManualAutomationEditor } from "./manual-automation-editor";
-import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -215,6 +217,10 @@ export class HaAutomationEditor extends UndoRedoMixin<
       : undefined;
 
     const useBlueprint = "use_blueprint" in this._config;
+    const shortcutIcon = isMac
+      ? html`<ha-svg-icon .path=${mdiAppleKeyboardCommand}></ha-svg-icon>`
+      : this.hass.localize("ui.panel.config.automation.editor.ctrl");
+
     return html`
       <hass-subpage
         .hass=${this.hass}
@@ -231,16 +237,42 @@ export class HaAutomationEditor extends UndoRedoMixin<
                 .path=${mdiUndo}
                 @click=${this.undo}
                 .disabled=${!this.canUndo}
+                id="button-undo"
               >
               </ha-icon-button>
+              <ha-tooltip placement="bottom" for="button-undo">
+                ${this.hass.localize("ui.common.undo")}
+                <span class="shortcut"
+                  >(
+                  <span>${shortcutIcon}</span>
+                  <span>+</span>
+                  <span>Z</span>)
+                </span>
+              </ha-tooltip>
               <ha-icon-button
                 slot="toolbar-icon"
                 .label=${this.hass.localize("ui.common.redo")}
                 .path=${mdiRedo}
                 @click=${this.redo}
                 .disabled=${!this.canRedo}
+                id="button-redo"
               >
-              </ha-icon-button>`
+              </ha-icon-button>
+              <ha-tooltip placement="bottom" for="button-redo">
+                ${this.hass.localize("ui.common.redo")}
+                <span class="shortcut">
+                  (
+                  ${isMac
+                    ? html`<span>${shortcutIcon}</span>
+                        <span>+</span>
+                        <span>Shift</span>
+                        <span>+</span>
+                        <span>Z</span>`
+                    : html`<span>${shortcutIcon}</span>
+                        <span>+</span>
+                        <span>Y</span>`})
+                </span>
+              </ha-tooltip>`
           : nothing}
         ${this._config?.id && !this.narrow
           ? html`
@@ -1171,6 +1203,7 @@ export class HaAutomationEditor extends UndoRedoMixin<
       Delete: () => this._deleteSelectedRow(),
       Backspace: () => this._deleteSelectedRow(),
       z: () => this.undo(),
+      Z: () => this.redo(),
       y: () => this.redo(),
     };
   }
@@ -1224,6 +1257,7 @@ export class HaAutomationEditor extends UndoRedoMixin<
             --ha-automation-editor-width,
             1540px
           );
+          --hass-subpage-bottom-inset: 0px;
         }
         ha-fade-in {
           display: flex;
@@ -1292,6 +1326,15 @@ export class HaAutomationEditor extends UndoRedoMixin<
         ha-fab.dirty {
           bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
         }
+        ha-tooltip ha-svg-icon {
+          width: 12px;
+        }
+        ha-tooltip .shortcut {
+          display: inline-flex;
+          flex-direction: row;
+          align-items: center;
+          gap: 2px;
+        }
       `,
     ];
   }

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

@@ -292,9 +292,7 @@ export default class HaAutomationSidebar extends LitElement {
     :host {
       z-index: 6;
       outline: none;
-      height: calc(
+      height: calc(100% - var(--safe-area-inset-top, 0px));
-        100% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom)
-      );
       --ha-card-border-radius: var(
         --ha-dialog-border-radius,
         var(--ha-border-radius-2xl)
@@ -304,7 +302,6 @@ export default class HaAutomationSidebar extends LitElement {
       --ha-bottom-sheet-border-style: solid;
       --ha-bottom-sheet-border-color: var(--primary-color);
       margin-top: var(--safe-area-inset-top);
-      margin-bottom: var(--safe-area-inset-bottom);
     }
 
     @media all and (max-width: 870px) {

src/panels/config/automation/styles.ts

@@ -145,24 +145,19 @@ export const manualEditorStyles = css`
 
   .content {
     padding-top: 24px;
-    padding-bottom: 72px;
+    padding-bottom: max(var(--safe-area-inset-bottom), 32px);
     transition: padding-bottom 180ms ease-in-out;
   }
 
   .content.has-bottom-sheet {
-    padding-bottom: calc(90vh - 72px);
+    padding-bottom: calc(90vh - max(var(--safe-area-inset-bottom), 32px));
   }
 
   ha-automation-sidebar {
     position: fixed;
     top: calc(var(--header-height) + 16px);
-    height: calc(
+    height: calc(-81px + 100vh - var(--safe-area-inset-top, 0px));
-      -81px +
+    height: calc(-81px + 100dvh - var(--safe-area-inset-top, 0px));
-        100dvh - var(--safe-area-inset-top, 0px) - var(
-          --safe-area-inset-bottom,
-          0px
-        )
-    );
     width: var(--sidebar-width);
     display: block;
   }

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

@@ -213,6 +213,7 @@ class HaConfigEnergy extends LitElement {
           this.hass.states[key],
         ])
       ),
+      issues: this._validationResult,
     };
     const json = JSON.stringify(data, null, 2);
     const blob = new Blob([json], { type: "application/json" });

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

@@ -1,5 +1,6 @@
 import { consume } from "@lit/context";
 import {
+  mdiAppleKeyboardCommand,
   mdiCog,
   mdiContentSave,
   mdiDebugStepOver,
@@ -64,8 +65,10 @@ import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { Entries, HomeAssistant, Route } from "../../../types";
+import { isMac } from "../../../util/is_mac";
 import { showToast } from "../../../util/toast";
 import { showAutomationModeDialog } from "../automation/automation-mode-dialog/show-dialog-automation-mode";
 import type { EntityRegistryUpdate } from "../automation/automation-save-dialog/show-dialog-automation-save";
@@ -74,7 +77,6 @@ import { showAssignCategoryDialog } from "../category/show-dialog-assign-categor
 import "./blueprint-script-editor";
 import "./manual-script-editor";
 import type { HaManualScriptEditor } from "./manual-script-editor";
-import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
 
 const baseEditorMixins = SubscribeMixin(
   PreventUnsavedMixin(KeyboardShortcutMixin(LitElement))
@@ -168,6 +170,10 @@ export class HaScriptEditor extends UndoRedoMixin<
       : undefined;
 
     const useBlueprint = "use_blueprint" in this._config;
+    const shortcutIcon = isMac
+      ? html`<ha-svg-icon .path=${mdiAppleKeyboardCommand}></ha-svg-icon>`
+      : this.hass.localize("ui.panel.config.automation.editor.ctrl");
+
     return html`
       <hass-subpage
         .hass=${this.hass}
@@ -184,16 +190,41 @@ export class HaScriptEditor extends UndoRedoMixin<
                 .path=${mdiUndo}
                 @click=${this.undo}
                 .disabled=${!this.canUndo}
+                id="button-undo"
               >
               </ha-icon-button>
+              <ha-tooltip placement="bottom" for="button-undo">
+                ${this.hass.localize("ui.common.undo")}
+                <span class="shortcut">
+                  (<span>${shortcutIcon}</span>
+                  <span>+</span>
+                  <span>Z</span>)
+                </span>
+              </ha-tooltip>
               <ha-icon-button
                 slot="toolbar-icon"
                 .label=${this.hass.localize("ui.common.redo")}
                 .path=${mdiRedo}
                 @click=${this.redo}
                 .disabled=${!this.canRedo}
+                id="button-redo"
               >
-              </ha-icon-button>`
+              </ha-icon-button>
+              <ha-tooltip placement="bottom" for="button-redo">
+                ${this.hass.localize("ui.common.redo")}
+                <span class="shortcut"
+                  >(
+                  ${isMac
+                    ? html`<span>${shortcutIcon}</span>
+                        <span>+</span>
+                        <span>Shift</span>
+                        <span>+</span>
+                        <span>Z</span>`
+                    : html`<span>${shortcutIcon}</span>
+                        <span>+</span>
+                        <span>Y</span>`})
+                </span>
+              </ha-tooltip>`
           : nothing}
         ${this.scriptId && !this.narrow
           ? html`
@@ -1080,6 +1111,7 @@ export class HaScriptEditor extends UndoRedoMixin<
       Delete: () => this._deleteSelectedRow(),
       Backspace: () => this._deleteSelectedRow(),
       z: () => this.undo(),
+      Z: () => this.redo(),
       y: () => this.redo(),
     };
   }
@@ -1133,6 +1165,7 @@ export class HaScriptEditor extends UndoRedoMixin<
             --ha-automation-editor-width,
             1540px
           );
+          --hass-subpage-bottom-inset: 0px;
         }
         .yaml-mode {
           height: 100%;
@@ -1233,6 +1266,15 @@ export class HaScriptEditor extends UndoRedoMixin<
           text-decoration: none;
           color: var(--primary-color);
         }
+        ha-tooltip ha-svg-icon {
+          width: 12px;
+        }
+        ha-tooltip .shortcut {
+          display: inline-flex;
+          flex-direction: row;
+          align-items: center;
+          gap: 2px;
+        }
       `,
     ];
   }

src/panels/lovelace/badges/hui-badge.ts

@@ -161,7 +161,7 @@ export class HuiBadge extends ReactiveElement {
     );
   }
 
-  private _updateVisibility(forceVisible?: boolean) {
+  private _updateVisibility(ignoreConditions?: boolean) {
     if (!this._element || !this.hass) {
       return;
     }
@@ -171,9 +171,18 @@ export class HuiBadge extends ReactiveElement {
       return;
     }
 
+    if (this.preview) {
+      this._setElementVisibility(true);
+      return;
+    }
+
+    if (this.config?.disabled) {
+      this._setElementVisibility(false);
+      return;
+    }
+
     const visible =
-      forceVisible ||
+      ignoreConditions ||
-      this.preview ||
       !this.config?.visibility ||
       checkConditionsMet(this.config.visibility, this.hass);
     this._setElementVisibility(visible);

src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts

@@ -1,30 +1,32 @@
+import { mdiWaterBoiler } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stateColorCss } from "../../../common/entity/state_color";
-import "../../../components/ha-control-button";
-import "../../../components/ha-control-button-group";
 import "../../../components/ha-control-select";
 import type { ControlSelectOption } from "../../../components/ha-control-select";
-import "../../../components/ha-control-slider";
+import "../../../components/ha-control-select-menu";
-import { UNAVAILABLE } from "../../../data/entity";
+import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu";
+import "../../../components/ha-list-item";
 import type {
   OperationMode,
   WaterHeaterEntity,
 } from "../../../data/water_heater";
 import {
-  compareWaterHeaterOperationMode,
   computeOperationModeIcon,
+  compareWaterHeaterOperationMode,
 } from "../../../data/water_heater";
+import { UNAVAILABLE } from "../../../data/entity";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
 import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
 import type {
-  LovelaceCardFeatureContext,
   WaterHeaterOperationModesCardFeatureConfig,
+  LovelaceCardFeatureContext,
 } from "./types";
 
 export const supportsWaterHeaterOperationModesCardFeature = (
@@ -52,6 +54,9 @@ class HuiWaterHeaterOperationModeCardFeature
 
   @state() _currentOperationMode?: OperationMode;
 
+  @query("ha-control-select-menu", true)
+  private _haSelect?: HaControlSelectMenu;
+
   private get _stateObj() {
     if (!this.hass || !this.context || !this.context.entity_id) {
       return undefined;
@@ -97,8 +102,23 @@ class HuiWaterHeaterOperationModeCardFeature
     }
   }
 
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (this._haSelect && changedProps.has("hass")) {
+      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+      if (
+        this.hass &&
+        this.hass.formatEntityAttributeValue !==
+          oldHass?.formatEntityAttributeValue
+      ) {
+        this._haSelect.layoutOptions();
+      }
+    }
+  }
+
   private async _valueChanged(ev: CustomEvent) {
-    const mode = (ev.detail as any).value as OperationMode;
+    const mode =
+      (ev.detail as any).value ?? ((ev.target as any).value as OperationMode);
 
     if (mode === this._stateObj!.state) return;
 
@@ -143,9 +163,48 @@ class HuiWaterHeaterOperationModeCardFeature
     ).map<ControlSelectOption>((mode) => ({
       value: mode,
       label: this.hass!.formatEntityState(this._stateObj!, mode),
-      path: computeOperationModeIcon(mode as OperationMode),
+      icon: html`
+        <ha-svg-icon
+          slot="graphic"
+          .path=${computeOperationModeIcon(mode as OperationMode)}
+        ></ha-svg-icon>
+      `,
     }));
 
+    if (this._config.style === "dropdown") {
+      return html`
+        <ha-control-select-menu
+          show-arrow
+          hide-label
+          .label=${this.hass.localize("ui.card.water_heater.mode")}
+          .value=${this._currentOperationMode}
+          .disabled=${this._stateObj.state === UNAVAILABLE}
+          fixedMenuPosition
+          naturalMenuWidth
+          @selected=${this._valueChanged}
+          @closed=${stopPropagation}
+        >
+          ${this._currentOperationMode
+            ? html`
+                <ha-svg-icon
+                  slot="icon"
+                  .path=${computeOperationModeIcon(this._currentOperationMode)}
+                ></ha-svg-icon>
+              `
+            : html`
+                <ha-svg-icon slot="icon" .path=${mdiWaterBoiler}></ha-svg-icon>
+              `}
+          ${options.map(
+            (option) => html`
+              <ha-list-item .value=${option.value} graphic="icon">
+                ${option.icon}${option.label}
+              </ha-list-item>
+            `
+          )}
+        </ha-control-select-menu>
+      `;
+    }
+
     return html`
       <ha-control-select
         .options=${options}

src/panels/lovelace/card-features/types.ts

@@ -140,6 +140,7 @@ export interface ToggleCardFeatureConfig {
 
 export interface WaterHeaterOperationModesCardFeatureConfig {
   type: "water-heater-operation-modes";
+  style?: "dropdown" | "icons";
   operation_modes?: OperationMode[];
 }
 

src/panels/lovelace/cards/energy/common/energy-chart-options.ts

@@ -26,6 +26,7 @@ import {
 } from "../../../../../common/datetime/format_date";
 import { formatTime } from "../../../../../common/datetime/format_time";
 import type { ECOption } from "../../../../../resources/echarts";
+import { filterXSS } from "../../../../../common/util/xss";
 
 export function getSuggestedMax(dayDifference: number, end: Date): number {
   let suggestedMax = new Date(end);
@@ -191,7 +192,7 @@ function formatTooltip(
           countNegative++;
         }
       }
-      return `${param.marker} ${param.seriesName}: ${value} ${unit}`;
+      return `${param.marker} ${filterXSS(param.seriesName!)}: ${value} ${unit}`;
     })
     .filter(Boolean);
   let footer = "";

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -6,6 +6,7 @@ import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import type { BarSeriesOption } from "echarts/charts";
 import type { ECElementEvent } from "echarts/types/dist/shared";
+import { filterXSS } from "../../../../common/util/xss";
 import { getGraphColorByIndex } from "../../../../common/color/colors";
 import { formatNumber } from "../../../../common/number/format_number";
 import "../../../../components/chart/ha-chart-base";
@@ -96,9 +97,8 @@ export class HuiEnergyDevicesGraphCard
   }
 
   private _renderTooltip(params: any) {
-    const title = `<h4 style="text-align: center; margin: 0;">${this._getDeviceName(
+    const deviceName = filterXSS(this._getDeviceName(params.value[1]));
-      params.value[1]
+    const title = `<h4 style="text-align: center; margin: 0;">${deviceName}</h4>`;
-    )}</h4>`;
     const value = `${formatNumber(
       params.value[0] as number,
       this.hass.locale,

src/panels/lovelace/editor/config-elements/hui-water-heater-operation-modes-card-feature-editor.ts

@@ -16,6 +16,7 @@ import type {
 } from "../../card-features/types";
 import type { LovelaceCardFeatureEditor } from "../../types";
 import { compareWaterHeaterOperationMode } from "../../../../data/water_heater";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 
 type WaterHeaterOperationModesCardFeatureData =
   WaterHeaterOperationModesCardFeatureConfig & {
@@ -39,11 +40,27 @@ export class HuiWaterHeaterOperationModesCardFeatureEditor
 
   private _schema = memoizeOne(
     (
+      localize: LocalizeFunc,
       formatEntityState: FormatEntityStateFunc,
       stateObj: HassEntity | undefined,
       customizeModes: boolean
     ) =>
       [
+        {
+          name: "style",
+          selector: {
+            select: {
+              multiple: false,
+              mode: "list",
+              options: ["dropdown", "icons"].map((mode) => ({
+                value: mode,
+                label: localize(
+                  `ui.panel.lovelace.editor.features.types.water-heater-operation-modes.style_list.${mode}`
+                ),
+              })),
+            },
+          },
+        },
         {
           name: "customize_modes",
           selector: {
@@ -85,11 +102,13 @@ export class HuiWaterHeaterOperationModesCardFeatureEditor
       : undefined;
 
     const data: WaterHeaterOperationModesCardFeatureData = {
+      style: "icons",
       ...this._config,
       customize_modes: this._config.operation_modes !== undefined,
     };
 
     const schema = this._schema(
+      this.hass.localize,
       this.hass.formatEntityState,
       stateObj,
       data.customize_modes
@@ -131,6 +150,7 @@ export class HuiWaterHeaterOperationModesCardFeatureEditor
   ) => {
     switch (schema.name) {
       case "operation_modes":
+      case "style":
       case "customize_modes":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.features.types.water-heater-operation-modes.${schema.name}`

src/panels/lovelace/editor/structs/base-badge-struct.ts

@@ -1,6 +1,7 @@
-import { object, string, any } from "superstruct";
+import { object, string, any, optional, boolean } from "superstruct";
 
 export const baseLovelaceBadgeConfig = object({
   type: string(),
   visibility: any(),
+  disabled: optional(boolean()),
 });

src/panels/lovelace/editor/structs/base-card-struct.ts

@@ -1,4 +1,4 @@
-import { object, string, any } from "superstruct";
+import { object, string, any, optional, boolean } from "superstruct";
 
 export const baseLovelaceCardConfig = object({
   type: string(),
@@ -6,4 +6,5 @@ export const baseLovelaceCardConfig = object({
   layout_options: any(),
   grid_options: any(),
   visibility: any(),
+  disabled: optional(boolean()),
 });

src/panels/lovelace/hui-root.ts

@@ -318,7 +318,7 @@ class HUIRoot extends LitElement {
               menu-corner="END"
             >
               <ha-icon-button
-                .label=${label}
+                .id="button-${index}"
                 .path=${item.icon}
                 slot="trigger"
               ></ha-icon-button>
@@ -340,6 +340,9 @@ class HUIRoot extends LitElement {
                   `
                 )}
             </ha-button-menu>
+            <ha-tooltip placement="bottom" .for="button-${index}">
+              ${label}
+            </ha-tooltip>
           `
         : html`
             <ha-icon-button

src/panels/lovelace/strategies/usage_prediction/common-controls-section-strategy.ts

@@ -4,13 +4,14 @@ import { isComponentLoaded } from "../../../../common/config/is_component_loaded
 import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
 import { getCommonControlUsagePrediction } from "../../../../data/usage_prediction";
 import type { HomeAssistant } from "../../../../types";
-import type { TileCardConfig } from "../../cards/types";
+import type { HeadingCardConfig, TileCardConfig } from "../../cards/types";
 
 const DEFAULT_LIMIT = 8;
 
 export interface CommonControlSectionStrategyConfig {
   type: "common-controls";
   title?: string;
+  icon?: string;
   limit?: number;
   exclude_entities?: string[];
   hide_empty?: boolean;
@@ -31,7 +32,8 @@ export class CommonControlsSectionStrategy extends ReactiveElement {
       section.cards?.push({
         type: "heading",
         heading: config.title,
-      });
+        icon: config.icon,
+      } satisfies HeadingCardConfig);
     }
 
     if (!isComponentLoaded(hass, "usage_prediction")) {

src/resources/polyfills/intl-polyfill.ts

@@ -14,7 +14,15 @@ import {
   polyfillTimeZoneData,
 } from "./locale-data-polyfill";
 
+let polyfilled = false;
+
+const _polyfillTimeZoneData = polyfillTimeZoneData;
+
 const polyfillIntl = async () => {
+  if (polyfilled) {
+    return;
+  }
+  polyfilled = true;
   const locale = getLocalLanguage();
   const polyfills: Promise<unknown>[] = [];
   if (shouldPolyfillGetCanonicalLocales()) {
@@ -26,7 +34,7 @@ const polyfillIntl = async () => {
   if (shouldPolyfillDateTimeFormat(locale)) {
     polyfills.push(
       import("@formatjs/intl-datetimeformat/polyfill-force").then(() =>
-        polyfillTimeZoneData()
+        _polyfillTimeZoneData()
       )
     );
   }
@@ -58,7 +66,7 @@ const polyfillIntl = async () => {
   if (polyfills.length === 0) {
     return;
   }
-  await Promise.all(polyfills).then(() =>
+  await Promise.allSettled(polyfills).then(() =>
     // Load the default language
     polyfillLocaleData(locale)
   );

src/resources/styles.ts

@@ -157,8 +157,13 @@ export const haStyleDialog = css`
     ha-dialog {
       --mdc-dialog-min-width: 100vw;
       --mdc-dialog-max-width: 100vw;
-      --mdc-dialog-min-height: 100%;
+      --mdc-dialog-min-height: 100vh;
-      --mdc-dialog-max-height: 100%;
+      --mdc-dialog-min-height: 100svh;
+      --mdc-dialog-max-height: 100vh;
+      --mdc-dialog-max-height: 100svh;
+      --dialog-surface-padding: var(--safe-area-inset-top)
+        var(--safe-area-inset-right) var(--safe-area-inset-bottom)
+        var(--safe-area-inset-left);
       --vertical-align-dialog: flex-end;
       --ha-dialog-border-radius: 0;
     }

src/resources/theme/core.globals.ts

@@ -19,6 +19,29 @@ export const coreStyles = css`
     --ha-border-radius-pill: 9999px;
     --ha-border-radius-circle: 50%;
     --ha-border-radius-square: 0;
+
+    /* Spacing */
+    --ha-space-0: 0px;
+    --ha-space-1: 4px;
+    --ha-space-2: 8px;
+    --ha-space-3: 12px;
+    --ha-space-4: 16px;
+    --ha-space-5: 20px;
+    --ha-space-6: 24px;
+    --ha-space-7: 28px;
+    --ha-space-8: 32px;
+    --ha-space-9: 36px;
+    --ha-space-10: 40px;
+    --ha-space-11: 44px;
+    --ha-space-12: 48px;
+    --ha-space-13: 52px;
+    --ha-space-14: 56px;
+    --ha-space-15: 60px;
+    --ha-space-16: 64px;
+    --ha-space-17: 68px;
+    --ha-space-18: 72px;
+    --ha-space-19: 76px;
+    --ha-space-20: 80px;
   }
 `;
 

src/state/quick-bar-mixin.ts

@@ -1,4 +1,5 @@
 import type { PropertyValues } from "lit";
+import { tinykeys } from "tinykeys";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { mainWindow } from "../common/dom/get_main_window";
@@ -11,7 +12,6 @@ import type { Constructor, HomeAssistant } from "../types";
 import { storeState } from "../util/ha-pref-storage";
 import { showToast } from "../util/toast";
 import type { HassElement } from "./hass-element";
-import { ShortcutManager } from "../common/keyboard/shortcuts";
 import { extractSearchParamsObject } from "../common/url/search-params";
 import { showVoiceCommandDialog } from "../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
 import { canOverrideAlphanumericInput } from "../common/dom/can-override-input";
@@ -62,8 +62,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
     }
 
     private _registerShortcut() {
-      const shortcutManager = new ShortcutManager();
+      tinykeys(window, {
-      shortcutManager.add({
         // Those are for latin keyboards that have e, c, m keys
         e: (ev) => this._showQuickBar(ev),
         c: (ev) => this._showQuickBar(ev, QuickBarMode.Command),

src/translations/en.json

@@ -8217,7 +8217,12 @@
               "water-heater-operation-modes": {
                 "label": "Water heater operation modes",
                 "operation_modes": "Operation modes",
-                "customize_modes": "Customize operation modes"
+                "customize_modes": "Customize operation modes",
+                "style": "[%key:ui::panel::lovelace::editor::features::types::climate-preset-modes::style%]",
+                "style_list": {
+                  "dropdown": "[%key:ui::panel::lovelace::editor::features::types::climate-preset-modes::style_list::dropdown%]",
+                  "icons": "[%key:ui::panel::lovelace::editor::features::types::climate-preset-modes::style_list::icons%]"
+                }
               },
               "lawn-mower-commands": {
                 "label": "Lawn mower commands",

yarn.lock

@@ -1351,10 +1351,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ctrl/tinycolor@npm:^4.1.0":
+"@ctrl/tinycolor@npm:4.1.0":
-  version: 4.2.0
+  version: 4.1.0
-  resolution: "@ctrl/tinycolor@npm:4.2.0"
+  resolution: "@ctrl/tinycolor@npm:4.1.0"
-  checksum: 10/1be14de7d7e8184c0bc5c8d7e3486cc8186e6702e8ca899c7239f328bb1df9a15d1575e2af7b4c6ba020727fa78f5a9f887555971f30a2890cece9e4253a9d3a
+  checksum: 10/e64569399139ef0abd2eb0ec9fb7267dfd7820f7ad7d4567a63e5fc35e5cfdcb8ecdb3bad65cb9244b47ba6c77bc51085826c00e981acf263a3221dc89343adc
   languageName: node
   linkType: hard
 
@@ -1940,11 +1940,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@home-assistant/webawesome@npm:3.0.0-beta.4.ha.3":
+"@home-assistant/webawesome@npm:3.0.0-beta.6.ha.4":
-  version: 3.0.0-beta.4.ha.3
+  version: 3.0.0-beta.6.ha.4
-  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.3"
+  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.6.ha.4"
   dependencies:
-    "@ctrl/tinycolor": "npm:^4.1.0"
+    "@ctrl/tinycolor": "npm:4.1.0"
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/react": "npm:^1.0.8"
     "@shoelace-style/animations": "npm:^1.2.0"
@@ -1953,8 +1953,7 @@ __metadata:
     lit: "npm:^3.2.1"
     nanoid: "npm:^5.1.5"
     qr-creator: "npm:^1.0.0"
-    style-observer: "npm:^0.0.7"
+  checksum: 10/d9072b321126ef458468ed2cf040e0b04cb2aff73336c6e742c0cfb25d9fb674b7672e7c9abcf5bcb0aa0b2fe953c20186f0910f485024c827bfe4cf399f10a4
-  checksum: 10/b9241821ed471ccbad86b0ea4697a2d41395f05fdc26f46e5edbc7f6b5eeab5d248251ef702326312ded00d5bf850ce0dcdcf7cd5e2e542b9d9cb9a84f3726da
   languageName: node
   linkType: hard
 
@@ -4491,10 +4490,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/chromecast-caf-receiver@npm:6.0.24":
+"@types/chromecast-caf-receiver@npm:6.0.22":
-  version: 6.0.24
+  version: 6.0.22
-  resolution: "@types/chromecast-caf-receiver@npm:6.0.24"
+  resolution: "@types/chromecast-caf-receiver@npm:6.0.22"
-  checksum: 10/1f2b95e8a15dbb36d5328895229d4a5cb255b33e62d46335bd6ed75e16aa9ea6a7d765a64ae120d19b3134fb3e51e9547d2544c7277f7bffe0bf0b3999f026da
+  checksum: 10/6c51cb52527776ddfa187a261b88184c98bdd61c129dd8719cba213894d565cf69073734d6473696ffd60a768f6fb5a3fe9932693f43174fbc5e7af201db8a90
   languageName: node
   linkType: hard
 
@@ -6621,7 +6620,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^5.0.1":
+"chalk@npm:^5.0.1, chalk@npm:^5.6.0":
   version: 5.6.2
   resolution: "chalk@npm:5.6.2"
   checksum: 10/1b2f48f6fba1370670d5610f9cd54c391d6ede28f4b7062dd38244ea5768777af72e5be6b74fb6c6d54cb84c4a2dff3f3afa9b7cb5948f7f022cfd3d087989e0
@@ -6850,13 +6849,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:14.0.1":
-  version: 14.0.1
-  resolution: "commander@npm:14.0.1"
-  checksum: 10/783115e9403caeca29c0fcbd4e0358f70c67760e4e4933f3453fcdd5ddba2ec44173c8da5213d7ce5e404f51c7e71203a42c548164dbe27b668b32a8981577f1
-  languageName: node
-  linkType: hard
-
 "commander@npm:^10.0.0":
   version: 10.0.1
   resolution: "commander@npm:10.0.1"
@@ -6864,6 +6856,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^14.0.0":
+  version: 14.0.1
+  resolution: "commander@npm:14.0.1"
+  checksum: 10/783115e9403caeca29c0fcbd4e0358f70c67760e4e4933f3453fcdd5ddba2ec44173c8da5213d7ce5e404f51c7e71203a42c548164dbe27b668b32a8981577f1
+  languageName: node
+  linkType: hard
+
 "commander@npm:^2.20.0, commander@npm:^2.20.3":
   version: 2.20.3
   resolution: "commander@npm:2.20.3"
@@ -9397,7 +9396,7 @@ __metadata:
     "@fullcalendar/list": "npm:6.1.19"
     "@fullcalendar/luxon3": "npm:6.1.19"
     "@fullcalendar/timegrid": "npm:6.1.19"
-    "@home-assistant/webawesome": "npm:3.0.0-beta.4.ha.3"
+    "@home-assistant/webawesome": "npm:3.0.0-beta.6.ha.4"
     "@lezer/highlight": "npm:1.2.1"
     "@lit-labs/motion": "npm:1.0.9"
     "@lit-labs/observers": "npm:2.0.6"
@@ -9442,7 +9441,7 @@ __metadata:
     "@tsparticles/engine": "npm:3.9.1"
     "@tsparticles/preset-links": "npm:3.2.0"
     "@types/babel__plugin-transform-runtime": "npm:7.9.5"
-    "@types/chromecast-caf-receiver": "npm:6.0.24"
+    "@types/chromecast-caf-receiver": "npm:6.0.22"
     "@types/chromecast-caf-sender": "npm:1.0.11"
     "@types/color-name": "npm:2.0.0"
     "@types/culori": "npm:4.0.1"
@@ -9514,7 +9513,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.2.0"
+    lint-staged: "npm:16.1.6"
     lit: "npm:3.3.1"
     lit-analyzer: "npm:2.0.3"
     lit-html: "npm:3.3.1"
@@ -9539,7 +9538,7 @@ __metadata:
     sortablejs: "patch:sortablejs@npm%3A1.15.6#~/.yarn/patches/sortablejs-npm-1.15.6-3235a8f83b.patch"
     stacktrace-js: "npm:2.0.2"
     superstruct: "npm:2.0.2"
-    tar: "npm:7.4.4"
+    tar: "npm:7.4.3"
     terser-webpack-plugin: "npm:5.3.14"
     tinykeys: "npm:3.0.0"
     ts-lit-plugin: "npm:2.0.2"
@@ -10861,6 +10860,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lilconfig@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "lilconfig@npm:3.1.3"
+  checksum: 10/b932ce1af94985f0efbe8896e57b1f814a48c8dbd7fc0ef8469785c6303ed29d0090af3ccad7e36b626bfca3a4dc56cc262697e9a8dd867623cf09a39d54e4c3
+  languageName: node
+  linkType: hard
+
 "lines-and-columns@npm:2.0.4":
   version: 2.0.4
   resolution: "lines-and-columns@npm:2.0.4"
@@ -10868,24 +10874,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lint-staged@npm:16.2.0":
+"lint-staged@npm:16.1.6":
-  version: 16.2.0
+  version: 16.1.6
-  resolution: "lint-staged@npm:16.2.0"
+  resolution: "lint-staged@npm:16.1.6"
   dependencies:
-    commander: "npm:14.0.1"
+    chalk: "npm:^5.6.0"
-    listr2: "npm:9.0.4"
+    commander: "npm:^14.0.0"
-    micromatch: "npm:4.0.8"
+    debug: "npm:^4.4.1"
-    nano-spawn: "npm:1.0.3"
+    lilconfig: "npm:^3.1.3"
-    pidtree: "npm:0.6.0"
+    listr2: "npm:^9.0.3"
-    string-argv: "npm:0.3.2"
+    micromatch: "npm:^4.0.8"
-    yaml: "npm:2.8.1"
+    nano-spawn: "npm:^1.0.2"
+    pidtree: "npm:^0.6.0"
+    string-argv: "npm:^0.3.2"
+    yaml: "npm:^2.8.1"
   bin:
     lint-staged: bin/lint-staged.js
-  checksum: 10/809a42e21f2634c1a3e718dfb25786275a13b51c0cfaef6bb4bed509c656d31ee9b3e6231df55223b4b60cb37e4b5e3ebd958b239cabb529d2d07253cf7e1726
+  checksum: 10/922b4392ae5d3d56130e4eba706c2fa6151d5da5e21f57ab601b1d6ce9cc635ceb5e4c3dc00e7da83ba8f0cb244b82604469c7ea1470b1e6b6ea0fc12454aa08
   languageName: node
   linkType: hard
 
-"listr2@npm:9.0.4":
+"listr2@npm:^9.0.3":
   version: 9.0.4
   resolution: "listr2@npm:9.0.4"
   dependencies:
@@ -11262,7 +11271,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:4.0.8, micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.8":
+"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.8":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
   dependencies:
@@ -11467,12 +11476,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minizlib@npm:^3.0.1, minizlib@npm:^3.1.0":
+"minizlib@npm:^3.0.1":
-  version: 3.1.0
+  version: 3.0.2
-  resolution: "minizlib@npm:3.1.0"
+  resolution: "minizlib@npm:3.0.2"
   dependencies:
     minipass: "npm:^7.1.2"
-  checksum: 10/f47365cc2cb7f078cbe7e046eb52655e2e7e97f8c0a9a674f4da60d94fb0624edfcec9b5db32e8ba5a99a5f036f595680ae6fe02a262beaa73026e505cc52f99
+  checksum: 10/c075bed1594f68dcc8c35122333520112daefd4d070e5d0a228bd4cf5580e9eed3981b96c0ae1d62488e204e80fd27b2b9d0068ca9a5ef3993e9565faf63ca41
+  languageName: node
+  linkType: hard
+
+"mkdirp@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "mkdirp@npm:3.0.1"
+  bin:
+    mkdirp: dist/cjs/src/bin.js
+  checksum: 10/16fd79c28645759505914561e249b9a1f5fe3362279ad95487a4501e4467abeb714fd35b95307326b8fd03f3c7719065ef11a6f97b7285d7888306d1bd2232ba
   languageName: node
   linkType: hard
 
@@ -11516,7 +11534,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nano-spawn@npm:1.0.3":
+"nano-spawn@npm:^1.0.2":
   version: 1.0.3
   resolution: "nano-spawn@npm:1.0.3"
   checksum: 10/72c56e68ae733c81c459a338fd51e2aa3be06b1cca746c2abe83df7acfac7eee008b01833f5a8781f4ac9fc1eafd23036a44755257a669dfcc2ff2453850822a
@@ -12240,7 +12258,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pidtree@npm:0.6.0":
+"pidtree@npm:^0.6.0":
   version: 0.6.0
   resolution: "pidtree@npm:0.6.0"
   bin:
@@ -13767,7 +13785,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string-argv@npm:0.3.2":
+"string-argv@npm:^0.3.2":
   version: 0.3.2
   resolution: "string-argv@npm:0.3.2"
   checksum: 10/f9d3addf887026b4b5f997a271149e93bf71efc8692e7dc0816e8807f960b18bcb9787b45beedf0f97ff459575ee389af3f189d8b649834cac602f2e857e75af
@@ -13984,13 +14002,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"style-observer@npm:^0.0.7":
-  version: 0.0.7
-  resolution: "style-observer@npm:0.0.7"
-  checksum: 10/bb57f98bae4463c1e1b57234f8ffe72ec0de27fb08b032c1919910129c210aacd1ddd615432b9453d491e10d3b719cf6c2a68a97165ca55d6fc9b86c0fca37fb
-  languageName: node
-  linkType: hard
-
 "style-observer@npm:^0.0.8":
   version: 0.0.8
   resolution: "style-observer@npm:0.0.8"
@@ -14079,16 +14090,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tar@npm:7.4.4, tar@npm:^7.4.3":
+"tar@npm:7.4.3, tar@npm:^7.4.3":
-  version: 7.4.4
+  version: 7.4.3
-  resolution: "tar@npm:7.4.4"
+  resolution: "tar@npm:7.4.3"
   dependencies:
     "@isaacs/fs-minipass": "npm:^4.0.0"
     chownr: "npm:^3.0.0"
     minipass: "npm:^7.1.2"
-    minizlib: "npm:^3.1.0"
+    minizlib: "npm:^3.0.1"
+    mkdirp: "npm:^3.0.1"
     yallist: "npm:^5.0.0"
-  checksum: 10/be7d95e019b029ac507e7cd4b23c243ba896b67d0837c4f53d18c32a5014a24b7b247e982f4d47147b8d637c491b35cc122e19e29246137ecb2b88a495aaf1fb
+  checksum: 10/12a2a4fc6dee23e07cc47f1aeb3a14a1afd3f16397e1350036a8f4cdfee8dcac7ef5978337a4e7b2ac2c27a9a6d46388fc2088ea7c80cb6878c814b1425f8ecf
   languageName: node
   linkType: hard
 
@@ -16006,7 +16018,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:2.8.1":
+"yaml@npm:^2.8.1":
   version: 2.8.1
   resolution: "yaml@npm:2.8.1"
   bin: