clean up

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/ci.yaml

@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: |
             node_modules/.cache/prettier

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/init@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/autobuild@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/analyze@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5

.github/workflows/release.yaml

@@ -75,7 +75,7 @@ jobs:
 
       # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
-        uses: home-assistant/wheels@2025.07.0
+        uses: home-assistant/wheels@2025.09.1
         with:
           abi: cp313
           tag: musllinux_1_2

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.10.2.cjs
+yarnPath: .yarn/releases/yarn-4.10.3.cjs

cast/src/receiver/demo/cast-demo-entities.ts

@@ -75,7 +75,7 @@ export const castDemoEntities: () => Entity[] = () =>
         longitude: 4.8903147,
         radius: 100,
         friendly_name: "Home",
-        icon: "hass:home",
+        icon: "mdi:home",
       },
     },
     "input_number.harmonyvolume": {
@@ -88,7 +88,7 @@ export const castDemoEntities: () => Entity[] = () =>
         step: 1,
         mode: "slider",
         friendly_name: "Volume",
-        icon: "hass:volume-high",
+        icon: "mdi:volume-high",
       },
     },
     "climate.upstairs": {

cast/src/receiver/demo/cast-demo-lovelace.ts

@@ -56,7 +56,7 @@ export const castDemoLovelace: () => LovelaceConfig = () => {
                 type: "weblink",
                 url: "/lovelace/climate",
                 name: "Climate controls",
-                icon: "hass:arrow-right",
+                icon: "mdi:arrow-right",
               },
             ],
           },
@@ -76,7 +76,7 @@ export const castDemoLovelace: () => LovelaceConfig = () => {
                 type: "weblink",
                 url: "/lovelace/overview",
                 name: "Back",
-                icon: "hass:arrow-left",
+                icon: "mdi:arrow-left",
               },
             ],
           },

demo/src/configs/arsaboo/entities.ts

@@ -143,7 +143,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       state: "on",
       attributes: {
         friendly_name: "Home Automation",
-        icon: "hass:home-automation",
+        icon: "mdi:home-automation",
       },
     },
     "input_boolean.tvtime": {

demo/src/configs/arsaboo/lovelace.ts

@@ -4,7 +4,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
   title: "Home Assistant",
   views: [
     {
-      icon: "hass:home-assistant",
+      icon: "mdi:home-assistant",
       id: "home",
       title: "Home",
       cards: [

demo/src/configs/jimpower/lovelace.ts

@@ -1236,7 +1236,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
         },
       ],
       path: "security",
-      icon: "hass:shield-home",
+      icon: "mdi:shield-home",
       name: "Security",
       background:
         'center / cover no-repeat url("/assets/jimpower/background-15.jpg") fixed',

gallery/src/pages/components/ha-badge.ts

@@ -117,7 +117,7 @@ export class DemoHaBadge extends LitElement {
     }
     .card-content {
       display: flex;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
   `;
 }

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

@@ -155,11 +155,11 @@ export class DemoHaButton extends LitElement {
     .card-content {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
     .card-content div {
       display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
   `;
 }

gallery/src/pages/components/ha-progress-button.ts

@@ -123,11 +123,11 @@ export class DemoHaProgressButton extends LitElement {
     .card-content {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
     .card-content div {
       display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
   `;
 }

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

@@ -34,5 +34,3 @@ 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)`.

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

@@ -88,7 +88,7 @@ export class DemoHaSlider extends LitElement {
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
   `;
 }

gallery/src/pages/components/ha-spinner.ts

@@ -70,7 +70,7 @@ export class DemoHaSpinner extends LitElement {
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
   `;
 }

hassio/src/dialogs/system-managed/dialog-system-managed.ts

@@ -159,7 +159,7 @@ class HassioSystemManagedDialog extends LitElement {
           display: flex;
           justify-content: center;
           align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
           --mdc-icon-size: 48px;
           margin-bottom: 32px;
         }

hassio/src/resources/hassio-style.ts

@@ -31,7 +31,7 @@ export const hassioStyle = css`
   .card-group {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    grid-gap: 8px;
+    grid-gap: var(--ha-space-2);
   }
   @media screen and (min-width: 640px) {
     .card-group {

landing-page/src/ha-landing-page.ts

@@ -213,7 +213,7 @@ class HaLandingPage extends LandingPageBaseElement {
       ha-card .card-content {
         display: flex;
         flex-direction: column;
-        gap: 16px;
+        gap: var(--ha-space-4);
       }
       ha-alert p {
         text-align: unset;

package.json

@@ -28,13 +28,13 @@
   "dependencies": {
     "@babel/runtime": "7.28.4",
     "@braintree/sanitize-url": "7.1.1",
-    "@codemirror/autocomplete": "6.18.7",
+    "@codemirror/autocomplete": "6.19.0",
     "@codemirror/commands": "6.8.1",
     "@codemirror/language": "6.11.3",
     "@codemirror/legacy-modes": "6.5.1",
     "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.2",
+    "@codemirror/view": "6.38.3",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.18.0",
@@ -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.6.ha.4",
+    "@home-assistant/webawesome": "3.0.0-beta.4.ha.3",
     "@lezer/highlight": "1.2.1",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",
@@ -89,8 +89,8 @@
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.9.0",
-    "@vaadin/vaadin-themable-mixin": "24.9.0",
+    "@vaadin/combo-box": "24.9.1",
+    "@vaadin/vaadin-themable-mixin": "24.9.1",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -111,7 +111,7 @@
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.12",
+    "hls.js": "1.6.13",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.16",
@@ -157,8 +157,8 @@
     "@octokit/auth-oauth-device": "8.0.1",
     "@octokit/plugin-retry": "8.0.1",
     "@octokit/rest": "22.0.0",
-    "@rsdoctor/rspack-plugin": "1.2.3",
-    "@rspack/core": "1.5.5",
+    "@rsdoctor/rspack-plugin": "1.3.0",
+    "@rspack/core": "1.5.7",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.22",
@@ -203,7 +203,7 @@
     "husky": "9.1.7",
     "jsdom": "27.0.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.1.6",
+    "lint-staged": "16.2.1",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -213,11 +213,11 @@
     "rspack-manifest-plugin": "5.1.0",
     "serve": "14.2.5",
     "sinon": "21.0.0",
-    "tar": "7.4.3",
+    "tar": "7.5.1",
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.44.0",
+    "typescript-eslint": "8.44.1",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.4",
     "webpack-stats-plugin": "1.1.3",
@@ -235,5 +235,5 @@
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },
-  "packageManager": "yarn@4.10.2"
+  "packageManager": "yarn@4.10.3"
 }

pyproject.toml

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

src/common/color/hex.ts

@@ -1,23 +1,40 @@
+import { formatHex, parse } from "culori";
+
+/**
+ * Expands a 3-digit hex color to a 6-digit hex color.
+ * @param hex - The hex color to expand.
+ * @returns The expanded hex color.
+ * @throws If the hex color is invalid.
+ */
 export const expandHex = (hex: string): string => {
-  hex = hex.replace("#", "");
-  if (hex.length === 6) return hex;
-  let result = "";
-  for (const val of hex) {
-    result += val + val;
+  const color = parse(hex);
+  if (!color) {
+    throw new Error(`Invalid hex color: ${hex}`);
   }
-  return result;
+  const formattedColor = formatHex(color);
+  if (!formattedColor) {
+    throw new Error(`Could not format hex color: ${hex}`);
+  }
+  return formattedColor.replace("#", "");
 };
 
-// Blend 2 hex colors: c1 is placed over c2, blend is c1's opacity.
+/**
+ * Blends two hex colors. c1 is placed over c2, blend is c1's opacity.
+ * @param c1 - The first hex color.
+ * @param c2 - The second hex color.
+ * @param blend - The blend percentage (0-100).
+ * @returns The blended hex color.
+ */
 export const hexBlend = (c1: string, c2: string, blend = 50): string => {
-  let color = "";
   c1 = expandHex(c1);
   c2 = expandHex(c2);
+  let color = "";
   for (let i = 0; i <= 5; i += 2) {
     const h1 = parseInt(c1.substring(i, i + 2), 16);
     const h2 = parseInt(c2.substring(i, i + 2), 16);
-    let hex = Math.floor(h2 + (h1 - h2) * (blend / 100)).toString(16);
-    while (hex.length < 2) hex = "0" + hex;
+    const hex = Math.floor(h2 + (h1 - h2) * (blend / 100))
+      .toString(16)
+      .padStart(2, "0");
     color += hex;
   }
   return `#${color}`;

src/common/color/rgb.ts

@@ -1,28 +1,49 @@
-export const luminosity = (rgb: [number, number, number]): number => {
-  // http://www.w3.org/TR/WCAG20/#relativeluminancedef
-  const lum: [number, number, number] = [0, 0, 0];
-  for (let i = 0; i < rgb.length; i++) {
-    const chan = rgb[i] / 255;
-    lum[i] = chan <= 0.03928 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
-  }
+import { wcagLuminance, wcagContrast } from "culori";
 
-  return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
-};
+/**
+ * Calculates the luminosity of an RGB color.
+ * @param rgb - The RGB color to calculate the luminosity of.
+ * @returns The luminosity of the color.
+ */
+export const luminosity = (rgb: [number, number, number]): number =>
+  wcagLuminance({
+    mode: "rgb",
+    r: rgb[0] / 255,
+    g: rgb[1] / 255,
+    b: rgb[2] / 255,
+  });
 
+/**
+ * Calculates the contrast ratio between two RGB colors.
+ * @param color1 - The first color to calculate the contrast ratio of.
+ * @param color2 - The second color to calculate the contrast ratio of.
+ * @returns The contrast ratio between the two colors.
+ */
 export const rgbContrast = (
   color1: [number, number, number],
   color2: [number, number, number]
-) => {
-  const lum1 = luminosity(color1);
-  const lum2 = luminosity(color2);
-
-  if (lum1 > lum2) {
-    return (lum1 + 0.05) / (lum2 + 0.05);
+) =>
+  wcagContrast(
+    {
+      mode: "rgb",
+      r: color1[0] / 255,
+      g: color1[1] / 255,
+      b: color1[2] / 255,
+    },
+    {
+      mode: "rgb",
+      r: color2[0] / 255,
+      g: color2[1] / 255,
+      b: color2[2] / 255,
     }
+  );
 
-  return (lum2 + 0.05) / (lum1 + 0.05);
-};
-
+/**
+ * Calculates the contrast ratio between two RGB colors.
+ * @param rgb1 - The first color to calculate the contrast ratio of.
+ * @param rgb2 - The second color to calculate the contrast ratio of.
+ * @returns The contrast ratio between the two colors.
+ */
 export const getRGBContrastRatio = (
   rgb1: [number, number, number],
   rgb2: [number, number, number]

src/common/util/xss.ts

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

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

@@ -25,7 +25,6 @@ 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";
@@ -812,8 +811,7 @@ export class HaChartBase extends LitElement {
           };
         }
       }
-      const name = filterXSS(String(s.name ?? s.id ?? ""));
-      return { ...s, name, data };
+      return { ...s, data };
     });
     return series as ECOption["series"];
   }
@@ -976,7 +974,7 @@ export class HaChartBase extends LitElement {
       right: 4px;
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: var(--ha-space-1);
     }
     .chart-controls.small {
       top: 0;
@@ -1013,7 +1011,7 @@ export class HaChartBase extends LitElement {
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
     .chart-legend li {
       height: 24px;

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

@@ -9,7 +9,6 @@ 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";
@@ -93,12 +92,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} ${filterXSS(node?.label ?? data.id)}<br>${value}`;
+      return `${params.marker} ${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 `${filterXSS(source?.label ?? data.source)} → ${filterXSS(target?.label ?? data.target)}<br>${value}`;
+      return `${source?.label ?? data.source} → ${target?.label ?? data.target}<br>${value}`;
     }
     return null;
   };

src/components/ha-badge.ts

@@ -54,7 +54,7 @@ export class HaBadge extends LitElement {
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
       height: var(--ha-badge-size, 36px);
       min-width: var(--ha-badge-size, 36px);
       padding: 0px 12px;

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-bottom-sheet-surface-background,
-        var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
+        --ha-dialog-surface-background,
+        var(--mdc-theme-surface, #fff)
       );
       --spacing: 0;
       --size: auto;
@@ -51,14 +51,8 @@ export class HaBottomSheet extends LitElement {
       --hide-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
     }
     wa-drawer::part(dialog) {
-      border-top-left-radius: var(
-        --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))
-      );
+      border-top-left-radius: var(--ha-border-radius-lg);
+      border-top-right-radius: var(--ha-border-radius-lg);
       max-height: 90vh;
       padding-bottom: var(--safe-area-inset-bottom);
       padding-left: var(--safe-area-inset-left);

src/components/ha-button.ts

@@ -41,7 +41,8 @@ export class HaButton extends Button {
     return [
       Button.styles,
       css`
-        :host {
+        .button {
+          /* set theme vars */
           --wa-form-control-padding-inline: 16px;
           --wa-font-weight-action: var(--ha-font-weight-medium);
           --wa-form-control-border-radius: var(
@@ -53,8 +54,7 @@ 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-copy-textfield.ts

@@ -76,7 +76,7 @@ export class HaCopyTextfield extends LitElement {
     .container {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
       margin-top: 8px;
     }
 

src/components/ha-date-range-picker.ts

@@ -343,7 +343,7 @@ export class HaDateRangePicker extends LitElement {
     .date-range-inputs {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
 
     .date-range-ranges {

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, auto);
+        min-width: var(--mdc-dialog-min-width, 100vw);
         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,13 +130,23 @@ 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-form/ha-form-grid.ts

@@ -77,8 +77,8 @@ export class HaFormGrid extends LitElement implements HaFormElement {
         var(--form-grid-column-count, auto-fit),
         minmax(var(--form-grid-min-width, 200px), 1fr)
       );
-      grid-column-gap: 8px;
-      grid-row-gap: 24px;
+      grid-column-gap: var(--ha-space-2);
+      grid-row-gap: var(--ha-space-6);
     }
     :host > ha-form {
       display: block;

src/components/ha-form/ha-form-optional_actions.ts

@@ -156,7 +156,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
     :host {
       display: flex !important;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
     :host ha-form {
       display: block;

src/components/ha-formfield.ts

@@ -57,7 +57,7 @@ export class HaFormfield extends FormfieldBase {
       }
       .mdc-form-field {
         align-items: var(--ha-formfield-align-items, center);
-        gap: 4px;
+        gap: var(--ha-space-1);
       }
       .mdc-form-field > label {
         direction: var(--direction);

src/components/ha-grid-size-picker.ts

@@ -227,7 +227,7 @@ export class HaGridSizeEditor extends LitElement {
           "row-slider preview";
         grid-template-rows: auto auto;
         grid-template-columns: auto 1fr;
-        gap: 8px;
+        gap: var(--ha-space-2);
       }
       #columns {
         grid-area: column-slider;

src/components/ha-icon-button-toolbar.ts

@@ -104,7 +104,7 @@ export class HaIconButtonToolbar extends LitElement {
       background-color: transparent;
       padding-right: 4px;
       height: var(--icon-button-toolbar-height);
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
 
     .icon-toolbar-button {

src/components/ha-picker-field.ts

@@ -105,7 +105,7 @@ export class HaPickerField extends LitElement {
           --md-list-item-bottom-space: 0px;
           --md-list-item-leading-space: 8px;
           --md-list-item-trailing-space: 8px;
-          --ha-md-list-item-gap: 8px;
+          --ha-md-list-item-gap: var(--ha-space-2);
           /* Remove the default focus ring */
           --md-focus-ring-width: 0px;
           --md-focus-ring-duration: 0s;

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

@@ -1,5 +1,6 @@
 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";
 
@@ -36,14 +37,13 @@ export class HaResizableBottomSheet extends LitElement {
     return html`<dialog
       open
       @transitionend=${this._handleTransitionEnd}
-      style=${`
-        --height: ${this._dialogViewportHeight}vh;
-        --height: ${this._dialogViewportHeight}dvh;
-        --max-height: ${this._dialogMaxViewpointHeight}vh;
-        --max-height: ${this._dialogMaxViewpointHeight}dvh;
-        --min-height: ${this._dialogMinViewpointHeight}vh;
-        --min-height: ${this._dialogMinViewpointHeight}dvh;
-      `}
+      style=${styleMap({
+        height: this._dialogViewportHeight
+          ? `${this._dialogViewportHeight}vh`
+          : "auto",
+        maxHeight: `${this._dialogMaxViewpointHeight}vh`,
+        minHeight: `${this._dialogMinViewpointHeight}vh`,
+      })}
     >
       <div class="handle-wrapper">
         <div
@@ -213,14 +213,12 @@ export class HaResizableBottomSheet extends LitElement {
       cursor: grabbing;
     }
     dialog {
-      height: var(--height, auto);
-      max-height: var(--max-height, 70vh);
-      max-height: var(--max-height, 70dvh);
-      min-height: var(--min-height, 30vh);
-      min-height: var(--min-height, 30dvh);
+      height: auto;
+      max-height: 70vh;
+      min-height: 30vh;
       background-color: var(
-        --ha-bottom-sheet-surface-background,
-        var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
+        --ha-dialog-surface-background,
+        var(--mdc-theme-surface, #fff)
       );
       display: flex;
       flex-direction: column;
@@ -241,12 +239,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-bottom-sheet-border-radius,
-        var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
+        --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))
+        --ha-dialog-border-radius,
+        var(--ha-border-radius-2xl)
       );
       transform: translateY(100%);
       transition: transform ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms ease;
@@ -256,6 +254,7 @@ 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

@@ -90,7 +90,7 @@ class HaSegmentedBar extends LitElement {
     .heading {
       display: flex;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
     .heading .title {
       flex: 1;
@@ -125,7 +125,7 @@ class HaSegmentedBar extends LitElement {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
-      gap: 12px;
+      gap: var(--ha-space-3);
       margin: 12px 0;
       padding: 0;
       list-style: none;
@@ -133,7 +133,7 @@ class HaSegmentedBar extends LitElement {
     .legend li {
       display: flex;
       align-items: center;
-      gap: 4px;
+      gap: var(--ha-space-1);
       font-size: var(--ha-font-size-s);
     }
     .legend li .bullet {

src/components/ha-select-box.ts

@@ -116,7 +116,7 @@ export class HaSelectBox extends LitElement {
     .list {
       display: grid;
       grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
-      gap: 12px;
+      gap: var(--ha-space-3);
     }
     .option {
       position: relative;
@@ -128,7 +128,7 @@ export class HaSelectBox extends LitElement {
       align-items: center;
       justify-content: space-between;
       padding: 12px;
-      gap: 8px;
+      gap: var(--ha-space-2);
       overflow: hidden;
       cursor: pointer;
     }
@@ -137,7 +137,7 @@ export class HaSelectBox extends LitElement {
       position: relative;
       display: flex;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       min-width: 0;
       width: 100%;
     }
@@ -148,7 +148,7 @@ export class HaSelectBox extends LitElement {
     .option .content .text {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: var(--ha-space-1);
       min-width: 0;
       flex: 1;
     }

src/components/ha-selector/ha-selector-button-toggle.ts

@@ -89,7 +89,7 @@ export class HaButtonToggleSelector extends LitElement {
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
-      gap: 8px;
+      gap: var(--ha-space-2);
       align-items: center;
     }
     @media all and (max-width: 600px) {

src/components/ha-selector/ha-selector-color-temp.ts

@@ -62,7 +62,7 @@ export class HaColorTempSelector extends LitElement {
           "--ha-slider-background": `linear-gradient( to var(--float-end), ${gradient})`,
         })}
         labeled
-        icon="hass:thermometer"
+        icon="mdi:thermometer"
         .caption=${this.label || ""}
         .min=${min}
         .max=${max}

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

@@ -321,7 +321,7 @@ export class HaMediaSelector extends LitElement {
       display: flex;
       align-items: center;
       padding: 8px;
-      gap: 12px;
+      gap: var(--ha-space-3);
     }
     ha-card .thumbnail {
       width: 40px;

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

@@ -297,7 +297,7 @@ export class HaObjectSelector extends LitElement {
     return [
       css`
         ha-md-list {
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         ha-md-list-item {
           border: 1px solid var(--divider-color);

src/components/ha-slider.ts

@@ -19,6 +19,7 @@ export class HaSlider extends Slider {
       Slider.styles,
       css`
         :host {
+          --wa-form-control-activated-color: var(--ha-control-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);
@@ -53,7 +54,6 @@ 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,21 +62,14 @@ 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: 20px;
-          --thumb-height: 20px;
+          --thumb-width: var(--ha-font-size-l, 1.25em);
+          --thumb-height: var(--ha-font-size-l, 1.25em);
         }
 
         :host([size="small"]) {
-          --thumb-width: 16px;
-          --thumb-height: 16px;
+          --thumb-width: var(--ha-font-size-m, 1em);
+          --thumb-height: var(--ha-font-size-m, 1em);
         }
       `,
     ];

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-content-color: var(--primary-text-color);
+          --wa-tooltip-color: var(--primary-text-color);
           --wa-tooltip-font-family: var(
             --ha-tooltip-font-family,
             var(--ha-font-family-body)

src/components/media-player/dialog-join-media-players.ts

@@ -217,7 +217,7 @@ class DialogJoinMediaPlayers extends LitElement {
         .content {
           display: flex;
           flex-direction: column;
-          row-gap: 16px;
+          row-gap: var(--ha-space-4);
         }
 
         ha-dialog-header ha-button {

src/components/media-player/ha-media-player-browse.ts

@@ -1138,7 +1138,7 @@ export class HaMediaPlayerBrowse extends LitElement {
             auto-fit,
             minmax(var(--media-browse-item-size, 175px), 0.1fr)
           );
-          grid-gap: 16px;
+          grid-gap: var(--ha-space-4);
           padding: 16px;
         }
 

src/components/media-player/ha-media-player-toggle.ts

@@ -54,7 +54,7 @@ class HaMediaPlayerToggle extends LitElement {
         .list-item {
           display: grid;
           grid-template-columns: auto 1fr auto;
-          column-gap: 16px;
+          column-gap: var(--ha-space-4);
           align-items: center;
           width: 100%;
         }

src/data/config_flow.ts

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

src/data/media-player.ts

@@ -39,6 +39,8 @@ import type { HomeAssistant, TranslationDict } from "../types";
 import { isUnavailableState } from "./entity";
 import { isTTSMediaSource } from "./tts";
 
+import { generateEntityFilter } from "../common/entity/entity_filter";
+
 interface MediaPlayerEntityAttributes extends HassEntityAttributeBase {
   media_content_id?: string;
   media_content_type?: string;
@@ -522,3 +524,33 @@ export const mediaPlayerJoin = (
 
 export const mediaPlayerUnjoin = (hass: HomeAssistant, entity_id: string) =>
   hass.callService("media_player", "unjoin", {}, { entity_id });
+
+/**
+ * Compute active media player states in a specific area.
+ * @param hass Home Assistant object
+ * @param areaId Area ID to filter media players by
+ * @returns Array of playing media player entities
+ */
+export const computeActiveAreaMediaStates = (
+  hass: HomeAssistant,
+  areaId: string
+): MediaPlayerEntity[] => {
+  const area = hass.areas[areaId];
+  if (!area) {
+    return [];
+  }
+
+  // Get all media_player entities in this area
+  const mediaFilter = generateEntityFilter(hass, {
+    area: areaId,
+    domain: "media_player",
+  });
+
+  const mediaEntities = Object.keys(hass.entities).filter(mediaFilter);
+
+  return mediaEntities
+    .map((entityId) => hass.states[entityId] as MediaPlayerEntity | undefined)
+    .filter(
+      (stateObj): stateObj is MediaPlayerEntity => stateObj?.state === "playing"
+    );
+};

src/data/panel.ts

@@ -66,9 +66,9 @@ export const getPanelIcon = (panel: PanelInfo): string | null => {
   if (!panel.icon) {
     switch (panel.component_name) {
       case "profile":
-        return "hass:account";
+        return "mdi:account";
       case "lovelace":
-        return "hass:view-dashboard";
+        return "mdi:view-dashboard";
     }
   }
 

src/dialogs/config-flow/step-flow-create-entry.ts

@@ -325,7 +325,7 @@ class StepFlowCreateEntry extends LitElement {
         .device-info {
           display: flex;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         .device-info img {
           width: 40px;

src/dialogs/enter-code/dialog-enter-code.ts

@@ -209,7 +209,7 @@ export class DialogEnterCode
       display: grid;
       grid-template-columns: repeat(var(--keypad-columns), auto);
       grid-auto-rows: auto;
-      grid-gap: 24px;
+      grid-gap: var(--ha-space-6);
       justify-items: center;
       align-items: center;
     }

src/dialogs/more-info/components/ha-more-info-control-select-container.ts

@@ -32,7 +32,7 @@ export class HaMoreInfoControlSelectContainer extends LitElement {
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
-      gap: 12px;
+      gap: var(--ha-space-3);
       margin: auto;
       overflow: auto;
       -ms-overflow-style: none; /* IE and Edge */

src/dialogs/more-info/components/lights/light-color-rgb-picker.ts

@@ -110,7 +110,7 @@ class LightRgbColorPicker extends LitElement {
         ? html`<ha-labeled-slider
             labeled
             .caption=${this.hass.localize("ui.card.light.color_brightness")}
-            icon="hass:brightness-7"
+            icon="mdi:brightness-7"
             min="0"
             max="100"
             .value=${this._colorBrightnessSliderValue}
@@ -122,7 +122,7 @@ class LightRgbColorPicker extends LitElement {
             <ha-labeled-slider
               labeled
               .caption=${this.hass.localize("ui.card.light.white_value")}
-              icon="hass:file-word-box"
+              icon="mdi:file-word-box"
               min="0"
               max="100"
               .name=${"wv"}
@@ -136,7 +136,7 @@ class LightRgbColorPicker extends LitElement {
             <ha-labeled-slider
               labeled
               .caption=${this.hass.localize("ui.card.light.cold_white_value")}
-              icon="hass:file-word-box-outline"
+              icon="mdi:file-word-box-outline"
               min="0"
               max="100"
               .name=${"cw"}
@@ -146,7 +146,7 @@ class LightRgbColorPicker extends LitElement {
             <ha-labeled-slider
               labeled
               .caption=${this.hass.localize("ui.card.light.warm_white_value")}
-              icon="hass:file-word-box"
+              icon="mdi:file-word-box"
               min="0"
               max="100"
               .name=${"ww"}

src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts

@@ -202,13 +202,13 @@ class MoreInfoSirenAdvancedControls extends LitElement {
         .options {
           display: flex;
           flex-direction: column;
-          gap: 16px;
+          gap: var(--ha-space-4);
         }
         .controls {
           display: flex;
           flex-direction: row;
           justify-content: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
           margin-top: 16px;
         }
         ha-control-button {

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

@@ -107,7 +107,7 @@ class MoreInfoCamera extends LitElement {
       box-sizing: border-box;
       padding: 16px;
       z-index: 1;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
   `;
 }

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

@@ -181,7 +181,7 @@ class MoreInfoLock extends LitElement {
           display: flex;
           align-items: center;
           flex-direction: row;
-          gap: 8px;
+          gap: var(--ha-space-2);
           font-weight: var(--ha-font-weight-medium);
           color: var(--success-color);
         }

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

@@ -9,9 +9,8 @@ import {
   mdiVolumeOff,
   mdiVolumePlus,
 } from "@mdi/js";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { classMap } from "lit/directives/class-map";
 import { stateActive } from "../../../common/entity/state_active";
@@ -20,7 +19,7 @@ import { formatDurationDigital } from "../../../common/datetime/format_duration"
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
 import "../../../components/ha-select";
-import type { HaSlider } from "../../../components/ha-slider";
+import "../../../components/ha-slider";
 import "../../../components/ha-button";
 import "../../../components/ha-svg-icon";
 import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
@@ -31,8 +30,6 @@ import type {
   MediaPlayerEntity,
 } from "../../../data/media-player";
 import {
-  cleanupMediaTitle,
-  computeMediaDescription,
   computeMediaControls,
   handleMediaControlClick,
   MediaPlayerEntityFeature,
@@ -51,16 +48,6 @@ class MoreInfoMediaPlayer extends LitElement {
 
   @property({ attribute: false }) public stateObj?: MediaPlayerEntity;
 
-  @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);
@@ -271,10 +258,7 @@ class MoreInfoMediaPlayer extends LitElement {
 
     const stateObj = this.stateObj;
     const controls = computeMediaControls(stateObj, true);
-    const coverUrl =
-      stateObj.attributes.entity_picture_local ||
-      stateObj.attributes.entity_picture ||
-      "";
+    const coverUrl = stateObj.attributes.entity_picture || "";
     const playerObj = new HassMediaPlayerEntity(this.hass, this.stateObj);
 
     const position = Math.max(Math.floor(playerObj.currentProgress || 0), 0);
@@ -282,8 +266,8 @@ class MoreInfoMediaPlayer extends LitElement {
     const remaining = Math.max(duration - position, 0);
     const remainingFormatted = this._formatDuration(remaining);
     const positionFormatted = this._formatDuration(position);
-    const primaryTitle = cleanupMediaTitle(stateObj.attributes.media_title);
-    const secondaryTitle = computeMediaDescription(stateObj);
+    const primaryTitle = playerObj.primaryTitle;
+    const secondaryTitle = playerObj.secondaryTitle;
     const turnOn = controls?.find((c) => c.action === "turn_on");
     const turnOff = controls?.find((c) => c.action === "turn_off");
 
@@ -329,7 +313,6 @@ class MoreInfoMediaPlayer extends LitElement {
         ? html`
             <div class="position-bar">
               <ha-slider
-                id="position-slider"
                 min="0"
                 max=${duration}
                 step="1"
@@ -364,12 +347,8 @@ class MoreInfoMediaPlayer extends LitElement {
                     </ha-icon-button>`
                   : html`<span class="spacer"></span>`;
               })}
-              ${[
-                "media_play_pause",
-                "media_pause",
-                "media_play",
-                "media_stop",
-              ].map((action) => {
+              ${["media_play_pause", "media_pause", "media_play"].map(
+                (action) => {
                   const control = controls?.find((c) => c.action === action);
                   return control
                     ? html`<ha-button
@@ -388,7 +367,8 @@ class MoreInfoMediaPlayer extends LitElement {
                         ></ha-svg-icon>
                       </ha-button>`
                     : nothing;
-              })}
+                }
+              )}
               ${["media_next_track", "shuffle_set"].map((action) => {
                 const control = controls?.find((c) => c.action === action);
                 return control
@@ -462,7 +442,7 @@ class MoreInfoMediaPlayer extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
       margin-top: 0;
     }
 
@@ -546,7 +526,7 @@ class MoreInfoMediaPlayer extends LitElement {
     .volume {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: var(--ha-space-3);
       margin-left: 8px;
     }
 
@@ -627,7 +607,7 @@ class MoreInfoMediaPlayer extends LitElement {
     .bottom-controls {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
       align-self: center;
       width: 320px;
     }

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

@@ -508,7 +508,7 @@ class MoreInfoUpdate extends LitElement {
       box-sizing: border-box;
       padding: 16px;
       z-index: 1;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
 
     a {

src/dialogs/shortcuts/dialog-shortcuts.ts

@@ -269,7 +269,7 @@ class DialogShortcuts extends LitElement {
         display: flex;
         flex-direction: row;
         align-items: center;
-        gap: 8px;
+        gap: var(--ha-space-2);
         margin: 4px 0;
       }
 

src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts

@@ -127,7 +127,7 @@ export class CloudStepIntro extends LitElement {
       .features {
         display: flex;
         flex-direction: column;
-        grid-gap: 16px;
+        grid-gap: var(--ha-space-4);
         padding: 16px;
       }
       .feature {

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts

@@ -427,7 +427,7 @@ export class HaVoiceAssistantSetupStepPipeline extends LitElement {
         width: 100%;
         height: 10px;
         display: flex;
-        gap: 4px;
+        gap: var(--ha-space-1);
         margin: 8px 0;
       }
       .segment {

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts

@@ -368,7 +368,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
         margin-top: 24px;
       }
       .rows {
-        gap: 16px;
+        gap: var(--ha-space-4);
         display: flex;
         flex-direction: column;
       }

src/fake_data/demo_panels.ts

@@ -60,28 +60,28 @@ export const demoPanels: Panels = {
   // Uncomment when we are ready to stub the history API
   // history: {
   //   component_name: "history",
-  //   icon: "hass:poll-box",
+  //   icon: "mdi:chart-box",
   //   title: "history",
   //   config: null,
   //   url_path: "history",
   // },
   map: {
     component_name: "lovelace",
-    icon: "hass:tooltip-account",
+    icon: "mdi:tooltip-account",
     title: "map",
     config: { mode: "storage" },
     url_path: "map",
   },
   energy: {
     component_name: "energy",
-    icon: "hass:lightning-bolt",
+    icon: "mdi:lightning-bolt",
     title: "energy",
     config: null,
     url_path: "energy",
   },
   // config: {
   //   component_name: "config",
-  //   icon: "hass:cog",
+  //   icon: "mdi:cog",
   //   title: "config",
   //   config: null,
   //   url_path: "config",

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 { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
+import { haStyleScrollbar } from "../resources/styles";
 
 @customElement("hass-subpage")
 class HassSubpage extends LitElement {
@@ -154,15 +154,9 @@ class HassSubpage extends LitElement {
               1px - var(--header-height, 0px) - var(
                 --safe-area-inset-top,
                 0px
-              ) - var(
-                --hass-subpage-bottom-inset,
-                var(--safe-area-inset-bottom, 0px)
-              )
-          );
-          margin-bottom: var(
-            --hass-subpage-bottom-inset,
-            var(--safe-area-inset-bottom)
+              ) - var(--safe-area-inset-bottom, 0px)
           );
+          margin-bottom: var(--safe-area-inset-bottom);
           margin-right: var(--safe-area-inset-right);
           overflow-y: auto;
           overflow: auto;
@@ -188,7 +182,7 @@ class HassSubpage extends LitElement {
           display: flex;
           flex-wrap: wrap;
           justify-content: flex-end;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         :host([narrow]) #fab.tabs {
           bottom: calc(84px + var(--safe-area-inset-bottom, 0px));

src/layouts/hass-tabs-subpage-data-table.ts

@@ -740,7 +740,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       width: 100%;
       justify-content: space-between;
       padding: 0 16px;
-      gap: 16px;
+      gap: var(--ha-space-4);
       box-sizing: border-box;
       background: var(--primary-background-color);
       border-bottom: 1px solid var(--divider-color);
@@ -823,7 +823,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       display: flex;
       align-items: center;
       min-width: 100%;
-      gap: 16px;
+      gap: var(--ha-space-4);
       padding: 0 16px;
       box-sizing: border-box;
       overflow-x: scroll;
@@ -852,7 +852,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     .selection-controls {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
 
     .selection-controls p {
@@ -864,7 +864,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     .center-vertical {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
 
     .relative {

src/layouts/hass-tabs-subpage.ts

@@ -362,7 +362,7 @@ class HassTabsSubpage extends LitElement {
           display: flex;
           flex-wrap: wrap;
           justify-content: flex-end;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         :host([narrow]) #fab.tabs {
           bottom: calc(84px + var(--safe-area-inset-bottom, 0px));

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 &&
-        key in supportedShortcuts
+        event.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[key]();
+        supportedShortcuts[event.key]();
         return;
       }
 
       const supportedSingleKeyShortcuts = this.supportedSingleKeyShortcuts();
-      if (key in supportedSingleKeyShortcuts) {
+      if (event.key in supportedSingleKeyShortcuts) {
         event.preventDefault();
-        supportedSingleKeyShortcuts[key]();
+        supportedSingleKeyShortcuts[event.key]();
       }
     };
 

src/onboarding/onboarding-integrations.ts

@@ -212,7 +212,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
           margin-top: 24px;
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
-          row-gap: 24px;
+          row-gap: var(--ha-space-6);
         }
         .more {
           display: flex;

src/onboarding/onboarding-welcome-links.ts

@@ -64,8 +64,8 @@ class OnboardingWelcomeLinks extends LitElement {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
       margin-top: 16px;
-      column-gap: 16px;
-      row-gap: 16px;
+      column-gap: var(--ha-space-4);
+      row-gap: var(--ha-space-4);
     }
     @media (max-width: 550px) {
       :host {

src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts

@@ -123,7 +123,7 @@ class OnboardingRestoreBackupCloudLogin extends LitElement {
           font-size: var(--ha-font-size-2xl);
           display: flex;
           align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
         }
         h2 img {
           width: 48px;

src/onboarding/restore-backup/onboarding-restore-backup-restore.ts

@@ -332,7 +332,7 @@ class OnboardingRestoreBackupRestore extends LitElement {
           display: flex;
           align-items: center;
           flex-direction: row;
-          gap: 8px;
+          gap: var(--ha-space-2);
           line-height: var(--ha-line-height-condensed);
         }
         h2 {

src/panels/config/automation/add-automation-element-dialog.ts

@@ -736,7 +736,7 @@ class DialogAddAutomationElement
         }
         .shortcut-label {
           display: flex;
-          gap: 12px;
+          gap: var(--ha-space-3);
           justify-content: space-between;
         }
         .shortcut-label .supporting-text {

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

@@ -74,10 +74,8 @@ 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";
@@ -89,6 +87,8 @@ import {
 import "./blueprint-automation-editor";
 import "./manual-automation-editor";
 import type { HaManualAutomationEditor } from "./manual-automation-editor";
+import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
+import { isMac } from "../../../util/is_mac";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -261,16 +261,9 @@ export class HaAutomationEditor extends UndoRedoMixin<
               <ha-tooltip placement="bottom" for="button-redo">
                 ${this.hass.localize("ui.common.redo")}
                 <span class="shortcut">
-                  (
-                  ${isMac
-                    ? html`<span>${shortcutIcon}</span>
+                  (<span>${shortcutIcon}</span>
                   <span>+</span>
-                        <span>Shift</span>
-                        <span>+</span>
-                        <span>Z</span>`
-                    : html`<span>${shortcutIcon}</span>
-                        <span>+</span>
-                        <span>Y</span>`})
+                  <span>Y</span>)
                 </span>
               </ha-tooltip>`
           : nothing}
@@ -1203,7 +1196,6 @@ export class HaAutomationEditor extends UndoRedoMixin<
       Delete: () => this._deleteSelectedRow(),
       Backspace: () => this._deleteSelectedRow(),
       z: () => this.undo(),
-      Z: () => this.redo(),
       y: () => this.redo(),
     };
   }
@@ -1257,7 +1249,6 @@ export class HaAutomationEditor extends UndoRedoMixin<
             --ha-automation-editor-width,
             1540px
           );
-          --hass-subpage-bottom-inset: 0px;
         }
         ha-fade-in {
           display: flex;

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

@@ -292,7 +292,9 @@ export default class HaAutomationSidebar extends LitElement {
     :host {
       z-index: 6;
       outline: none;
-      height: calc(100% - var(--safe-area-inset-top, 0px));
+      height: calc(
+        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)
@@ -302,6 +304,7 @@ 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/paste-replace-dialog/dialog-paste-replace.ts

@@ -92,7 +92,7 @@ class DialogPasteReplace extends LitElement implements HassDialog {
         }
         div[slot="primaryAction"] {
           display: flex;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
       `,
     ];

src/panels/config/automation/styles.ts

@@ -118,7 +118,7 @@ export const manualEditorStyles = css`
       var(--ha-automation-editor-max-width) -
         ${CONTENT_MIN_WIDTH}px - var(--mdc-drawer-width, 0px)
     );
-    --sidebar-gap: 16px;
+    --sidebar-gap: var(--ha-space-4);
   }
 
   .fab-positioner {
@@ -145,19 +145,24 @@ export const manualEditorStyles = css`
 
   .content {
     padding-top: 24px;
-    padding-bottom: max(var(--safe-area-inset-bottom), 32px);
+    padding-bottom: 72px;
     transition: padding-bottom 180ms ease-in-out;
   }
 
   .content.has-bottom-sheet {
-    padding-bottom: calc(90vh - max(var(--safe-area-inset-bottom), 32px));
+    padding-bottom: calc(90vh - 72px);
   }
 
   ha-automation-sidebar {
     position: fixed;
     top: calc(var(--header-height) + 16px);
-    height: calc(-81px + 100vh - var(--safe-area-inset-top, 0px));
-    height: calc(-81px + 100dvh - var(--safe-area-inset-top, 0px));
+    height: calc(
+      -81px +
+        100dvh - var(--safe-area-inset-top, 0px) - var(
+          --safe-area-inset-bottom,
+          0px
+        )
+    );
     width: var(--sidebar-width);
     display: block;
   }
@@ -183,7 +188,7 @@ export const automationRowsStyles = css`
   .rows {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: var(--ha-space-4);
   }
   .rows.no-sidebar {
     margin-inline-end: 0;
@@ -220,7 +225,7 @@ export const automationRowsStyles = css`
   .buttons {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: var(--ha-space-2);
     order: 1;
   }
 `;
@@ -239,7 +244,7 @@ export const overflowStyles = css`
   .overflow-label {
     display: flex;
     justify-content: space-between;
-    gap: 12px;
+    gap: var(--ha-space-3);
     white-space: nowrap;
   }
   .overflow-label .shortcut {

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -806,7 +806,7 @@ export default class HaAutomationTriggerRow extends LitElement {
           display: flex;
           justify-content: center;
           align-items: center;
-          gap: 4px;
+          gap: var(--ha-space-1);
           line-height: 1;
           padding: 0;
         }

src/panels/config/backup/components/config/ha-backup-config-agents.ts

@@ -313,13 +313,13 @@ class HaBackupConfigAgents extends LitElement {
       display: flex;
       align-items: center;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       line-height: var(--ha-line-height-condensed);
     }
     .unencrypted-warning {
       display: flex;
       align-items: center;
-      gap: 4px;
+      gap: var(--ha-space-1);
     }
     .dot {
       display: block;
@@ -341,7 +341,7 @@ class HaBackupConfigAgents extends LitElement {
         align-items: flex-start;
         flex-direction: column;
         justify-content: flex-start;
-        gap: 4px;
+        gap: var(--ha-space-1);
       }
     }
   `;

src/panels/config/backup/components/ha-backup-agents-picker.ts

@@ -119,7 +119,7 @@ class HaBackupAgentsPicker extends LitElement {
       display: flex;
       flex-direction: row;
       align-items: center;
-      gap: 16px;
+      gap: var(--ha-space-4);
       font-size: var(--ha-font-size-l);
       font-weight: var(--ha-font-weight-normal);
       line-height: var(--ha-line-height-normal);

src/panels/config/backup/components/ha-backup-details-restore.ts

@@ -110,7 +110,7 @@ class HaBackupDetailsRestore extends LitElement {
       max-width: 690px;
       width: 100%;
       margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
       display: grid;
     }
     .card-content {
@@ -133,7 +133,7 @@ class HaBackupDetailsRestore extends LitElement {
       display: flex;
       align-items: center;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       line-height: var(--ha-line-height-condensed);
     }
   `;

src/panels/config/backup/components/ha-backup-details-summary.ts

@@ -138,7 +138,7 @@ class HaBackupDetailsSummary extends LitElement {
       max-width: 690px;
       width: 100%;
       margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
       display: grid;
     }
     .card-content {
@@ -168,7 +168,7 @@ class HaBackupDetailsSummary extends LitElement {
       display: flex;
       align-items: center;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       line-height: var(--ha-line-height-condensed);
     }
   `;

src/panels/config/backup/components/ha-backup-formfield-label.ts

@@ -35,7 +35,7 @@ class SupervisorFormfieldLabel extends LitElement {
     :host {
       display: flex;
       flex-direction: row;
-      gap: 16px;
+      gap: var(--ha-space-4);
       align-items: center;
     }
     .label {

src/panels/config/backup/components/ha-backup-summary-card.ts

@@ -74,8 +74,8 @@ class HaBackupSummaryCard extends LitElement {
     .summary {
       display: flex;
       flex-direction: row;
-      column-gap: 16px;
-      row-gap: 8px;
+      column-gap: var(--ha-space-4);
+      row-gap: var(--ha-space-2);
       align-items: center;
       padding: 16px;
       padding-bottom: 8px;

src/panels/config/backup/components/overview/ha-backup-overview-backups.ts

@@ -117,7 +117,7 @@ class HaBackupOverviewBackups extends LitElement {
           padding: 28px 20px 0;
           max-width: 690px;
           margin: 0 auto;
-          gap: 24px;
+          gap: var(--ha-space-6);
           display: flex;
           flex-direction: column;
           margin-bottom: calc(72px + var(--safe-area-inset-bottom));

src/panels/config/backup/components/overview/ha-backup-overview-onboarding.ts

@@ -61,7 +61,7 @@ class HaBackupOverviewBackups extends LitElement {
           display: flex;
           flex-direction: row;
           align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
         }
         .icon {
           position: relative;

src/panels/config/backup/components/overview/ha-backup-overview-settings.ts

@@ -303,7 +303,7 @@ class HaBackupBackupsSummary extends LitElement {
           padding: 28px 20px 0;
           max-width: 690px;
           margin: 0 auto;
-          gap: 24px;
+          gap: var(--ha-space-6);
           display: flex;
           flex-direction: column;
           margin-bottom: 24px;

src/panels/config/backup/components/overview/ha-backup-overview-summary.ts

@@ -334,7 +334,7 @@ class HaBackupOverviewBackups extends LitElement {
           display: flex;
           flex-direction: row;
           align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
         }
         p {
           margin: 0;

src/panels/config/backup/dialogs/dialog-backup-onboarding.ts

@@ -579,7 +579,7 @@ class DialogBackupOnboarding extends LitElement implements HassDialog {
           display: flex;
           flex-direction: row;
           align-items: center;
-          gap: 24px;
+          gap: var(--ha-space-6);
         }
         .encryption-key p {
           margin: 0;

src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts

@@ -305,7 +305,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
           display: flex;
           flex-direction: row;
           align-items: center;
-          gap: 24px;
+          gap: var(--ha-space-6);
         }
         .encryption-key p {
           margin: 0;

src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts

@@ -231,7 +231,7 @@ class DialogSetBackupEncryptionKey extends LitElement implements HassDialog {
           display: flex;
           flex-direction: row;
           align-items: center;
-          gap: 24px;
+          gap: var(--ha-space-6);
         }
         .encryption-key p {
           margin: 0;

src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts

@@ -153,7 +153,7 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
           display: flex;
           flex-direction: row;
           align-items: center;
-          gap: 24px;
+          gap: var(--ha-space-6);
         }
         .encryption-key p {
           margin: 0;

src/panels/config/backup/ha-config-backup-backups.ts

@@ -189,7 +189,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
             0
           );
           return html`
-            <div style="display: flex; gap: 4px;">
+            <div style="display: flex; gap: var(--ha-space-1);">
               ${displayedAgentIds.map((agentId) => {
                 const name = computeBackupAgentName(
                   this.hass.localize,

src/panels/config/backup/ha-config-backup-details.ts

@@ -356,7 +356,7 @@ class HaConfigBackupDetails extends LitElement {
       padding: 28px 20px 0;
       max-width: 690px;
       margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
       display: grid;
       margin-bottom: 24px;
     }
@@ -399,7 +399,7 @@ class HaConfigBackupDetails extends LitElement {
       display: flex;
       align-items: center;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       line-height: var(--ha-line-height-condensed);
     }
     .dot {

src/panels/config/backup/ha-config-backup-location.ts

@@ -326,7 +326,7 @@ class HaConfigBackupDetails extends LitElement {
       padding: 28px 20px 0;
       max-width: 690px;
       margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
       display: grid;
       margin-bottom: 24px;
     }
@@ -376,7 +376,7 @@ class HaConfigBackupDetails extends LitElement {
       display: flex;
       align-items: center;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       line-height: var(--ha-line-height-condensed);
     }
     .dot {

src/panels/config/backup/ha-config-backup-overview.ts

@@ -248,7 +248,7 @@ class HaConfigBackupOverview extends LitElement {
           padding: 28px 20px 0;
           max-width: 690px;
           margin: 0 auto;
-          gap: 24px;
+          gap: var(--ha-space-6);
           display: flex;
           flex-direction: column;
           margin-bottom: calc(var(--safe-area-inset-bottom) + 72px);

src/panels/config/backup/ha-config-backup-settings.ts

@@ -510,7 +510,7 @@ class HaConfigBackupSettings extends LitElement {
       padding: 28px 20px 0;
       max-width: 690px;
       margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
       display: flex;
       flex-direction: column;
       margin-bottom: 24px;
@@ -532,7 +532,7 @@ class HaConfigBackupSettings extends LitElement {
     }
     .cloud-info .cloud-header {
       display: flex;
-      gap: 16px;
+      gap: var(--ha-space-4);
       font-size: var(--ha-font-size-xl);
       align-items: center;
       padding: 16px;