Make "loading next step" look like progress step in config flows

Adjust media player cover image sizes for smaller screens

.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 }}

.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

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.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

@@ -34,7 +34,7 @@
     "@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",
@@ -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",
@@ -158,7 +158,7 @@
     "@octokit/plugin-retry": "8.0.1",
     "@octokit/rest": "22.0.0",
     "@rsdoctor/rspack-plugin": "1.2.3",
-    "@rspack/core": "1.5.5",
+    "@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      = "20250926.0"
+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);
-  }
-
-  return (lum2 + 0.05) / (lum1 + 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,
+    }
+  );
 
+/**
+ * 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/components/chart/ha-chart-base.ts

@@ -974,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;
@@ -1011,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/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-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-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-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-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/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/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/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/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/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

@@ -442,7 +442,7 @@ class MoreInfoMediaPlayer extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
       margin-top: 0;
     }
 
@@ -476,6 +476,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;
@@ -510,7 +526,7 @@ class MoreInfoMediaPlayer extends LitElement {
     .volume {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: var(--ha-space-3);
       margin-left: 8px;
     }
 
@@ -591,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/layouts/hass-subpage.ts

@@ -182,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/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

@@ -1,5 +1,6 @@
 import { consume } from "@lit/context";
 import {
+  mdiAppleKeyboardCommand,
   mdiCog,
   mdiContentSave,
   mdiDebugStepOver,
@@ -87,6 +88,7 @@ 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 {
@@ -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,35 @@ 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">
+                  (<span>${shortcutIcon}</span>
+                  <span>+</span>
+                  <span>Y</span>)
+                </span>
+              </ha-tooltip>`
           : nothing}
         ${this._config?.id && !this.narrow
           ? html`
@@ -1292,6 +1317,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/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 {
@@ -188,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;
@@ -225,7 +225,7 @@ export const automationRowsStyles = css`
   .buttons {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: var(--ha-space-2);
     order: 1;
   }
 `;
@@ -244,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;

src/panels/config/cloud/account/dialog-cloud-support-package.ts

@@ -129,7 +129,7 @@ export class DialogSupportPackage extends LitElement {
     }
     .actions {
       display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
       justify-content: flex-end;
     }
     hr {

src/panels/config/dashboard/dashboard-card.ts

@@ -59,7 +59,7 @@ export class DashboardCard extends LitElement {
       padding: 12px;
       display: block;
       text-align: var(--float-start);
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
     .preview {
       padding: 16px;

src/panels/config/integrations/ha-config-integration-page.ts

@@ -921,7 +921,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         .header {
           display: flex;
           flex-wrap: wrap;
-          gap: 24px;
+          gap: var(--ha-space-6);
           align-items: center;
           justify-content: space-between;
           margin-bottom: 24px;
@@ -932,7 +932,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         }
         .title {
           display: flex;
-          gap: 4px;
+          gap: var(--ha-space-1);
           flex-direction: column;
           justify-content: space-between;
         }
@@ -991,7 +991,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         .actions {
           display: flex;
           flex-wrap: wrap;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         .section {
           width: 100%;
@@ -1013,7 +1013,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         .integration-info {
           display: flex;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         .integration-info ha-svg-icon {
           min-width: 24px;

src/panels/config/integrations/ha-config-integrations-dashboard.ts

@@ -1013,7 +1013,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
           z-index: 2;
           background-color: var(--primary-background-color);
           padding: 0 16px;
-          gap: 16px;
+          gap: var(--ha-space-4);
           box-sizing: border-box;
           border-bottom: 1px solid var(--divider-color);
         }

src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-new.ts

@@ -91,7 +91,7 @@ class MatterAddDeviceNew extends LitElement {
         justify-content: space-between;
         padding: 0 24px;
         box-sizing: border-box;
-        gap: 16px;
+        gap: var(--ha-space-4);
         width: 100%;
         max-width: 400px;
       }

src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts

@@ -143,7 +143,9 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
               slot="fab"
               @click=${this._importExternalThreadCredentials}
               extended
-              label="Send credentials to Home Assistant"
+              .label=${this.hass.localize(
+                "ui.panel.config.thread.thread_network_send_credentials_ha"
+              )}
               ><ha-svg-icon slot="icon" .path=${mdiCellphoneKey}></ha-svg-icon
             ></ha-fab>`
           : nothing}
@@ -310,7 +312,9 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
             <ha-button
               .datasetId=${network.dataset.dataset_id}
               @click=${this._setPreferred}
-              >Make preferred network</ha-button
+              >${this.hass.localize(
+                "ui.panel.config.thread.thread_network_make_preferred"
+              )}</ha-button
             >
           </div>`
         : ""}
@@ -322,7 +326,9 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
               size="small"
               .networkDataset=${network.dataset}
               @click=${this._sendCredentials}
-              >Send credentials to phone</ha-button
+              >${this.hass.localize(
+                "ui.panel.config.thread.thread_network_send_credentials_phone"
+              )}</ha-button
             >
           </div>`
         : ""}

src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-thermostat-setback.ts

@@ -209,7 +209,7 @@ class ZWaveJSCapabilityThermostatSetback extends LitElement {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      gap: 16px;
+      gap: var(--ha-space-4);
     }
     :host > ha-select {
       width: 100%;
@@ -225,7 +225,7 @@ class ZWaveJSCapabilityThermostatSetback extends LitElement {
     .setback-state {
       width: 100%;
       display: flex;
-      gap: 16px;
+      gap: var(--ha-space-4);
     }
     .setback-state ha-select,
     ha-textfield {

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts

@@ -362,7 +362,7 @@ class DialogZWaveJSRemoveNode extends LitElement {
           display: flex;
           align-items: center;
           flex-direction: column;
-          gap: 16px;
+          gap: var(--ha-space-4);
           text-align: center;
         }
 

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

@@ -997,7 +997,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
 
         .right-buttons {
           display: flex;
-          gap: 8px;
+          gap: var(--ha-space-2);
           margin-left: auto;
         }
 

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts

@@ -224,7 +224,7 @@ class ZWaveJSCustomParam extends LitElement {
     .custom-config-form {
       display: flex;
       flex-wrap: wrap;
-      gap: 16px;
+      gap: var(--ha-space-4);
       margin-bottom: 8px;
     }
 

src/panels/config/logs/dialog-download-logs.ts

@@ -141,7 +141,7 @@ class DownloadLogsDialog extends LitElement {
           display: flex;
           flex-direction: column;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
       `,
     ];

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -1,8 +1,9 @@
 import {
   mdiCheck,
   mdiCheckCircleOutline,
+  mdiDelete,
   mdiDotsVertical,
-  mdiOpenInNew,
+  mdiPencil,
   mdiPlus,
 } from "@mdi/js";
 import type { PropertyValues } from "lit";
@@ -20,10 +21,11 @@ import type {
   RowClickedEvent,
   SortingChangedEvent,
 } from "../../../../components/data-table/ha-data-table";
+import "../../../../components/ha-button";
 import "../../../../components/ha-fab";
 import "../../../../components/ha-icon";
-import "../../../../components/ha-button";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-icon-overflow-menu";
 import "../../../../components/ha-md-button-menu";
 import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-svg-icon";
@@ -224,87 +226,94 @@ export class HaConfigLovelaceDashboards extends LitElement {
             : html`—`,
       };
 
-      columns.url_path = {
+      columns.actions = {
         title: "",
-        label: localize(
-          "ui.panel.config.lovelace.dashboards.picker.headers.url"
-        ),
-        filterable: true,
+        label: this.hass.localize("ui.panel.config.generic.headers.actions"),
+        type: "overflow-menu",
         showNarrow: true,
-        template: (dashboard) =>
-          narrow
-            ? html`
-                <ha-icon-button
-                  .path=${mdiOpenInNew}
-                  .urlPath=${dashboard.url_path}
-                  @click=${this._navigate}
-                  .label=${this.hass.localize(
-                    "ui.panel.config.lovelace.dashboards.picker.open"
-                  )}
-                ></ha-icon-button>
-              `
-            : html`
-                <ha-button
-                  href="/${dashboard.url_path}"
-                  size="small"
-                  appearance="plain"
-                  >${this.hass.localize(
-                    "ui.panel.config.lovelace.dashboards.picker.open"
-                  )}</ha-button
-                >
-              `,
+        moveable: false,
+        hideable: false,
+        template: (dashboard) => html`
+          <ha-icon-overflow-menu
+            .hass=${this.hass}
+            narrow
+            .items=${[
+              {
+                path: mdiPencil,
+                label: this.hass.localize(
+                  "ui.panel.config.lovelace.dashboards.picker.edit"
+                ),
+                action: () => this._handleEdit(dashboard),
+              },
+              ...(this._canDelete(dashboard.url_path)
+                ? [
+                    {
+                      label: this.hass.localize(
+                        "ui.panel.config.lovelace.dashboards.picker.delete"
+                      ),
+                      path: mdiDelete,
+                      action: () => this._handleDelete(dashboard),
+                      warning: true,
+                    },
+                  ]
+                : []),
+            ]}
+          >
+          </ha-icon-overflow-menu>
+        `,
       };
 
       return columns;
     }
   );
 
-  private _getItems = memoize((dashboards: LovelaceDashboard[]) => {
-    const defaultMode = (
-      this.hass.panels?.lovelace?.config as LovelacePanelConfig
-    ).mode;
-    const defaultUrlPath = this.hass.defaultPanel;
-    const isDefault = defaultUrlPath === "lovelace";
-    const result: DataTableItem[] = [
-      {
-        icon: "hass:view-dashboard",
-        title: this.hass.localize("panel.states"),
-        default: isDefault,
-        show_in_sidebar: isDefault,
-        require_admin: false,
-        url_path: "lovelace",
-        mode: defaultMode,
-        filename: defaultMode === "yaml" ? "ui-lovelace.yaml" : "",
-        iconColor: "var(--primary-color)",
-      },
-    ];
-    if (isComponentLoaded(this.hass, "energy")) {
-      result.push({
-        icon: "hass:lightning-bolt",
-        title: this.hass.localize(`ui.panel.config.dashboard.energy.main`),
-        show_in_sidebar: true,
-        mode: "storage",
-        url_path: "energy",
-        filename: "",
-        iconColor: "var(--label-badge-yellow)",
-        default: false,
-        require_admin: false,
-      });
-    }
-
-    result.push(
-      ...dashboards
-        .sort((a, b) =>
-          stringCompare(a.title, b.title, this.hass.locale.language)
-        )
-        .map((dashboard) => ({
+  private _getItems = memoize(
+    (dashboards: LovelaceDashboard[], defaultUrlPath: string) => {
+      const defaultMode = (
+        this.hass.panels?.lovelace?.config as LovelacePanelConfig
+      ).mode;
+      const isDefault = defaultUrlPath === "lovelace";
+      const result: DataTableItem[] = [
+        {
+          icon: "hass:view-dashboard",
+          title: this.hass.localize("panel.states"),
+          default: isDefault,
+          show_in_sidebar: isDefault,
+          require_admin: false,
+          url_path: "lovelace",
+          mode: defaultMode,
+          filename: defaultMode === "yaml" ? "ui-lovelace.yaml" : "",
+          iconColor: "var(--primary-color)",
+        },
+      ];
+      if (isComponentLoaded(this.hass, "energy")) {
+        result.push({
+          icon: "hass:lightning-bolt",
+          title: this.hass.localize(`ui.panel.config.dashboard.energy.main`),
+          show_in_sidebar: true,
+          mode: "storage",
+          url_path: "energy",
           filename: "",
-          ...dashboard,
-          default: defaultUrlPath === dashboard.url_path,
-        }))
-    );
-    return result;
-  });
+          iconColor: "var(--label-badge-yellow)",
+          default: false,
+          require_admin: false,
+        });
+      }
+
+      result.push(
+        ...dashboards
+          .sort((a, b) =>
+            stringCompare(a.title, b.title, this.hass.locale.language)
+          )
+          .map((dashboard) => ({
+            filename: "",
+            ...dashboard,
+            default: defaultUrlPath === dashboard.url_path,
+          }))
+      );
+      return result;
+    }
+  );
 
   protected render() {
     if (!this.hass || this._dashboards === undefined) {
@@ -324,7 +333,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           this._dashboards,
           this.hass.localize
         )}
-        .data=${this._getItems(this._dashboards)}
+        .data=${this._getItems(this._dashboards, this.hass.defaultPanel)}
         .initialSorting=${this._activeSorting}
         .columnOrder=${this._activeColumnOrder}
         .hiddenColumns=${this._activeHiddenColumns}
@@ -332,7 +341,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
         @sorting-changed=${this._handleSortingChanged}
         .filter=${this._filter}
         @search-changed=${this._handleSearchChange}
-        @row-click=${this._editDashboard}
+        @row-click=${this._handleRowClicked}
         id="url_path"
         has-fab
         clickable
@@ -370,13 +379,14 @@ export class HaConfigLovelaceDashboards extends LitElement {
     this._dashboards = await fetchDashboards(this.hass);
   }
 
-  private _navigate(ev: Event) {
+  private _handleRowClicked(ev: CustomEvent) {
     ev.stopPropagation();
-    navigate(`/${(ev.target as any).urlPath}`);
+    const urlPath = (ev.detail as RowClickedEvent).id;
+    navigate(`/${urlPath}`);
   }
 
-  private _editDashboard(ev: CustomEvent) {
-    const urlPath = (ev.detail as RowClickedEvent).id;
+  private _handleEdit(item: DataTableItem) {
+    const urlPath = item.url_path;
 
     if (urlPath === "energy") {
       navigate("/config/energy");
@@ -386,6 +396,23 @@ export class HaConfigLovelaceDashboards extends LitElement {
     this._openDetailDialog(dashboard, urlPath);
   }
 
+  private _canDelete(urlPath: string) {
+    if (urlPath === "lovelace" || urlPath === "energy") {
+      return false;
+    }
+    return true;
+  }
+
+  private _handleDelete = async (item: DataTableItem) => {
+    const dashboard = this._dashboards.find(
+      (res) => res.url_path === item.url_path
+    );
+    if (!dashboard) {
+      return;
+    }
+    this._deleteDashboard(dashboard);
+  };
+
   private async _addDashboard() {
     showNewDashboardDialog(this, {
       selectConfig: async (config) => {
@@ -445,33 +472,44 @@ export class HaConfigLovelaceDashboards extends LitElement {
         );
       },
       removeDashboard: async () => {
-        const confirm = await showConfirmationDialog(this, {
-          title: this.hass!.localize(
-            "ui.panel.config.lovelace.dashboards.confirm_delete_title",
-            { dashboard_title: dashboard!.title }
-          ),
-          text: this.hass!.localize(
-            "ui.panel.config.lovelace.dashboards.confirm_delete_text"
-          ),
-          confirmText: this.hass!.localize("ui.common.delete"),
-          destructive: true,
-        });
-        if (!confirm) {
-          return false;
-        }
-        try {
-          await deleteDashboard(this.hass!, dashboard!.id);
-          this._dashboards = this._dashboards!.filter(
-            (res) => res !== dashboard
-          );
-          return true;
-        } catch (_err: any) {
+        if (!dashboard) {
           return false;
         }
+        return this._deleteDashboard(dashboard);
       },
     });
   }
 
+  private async _deleteDashboard(
+    dashboard: LovelaceDashboard
+  ): Promise<boolean> {
+    if (!this._canDelete(dashboard.url_path)) {
+      return false;
+    }
+
+    const confirm = await showConfirmationDialog(this, {
+      title: this.hass!.localize(
+        "ui.panel.config.lovelace.dashboards.confirm_delete_title",
+        { dashboard_title: dashboard.title }
+      ),
+      text: this.hass!.localize(
+        "ui.panel.config.lovelace.dashboards.confirm_delete_text"
+      ),
+      confirmText: this.hass!.localize("ui.common.delete"),
+      destructive: true,
+    });
+    if (!confirm) {
+      return false;
+    }
+    try {
+      await deleteDashboard(this.hass!, dashboard.id);
+      this._dashboards = this._dashboards.filter((res) => res !== dashboard);
+      return true;
+    } catch (_err: any) {
+      return false;
+    }
+  }
+
   private _handleSortingChanged(ev: CustomEvent) {
     this._activeSorting = ev.detail;
   }

src/panels/config/network/ha-config-url-form.ts

@@ -444,7 +444,7 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
     .url-container {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
       margin-top: 8px;
     }
     .textfield-container {

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

@@ -803,7 +803,7 @@ export class HassioNetwork extends LitElement {
         .address-row {
           display: flex;
           flex-direction: row;
-          gap: 8px;
+          gap: var(--ha-space-2);
           align-items: center;
         }
         .address-row ha-textfield {

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

@@ -1,5 +1,6 @@
 import { consume } from "@lit/context";
 import {
+  mdiAppleKeyboardCommand,
   mdiCog,
   mdiContentSave,
   mdiDebugStepOver,
@@ -75,6 +76,7 @@ import "./blueprint-script-editor";
 import "./manual-script-editor";
 import type { HaManualScriptEditor } from "./manual-script-editor";
 import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
+import { isMac } from "../../../util/is_mac";
 
 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,34 @@ 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">
+                  (<span>${shortcutIcon}</span>
+                  <span>+</span>
+                  <span>Y</span>)
+                </span>
+              </ha-tooltip>`
           : nothing}
         ${this.scriptId && !this.narrow
           ? html`
@@ -1173,7 +1197,7 @@ export class HaScriptEditor extends UndoRedoMixin<
           display: flex;
           flex-direction: column;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
           pointer-events: none;
         }
 
@@ -1233,6 +1257,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/config/voice-assistants/cloud-discover.ts

@@ -145,7 +145,7 @@ export class CloudDiscover extends LitElement {
     .features {
       display: grid;
       grid-template-columns: auto;
-      grid-gap: 16px;
+      grid-gap: var(--ha-space-4);
       padding: 16px;
     }
     @media (min-width: 600px) {

src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts

@@ -470,7 +470,7 @@ export class AssistPipelineRunDebug extends LitElement {
       .start-buttons {
         display: flex;
         flex-wrap: wrap;
-        gap: 8px;
+        gap: var(--ha-space-2);
         align-items: center;
         justify-content: center;
       }

src/panels/developer-tools/event/developer-tools-event.ts

@@ -146,7 +146,7 @@ class HaPanelDevEvent extends LitElement {
       haStyle,
       css`
         .content {
-          gap: 16px;
+          gap: var(--ha-space-4);
           padding: 16px;
           max-width: 1200px;
           margin: auto;

src/panels/developer-tools/state/developer-tools-state.ts

@@ -542,7 +542,7 @@ class HaPanelDevState extends LitElement {
           --mdc-icon-button-size: 24px;
           display: flex;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
 
         .entity-id ha-icon-button {
@@ -581,7 +581,7 @@ class HaPanelDevState extends LitElement {
           display: flex;
           margin: 8px 0;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
 
         :host([narrow]) .state-wrapper {