Add settings for climate panel

Continue climate and security migration
Add security and climate panel
2026-07-08 00:36:33 +00:00 · 2025-09-30 14:21:39 +02:00 · 2025-09-30 14:06:56 +02:00 · 2025-09-30 13:44:23 +02:00 · 2025-09-30 09:55:44 +02:00 · 2025-09-29 19:04:01 +02:00
154 changed files with 2183 additions and 978 deletions
@@ -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 }}
@@ -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
@@ -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
@@ -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 }}
@@ -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 }}
@@ -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 }}
@@ -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
@@ -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": {
@@ -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",
              },
            ],
          },
@@ -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": {
@@ -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: [
@@ -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',
@@ -117,7 +117,7 @@ export class DemoHaBadge extends LitElement {
    }
    .card-content {
      display: flex;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
  `;
 }
@@ -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);
    }
  `;
 }
@@ -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);
    }
  `;
 }
@@ -88,7 +88,7 @@ export class DemoHaSlider extends LitElement {
      display: flex;
      flex-direction: column;
      align-items: center;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
  `;
 }
@@ -70,7 +70,7 @@ export class DemoHaSpinner extends LitElement {
      display: flex;
      flex-direction: column;
      align-items: center;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
  `;
 }
@@ -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;
        }
@@ -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 {
@@ -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;
@@ -28,7 +28,7 @@
  "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",
@@ -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",
@@ -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.6",
+    "@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.2.0",
+    "lint-staged": "16.2.1",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
    "lodash.template": "4.5.0",
@@ -213,7 +213,7 @@
    "rspack-manifest-plugin": "5.1.0",
    "serve": "14.2.5",
    "sinon": "21.0.0",
-    "tar": "7.4.4",
+    "tar": "7.5.1",
    "terser-webpack-plugin": "5.3.14",
    "ts-lit-plugin": "2.0.2",
    "typescript": "5.9.2",
@@ -122,3 +122,22 @@ export const generateEntityFilter = (
    return true;
  };
 };
+
+export const findEntities = (
+  entities: string[],
+  filters: EntityFilterFunc[]
+): string[] => {
+  const seen = new Set<string>();
+  const results: string[] = [];
+
+  for (const filter of filters) {
+    for (const entity of entities) {
+      if (filter(entity) && !seen.has(entity)) {
+        seen.add(entity);
+        results.push(entity);
+      }
+    }
+  }
+
+  return results;
+};
@@ -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;
@@ -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;
@@ -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;
    }

@@ -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 {
@@ -26,11 +26,6 @@ export class HaFab extends FabBase {
          var(--ha-border-radius-pill)
        );
      }
-      :host .mdc-fab--extended .mdc-fab__label {
-        white-space: var(--ha-fab-label-white-space, nowrap);
-        word-break: var(--ha-fab-label-word-break, normal);
-        text-align: var(--ha-fab-label-text-align, center);
-      }
      :host .mdc-fab.mdc-fab--extended .ripple {
        border-radius: var(
          --ha-button-border-radius,
@@ -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;
@@ -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;
@@ -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);
@@ -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;
@@ -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 {
@@ -32,7 +32,10 @@ export class HaIconOverflowMenu extends LitElement {

  @property({ type: Boolean }) public narrow = false;

-  protected render(): TemplateResult {
+  protected render(): TemplateResult | typeof nothing {
+    if (this.items.length === 0) {
+      return nothing;
+    }
    return html`
      ${this.narrow
        ? html` <!-- Collapsed representation for small screens -->
@@ -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;
@@ -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 {
@@ -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;
    }
@@ -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) {
@@ -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}
@@ -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;
@@ -82,12 +82,12 @@ export class HaNumberSelector extends LitElement {
                labeled
                .min=${this.selector.number!.min}
                .max=${this.selector.number!.max}
-                .value=${this.value ?? ""}
+                .value=${this.value}
                .step=${sliderStep}
                .disabled=${this.disabled}
                .required=${this.required}
                @change=${this._handleSliderChange}
-                .ticks=${this.selector.number?.slider_ticks}
+                .withMarkers=${this.selector.number?.slider_ticks || false}
              >
              </ha-slider>
            `
@@ -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);
@@ -19,7 +19,7 @@ export class HaSlider extends Slider {
      Slider.styles,
      css`
        :host {
-          --wa-form-control-activated-color: var(--primary-color);
+          --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);
@@ -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 {
@@ -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;
        }

@@ -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%;
        }
@@ -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"
+    );
+};
@@ -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";
    }
  }

@@ -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;
@@ -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;
    }
  `;
 }
@@ -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;
        }
@@ -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;
    }
@@ -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 */
@@ -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"}
@@ -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 {
@@ -107,7 +107,7 @@ class MoreInfoCamera extends LitElement {
      box-sizing: border-box;
      padding: 16px;
      z-index: 1;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }
  `;
 }
@@ -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);
        }
@@ -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;
    }
@@ -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 {
@@ -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;
      }

@@ -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 {
@@ -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 {
@@ -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;
      }
@@ -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",
@@ -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));
@@ -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 {
@@ -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));
@@ -32,6 +32,9 @@ const COMPONENTS = {
  todo: () => import("../panels/todo/ha-panel-todo"),
  "media-browser": () =>
    import("../panels/media-browser/ha-panel-media-browser"),
+  lights: () => import("../panels/lights/ha-panel-lights"),
+  security: () => import("../panels/security/ha-panel-security"),
+  climate: () => import("../panels/climate/ha-panel-climate"),
 };

@customElement("partial-panel-resolver")
@@ -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;
@@ -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 {
@@ -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;
@@ -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 {
@@ -0,0 +1,214 @@
+import { mdiCog } from "@mdi/js";
+import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { goBack, navigate } from "../../common/navigate";
+import "../../components/ha-icon-button-arrow-prev";
+import "../../components/ha-menu-button";
+import type { LovelaceConfig } from "../../data/lovelace/config/types";
+import { haStyle } from "../../resources/styles";
+import type { HomeAssistant } from "../../types";
+import type { Lovelace } from "../lovelace/types";
+import "../lovelace/views/hui-view";
+import "../lovelace/views/hui-view-container";
+
+const CLIMATE_LOVELACE_CONFIG: LovelaceConfig = {
+  views: [
+    {
+      strategy: {
+        type: "climate",
+      },
+    },
+  ],
+};
+
+@customElement("ha-panel-climate")
+class PanelClimate extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public narrow = false;
+
+  @state() private _viewIndex = 0;
+
+  @state() private _lovelace?: Lovelace;
+
+  @state() private _searchParms = new URLSearchParams(window.location.search);
+
+  public firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+  }
+
+  public willUpdate(changedProps: PropertyValues) {
+    if (!this.hasUpdated) {
+      this.hass.loadFragmentTranslation("lovelace");
+    }
+    if (!changedProps.has("hass")) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as this["hass"];
+    if (oldHass?.locale !== this.hass.locale) {
+      this._setLovelace();
+    }
+  }
+
+  private _back(ev) {
+    ev.stopPropagation();
+    goBack();
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="header">
+        <div class="toolbar">
+          ${this._searchParms.has("historyBack")
+            ? html`
+                <ha-icon-button-arrow-prev
+                  @click=${this._back}
+                  slot="navigationIcon"
+                ></ha-icon-button-arrow-prev>
+              `
+            : html`
+                <ha-menu-button
+                  slot="navigationIcon"
+                  .hass=${this.hass}
+                  .narrow=${this.narrow}
+                ></ha-menu-button>
+              `}
+          <div class="main-title">${this.hass.localize("panel.climate")}</div>
+          ${this.hass.user?.is_admin
+            ? html`<ha-icon-button
+                @click=${this._navigateConfig}
+                .path=${mdiCog}
+                title=${this.hass!.localize("ui.panel.energy.configure")}
+              >
+              </ha-icon-button>`
+            : nothing}
+        </div>
+      </div>
+
+      <hui-view-container .hass=${this.hass}>
+        <hui-view
+          .hass=${this.hass}
+          .narrow=${this.narrow}
+          .lovelace=${this._lovelace}
+          .index=${this._viewIndex}
+        ></hui-view>
+      </hui-view-container>
+    `;
+  }
+
+  private _setLovelace() {
+    this._lovelace = {
+      config: CLIMATE_LOVELACE_CONFIG,
+      rawConfig: CLIMATE_LOVELACE_CONFIG,
+      editMode: false,
+      urlPath: "climate",
+      mode: "generated",
+      locale: this.hass.locale,
+      enableFullEditMode: () => undefined,
+      saveConfig: async () => undefined,
+      deleteConfig: async () => undefined,
+      setEditMode: () => undefined,
+      showToast: () => undefined,
+    };
+  }
+
+  private _navigateConfig(ev) {
+    ev.stopPropagation();
+    navigate("/config/climate?historyBack=1");
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        :host {
+          -ms-user-select: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+        }
+        .header {
+          background-color: var(--app-header-background-color);
+          color: var(--app-header-text-color, white);
+          border-bottom: var(--app-header-border-bottom, none);
+          position: fixed;
+          top: 0;
+          width: calc(
+            var(--mdc-top-app-bar-width, 100%) - var(
+                --safe-area-inset-right,
+                0px
+              )
+          );
+          padding-top: var(--safe-area-inset-top);
+          z-index: 4;
+          transition: box-shadow 200ms linear;
+          display: flex;
+          flex-direction: row;
+          -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
+          backdrop-filter: var(--app-header-backdrop-filter, none);
+          padding-top: var(--safe-area-inset-top);
+          padding-right: var(--safe-area-inset-right);
+        }
+        :host([narrow]) .header {
+          width: calc(
+            var(--mdc-top-app-bar-width, 100%) - var(
+                --safe-area-inset-left,
+                0px
+              ) - var(--safe-area-inset-right, 0px)
+          );
+          padding-left: var(--safe-area-inset-left);
+        }
+        :host([scrolled]) .header {
+          box-shadow: var(
+            --mdc-top-app-bar-fixed-box-shadow,
+            0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+            0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+            0px 1px 10px 0px rgba(0, 0, 0, 0.12)
+          );
+        }
+        .toolbar {
+          height: var(--header-height);
+          display: flex;
+          flex: 1;
+          align-items: center;
+          font-size: var(--ha-font-size-xl);
+          padding: 0px 12px;
+          font-weight: var(--ha-font-weight-normal);
+          box-sizing: border-box;
+        }
+        :host([narrow]) .toolbar {
+          padding: 0 4px;
+        }
+        .main-title {
+          margin: var(--margin-title);
+          line-height: var(--ha-line-height-normal);
+          flex-grow: 1;
+        }
+        hui-view-container {
+          position: relative;
+          display: flex;
+          min-height: 100vh;
+          box-sizing: border-box;
+          padding-top: calc(var(--header-height) + var(--safe-area-inset-top));
+          padding-right: var(--safe-area-inset-right);
+          padding-inline-end: var(--safe-area-inset-right);
+          padding-bottom: var(--safe-area-inset-bottom);
+        }
+        :host([narrow]) hui-view-container {
+          padding-left: var(--safe-area-inset-left);
+          padding-inline-start: var(--safe-area-inset-left);
+        }
+        hui-view {
+          flex: 1 1 100%;
+          max-width: 100%;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-panel-climate": PanelClimate;
+  }
+}
@@ -0,0 +1,203 @@
+import { ReactiveElement } from "lit";
+import { customElement } from "lit/decorators";
+import {
+  findEntities,
+  generateEntityFilter,
+  type EntityFilter,
+} from "../../../common/entity/entity_filter";
+import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
+import type { LovelaceSectionRawConfig } from "../../../data/lovelace/config/section";
+import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
+import type { HomeAssistant } from "../../../types";
+import {
+  computeAreaTileCardConfig,
+  getAreas,
+  getFloors,
+} from "../../lovelace/strategies/areas/helpers/areas-strategy-helper";
+import { getHomeStructure } from "../../lovelace/strategies/home/helpers/home-structure";
+
+export interface ClimateViewStrategyConfig {
+  type: "climate";
+}
+
+export const climateEntityFilters: EntityFilter[] = [
+  { domain: "climate", entity_category: "none" },
+  { domain: "humidifier", entity_category: "none" },
+  { domain: "fan", entity_category: "none" },
+  { domain: "water_heater", entity_category: "none" },
+  {
+    domain: "cover",
+    device_class: [
+      "awning",
+      "blind",
+      "curtain",
+      "shade",
+      "shutter",
+      "window",
+      "none",
+    ],
+    entity_category: "none",
+  },
+  {
+    domain: "binary_sensor",
+    device_class: ["window"],
+    entity_category: "none",
+  },
+];
+
+const processAreasForClimate = (
+  areaIds: string[],
+  hass: HomeAssistant,
+  entities: string[]
+): LovelaceCardConfig[] => {
+  const cards: LovelaceCardConfig[] = [];
+  const computeTileCard = computeAreaTileCardConfig(hass, "", true);
+
+  for (const areaId of areaIds) {
+    const area = hass.areas[areaId];
+    if (!area) continue;
+
+    const areaFilter = generateEntityFilter(hass, {
+      area: area.area_id,
+    });
+    const areaClimateEntities = entities.filter(areaFilter);
+    const areaCards: LovelaceCardConfig[] = [];
+
+    // Add temperature and humidity sensors with trend graphs for areas
+    const temperatureEntityId = area.temperature_entity_id;
+    if (temperatureEntityId && hass.states[temperatureEntityId]) {
+      areaCards.push({
+        ...computeTileCard(temperatureEntityId),
+        features: [{ type: "trend-graph" }],
+      });
+    }
+
+    const humidityEntityId = area.humidity_entity_id;
+    if (humidityEntityId && hass.states[humidityEntityId]) {
+      areaCards.push({
+        ...computeTileCard(humidityEntityId),
+        features: [{ type: "trend-graph" }],
+      });
+    }
+
+    // Add other climate entities
+    for (const entityId of areaClimateEntities) {
+      // Skip if already added as temperature/humidity sensor
+      if (entityId === temperatureEntityId || entityId === humidityEntityId) {
+        continue;
+      }
+
+      const state = hass.states[entityId];
+      if (
+        state?.attributes.device_class === "temperature" ||
+        state?.attributes.device_class === "humidity"
+      ) {
+        areaCards.push({
+          ...computeTileCard(entityId),
+          features: [{ type: "trend-graph" }],
+        });
+      } else {
+        areaCards.push(computeTileCard(entityId));
+      }
+    }
+
+    if (areaCards.length > 0) {
+      cards.push({
+        heading_style: "subtitle",
+        type: "heading",
+        heading: area.name,
+      });
+      cards.push(...areaCards);
+    }
+  }
+
+  return cards;
+};
+
+@customElement("climate-view-strategy")
+export class ClimateViewStrategy extends ReactiveElement {
+  static async generate(
+    _config: ClimateViewStrategyConfig,
+    hass: HomeAssistant
+  ): Promise<LovelaceViewConfig> {
+    const areas = getAreas(hass.areas);
+    const floors = getFloors(hass.floors);
+    const home = getHomeStructure(floors, areas);
+
+    const sections: LovelaceSectionRawConfig[] = [];
+
+    const allEntities = Object.keys(hass.states);
+
+    const climateFilters = climateEntityFilters.map((filter) =>
+      generateEntityFilter(hass, filter)
+    );
+
+    const entities = findEntities(allEntities, climateFilters);
+
+    const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
+
+    // Process floors
+    for (const floorStructure of home.floors) {
+      const floorId = floorStructure.id;
+      const areaIds = floorStructure.areas;
+      const floor = hass.floors[floorId];
+
+      const section: LovelaceSectionRawConfig = {
+        type: "grid",
+        column_span: 2,
+        cards: [
+          {
+            type: "heading",
+            heading:
+              floorCount > 1
+                ? floor.name
+                : hass.localize("ui.panel.lovelace.strategy.home.areas"),
+          },
+        ],
+      };
+
+      const areaCards = processAreasForClimate(areaIds, hass, entities);
+
+      if (areaCards.length > 0) {
+        section.cards!.push(...areaCards);
+        sections.push(section);
+      }
+    }
+
+    // Process unassigned areas
+    if (home.areas.length > 0) {
+      const section: LovelaceSectionRawConfig = {
+        type: "grid",
+        column_span: 2,
+        cards: [
+          {
+            type: "heading",
+            heading:
+              floorCount > 1
+                ? hass.localize("ui.panel.lovelace.strategy.home.other_areas")
+                : hass.localize("ui.panel.lovelace.strategy.home.areas"),
+          },
+        ],
+      };
+
+      const areaCards = processAreasForClimate(home.areas, hass, entities);
+
+      if (areaCards.length > 0) {
+        section.cards!.push(...areaCards);
+        sections.push(section);
+      }
+    }
+
+    return {
+      type: "sections",
+      max_columns: 2,
+      sections: sections || [],
+    };
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "climate-view-strategy": ClimateViewStrategy;
+  }
+}
@@ -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 {
@@ -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;
+        }
      `,
    ];
  }
@@ -92,7 +92,7 @@ class DialogPasteReplace extends LitElement implements HassDialog {
        }
        div[slot="primaryAction"] {
          display: flex;
-          gap: 8px;
+          gap: var(--ha-space-2);
        }
      `,
    ];
@@ -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 {
@@ -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;
        }
@@ -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);
      }
    }
  `;
@@ -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);
@@ -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);
    }
  `;
@@ -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);
    }
  `;
@@ -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 {
@@ -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;
@@ -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));
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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,
@@ -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 {
@@ -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 {
@@ -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);
@@ -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;
@@ -0,0 +1,42 @@
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../../layouts/hass-subpage";
+import { haStyle } from "../../../resources/styles";
+import type { HomeAssistant, Route } from "../../../types";
+
+@customElement("ha-config-climate")
+class HaConfigClimate extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ attribute: false }) public route!: Route;
+
+  @state() private _searchParms = new URLSearchParams(window.location.search);
+
+  protected render(): TemplateResult {
+    return html`
+      <hass-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .backPath=${this._searchParms.has("historyBack")
+          ? undefined
+          : "/config/lovelace/dashboards"}
+        .header=${"Climate"}
+      >
+        <div class="container"></div>
+      </hass-subpage>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [haStyle, css``];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-climate": HaConfigClimate;
+  }
+}
@@ -129,7 +129,7 @@ export class DialogSupportPackage extends LitElement {
    }
    .actions {
      display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
      justify-content: flex-end;
    }
    hr {
@@ -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;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Paul Bottein	89a0fa61c8	Add settings for climate panel	2025-09-30 14:21:39 +02:00
Paul Bottein	b10ca8ac23	Continue climate and security migration	2025-09-30 14:06:56 +02:00
Paul Bottein	5fe4656a86	Add security and climate panel	2025-09-30 13:44:23 +02:00
Paul Bottein	dba42bb7b5	Move files	2025-09-30 09:55:44 +02:00
Paul Bottein	5aac3eb2d5	Move strategy	2025-09-29 19:04:01 +02:00
Paul Bottein	93cf4c0404	Create lights panel	2025-09-29 18:49:51 +02:00
renovate[bot]	53be0a3fa2	Update dependency @rsdoctor/rspack-plugin to v1.3.0 (#27241 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-29 17:31:13 +02:00
renovate[bot]	d69c46c80c	Update dependency @codemirror/autocomplete to v6.19.0 (#27242 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-29 17:30:42 +02:00
Paul Bottein	0c2a7bfed0	Replace legacy hass icons to mdi icons (#27244 )	2025-09-29 17:30:20 +02:00
dependabot[bot]	afdd232e38	Bump home-assistant/wheels from 2025.07.0 to 2025.09.1 (#27239 ) Bumps [home-assistant/wheels](https://github.com/home-assistant/wheels) from 2025.07.0 to 2025.09.1. - [Release notes](https://github.com/home-assistant/wheels/releases) - [Commits](https://github.com/home-assistant/wheels/compare/2025.07.0...2025.09.1) --- updated-dependencies: - dependency-name: home-assistant/wheels dependency-version: 2025.09.1 dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-09-29 12:37:13 +02:00
dependabot[bot]	179751a135	Bump github/codeql-action from 3.30.3 to 3.30.5 (#27235 ) Bumps [github/codeql-action](https://github.com/github/codeql-action) from 3.30.3 to 3.30.5. - [Release notes](https://github.com/github/codeql-action/releases) - [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md) - [Commits](https://github.com/github/codeql-action/compare/192325c86100d080feab897ff886c34abd4c83a3...3599b3baa15b485a2e49ef411a7a4bb2452e7f93) --- updated-dependencies: - dependency-name: github/codeql-action dependency-version: 3.30.5 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-09-29 11:03:37 +03:00
dependabot[bot]	52f6024306	Bump actions/cache from 4.2.4 to 4.3.0 (#27236 ) Bumps [actions/cache](https://github.com/actions/cache) from 4.2.4 to 4.3.0. - [Release notes](https://github.com/actions/cache/releases) - [Changelog](https://github.com/actions/cache/blob/main/RELEASES.md) - [Commits](https://github.com/actions/cache/compare/0400d5f644dc74513175e3cd8d07132dd4860809...0057852bfaa89a56745cba8c7296529d2fc39830) --- updated-dependencies: - dependency-name: actions/cache dependency-version: 4.3.0 dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-09-29 11:03:06 +03:00
Phil White	7c7a4e61f2	Add media playback badge for Area card (#26893 )	2025-09-29 09:58:57 +02:00
Jan-Philipp Benecke	facce7b016	Add custom color token for control color (#27227 )	2025-09-29 07:28:24 +00:00
Petar Petrov	e546cb3374	Make "loading next step" look like progress step in config flows (#27234 )	2025-09-29 09:19:18 +02:00
Jan-Philipp Benecke	a0d2e7312b	Adjust media player cover image sizes in more info for smaller screens (#27232 ) Adjust media player cover image sizes for smaller screens	2025-09-29 08:30:12 +03:00
Jan-Philipp Benecke	c0a9dadcbe	Implement core spacing tokens (#27226 )	2025-09-29 08:28:24 +03:00
renovate[bot]	e1edf7fb98	Update dependency lint-staged to v16.2.1 (#27233 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-29 07:57:45 +03:00
Jan-Philipp Benecke	6d5c165bd2	Add tooltips for undo/redo in automation & script editors (#27224 )	2025-09-28 13:35:48 +03:00
Simon Lamon	54177a16e9	Set explicit netlify version to fix workflows (#27229 ) netlify set explicit version for fix	2025-09-28 13:34:18 +03:00
Paul Bottein	c814b8e888	Align dashboard data table with other data tables (#27206 ) * Align dashboard data table with other data tables * Update ha-config-lovelace-dashboards.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update ha-config-lovelace-dashboards.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>	2025-09-27 18:07:01 +03:00
renovate[bot]	33a0b32cc5	Update vaadinWebComponents monorepo to v24.9.1 (#27220 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-27 13:25:12 +02:00
renovate[bot]	7dae13bf57	Update dependency @rspack/core to v1.5.7 (#27219 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-27 13:24:59 +02:00
renovate[bot]	0a3fe6e0fb	Update dependency tar to v7.5.1 (#27216 )	2025-09-26 19:21:46 +02:00
Paul Bottein	e0348e4da7	Fix slider ticks support for number selector (#27211 )	2025-09-26 15:35:01 +02:00