Change drag selected styling

cast/src/media/entrypoint.ts

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

cast/src/receiver/entrypoint.ts

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

package.json

@@ -162,7 +162,7 @@
     "@rspack/core": "1.5.1",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.24",
+    "@types/chromecast-caf-receiver": "6.0.22",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
     "@types/culori": "4.0.0",

pyproject.toml

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

src/components/ha-automation-row.ts

@@ -80,18 +80,7 @@ export class HaAutomationRow extends LitElement {
       ev.key !== " " &&
       !(
         (this.sortSelected || ev.altKey) &&
-        !(ev.ctrlKey || ev.metaKey) &&
-        !ev.shiftKey &&
         (ev.key === "ArrowUp" || ev.key === "ArrowDown")
-      ) &&
-      !(
-        (ev.ctrlKey || ev.metaKey) &&
-        !ev.shiftKey &&
-        !ev.altKey &&
-        (ev.key === "c" ||
-          ev.key === "x" ||
-          ev.key === "Delete" ||
-          ev.key === "Backspace")
       )
     ) {
       return;
@@ -112,22 +101,6 @@ export class HaAutomationRow extends LitElement {
       return;
     }
 
-    if (ev.ctrlKey || ev.metaKey) {
-      if (ev.key === "c") {
-        fireEvent(this, "copy-row");
-        return;
-      }
-      if (ev.key === "x") {
-        fireEvent(this, "cut-row");
-        return;
-      }
-
-      if (ev.key === "Delete" || ev.key === "Backspace") {
-        fireEvent(this, "delete-row");
-        return;
-      }
-    }
-
     this.click();
   }
 
@@ -159,7 +132,6 @@ export class HaAutomationRow extends LitElement {
     .expand-button {
       transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
       color: var(--ha-color-on-neutral-quiet);
-      margin-left: -8px;
     }
     :host([building-block]) .leading-icon-wrapper {
       background-color: var(--ha-color-fill-neutral-loud-resting);
@@ -224,8 +196,5 @@ declare global {
   interface HASSDomEvents {
     "toggle-collapsed": undefined;
     "stop-sort-selection": undefined;
-    "copy-row": undefined;
-    "cut-row": undefined;
-    "delete-row": undefined;
   }
 }

src/components/ha-bottom-sheet.ts

@@ -30,8 +30,6 @@ export class HaBottomSheet extends LitElement {
 
   @state() private _dialogMaxViewpointHeight = 70;
 
-  @state() private _dialogMinViewpointHeight = 55;
-
   @state() private _dialogViewportHeight?: number;
 
   render() {
@@ -43,7 +41,6 @@ export class HaBottomSheet extends LitElement {
           ? `${this._dialogViewportHeight}vh`
           : "auto",
         maxHeight: `${this._dialogMaxViewpointHeight}vh`,
-        minHeight: `${this._dialogMinViewpointHeight}vh`,
       })}
     >
       <div class="handle-wrapper">
@@ -83,7 +80,6 @@ export class HaBottomSheet extends LitElement {
       this._dialogViewportHeight =
         (this._dialog.offsetHeight / window.innerHeight) * 100;
       this._dialogMaxViewpointHeight = 90;
-      this._dialogMinViewpointHeight = 20;
     } else {
       // after close animation is done close dialog element and fire closed event
       this._dialog.close();

src/components/ha-md-dialog.ts

@@ -159,7 +159,6 @@ export class HaMdDialog extends Dialog {
         --md-dialog-headline-size: var(--ha-font-size-xl);
         --md-dialog-supporting-text-size: var(--ha-font-size-m);
         --md-dialog-supporting-text-line-height: var(--ha-line-height-normal);
-        --md-divider-color: var(--divider-color);
       }
 
       :host([type="alert"]) {

src/components/ha-numeric-arrow-input.ts

@@ -1,121 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { mdiMinus, mdiPlus } from "@mdi/js";
-import { fireEvent } from "../common/dom/fire_event";
-import type { HaIconButton } from "./ha-icon-button";
-import "./ha-textfield";
-import "./ha-icon-button";
-import { clampValue } from "../data/number";
-
-@customElement("ha-numeric-arrow-input")
-export class HaNumericArrowInput extends LitElement {
-  @property({ attribute: false }) public disabled = false;
-
-  @property({ attribute: false }) public required = false;
-
-  @property({ attribute: false }) public min?: number;
-
-  @property({ attribute: false }) public max?: number;
-
-  @property({ attribute: false }) public step?: number;
-
-  @property({ attribute: false }) public padStart?: number;
-
-  @property({ attribute: false }) public labelUp = "Increase";
-
-  @property({ attribute: false }) public labelDown = "Decrease";
-
-  @property({ attribute: false }) public value = 0;
-
-  @query("ha-icon-button[data-direction='up']")
-  private _upButton!: HaIconButton;
-
-  @query("ha-icon-button[data-direction='down']")
-  private _downButton!: HaIconButton;
-
-  private _paddedValue = memoizeOne((value: number, padStart?: number) =>
-    value.toString().padStart(padStart ?? 0, "0")
-  );
-
-  render() {
-    return html`<div
-      class="numeric-arrow-input-container"
-      @keydown=${this._keyDown}
-    >
-      <ha-icon-button
-        data-direction="up"
-        .disabled=${this.disabled}
-        .label=${this.labelUp}
-        .path=${mdiPlus}
-        @click=${this._up}
-      ></ha-icon-button>
-      <span class="numeric-arrow-input-value"
-        >${this._paddedValue(this.value, this.padStart)}</span
-      >
-      <ha-icon-button
-        data-direction="down"
-        .disabled=${this.disabled}
-        .label=${this.labelDown}
-        .path=${mdiMinus}
-        @click=${this._down}
-      ></ha-icon-button>
-    </div>`;
-  }
-
-  private _keyDown(ev: KeyboardEvent) {
-    if (ev.key === "ArrowUp") {
-      this._upButton.focus();
-      this._up();
-    }
-    if (ev.key === "ArrowDown") {
-      this._downButton.focus();
-      this._down();
-    }
-  }
-
-  private _up() {
-    const newValue = this.value + (this.step ?? 1);
-    fireEvent(
-      this,
-      "value-changed",
-      clampValue({ value: newValue, min: this.min, max: this.max })
-    );
-  }
-
-  private _down() {
-    const newValue = this.value - (this.step ?? 1);
-    fireEvent(
-      this,
-      "value-changed",
-      clampValue({ value: newValue, min: this.min, max: this.max })
-    );
-  }
-
-  static styles = css`
-    .numeric-arrow-input-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 4px;
-    }
-
-    .numeric-arrow-input-container ha-icon-button {
-      --mdc-icon-button-size: 24px;
-      color: var(--secondary-text-color);
-    }
-
-    .numeric-arrow-input-value {
-      color: var(--primary-text-color);
-      font-size: 16px;
-      font-weight: 500;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-numeric-arrow-input": HaNumericArrowInput;
-  }
-}

src/components/ha-related-items.ts

@@ -3,7 +3,6 @@ import {
   mdiDevices,
   mdiPaletteSwatch,
   mdiTextureBox,
-  mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -267,9 +266,7 @@ export class HaRelatedItems extends LitElement {
                   <a href="/config/devices/device/${relatedDeviceId}">
                     <ha-list-item hasMeta graphic="icon">
                       <ha-svg-icon
-                        .path=${device.entry_type === "service"
-                          ? mdiTransitConnectionVariant
-                          : mdiDevices}
+                        .path=${mdiDevices}
                         slot="graphic"
                       ></ha-svg-icon>
                       ${device.name_by_user || device.name}

src/components/ha-sortable.ts

@@ -15,16 +15,21 @@ declare global {
     "item-added": {
       index: number;
       data: any;
-      item: any;
     };
     "item-removed": {
       index: number;
     };
     "drag-start": undefined;
     "drag-end": undefined;
+    "item-cloned": HaSortableClonedEventData;
   }
 }
 
+export interface HaSortableClonedEventData {
+  item: any;
+  clone: any;
+}
+
 export type HaSortableOptions = Omit<
   SortableInstance.SortableOptions,
   "onStart" | "onChoose" | "onEnd" | "onUpdate" | "onAdd" | "onRemove"
@@ -149,6 +154,7 @@ export class HaSortable extends LitElement {
       onUpdate: this._handleUpdate,
       onAdd: this._handleAdd,
       onRemove: this._handleRemove,
+      onClone: this._handleClone,
     };
 
     if (this.draggableSelector) {
@@ -181,7 +187,6 @@ export class HaSortable extends LitElement {
     fireEvent(this, "item-added", {
       index: evt.newIndex,
       data: evt.item.sortableData,
-      item: evt.item,
     });
   };
 
@@ -189,6 +194,10 @@ export class HaSortable extends LitElement {
     fireEvent(this, "item-removed", { index: evt.oldIndex });
   };
 
+  private _handleClone = (evt) => {
+    fireEvent(this, "item-cloned", evt);
+  };
+
   private _handleEnd = async (evt) => {
     fireEvent(this, "drag-end");
     // put back in original location

src/components/ha-time-picker.ts

@@ -1,281 +0,0 @@
-import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { clampValue } from "../data/number";
-import { useAmPm } from "../common/datetime/use_am_pm";
-import { fireEvent } from "../common/dom/fire_event";
-import type { FrontendLocaleData } from "../data/translation";
-import type { HomeAssistant } from "../types";
-import type { ClampedValue } from "../data/number";
-import "./ha-base-time-input";
-import "./ha-button";
-import "./ha-numeric-arrow-input";
-
-@customElement("ha-time-picker")
-export class HaTimePicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public locale!: FrontendLocaleData;
-
-  @property({ attribute: false }) public value?: string;
-
-  @property({ attribute: false }) public disabled = false;
-
-  @property({ attribute: false }) public required = false;
-
-  @property({ attribute: false }) public enableSeconds = false;
-
-  @state() private _hours = 0;
-
-  @state() private _minutes = 0;
-
-  @state() private _seconds = 0;
-
-  @state() private _useAmPm = false;
-
-  @state() private _isPm = false;
-
-  protected firstUpdated(changedProperties: PropertyValues) {
-    super.firstUpdated(changedProperties);
-    this._useAmPm = useAmPm(this.locale);
-
-    let hours = NaN;
-    let minutes = NaN;
-    let seconds = NaN;
-    let isPm = false;
-
-    if (this.value) {
-      const parts = this.value?.split(":") || [];
-      minutes = parts[1] ? Number(parts[1]) : 0;
-      seconds = parts[2] ? Number(parts[2]) : 0;
-      const hour24 = parts[0] ? Number(parts[0]) : 0;
-
-      if (this._useAmPm) {
-        if (hour24 === 0) {
-          hours = 12;
-          isPm = false;
-        } else if (hour24 < 12) {
-          hours = hour24;
-          isPm = false;
-        } else if (hour24 === 12) {
-          hours = 12;
-          isPm = true;
-        } else {
-          hours = hour24 - 12;
-          isPm = true;
-        }
-      } else {
-        hours = hour24;
-      }
-    }
-
-    this._hours = hours;
-    this._minutes = minutes;
-    this._seconds = seconds;
-    this._isPm = isPm;
-  }
-
-  protected render() {
-    return html`<div class="time-picker-container">
-      <ha-numeric-arrow-input
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .min=${this._useAmPm ? 1 : 0}
-        .max=${this._useAmPm ? 12 : 23}
-        .step=${1}
-        .padStart=${2}
-        .value=${this._hours}
-        @value-changed=${this._hoursChanged}
-        .labelUp=${
-          // TODO: Localize
-          "Increase hours"
-        }
-        .labelDown=${
-          // TODO: Localize
-          "Decrease hours"
-        }
-      ></ha-numeric-arrow-input>
-      <span class="time-picker-separator">:</span>
-      <ha-numeric-arrow-input
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .min=${0}
-        .max=${59}
-        .step=${1}
-        .padStart=${2}
-        .labelUp=${
-          // TODO: Localize
-          "Increase minutes"
-        }
-        .labelDown=${
-          // TODO: Localize
-          "Decrease minutes"
-        }
-        .value=${this._minutes}
-        @value-changed=${this._minutesChanged}
-      ></ha-numeric-arrow-input>
-      ${this.enableSeconds
-        ? html`
-            <span class="time-picker-separator">:</span>
-            <ha-numeric-arrow-input
-              .disabled=${this.disabled}
-              .required=${this.required}
-              .min=${0}
-              .max=${59}
-              .step=${1}
-              .padStart=${2}
-              .labelUp=${
-                // TODO: Localize
-                "Increase seconds"
-              }
-              .labelDown=${
-                // TODO: Localize
-                "Decrease seconds"
-              }
-              .value=${this._seconds}
-              @value-changed=${this._secondsChanged}
-            ></ha-numeric-arrow-input>
-          `
-        : nothing}
-      ${this._useAmPm
-        ? html`
-            <ha-button @click=${this._toggleAmPm}>
-              ${this._isPm ? "PM" : "AM"}
-            </ha-button>
-          `
-        : nothing}
-    </div>`;
-  }
-
-  protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-
-    if (changedProperties.has("_hours")) {
-      this._timeUpdated();
-    }
-
-    if (changedProperties.has("_minutes")) {
-      this._timeUpdated();
-    }
-
-    if (changedProperties.has("_seconds")) {
-      this._timeUpdated();
-    }
-
-    if (changedProperties.has("_useAmPm")) {
-      this._timeUpdated();
-    }
-
-    if (changedProperties.has("_isPm")) {
-      this._timeUpdated();
-    }
-  }
-
-  private _hoursChanged(ev: CustomEvent<ClampedValue>) {
-    ev.stopPropagation?.();
-    this._hours = ev.detail.value;
-  }
-
-  private _minutesChanged(ev: CustomEvent<ClampedValue>) {
-    ev.stopPropagation?.();
-    this._minutes = ev.detail.value;
-    if (ev.detail.clamped) {
-      if (ev.detail.value === 0) {
-        this._hoursChanged({
-          detail: clampValue({
-            value: this._hours - 1,
-            min: this._useAmPm ? 1 : 0,
-            max: this._useAmPm ? 12 : 23,
-          }),
-        } as CustomEvent<ClampedValue>);
-        this._minutes = 59;
-      }
-
-      if (ev.detail.value === 59) {
-        this._hoursChanged({
-          detail: clampValue({
-            value: this._hours + 1,
-            min: this._useAmPm ? 1 : 0,
-            max: this._useAmPm ? 12 : 23,
-          }),
-        } as CustomEvent<ClampedValue>);
-        const hourMax = this._useAmPm ? 12 : 23;
-        if (this._hours < hourMax) {
-          this._minutes = 0;
-        }
-      }
-    }
-  }
-
-  private _secondsChanged(ev: CustomEvent<ClampedValue>) {
-    ev.stopPropagation?.();
-    this._seconds = ev.detail.value;
-    if (ev.detail.clamped) {
-      if (ev.detail.value === 0) {
-        this._minutesChanged({
-          detail: clampValue({ value: this._minutes - 1, min: 0, max: 59 }),
-        } as CustomEvent<ClampedValue>);
-        this._seconds = 59;
-      }
-
-      if (ev.detail.value === 59) {
-        this._minutesChanged({
-          detail: clampValue({ value: this._minutes + 1, min: 0, max: 59 }),
-        } as CustomEvent<ClampedValue>);
-        const hourMax = this._useAmPm ? 12 : 23;
-        if (!(this._hours === hourMax && this._minutes === 59)) {
-          this._seconds = 0;
-        }
-      }
-    }
-  }
-
-  private _toggleAmPm() {
-    this._isPm = !this._isPm;
-  }
-
-  private _timeUpdated() {
-    let hour24 = this._hours;
-
-    if (this._useAmPm) {
-      if (this._hours === 12) {
-        hour24 = this._isPm ? 12 : 0;
-      } else {
-        hour24 = this._isPm ? this._hours + 12 : this._hours;
-      }
-    }
-
-    const timeParts = [
-      hour24.toString().padStart(2, "0"),
-      this._minutes.toString().padStart(2, "0"),
-      this._seconds.toString().padStart(2, "0"),
-    ];
-
-    const time = timeParts.join(":");
-    if (time === this.value) {
-      return;
-    }
-    this.value = time;
-    fireEvent(this, "change");
-    fireEvent(this, "value-changed", { value: time });
-  }
-
-  static styles = css`
-    .time-picker-container {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 4px;
-    }
-
-    .time-picker-separator {
-      color: var(--primary-text-color);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-time-picker": HaTimePicker;
-  }
-}

src/data/bluetooth.ts

@@ -24,14 +24,11 @@ export interface BluetoothConnectionData extends DataTableRowData {
   source: string;
 }
 
-export type HaScannerType = "usb" | "uart" | "remote" | "unknown";
-
 export interface BluetoothScannerDetails {
   source: string;
   connectable: boolean;
   name: string;
   adapter: string;
-  scanner_type?: HaScannerType;
 }
 
 export type BluetoothScannersDetails = Record<string, BluetoothScannerDetails>;
@@ -58,13 +55,6 @@ export interface BluetoothAllocationsData {
   allocated: string[];
 }
 
-export interface BluetoothScannerState {
-  source: string;
-  adapter: string;
-  current_mode: "active" | "passive" | null;
-  requested_mode: "active" | "passive" | null;
-}
-
 export const subscribeBluetoothScannersDetailsUpdates = (
   conn: Connection,
   store: Store<BluetoothScannersDetails>
@@ -180,20 +170,3 @@ export const subscribeBluetoothConnectionAllocations = (
     params
   );
 };
-
-export const subscribeBluetoothScannerState = (
-  conn: Connection,
-  callbackFunction: (scannerState: BluetoothScannerState) => void,
-  configEntryId?: string
-): Promise<() => Promise<void>> => {
-  const params: { type: string; config_entry_id?: string } = {
-    type: "bluetooth/subscribe_scanner_state",
-  };
-  if (configEntryId) {
-    params.config_entry_id = configEntryId;
-  }
-  return conn.subscribeMessage<BluetoothScannerState>(
-    (scannerState) => callbackFunction(scannerState),
-    params
-  );
-};

src/data/data_entry_flow.ts

@@ -97,7 +97,6 @@ export interface DataEntryFlowStepMenu {
   step_id: string;
   /** If array, use value to lookup translations in strings.json */
   menu_options: string[] | Record<string, string>;
-  sort?: boolean;
   description_placeholders?: Record<string, string>;
   translation_domain?: string;
 }

src/data/graph.ts

@@ -1 +1 @@
-export const strokeWidth = 2;
+export const strokeWidth = 5;

src/data/number.ts

@@ -12,35 +12,3 @@ export const getNumberDeviceClassConvertibleUnits = (
     type: "number/device_class_convertible_units",
     device_class: deviceClass,
   });
-
-export interface ClampedValue {
-  clamped: boolean;
-  value: number;
-}
-
-/**
- * Clamp a value between a minimum and maximum value
- * @param value - The value to clamp
- * @param min - The minimum value
- * @param max - The maximum value
- * @returns The clamped value
- */
-export const clampValue = ({
-  value,
-  min,
-  max,
-}: {
-  value: number;
-  min?: number;
-  max?: number;
-}): ClampedValue => {
-  if (max !== undefined && value > max) {
-    return { clamped: true, value: max };
-  }
-
-  if (min !== undefined && value < min) {
-    return { clamped: true, value: min };
-  }
-
-  return { clamped: false, value };
-};

src/data/recorder.ts

@@ -2,7 +2,6 @@ import type { Connection } from "home-assistant-js-websocket";
 import { computeStateName } from "../common/entity/compute_state_name";
 import type { HaDurationData } from "../components/ha-duration-input";
 import type { HomeAssistant } from "../types";
-import { firstWeekday } from "../common/datetime/first_weekday";
 
 export interface RecorderInfo {
   backlog: number | null;
@@ -109,7 +108,7 @@ export interface StatisticsValidationResultMeanTypeChanged {
   };
 }
 
-export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF", "MCF"] as const;
+export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF"] as const;
 
 export interface StatisticsUnitConfiguration {
   energy?: "Wh" | "kWh" | "MWh" | "GJ";
@@ -212,14 +211,7 @@ export const fetchStatistic = (
               : period.fixed_period.end,
         }
       : undefined,
-    calendar: period.calendar
-      ? {
-          ...(period.calendar.period === "week"
-            ? { first_weekday: firstWeekday(hass.locale).substring(0, 3) }
-            : {}),
-          ...period.calendar,
-        }
-      : undefined,
+    calendar: period.calendar,
     rolling_window: period.rolling_window,
   });
 

src/dialogs/config-flow/show-dialog-config-flow.ts

@@ -256,13 +256,6 @@ export const showConfigFlowDialog = (
       );
     },
 
-    renderMenuOptionDescription(hass, step, option) {
-      return hass.localize(
-        `component.${step.translation_domain || step.handler}.config.step.${step.step_id}.menu_option_descriptions.${option}`,
-        step.description_placeholders
-      );
-    },
-
     renderLoadingDescription(hass, reason, handler, step) {
       if (reason !== "loading_flow" && reason !== "loading_step") {
         return "";

src/dialogs/config-flow/show-dialog-data-entry-flow.ts

@@ -137,12 +137,6 @@ export interface FlowConfig {
     option: string
   ): string;
 
-  renderMenuOptionDescription(
-    hass: HomeAssistant,
-    step: DataEntryFlowStepMenu,
-    option: string
-  ): string;
-
   renderLoadingDescription(
     hass: HomeAssistant,
     loadingReason: LoadingReason,

src/dialogs/config-flow/show-dialog-options-flow.ts

@@ -225,13 +225,6 @@ export const showOptionsFlowDialog = (
         );
       },
 
-      renderMenuOptionDescription(hass, step, option) {
-        return hass.localize(
-          `component.${step.translation_domain || configEntry.domain}.options.step.${step.step_id}.menu_option_descriptions.${option}`,
-          step.description_placeholders
-        );
-      },
-
       renderLoadingDescription(hass, reason) {
         return (
           hass.localize(`component.${configEntry.domain}.options.loading`) ||

src/dialogs/config-flow/show-dialog-sub-config-flow.ts

@@ -252,13 +252,6 @@ export const showSubConfigFlowDialog = (
       );
     },
 
-    renderMenuOptionDescription(hass, step, option) {
-      return hass.localize(
-        `component.${step.translation_domain || configEntry.domain}.config_subentries.${flowType}.step.${step.step_id}.menu_option_descriptions.${option}`,
-        step.description_placeholders
-      );
-    },
-
     renderLoadingDescription(hass, reason, handler, step) {
       if (reason !== "loading_flow" && reason !== "loading_step") {
         return "";

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

@@ -1,5 +1,5 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-icon-next";
@@ -8,7 +8,6 @@ import type { DataEntryFlowStepMenu } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
-import { stringCompare } from "../../common/string/compare";
 
 @customElement("step-flow-menu")
 class StepFlowMenu extends LitElement {
@@ -18,18 +17,9 @@ class StepFlowMenu extends LitElement {
 
   @property({ attribute: false }) public step!: DataEntryFlowStepMenu;
 
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    return (
-      changedProps.size > 1 ||
-      !changedProps.has("hass") ||
-      this.hass.localize !== changedProps.get("hass")?.localize
-    );
-  }
-
   protected render(): TemplateResult {
     let options: string[];
     let translations: Record<string, string>;
-    let optionDescriptions: Record<string, string> = {};
 
     if (Array.isArray(this.step.menu_options)) {
       options = this.step.menu_options;
@@ -40,36 +30,10 @@ class StepFlowMenu extends LitElement {
           this.step,
           option
         );
-        optionDescriptions[option] =
-          this.flowConfig.renderMenuOptionDescription(
-            this.hass,
-            this.step,
-            option
-          );
       }
     } else {
       options = Object.keys(this.step.menu_options);
       translations = this.step.menu_options;
-      optionDescriptions = Object.fromEntries(
-        options.map((key) => [
-          key,
-          this.flowConfig.renderMenuOptionDescription(
-            this.hass,
-            this.step,
-            key
-          ),
-        ])
-      );
-    }
-
-    if (this.step.sort) {
-      options = options.sort((a, b) =>
-        stringCompare(
-          translations[a]!,
-          translations[b]!,
-          this.hass.locale.language
-        )
-      );
     }
 
     const description = this.flowConfig.renderMenuDescription(
@@ -82,18 +46,8 @@ class StepFlowMenu extends LitElement {
       <div class="options">
         ${options.map(
           (option) => html`
-            <ha-list-item
-              hasMeta
-              .step=${option}
-              @click=${this._handleStep}
-              ?twoline=${optionDescriptions[option]}
-            >
+            <ha-list-item hasMeta .step=${option} @click=${this._handleStep}>
               <span>${translations[option]}</span>
-              ${optionDescriptions[option]
-                ? html`<span slot="secondary">
-                    ${optionDescriptions[option]}
-                  </span>`
-                : nothing}
               <ha-icon-next slot="meta"></ha-icon-next>
             </ha-list-item>
           `
@@ -119,10 +73,11 @@ class StepFlowMenu extends LitElement {
     css`
       .options {
         margin-top: 20px;
-        margin-bottom: 16px;
+        margin-bottom: 8px;
       }
       .content {
         padding-bottom: 16px;
+        border-bottom: 1px solid var(--divider-color);
       }
       .content + .options {
         margin-top: 8px;

src/dialogs/generic/dialog-box.ts

@@ -3,11 +3,11 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-button";
-import "../../components/ha-dialog-header";
 import "../../components/ha-md-dialog";
 import type { HaMdDialog } from "../../components/ha-md-dialog";
+import "../../components/ha-dialog-header";
 import "../../components/ha-svg-icon";
+import "../../components/ha-button";
 import "../../components/ha-textfield";
 import type { HaTextField } from "../../components/ha-textfield";
 import type { HomeAssistant } from "../../types";
@@ -52,7 +52,7 @@ class DialogBox extends LitElement {
       return nothing;
     }
 
-    const confirmPrompt = this._params.confirmation || !!this._params.prompt;
+    const confirmPrompt = this._params.confirmation || this._params.prompt;
 
     const dialogTitle =
       this._params.title ||
@@ -62,7 +62,7 @@ class DialogBox extends LitElement {
     return html`
       <ha-md-dialog
         open
-        .disableCancelAction=${confirmPrompt}
+        .disableCancelAction=${confirmPrompt || false}
         @closed=${this._dialogClosed}
         type="alert"
         aria-labelledby="dialog-box-title"
@@ -100,22 +100,23 @@ class DialogBox extends LitElement {
             : ""}
         </div>
         <div slot="actions">
-          ${confirmPrompt
-            ? html`
-                <ha-button
-                  @click=${this._dismiss}
-                  ?autofocus=${!this._params.prompt && this._params.destructive}
-                  appearance="plain"
-                >
-                  ${this._params.dismissText
-                    ? this._params.dismissText
-                    : this.hass.localize("ui.common.cancel")}
-                </ha-button>
-              `
-            : nothing}
+          ${confirmPrompt &&
+          html`
+            <ha-button
+              @click=${this._dismiss}
+              ?dialogInitialFocus=${!this._params.prompt &&
+              this._params.destructive}
+              appearance="plain"
+            >
+              ${this._params.dismissText
+                ? this._params.dismissText
+                : this.hass.localize("ui.common.cancel")}
+            </ha-button>
+          `}
           <ha-button
             @click=${this._confirm}
-            ?autofocus=${!this._params.prompt && !this._params.destructive}
+            ?dialogInitialFocus=${!this._params.prompt &&
+            !this._params.destructive}
             variant=${this._params.destructive ? "danger" : "brand"}
           >
             ${this._params.confirmText

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

@@ -6,9 +6,7 @@ import memoizeOne from "memoize-one";
 import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 import { formatTime } from "../../../common/datetime/format_time";
 import { formatNumber } from "../../../common/number/format_number";
-import "../../../components/ha-alert";
 import "../../../components/ha-relative-time";
-import "../../../components/ha-spinner";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tooltip";
@@ -294,101 +292,106 @@ class MoreInfoWeather extends LitElement {
             </div>
           `
         : nothing}
-
-      <div class="section">
-        ${this.hass.localize("ui.card.weather.forecast")}:
-      </div>
-      ${supportedForecasts?.length > 1
-        ? html`<sl-tab-group @sl-tab-show=${this._handleForecastTypeChanged}>
-            ${supportedForecasts.map(
-              (forecastType) =>
-                html`<sl-tab
-                  slot="nav"
-                  .panel=${forecastType}
-                  .active=${this._forecastType === forecastType}
+      ${forecast
+        ? html`
+            <div class="section">
+              ${this.hass.localize("ui.card.weather.forecast")}:
+            </div>
+            ${supportedForecasts.length > 1
+              ? html`<sl-tab-group
+                  @sl-tab-show=${this._handleForecastTypeChanged}
                 >
-                  ${this.hass!.localize(`ui.card.weather.${forecastType}`)}
-                </sl-tab>`
-            )}
-          </sl-tab-group>`
-        : nothing}
-      <div class="forecast">
-        ${forecast?.length
-          ? forecast.map((item) =>
-              this._showValue(item.templow) || this._showValue(item.temperature)
-                ? html`
-                    <div>
+                  ${supportedForecasts.map(
+                    (forecastType) =>
+                      html`<sl-tab
+                        slot="nav"
+                        .panel=${forecastType}
+                        .active=${this._forecastType === forecastType}
+                      >
+                        ${this.hass!.localize(
+                          `ui.card.weather.${forecastType}`
+                        )}
+                      </sl-tab>`
+                  )}
+                </sl-tab-group>`
+              : nothing}
+            <div class="forecast">
+              ${forecast.map((item) =>
+                this._showValue(item.templow) ||
+                this._showValue(item.temperature)
+                  ? html`
                       <div>
-                        ${dayNight
-                          ? html`
-                              ${formatDateWeekdayShort(
-                                new Date(item.datetime),
-                                this.hass!.locale,
-                                this.hass!.config
-                              )}
-                              <div class="daynight">
-                                ${item.is_daytime !== false
-                                  ? this.hass!.localize("ui.card.weather.day")
-                                  : this.hass!.localize(
-                                      "ui.card.weather.night"
-                                    )}<br />
-                              </div>
-                            `
-                          : hourly
+                        <div>
+                          ${dayNight
                             ? html`
-                                ${formatTime(
-                                  new Date(item.datetime),
-                                  this.hass!.locale,
-                                  this.hass!.config
-                                )}
-                              `
-                            : html`
                                 ${formatDateWeekdayShort(
                                   new Date(item.datetime),
                                   this.hass!.locale,
                                   this.hass!.config
                                 )}
-                              `}
-                      </div>
-                      ${this._showValue(item.condition)
-                        ? html`
-                            <div class="forecast-image-icon">
-                              ${getWeatherStateIcon(
-                                item.condition!,
-                                this,
-                                !(
-                                  item.is_daytime ||
-                                  item.is_daytime === undefined
-                                )
-                              )}
-                            </div>
-                          `
-                        : nothing}
-                      <div class="temp">
-                        ${this._showValue(item.temperature)
-                          ? html`${formatNumber(
-                              item.temperature,
-                              this.hass!.locale
-                            )}°`
-                          : "—"}
-                      </div>
-                      <div class="templow">
-                        ${this._showValue(item.templow)
-                          ? html`${formatNumber(
-                              item.templow!,
-                              this.hass!.locale
-                            )}°`
-                          : hourly
-                            ? nothing
+                                <div class="daynight">
+                                  ${item.is_daytime !== false
+                                    ? this.hass!.localize("ui.card.weather.day")
+                                    : this.hass!.localize(
+                                        "ui.card.weather.night"
+                                      )}<br />
+                                </div>
+                              `
+                            : hourly
+                              ? html`
+                                  ${formatTime(
+                                    new Date(item.datetime),
+                                    this.hass!.locale,
+                                    this.hass!.config
+                                  )}
+                                `
+                              : html`
+                                  ${formatDateWeekdayShort(
+                                    new Date(item.datetime),
+                                    this.hass!.locale,
+                                    this.hass!.config
+                                  )}
+                                `}
+                        </div>
+                        ${this._showValue(item.condition)
+                          ? html`
+                              <div class="forecast-image-icon">
+                                ${getWeatherStateIcon(
+                                  item.condition!,
+                                  this,
+                                  !(
+                                    item.is_daytime ||
+                                    item.is_daytime === undefined
+                                  )
+                                )}
+                              </div>
+                            `
+                          : nothing}
+                        <div class="temp">
+                          ${this._showValue(item.temperature)
+                            ? html`${formatNumber(
+                                item.temperature,
+                                this.hass!.locale
+                              )}°`
                             : "—"}
+                        </div>
+                        <div class="templow">
+                          ${this._showValue(item.templow)
+                            ? html`${formatNumber(
+                                item.templow!,
+                                this.hass!.locale
+                              )}°`
+                            : hourly
+                              ? nothing
+                              : "—"}
+                        </div>
                       </div>
-                    </div>
-                  `
-                : nothing
-            )
-          : html`<ha-spinner size="medium"></ha-spinner>`}
-      </div>
-
+                    `
+                  : nothing
+              )}
+            </div>
+          `
+        : nothing}
       ${this.stateObj.attributes.attribution
         ? html`
             <div class="attribution">
@@ -586,10 +589,6 @@ class MoreInfoWeather extends LitElement {
         .forecast-icon {
           --mdc-icon-size: 40px;
         }
-
-        .forecast ha-spinner {
-          height: 120px;
-        }
       `,
     ];
   }

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -8,7 +8,6 @@ import {
   mdiPencil,
   mdiPencilOff,
   mdiPencilOutline,
-  mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
@@ -312,8 +311,6 @@ export class MoreInfoDialog extends LitElement {
     const isAdmin = this.hass.user!.is_admin;
 
     const deviceId = this._getDeviceId();
-    const deviceType =
-      (deviceId && this.hass.devices[deviceId].entry_type) || "device";
 
     const isDefaultView = this._currView === DEFAULT_VIEW && !this._childView;
     const isSpecificInitialView =
@@ -437,18 +434,11 @@ export class MoreInfoDialog extends LitElement {
                                 @request-selected=${this._goToDevice}
                               >
                                 ${this.hass.localize(
-                                  "ui.dialogs.more_info_control.device_or_service_info",
-                                  {
-                                    type: this.hass.localize(
-                                      `ui.dialogs.more_info_control.device_type.${deviceType}`
-                                    ),
-                                  }
+                                  "ui.dialogs.more_info_control.device_info"
                                 )}
                                 <ha-svg-icon
                                   slot="graphic"
-                                  .path=${deviceType === "service"
-                                    ? mdiTransitConnectionVariant
-                                    : mdiDevices}
+                                  .path=${mdiDevices}
                                 ></ha-svg-icon>
                               </ha-list-item>
                             `

src/dialogs/shortcuts/dialog-shortcuts.ts

@@ -1,14 +1,13 @@
-import { mdiAppleKeyboardCommand } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { LocalizeKeys } from "../../common/translations/localize";
-import "../../components/ha-alert";
+import "../../components/ha-button";
 import { createCloseHeading } from "../../components/ha-dialog";
-import "../../components/ha-svg-icon";
-import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import { isMac } from "../../util/is_mac";
+import { haStyleDialog } from "../../resources/styles";
+import "../../components/ha-alert";
+import "../../components/chips/ha-assist-chip";
+import type { LocalizeKeys } from "../../common/translations/localize";
 
 interface Text {
   type: "text";
@@ -28,8 +27,6 @@ interface Section {
   items: (Text | Shortcut)[];
 }
 
-const CTRL_CMD = "__CTRL_CMD__";
-
 const _SHORTCUTS: Section[] = [
   {
     key: "ui.dialogs.shortcuts.searching.title",
@@ -56,7 +53,7 @@ const _SHORTCUTS: Section[] = [
       },
       {
         type: "shortcut",
-        shortcut: [CTRL_CMD, "F"],
+        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "F"],
         key: "ui.dialogs.shortcuts.searching.search_in_table",
       },
     ],
@@ -76,27 +73,12 @@ const _SHORTCUTS: Section[] = [
     items: [
       {
         type: "shortcut",
-        shortcut: [CTRL_CMD, "C"],
-        key: "ui.dialogs.shortcuts.automation_script.copy",
-      },
-      {
-        type: "shortcut",
-        shortcut: [CTRL_CMD, "X"],
-        key: "ui.dialogs.shortcuts.automation_script.cut",
-      },
-      {
-        type: "shortcut",
-        shortcut: [CTRL_CMD, "del"],
-        key: "ui.dialogs.shortcuts.automation_script.delete",
-      },
-      {
-        type: "shortcut",
-        shortcut: [CTRL_CMD, "V"],
+        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "V"],
         key: "ui.dialogs.shortcuts.automation_script.paste",
       },
       {
         type: "shortcut",
-        shortcut: [CTRL_CMD, "S"],
+        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "S"],
         key: "ui.dialogs.shortcuts.automation_script.save",
       },
     ],
@@ -106,13 +88,16 @@ const _SHORTCUTS: Section[] = [
     items: [
       {
         type: "shortcut",
-        shortcut: [CTRL_CMD, { key: "ui.dialogs.shortcuts.shortcuts.drag" }],
+        shortcut: [
+          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
+          { key: "ui.dialogs.shortcuts.shortcuts.drag" },
+        ],
         key: "ui.dialogs.shortcuts.charts.drag_to_zoom",
       },
       {
         type: "shortcut",
         shortcut: [
-          CTRL_CMD,
+          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
           { key: "ui.dialogs.shortcuts.shortcuts.scroll_wheel" },
         ],
         key: "ui.dialogs.shortcuts.charts.scroll_to_zoom",
@@ -161,18 +146,7 @@ class DialogShortcuts extends LitElement {
 
     return html`
       <div class="shortcut">
-        ${keys.map(
-          (key) =>
-            html`<span
-              >${key === CTRL_CMD
-                ? isMac
-                  ? html`<ha-svg-icon
-                      .path=${mdiAppleKeyboardCommand}
-                    ></ha-svg-icon>`
-                  : this.hass.localize("ui.panel.config.automation.editor.ctrl")
-                : key}</span
-            >`
-        )}
+        ${keys.map((key) => html` <span>${key.toUpperCase()}</span>`)}
         ${this.hass.localize(translationKey)}
       </div>
     `;
@@ -258,10 +232,6 @@ class DialogShortcuts extends LitElement {
       .items p {
         margin-bottom: 8px;
       }
-
-      ha-svg-icon {
-        width: 12px;
-      }
     `,
   ];
 }

src/fake_data/demo_panels.ts

@@ -79,13 +79,6 @@ export const demoPanels: Panels = {
     config: null,
     url_path: "energy",
   },
-  "time-picker": {
-    component_name: "time-picker",
-    icon: "hass:clock-outline",
-    title: "time_picker",
-    config: null,
-    url_path: "time-picker",
-  },
   // config: {
   //   component_name: "config",
   //   icon: "hass:cog",

src/layouts/partial-panel-resolver.ts

@@ -30,7 +30,6 @@ const COMPONENTS = {
   my: () => import("../panels/my/ha-panel-my"),
   profile: () => import("../panels/profile/ha-panel-profile"),
   todo: () => import("../panels/todo/ha-panel-todo"),
-  "time-picker": () => import("../panels/time-picker/ha-panel-time-picker"),
   "media-browser": () =>
     import("../panels/media-browser/ha-panel-media-browser"),
 };

src/mixins/keyboard-shortcut-mixin.ts

@@ -11,54 +11,23 @@ export const KeyboardShortcutMixin = <T extends Constructor<LitElement>>(
   class extends superClass {
     private _keydownEvent = (event: KeyboardEvent) => {
       const supportedShortcuts = this.supportedShortcuts();
-      if (
-        (event.ctrlKey || event.metaKey) &&
-        !event.shiftKey &&
-        !event.altKey &&
-        event.key in supportedShortcuts
-      ) {
+      if ((event.ctrlKey || event.metaKey) && event.key in supportedShortcuts) {
         event.preventDefault();
         supportedShortcuts[event.key]();
-        return;
-      }
-
-      const supportedSingleKeyShortcuts = this.supportedSingleKeyShortcuts();
-      if (event.key in supportedSingleKeyShortcuts) {
-        event.preventDefault();
-        supportedSingleKeyShortcuts[event.key]();
       }
     };
 
-    private _listenersAdded = false;
-
     public connectedCallback() {
       super.connectedCallback();
-      this.addKeyboardShortcuts();
-    }
-
-    public disconnectedCallback() {
-      this.removeKeyboardShortcuts();
-      super.disconnectedCallback();
-    }
-
-    public addKeyboardShortcuts() {
-      if (this._listenersAdded) {
-        return;
-      }
-      this._listenersAdded = true;
       window.addEventListener("keydown", this._keydownEvent);
     }
 
-    public removeKeyboardShortcuts() {
-      this._listenersAdded = false;
+    public disconnectedCallback() {
       window.removeEventListener("keydown", this._keydownEvent);
+      super.disconnectedCallback();
     }
 
     protected supportedShortcuts(): SupportedShortcuts {
       return {};
     }
-
-    protected supportedSingleKeyShortcuts(): SupportedShortcuts {
-      return {};
-    }
   };

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

@@ -5,12 +5,12 @@ import {
   mdiArrowUp,
   mdiContentCopy,
   mdiContentCut,
+  mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
   mdiPlay,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -195,10 +195,6 @@ export default class HaAutomationActionRow extends LitElement {
   @query("ha-automation-row")
   private _automationRowElement?: HaAutomationRow;
 
-  get selected() {
-    return this._selected;
-  }
-
   protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
 
@@ -309,7 +305,7 @@ export default class HaAutomationActionRow extends LitElement {
               )}
               <ha-svg-icon
                 slot="start"
-                .path=${mdiPlusCircleMultipleOutline}
+                .path=${mdiContentDuplicate}
               ></ha-svg-icon>
             </ha-md-menu-item>
 
@@ -442,6 +438,7 @@ export default class HaAutomationActionRow extends LitElement {
         ${this.optionsInSidebar
           ? html`<ha-automation-row
               .disabled=${this.action.enabled === false}
+              @click=${this._toggleSidebar}
               .leftChevron=${[
                 ...ACTION_BUILDING_BLOCKS,
                 ...ACTION_COMBINED_BLOCKS,
@@ -453,16 +450,12 @@ export default class HaAutomationActionRow extends LitElement {
               .collapsed=${this._collapsed}
               .selected=${this._selected}
               .highlight=${this.highlight}
+              @toggle-collapsed=${this._toggleCollapse}
               .buildingBlock=${[
                 ...ACTION_BUILDING_BLOCKS,
                 ...ACTION_COMBINED_BLOCKS,
               ].includes(blockType!)}
               .sortSelected=${this.sortSelected}
-              @click=${this._toggleSidebar}
-              @toggle-collapsed=${this._toggleCollapse}
-              @copy-row=${this._copyAction}
-              @cut-row=${this._cutAction}
-              @delete-row=${this._onDelete}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`
@@ -521,15 +514,6 @@ export default class HaAutomationActionRow extends LitElement {
   };
 
   private _runAction = async () => {
-    requestAnimationFrame(() => {
-      // @ts-ignore is supported in all browsers except firefox
-      if (this.scrollIntoViewIfNeeded) {
-        // @ts-ignore is supported in all browsers except firefox
-        this.scrollIntoViewIfNeeded();
-        return;
-      }
-      this.scrollIntoView();
-    });
     const validated = await validateConfig(this.hass, {
       actions: this.action,
     });
@@ -639,12 +623,6 @@ export default class HaAutomationActionRow extends LitElement {
 
   private _copyAction = () => {
     this._setClipboard();
-    showToast(this, {
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.actions.copied_to_clipboard"
-      ),
-      duration: 2000,
-    });
   };
 
   private _cutAction = () => {
@@ -653,12 +631,6 @@ export default class HaAutomationActionRow extends LitElement {
     if (this._selected) {
       fireEvent(this, "close-sidebar");
     }
-    showToast(this, {
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.actions.cut_to_clipboard"
-      ),
-      duration: 2000,
-    });
   };
 
   private _moveUp = () => {
@@ -692,7 +664,8 @@ export default class HaAutomationActionRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      fireEvent(this, "request-close-sidebar");
+      this._selected = false;
+      fireEvent(this, "close-sidebar");
       return;
     }
     this.openSidebar();
@@ -736,12 +709,12 @@ export default class HaAutomationActionRow extends LitElement {
     this._collapsed = false;
 
     if (this.narrow) {
-      window.setTimeout(() => {
+      requestAnimationFrame(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      }, 180); // duration of transition of added padding for bottom sheet
+      });
     }
   }
 
@@ -788,6 +761,10 @@ export default class HaAutomationActionRow extends LitElement {
     this._collapsed = !this._collapsed;
   }
 
+  public isSelected() {
+    return this._selected;
+  }
+
   public focus() {
     this._automationRowElement?.focus();
   }

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

@@ -9,6 +9,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-sortable";
+import type { HaSortableClonedEventData } from "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import {
   ACTION_BUILDING_BLOCKS,
@@ -75,6 +76,7 @@ export default class HaAutomationAction extends LitElement {
         @item-moved=${this._actionMoved}
         @item-added=${this._actionAdded}
         @item-removed=${this._actionRemoved}
+        @item-cloned=${this._actionCloned}
       >
         <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
           ${repeat(
@@ -299,8 +301,11 @@ export default class HaAutomationAction extends LitElement {
   private async _actionAdded(ev: CustomEvent): Promise<void> {
     ev.stopPropagation();
     const { index, data } = ev.detail;
-    const item = ev.detail.item as HaAutomationActionRow;
-    const selected = item.selected;
+    let selected = false;
+    if (data?.["ha-automation-row-selected"]) {
+      selected = true;
+      delete data["ha-automation-row-selected"];
+    }
 
     let actions = [
       ...this.actions.slice(0, index),
@@ -358,6 +363,12 @@ export default class HaAutomationAction extends LitElement {
     fireEvent(this, "value-changed", { value: actions });
   }
 
+  private _actionCloned(ev: CustomEvent<HaSortableClonedEventData>) {
+    if (ev.detail.item.action && ev.detail.item.isSelected()) {
+      ev.detail.item.action["ha-automation-row-selected"] = true;
+    }
+  }
+
   private _duplicateAction(ev: CustomEvent) {
     ev.stopPropagation();
     const index = (ev.target as any).index;

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

@@ -1,9 +1,4 @@
-import {
-  mdiAppleKeyboardCommand,
-  mdiClose,
-  mdiContentPaste,
-  mdiPlus,
-} from "@mdi/js";
+import { mdiClose, mdiContentPaste, mdiPlus } from "@mdi/js";
 import Fuse from "fuse.js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -46,14 +41,11 @@ import {
 } from "../../../data/integration";
 import { TRIGGER_GROUPS, TRIGGER_ICONS } from "../../../data/trigger";
 import type { HassDialog } from "../../../dialogs/make-dialog-manager";
-import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
-import { HaFuse } from "../../../resources/fuse";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import { isMac } from "../../../util/is_mac";
-import { showToast } from "../../../util/toast";
 import type { AddAutomationElementDialogParams } from "./show-add-automation-element-dialog";
 import { PASTE_VALUE } from "./show-add-automation-element-dialog";
+import { HaFuse } from "../../../resources/fuse";
 
 const TYPES = {
   trigger: { groups: TRIGGER_GROUPS, icons: TRIGGER_ICONS },
@@ -93,10 +85,7 @@ const ENTITY_DOMAINS_OTHER = new Set([
 const ENTITY_DOMAINS_MAIN = new Set(["notify"]);
 
 @customElement("add-automation-element-dialog")
-class DialogAddAutomationElement
-  extends KeyboardShortcutMixin(LitElement)
-  implements HassDialog
-{
+class DialogAddAutomationElement extends LitElement implements HassDialog {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _params?: AddAutomationElementDialogParams;
@@ -119,14 +108,9 @@ class DialogAddAutomationElement
 
   @state() private _height?: number;
 
-  @state() private _narrow = false;
-
   public showDialog(params): void {
     this._params = params;
     this._group = params.group;
-
-    this.addKeyboardShortcuts();
-
     if (this._params?.type === "action") {
       this.hass.loadBackendTranslation("services");
       this._fetchManifests();
@@ -136,12 +120,9 @@ class DialogAddAutomationElement
     this._fullScreen = matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
     ).matches;
-
-    this._narrow = matchMedia("(max-width: 870px)").matches;
   }
 
   public closeDialog() {
-    this.removeKeyboardShortcuts();
     if (this._params) {
       fireEvent(this, "dialog-closed", { dialog: this.localName });
     }
@@ -574,37 +555,15 @@ class DialogAddAutomationElement
                   .value=${PASTE_VALUE}
                   @click=${this._selected}
                 >
-                  <div class="shortcut-label">
-                    <div class="label">
-                      <div>
-                        ${this.hass.localize(
-                          `ui.panel.config.automation.editor.${this._params.type}s.paste`
-                        )}
-                      </div>
-                      <div class="supporting-text">
-                        ${this.hass.localize(
-                          // @ts-ignore
-                          `ui.panel.config.automation.editor.${this._params.type}s.type.${this._params.clipboardItem}.label`
-                        )}
-                      </div>
-                    </div>
-                    ${!this._narrow
-                      ? html`<span class="shortcut">
-                          <span
-                            >${isMac
-                              ? html`<ha-svg-icon
-                                  slot="start"
-                                  .path=${mdiAppleKeyboardCommand}
-                                ></ha-svg-icon>`
-                              : this.hass.localize(
-                                  "ui.panel.config.automation.editor.ctrl"
-                                )}</span
-                          >
-                          <span>+</span>
-                          <span>V</span>
-                        </span>`
-                      : nothing}
-                  </div>
+                  ${this.hass.localize(
+                    `ui.panel.config.automation.editor.${this._params.type}s.paste`
+                  )}
+                  <span slot="supporting-text"
+                    >${this.hass.localize(
+                      // @ts-ignore
+                      `ui.panel.config.automation.editor.${this._params.type}s.type.${this._params.clipboardItem}.label`
+                    )}</span
+                  >
                   <ha-svg-icon
                     slot="start"
                     .path=${mdiContentPaste}
@@ -612,7 +571,7 @@ class DialogAddAutomationElement
                   ><ha-svg-icon slot="end" .path=${mdiPlus}></ha-svg-icon>
                 </ha-md-list-item>
                 <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
-            : nothing}
+            : ""}
           ${repeat(
             items,
             (item) => item.key,
@@ -678,30 +637,6 @@ class DialogAddAutomationElement
     this._filter = ev.detail.value;
   }
 
-  private _addClipboard = () => {
-    if (this._params?.clipboardItem) {
-      this._params!.add(PASTE_VALUE);
-      showToast(this, {
-        message: this.hass.localize(
-          "ui.panel.config.automation.editor.item_pasted",
-          {
-            item: this.hass.localize(
-              // @ts-ignore
-              `ui.panel.config.automation.editor.${this._params.type}s.type.${this._params.clipboardItem}.label`
-            ),
-          }
-        ),
-      });
-      this.closeDialog();
-    }
-  };
-
-  protected supportedShortcuts(): SupportedShortcuts {
-    return {
-      v: () => this._addClipboard(),
-    };
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -725,7 +660,6 @@ class DialogAddAutomationElement
           max-width: 100vw;
           --md-list-item-leading-space: 24px;
           --md-list-item-trailing-space: 24px;
-          --md-list-item-supporting-text-font: var(--ha-font-size-s);
         }
         ha-md-list-item img {
           width: 24px;
@@ -734,27 +668,6 @@ class DialogAddAutomationElement
           display: block;
           margin: 0 16px;
         }
-        .shortcut-label {
-          display: flex;
-          gap: 12px;
-          justify-content: space-between;
-        }
-        .shortcut-label .supporting-text {
-          color: var(--secondary-text-color);
-          font-size: var(--ha-font-size-s);
-        }
-        .shortcut-label .shortcut {
-          --mdc-icon-size: 12px;
-          display: inline-flex;
-          flex-direction: row;
-          align-items: center;
-          gap: 2px;
-        }
-        .shortcut-label .shortcut span {
-          font-size: var(--ha-font-size-s);
-          font-family: var(--ha-font-family-code);
-          color: var(--ha-color-text-secondary);
-        }
       `,
     ];
   }

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

@@ -4,12 +4,12 @@ import {
   mdiArrowUp,
   mdiContentCopy,
   mdiContentCut,
+  mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
   mdiFlask,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -53,7 +53,6 @@ import {
   showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
-import { showToast } from "../../../../util/toast";
 import "../ha-automation-editor-warning";
 import { rowStyles } from "../styles";
 import "./ha-automation-condition-editor";
@@ -155,10 +154,6 @@ export default class HaAutomationConditionRow extends LitElement {
   @query("ha-automation-row")
   private _automationRowElement?: HaAutomationRow;
 
-  get selected() {
-    return this._selected;
-  }
-
   private _renderRow() {
     return html`
       <ha-svg-icon
@@ -219,7 +214,7 @@ export default class HaAutomationConditionRow extends LitElement {
               )}
               <ha-svg-icon
                 slot="start"
-                .path=${mdiPlusCircleMultipleOutline}
+                .path=${mdiContentDuplicate}
               ></ha-svg-icon>
             </ha-md-menu-item>
 
@@ -363,15 +358,12 @@ export default class HaAutomationConditionRow extends LitElement {
               .collapsed=${this._collapsed}
               .selected=${this._selected}
               .highlight=${this.highlight}
+              @click=${this._toggleSidebar}
+              @toggle-collapsed=${this._toggleCollapse}
               .buildingBlock=${CONDITION_BUILDING_BLOCKS.includes(
                 this.condition.condition
               )}
               .sortSelected=${this.sortSelected}
-              @click=${this._toggleSidebar}
-              @toggle-collapsed=${this._toggleCollapse}
-              @copy-row=${this._copyCondition}
-              @cut-row=${this._cutCondition}
-              @delete-row=${this._onDelete}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`
@@ -488,15 +480,6 @@ export default class HaAutomationConditionRow extends LitElement {
     this._testingResult = undefined;
     this._testing = true;
     const condition = this.condition;
-    requestAnimationFrame(() => {
-      // @ts-ignore is supported in all browsers expect firefox
-      if (this.scrollIntoViewIfNeeded) {
-        // @ts-ignore is supported in all browsers expect firefox
-        this.scrollIntoViewIfNeeded();
-        return;
-      }
-      this.scrollIntoView();
-    });
 
     try {
       const validateResult = await validateConfig(this.hass, {
@@ -587,12 +570,6 @@ export default class HaAutomationConditionRow extends LitElement {
 
   private _copyCondition = () => {
     this._setClipboard();
-    showToast(this, {
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.conditions.copied_to_clipboard"
-      ),
-      duration: 2000,
-    });
   };
 
   private _cutCondition = () => {
@@ -601,12 +578,6 @@ export default class HaAutomationConditionRow extends LitElement {
     if (this._selected) {
       fireEvent(this, "close-sidebar");
     }
-    showToast(this, {
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.conditions.cut_to_clipboard"
-      ),
-      duration: 2000,
-    });
   };
 
   private _moveUp = () => {
@@ -667,7 +638,8 @@ export default class HaAutomationConditionRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      fireEvent(this, "request-close-sidebar");
+      this._selected = false;
+      fireEvent(this, "close-sidebar");
       return;
     }
     this.openSidebar();
@@ -707,12 +679,12 @@ export default class HaAutomationConditionRow extends LitElement {
     this._collapsed = false;
 
     if (this.narrow) {
-      window.setTimeout(() => {
+      requestAnimationFrame(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      }, 180); // duration of transition of added padding for bottom sheet
+      });
     }
   }
 
@@ -725,6 +697,10 @@ export default class HaAutomationConditionRow extends LitElement {
     this._collapsed = !this._collapsed;
   }
 
+  public isSelected() {
+    return this._selected;
+  }
+
   public focus() {
     this._automationRowElement?.focus();
   }

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

@@ -10,6 +10,7 @@ import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-sortable";
+import type { HaSortableClonedEventData } from "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import type {
   AutomationClipboard,
@@ -152,6 +153,7 @@ export default class HaAutomationCondition extends LitElement {
         @item-moved=${this._conditionMoved}
         @item-added=${this._conditionAdded}
         @item-removed=${this._conditionRemoved}
+        @item-cloned=${this._conditionCloned}
       >
         <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
           ${repeat(
@@ -317,8 +319,11 @@ export default class HaAutomationCondition extends LitElement {
   private async _conditionAdded(ev: CustomEvent): Promise<void> {
     ev.stopPropagation();
     const { index, data } = ev.detail;
-    const item = ev.detail.item as HaAutomationConditionRow;
-    const selected = item.selected;
+    let selected = false;
+    if (data?.["ha-automation-row-selected"]) {
+      selected = true;
+      delete data["ha-automation-row-selected"];
+    }
     let conditions = [
       ...this.conditions.slice(0, index),
       data,
@@ -356,6 +361,12 @@ export default class HaAutomationCondition extends LitElement {
     fireEvent(this, "value-changed", { value: conditions });
   }
 
+  private _conditionCloned(ev: CustomEvent<HaSortableClonedEventData>) {
+    if (ev.detail.item.isSelected()) {
+      ev.detail.item.condition["ha-automation-row-selected"] = true;
+    }
+  }
+
   private _conditionChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const conditions = [...this.conditions];

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

@@ -1,6 +1,7 @@
 import { consume } from "@lit/context";
 import {
   mdiCog,
+  mdiContentDuplicate,
   mdiContentSave,
   mdiDebugStepOver,
   mdiDelete,
@@ -10,12 +11,13 @@ import {
   mdiPlay,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiRobotConfused,
   mdiStopCircleOutline,
   mdiTag,
   mdiTransitConnection,
+  mdiUnfoldLessHorizontal,
+  mdiUnfoldMoreHorizontal,
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
@@ -335,7 +337,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
             )}
             <ha-svg-icon
               slot="graphic"
-              .path=${mdiPlusCircleMultipleOutline}
+              .path=${mdiContentDuplicate}
             ></ha-svg-icon>
           </ha-list-item>
 
@@ -369,6 +371,30 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
             <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
           </ha-list-item>
 
+          ${!useBlueprint
+            ? html`
+                <ha-list-item graphic="icon" @click=${this._collapseAll}>
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiUnfoldLessHorizontal}
+                  ></ha-svg-icon>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.collapse_all"
+                  )}
+                </ha-list-item>
+
+                <ha-list-item graphic="icon" @click=${this._expandAll}>
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiUnfoldMoreHorizontal}
+                  ></ha-svg-icon>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.expand_all"
+                  )}
+                </ha-list-item>
+              `
+            : nothing}
+
           <li divider role="separator"></li>
 
           <ha-list-item
@@ -1112,10 +1138,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
   protected supportedShortcuts(): SupportedShortcuts {
     return {
       s: () => this._handleSaveAutomation(),
-      c: () => this._copySelectedRow(),
-      x: () => this._cutSelectedRow(),
-      Delete: () => this._deleteSelectedRow(),
-      Backspace: () => this._deleteSelectedRow(),
     };
   }
 
@@ -1127,28 +1149,14 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     return this._confirmUnsavedChanged();
   }
 
-  // @ts-ignore
   private _collapseAll() {
     this._manualEditor?.collapseAll();
   }
 
-  // @ts-ignore
   private _expandAll() {
     this._manualEditor?.expandAll();
   }
 
-  private _copySelectedRow() {
-    this._manualEditor?.copySelectedRow();
-  }
-
-  private _cutSelectedRow() {
-    this._manualEditor?.cutSelectedRow();
-  }
-
-  private _deleteSelectedRow() {
-    this._manualEditor?.deleteSelectedRow();
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -292,7 +292,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           extraTemplate: (automation) =>
             automation.labels.length
               ? html`<ha-data-table-labels
-                  @label-clicked=${narrow ? undefined : this._labelClicked}
+                  @label-clicked=${this._labelClicked}
                   .labels=${automation.labels}
                 ></ha-data-table-labels>`
               : nothing,

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

@@ -55,7 +55,7 @@ export default class HaAutomationSidebar extends LitElement {
           .yamlMode=${this._yamlMode}
           .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this.triggerCloseSidebar}
+          @close-sidebar=${this._handleCloseSidebar}
         ></ha-automation-sidebar-trigger>
       `;
     }
@@ -71,7 +71,7 @@ export default class HaAutomationSidebar extends LitElement {
           .yamlMode=${this._yamlMode}
           .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this.triggerCloseSidebar}
+          @close-sidebar=${this._handleCloseSidebar}
         ></ha-automation-sidebar-condition>
       `;
     }
@@ -87,7 +87,7 @@ export default class HaAutomationSidebar extends LitElement {
           .yamlMode=${this._yamlMode}
           .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this.triggerCloseSidebar}
+          @close-sidebar=${this._handleCloseSidebar}
         ></ha-automation-sidebar-action>
       `;
     }
@@ -100,7 +100,7 @@ export default class HaAutomationSidebar extends LitElement {
           .isWide=${this.isWide}
           .narrow=${this.narrow}
           .disabled=${this.disabled}
-          @close-sidebar=${this.triggerCloseSidebar}
+          @close-sidebar=${this._handleCloseSidebar}
         ></ha-automation-sidebar-option>
       `;
     }
@@ -116,7 +116,7 @@ export default class HaAutomationSidebar extends LitElement {
           .yamlMode=${this._yamlMode}
           .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this.triggerCloseSidebar}
+          @close-sidebar=${this._handleCloseSidebar}
         ></ha-automation-sidebar-script-field-selector>
       `;
     }
@@ -132,7 +132,7 @@ export default class HaAutomationSidebar extends LitElement {
           .yamlMode=${this._yamlMode}
           .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this.triggerCloseSidebar}
+          @close-sidebar=${this._handleCloseSidebar}
         ></ha-automation-sidebar-script-field>
       `;
     }
@@ -188,8 +188,8 @@ export default class HaAutomationSidebar extends LitElement {
     return undefined;
   }
 
-  public triggerCloseSidebar(ev?: CustomEvent) {
-    ev?.stopPropagation();
+  private _handleCloseSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
     if (this.narrow) {
       this._bottomSheetElement?.closeSheet();
       return;
@@ -208,7 +208,6 @@ export default class HaAutomationSidebar extends LitElement {
 
   static styles = css`
     :host {
-      z-index: 6;
       outline: none;
       height: 100%;
       --ha-card-border-radius: var(

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

@@ -3,13 +3,7 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import { load } from "js-yaml";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import {
-  customElement,
-  property,
-  query,
-  queryAll,
-  state,
-} from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import {
   any,
@@ -34,7 +28,6 @@ import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-markdown";
 import type {
-  ActionSidebarConfig,
   AutomationConfig,
   Condition,
   ManualAutomationConfig,
@@ -103,11 +96,6 @@ export class HaManualAutomationEditor extends LitElement {
 
   @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
 
-  @queryAll("ha-automation-action, ha-automation-condition")
-  private _collapsableElements?: NodeListOf<
-    HaAutomationAction | HaAutomationCondition
-  >;
-
   private _previousConfig?: ManualAutomationConfig;
 
   public connectedCallback() {
@@ -166,7 +154,7 @@ export class HaManualAutomationEditor extends LitElement {
         .disabled=${this.disabled || this.saving}
         .narrow=${this.narrow}
         @open-sidebar=${this._openSidebar}
-        @request-close-sidebar=${this._triggerCloseSidebar}
+        @request-close-sidebar=${this._closeSidebar}
         @close-sidebar=${this._handleCloseSidebar}
         root
         sidebar
@@ -213,7 +201,7 @@ export class HaManualAutomationEditor extends LitElement {
         .disabled=${this.disabled || this.saving}
         .narrow=${this.narrow}
         @open-sidebar=${this._openSidebar}
-        @request-close-sidebar=${this._triggerCloseSidebar}
+        @request-close-sidebar=${this._closeSidebar}
         @close-sidebar=${this._handleCloseSidebar}
         root
         sidebar
@@ -255,7 +243,7 @@ export class HaManualAutomationEditor extends LitElement {
         .highlightedActions=${this._pastedConfig?.actions || []}
         @value-changed=${this._actionChanged}
         @open-sidebar=${this._openSidebar}
-        @request-close-sidebar=${this._triggerCloseSidebar}
+        @request-close-sidebar=${this._closeSidebar}
         @close-sidebar=${this._handleCloseSidebar}
         .hass=${this.hass}
         .narrow=${this.narrow}
@@ -274,11 +262,7 @@ export class HaManualAutomationEditor extends LitElement {
         })}
       >
         <div class="content-wrapper">
-          <div
-            class="content ${this._sidebarConfig && this.narrow
-              ? "has-bottom-sheet"
-              : ""}"
-          >
+          <div class="content">
             <slot name="alerts"></slot>
             ${this._renderContent()}
           </div>
@@ -351,12 +335,8 @@ export class HaManualAutomationEditor extends LitElement {
     };
   }
 
-  private _triggerCloseSidebar() {
+  private _closeSidebar() {
     if (this._sidebarConfig) {
-      if (this._sidebarElement) {
-        this._sidebarElement.triggerCloseSidebar();
-        return;
-      }
       this._sidebarConfig?.close();
     }
   }
@@ -393,7 +373,7 @@ export class HaManualAutomationEditor extends LitElement {
   }
 
   private _saveAutomation() {
-    this._triggerCloseSidebar();
+    this._closeSidebar();
     fireEvent(this, "save-automation");
   }
 
@@ -498,12 +478,7 @@ export class HaManualAutomationEditor extends LitElement {
     if (normalized) {
       ev.preventDefault();
 
-      if (
-        this.dirty ||
-        ensureArray(this.config.triggers)?.length ||
-        ensureArray(this.config.conditions)?.length ||
-        ensureArray(this.config.actions)?.length
-      ) {
+      if (this.dirty) {
         const result = await new Promise<boolean>((resolve) => {
           showPasteReplaceDialog(this, {
             domain: "automation",
@@ -612,36 +587,24 @@ export class HaManualAutomationEditor extends LitElement {
     });
   }
 
+  private _getCollapsableElements() {
+    return this.shadowRoot!.querySelectorAll<
+      HaAutomationAction | HaAutomationCondition
+    >("ha-automation-action, ha-automation-condition");
+  }
+
   public expandAll() {
-    this._collapsableElements?.forEach((element) => {
+    this._getCollapsableElements().forEach((element) => {
       element.expandAll();
     });
   }
 
   public collapseAll() {
-    this._collapsableElements?.forEach((element) => {
+    this._getCollapsableElements().forEach((element) => {
       element.collapseAll();
     });
   }
 
-  public copySelectedRow() {
-    if ((this._sidebarConfig as ActionSidebarConfig)?.copy) {
-      (this._sidebarConfig as ActionSidebarConfig).copy();
-    }
-  }
-
-  public cutSelectedRow() {
-    if ((this._sidebarConfig as ActionSidebarConfig)?.cut) {
-      (this._sidebarConfig as ActionSidebarConfig).cut();
-    }
-  }
-
-  public deleteSelectedRow() {
-    if ((this._sidebarConfig as ActionSidebarConfig)?.delete) {
-      (this._sidebarConfig as ActionSidebarConfig).delete();
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       saveFabStyles,

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

@@ -2,9 +2,9 @@ import { consume } from "@lit/context";
 import {
   mdiArrowDown,
   mdiArrowUp,
+  mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
 } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
@@ -86,10 +86,6 @@ export default class HaAutomationOptionRow extends LitElement {
   @query("ha-automation-row")
   private _automationRowElement?: HaAutomationRow;
 
-  get selected() {
-    return this._selected;
-  }
-
   private _expandedChanged(ev) {
     if (ev.currentTarget.id !== "option") {
       return;
@@ -171,7 +167,7 @@ export default class HaAutomationOptionRow extends LitElement {
                 )}
                 <ha-svg-icon
                   slot="start"
-                  .path=${mdiPlusCircleMultipleOutline}
+                  .path=${mdiContentDuplicate}
                 ></ha-svg-icon>
               </ha-md-menu-item>
 
@@ -275,10 +271,9 @@ export default class HaAutomationOptionRow extends LitElement {
               left-chevron
               .collapsed=${this._collapsed}
               .selected=${this._selected}
-              .sortSelected=${this.sortSelected}
               @click=${this._toggleSidebar}
               @toggle-collapsed=${this._toggleCollapse}
-              @delete-row=${this._removeOption}
+              .sortSelected=${this.sortSelected}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`
@@ -381,7 +376,8 @@ export default class HaAutomationOptionRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      fireEvent(this, "request-close-sidebar");
+      this._selected = false;
+      fireEvent(this, "close-sidebar");
       return;
     }
     this.openSidebar();
@@ -407,12 +403,12 @@ export default class HaAutomationOptionRow extends LitElement {
     this._collapsed = false;
 
     if (this.narrow) {
-      window.setTimeout(() => {
+      requestAnimationFrame(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      }, 180); // duration of transition of added padding for bottom sheet
+      });
     }
   }
 
@@ -449,6 +445,10 @@ export default class HaAutomationOptionRow extends LitElement {
     this._collapsed = !this._collapsed;
   }
 
+  public isSelected() {
+    return this._selected;
+  }
+
   public focus() {
     this._automationRowElement?.focus();
   }

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

@@ -9,6 +9,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-sortable";
+import type { HaSortableClonedEventData } from "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import type { AutomationClipboard } from "../../../../data/automation";
 import type { Option } from "../../../../data/script";
@@ -64,6 +65,7 @@ export default class HaAutomationOption extends LitElement {
         @item-moved=${this._optionMoved}
         @item-added=${this._optionAdded}
         @item-removed=${this._optionRemoved}
+        @item-cloned=${this._optionCloned}
       >
         <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
           ${repeat(
@@ -239,8 +241,11 @@ export default class HaAutomationOption extends LitElement {
   private async _optionAdded(ev: CustomEvent): Promise<void> {
     ev.stopPropagation();
     const { index, data } = ev.detail;
-    const item = ev.detail.item as HaAutomationOptionRow;
-    const selected = item.selected;
+    let selected = false;
+    if (data?.["ha-automation-row-selected"]) {
+      selected = true;
+      delete data["ha-automation-row-selected"];
+    }
 
     const options = [
       ...this.options.slice(0, index),
@@ -268,6 +273,12 @@ export default class HaAutomationOption extends LitElement {
     fireEvent(this, "value-changed", { value: options });
   }
 
+  private _optionCloned(ev: CustomEvent<HaSortableClonedEventData>) {
+    if (ev.detail.item.isSelected()) {
+      ev.detail.item.option["ha-automation-row-selected"] = true;
+    }
+  }
+
   private _optionChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const options = [...this.options];

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

@@ -1,16 +1,15 @@
 import {
-  mdiAppleKeyboardCommand,
   mdiContentCopy,
   mdiContentCut,
+  mdiContentDuplicate,
   mdiDelete,
   mdiPlay,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -22,7 +21,6 @@ import { ACTION_BUILDING_BLOCKS } from "../../../../data/action";
 import type { ActionSidebarConfig } from "../../../../data/automation";
 import type { RepeatAction } from "../../../../data/script";
 import type { HomeAssistant } from "../../../../types";
-import { isMac } from "../../../../util/is_mac";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { getAutomationActionType } from "../action/ha-automation-action-row";
 import { getRepeatType } from "../action/types/ha-automation-action-repeat";
@@ -105,24 +103,18 @@ export default class HaAutomationSidebarAction extends LitElement {
       <span slot="subtitle">${subtitle}</span>
 
       <ha-md-menu-item slot="menu-items" .clickAction=${this.config.run}>
+        ${this.hass.localize("ui.panel.config.automation.editor.actions.run")}
         <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize("ui.panel.config.automation.editor.actions.run")}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.rename}
         .disabled=${!!disabled}
       >
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.rename"
+        )}
         <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.rename"
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
       </ha-md-menu-item>
       <ha-md-divider
         slot="menu-items"
@@ -134,85 +126,36 @@ export default class HaAutomationSidebarAction extends LitElement {
         .clickAction=${this.config.duplicate}
         .disabled=${this.disabled}
       >
-        <ha-svg-icon
-          slot="start"
-          .path=${mdiPlusCircleMultipleOutline}
-        ></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.duplicate"
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.duplicate"
+        )}
+        <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.copy}
         .disabled=${this.disabled}
       >
+        ${this.hass.localize("ui.panel.config.automation.editor.triggers.copy")}
         <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.copy"
-          )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span>C</span>
-              </span>`
-            : nothing}
-        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.cut}
         .disabled=${this.disabled}
       >
+        ${this.hass.localize("ui.panel.config.automation.editor.triggers.cut")}
         <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.cut"
-          )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span>X</span>
-              </span>`
-            : nothing}
-        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this._toggleYamlMode}
         .disabled=${!this.config.uiSupported || !!this._warnings}
       >
+        ${this.hass.localize(
+          `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
+        )}
         <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
       </ha-md-menu-item>
       <ha-md-divider
         slot="menu-items"
@@ -220,16 +163,13 @@ export default class HaAutomationSidebarAction extends LitElement {
         tabindex="-1"
       ></ha-md-divider>
       <ha-md-menu-item slot="menu-items" .clickAction=${this.config.disable}>
+        ${this.hass.localize(
+          `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
+        )}
         <ha-svg-icon
           slot="start"
           .path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
         ></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
@@ -237,32 +177,10 @@ export default class HaAutomationSidebarAction extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.delete"
+        )}
         <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.delete"
-          )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span
-                  >${this.hass.localize(
-                    "ui.panel.config.automation.editor.del"
-                  )}</span
-                >
-              </span>`
-            : nothing}
-        </div>
       </ha-md-menu-item>
       ${description && !this.yamlMode
         ? html`<div class="description">${description}</div>`

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

@@ -1,6 +1,4 @@
-import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { mdiClose, mdiDotsVertical } from "@mdi/js";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import {
   customElement,
@@ -45,22 +43,7 @@ export default class HaAutomationSidebarCard extends LitElement {
 
   @state() private _contentScrolled = false;
 
-  @state() private _contentScrollable = false;
-
-  @query(".card-content") private _contentElement!: HTMLDivElement;
-
-  private _contentSize = new ResizeController(this, {
-    target: null,
-    callback: (entries) => {
-      if (entries[0]?.target) {
-        this._canScrollDown(entries[0].target);
-      }
-    },
-  });
-
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    this._contentSize.observe(this._contentElement);
-  }
+  @query(".card-content") private _contentElement?: HTMLDivElement;
 
   protected render() {
     return html`
@@ -111,29 +94,14 @@ export default class HaAutomationSidebarCard extends LitElement {
         <div class="card-content" @scroll=${this._onScroll}>
           <slot></slot>
         </div>
-        ${this.narrow
-          ? html`
-              <div
-                class="fade ${this._contentScrollable ? "scrollable" : ""}"
-              ></div>
-            `
-          : nothing}
       </ha-card>
     `;
   }
 
   @eventOptions({ passive: true })
-  private _onScroll(ev) {
-    const top = ev.target.scrollTop ?? 0;
+  private _onScroll() {
+    const top = this._contentElement?.scrollTop ?? 0;
     this._contentScrolled = top > 0;
-
-    this._canScrollDown(ev.target);
-  }
-
-  private _canScrollDown(element: HTMLElement) {
-    this._contentScrollable =
-      (element.scrollHeight ?? 0) - (element.clientHeight ?? 0) >
-      (element.scrollTop ?? 0);
   }
 
   private _closeSidebar() {
@@ -157,7 +125,6 @@ export default class HaAutomationSidebarCard extends LitElement {
     @media all and (max-width: 870px) {
       ha-card.mobile {
         border: none;
-        box-shadow: none;
       }
       ha-card.mobile {
         border-bottom-right-radius: var(--ha-border-radius-square);
@@ -180,22 +147,7 @@ export default class HaAutomationSidebarCard extends LitElement {
     }
 
     ha-dialog-header.scrolled {
-      box-shadow: var(--bar-box-shadow);
-    }
-
-    .fade {
-      position: fixed;
-      bottom: -12px;
-      left: 0;
-      right: 0;
-      height: 12px;
-      pointer-events: none;
-      transition: box-shadow 180ms ease-in-out;
-    }
-
-    .fade.scrollable {
-      box-shadow: var(--bar-box-shadow);
-      transform: rotate(180deg);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
     }
 
     .card-content {

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

@@ -1,30 +1,22 @@
 import {
-  mdiAppleKeyboardCommand,
   mdiContentCopy,
   mdiContentCut,
+  mdiContentDuplicate,
   mdiDelete,
   mdiFlask,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
-import {
-  testCondition,
-  type ConditionSidebarConfig,
-} from "../../../../data/automation";
+import type { ConditionSidebarConfig } from "../../../../data/automation";
 import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
-import { validateConfig } from "../../../../data/config";
 import type { HomeAssistant } from "../../../../types";
-import { isMac } from "../../../../util/is_mac";
-import { showAlertDialog } from "../../../lovelace/custom-card-helpers";
 import "../condition/ha-automation-condition-editor";
 import type HaAutomationConditionEditor from "../condition/ha-automation-condition-editor";
 import { sidebarEditorStyles } from "../styles";
@@ -48,10 +40,6 @@ export default class HaAutomationSidebarCondition extends LitElement {
 
   @state() private _warnings?: string[];
 
-  @state() private _testing = false;
-
-  @state() private _testingResult?: boolean;
-
   @query(".sidebar-editor")
   public editor?: HaAutomationConditionEditor;
 
@@ -100,27 +88,21 @@ export default class HaAutomationSidebarCondition extends LitElement {
     >
       <span slot="title">${title}</span>
       <span slot="subtitle">${subtitle}</span>
-      <ha-md-menu-item slot="menu-items" .clickAction=${this._testCondition}>
+      <ha-md-menu-item slot="menu-items" .clickAction=${this.config.test}>
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.conditions.test"
+        )}
         <ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.conditions.test"
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.rename}
         .disabled=${!!disabled}
       >
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.rename"
+        )}
         <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.rename"
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
       </ha-md-menu-item>
 
       <ha-md-divider
@@ -134,16 +116,10 @@ export default class HaAutomationSidebarCondition extends LitElement {
         .clickAction=${this.config.duplicate}
         .disabled=${this.disabled}
       >
-        <ha-svg-icon
-          slot="start"
-          .path=${mdiPlusCircleMultipleOutline}
-        ></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.duplicate"
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.duplicate"
+        )}
+        <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
       </ha-md-menu-item>
 
       <ha-md-menu-item
@@ -151,28 +127,8 @@ export default class HaAutomationSidebarCondition extends LitElement {
         .clickAction=${this.config.copy}
         .disabled=${this.disabled}
       >
+        ${this.hass.localize("ui.panel.config.automation.editor.triggers.copy")}
         <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.copy"
-          )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span>C</span>
-              </span>`
-            : nothing}
-        </div>
       </ha-md-menu-item>
 
       <ha-md-menu-item
@@ -180,41 +136,18 @@ export default class HaAutomationSidebarCondition extends LitElement {
         .clickAction=${this.config.cut}
         .disabled=${this.disabled}
       >
+        ${this.hass.localize("ui.panel.config.automation.editor.triggers.cut")}
         <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.cut"
-          )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span>X</span>
-              </span>`
-            : nothing}
-        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this._toggleYamlMode}
         .disabled=${!this.config.uiSupported || !!this._warnings}
       >
+        ${this.hass.localize(
+          `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
+        )}
         <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
       </ha-md-menu-item>
       <ha-md-divider
         slot="menu-items"
@@ -222,16 +155,13 @@ export default class HaAutomationSidebarCondition extends LitElement {
         tabindex="-1"
       ></ha-md-divider>
       <ha-md-menu-item slot="menu-items" .clickAction=${this.config.disable}>
+        ${this.hass.localize(
+          `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
+        )}
         <ha-svg-icon
           slot="start"
           .path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
         ></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
@@ -239,32 +169,10 @@ export default class HaAutomationSidebarCondition extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.delete"
+        )}
         <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.delete"
-          )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span
-                  >${this.hass.localize(
-                    "ui.panel.config.automation.editor.del"
-                  )}</span
-                >
-              </span>`
-            : nothing}
-        </div>
       </ha-md-menu-item>
       ${description && !this.yamlMode
         ? html`<div class="description">${description}</div>`
@@ -283,81 +191,9 @@ export default class HaAutomationSidebarCondition extends LitElement {
               sidebar
             ></ha-automation-condition-editor>`
           )}
-      <div
-        class="testing ${classMap({
-          active: this._testing,
-          pass: this._testingResult === true,
-          error: this._testingResult === false,
-        })}"
-      >
-        ${this._testingResult
-          ? this.hass.localize(
-              "ui.panel.config.automation.editor.conditions.testing_pass"
-            )
-          : this.hass.localize(
-              "ui.panel.config.automation.editor.conditions.testing_error"
-            )}
-      </div>
     </ha-automation-sidebar-card>`;
   }
 
-  private _testCondition = async () => {
-    if (this._testing) {
-      return;
-    }
-    this._testingResult = undefined;
-    this._testing = true;
-    const condition = this.config.config;
-
-    try {
-      const validateResult = await validateConfig(this.hass, {
-        conditions: condition,
-      });
-
-      // Abort if condition changed.
-      if (this.config.config !== condition) {
-        this._testing = false;
-        return;
-      }
-
-      if (!validateResult.conditions.valid) {
-        showAlertDialog(this, {
-          title: this.hass.localize(
-            "ui.panel.config.automation.editor.conditions.invalid_condition"
-          ),
-          text: validateResult.conditions.error,
-        });
-        this._testing = false;
-        return;
-      }
-
-      let result: { result: boolean };
-      try {
-        result = await testCondition(this.hass, condition);
-      } catch (err: any) {
-        if (this.config.config !== condition) {
-          this._testing = false;
-          return;
-        }
-
-        showAlertDialog(this, {
-          title: this.hass.localize(
-            "ui.panel.config.automation.editor.conditions.test_failed"
-          ),
-          text: err.message,
-        });
-        this._testing = false;
-        return;
-      }
-
-      this._testingResult = result.result;
-    } finally {
-      setTimeout(() => {
-        this._testing = false;
-      }, 2500);
-    }
-  };
-
   private _handleUiModeNotAvailable(ev: CustomEvent) {
     this._warnings = handleStructError(this.hass, ev.detail).warnings;
     if (!this.yamlMode) {
@@ -390,47 +226,7 @@ export default class HaAutomationSidebarCondition extends LitElement {
     fireEvent(this, "toggle-yaml-mode");
   };
 
-  static styles = [
-    sidebarEditorStyles,
-    css`
-      ha-automation-sidebar-card {
-        position: relative;
-      }
-      .testing {
-        position: absolute;
-        z-index: 6;
-        top: 0px;
-        right: 0px;
-        left: 0px;
-        text-transform: uppercase;
-        font-size: var(--ha-font-size-m);
-        font-weight: var(--ha-font-weight-bold);
-        background-color: var(--divider-color, #e0e0e0);
-        color: var(--text-primary-color);
-        max-height: 0px;
-        overflow: hidden;
-        transition: max-height 0.3s;
-        text-align: center;
-        border-top-right-radius: var(
-          --ha-card-border-radius,
-          var(--ha-border-radius-lg)
-        );
-        border-top-left-radius: var(
-          --ha-card-border-radius,
-          var(--ha-border-radius-lg)
-        );
-      }
-      .testing.active {
-        max-height: 100px;
-      }
-      .testing.error {
-        background-color: var(--accent-color);
-      }
-      .testing.pass {
-        background-color: var(--success-color);
-      }
-    `,
-  ];
+  static styles = sidebarEditorStyles;
 }
 
 declare global {

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

@@ -1,14 +1,8 @@
-import {
-  mdiAppleKeyboardCommand,
-  mdiDelete,
-  mdiPlusCircleMultipleOutline,
-  mdiRenameBox,
-} from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { mdiContentDuplicate, mdiDelete, mdiRenameBox } from "@mdi/js";
+import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import type { OptionSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
-import { isMac } from "../../../../util/is_mac";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
@@ -58,13 +52,10 @@ export default class HaAutomationSidebarOption extends LitElement {
               .clickAction=${this.config.rename}
               .disabled=${!!disabled}
             >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.rename"
+              )}
               <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
-              <div class="overflow-label">
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.triggers.rename"
-                )}
-                <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-              </div>
             </ha-md-menu-item>
 
             <ha-md-menu-item
@@ -72,16 +63,13 @@ export default class HaAutomationSidebarOption extends LitElement {
               @click=${this.config.duplicate}
               .disabled=${this.disabled}
             >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.duplicate"
+              )}
               <ha-svg-icon
                 slot="start"
-                .path=${mdiPlusCircleMultipleOutline}
+                .path=${mdiContentDuplicate}
               ></ha-svg-icon>
-              <div class="overflow-label">
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.actions.duplicate"
-                )}
-                <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-              </div>
             </ha-md-menu-item>
             <ha-md-divider
               slot="menu-items"
@@ -94,32 +82,10 @@ export default class HaAutomationSidebarOption extends LitElement {
               .disabled=${this.disabled}
               class="warning"
             >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.choose.remove_option"
+              )}
               <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-              <div class="overflow-label">
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.actions.type.choose.remove_option"
-                )}
-                ${!this.narrow
-                  ? html`<span class="shortcut">
-                      <span
-                        >${isMac
-                          ? html`<ha-svg-icon
-                              slot="start"
-                              .path=${mdiAppleKeyboardCommand}
-                            ></ha-svg-icon>`
-                          : this.hass.localize(
-                              "ui.panel.config.automation.editor.ctrl"
-                            )}</span
-                      >
-                      <span>+</span>
-                      <span
-                        >${this.hass.localize(
-                          "ui.panel.config.automation.editor.del"
-                        )}</span
-                      >
-                    </span>`
-                  : nothing}
-              </div>
             </ha-md-menu-item>
           `}
 

src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts

@@ -1,12 +1,11 @@
-import { mdiAppleKeyboardCommand, mdiDelete, mdiPlaylistEdit } from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
+import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
 import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
-import { isMac } from "../../../../util/is_mac";
 import "../../script/ha-script-field-selector-editor";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { sidebarEditorStyles } from "../styles";
@@ -69,13 +68,10 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
         .clickAction=${this._toggleYamlMode}
         .disabled=${!!this._warnings}
       >
+        ${this.hass.localize(
+          `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
+        )}
         <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
@@ -83,32 +79,10 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.delete"
+        )}
         <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.delete"
-          )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span
-                  >${this.hass.localize(
-                    "ui.panel.config.automation.editor.del"
-                  )}</span
-                >
-              </span>`
-            : nothing}
-        </div>
       </ha-md-menu-item>
       ${keyed(
         this.sidebarKey,

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

@@ -1,11 +1,10 @@
-import { mdiAppleKeyboardCommand, mdiDelete, mdiPlaylistEdit } from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
+import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
-import { isMac } from "../../../../util/is_mac";
 import "../../script/ha-script-field-editor";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { sidebarEditorStyles } from "../styles";
@@ -62,13 +61,10 @@ export default class HaAutomationSidebarScriptField extends LitElement {
         .clickAction=${this._toggleYamlMode}
         .disabled=${!!this._warnings}
       >
+        ${this.hass.localize(
+          `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
+        )}
         <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
@@ -76,32 +72,10 @@ export default class HaAutomationSidebarScriptField extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.delete"
+        )}
         <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.delete"
-          )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span
-                  >${this.hass.localize(
-                    "ui.panel.config.automation.editor.del"
-                  )}</span
-                >
-              </span>`
-            : nothing}
-        </div>
       </ha-md-menu-item>
       ${keyed(
         this.sidebarKey,

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

@@ -1,12 +1,11 @@
 import {
-  mdiAppleKeyboardCommand,
   mdiContentCopy,
   mdiContentCut,
+  mdiContentDuplicate,
   mdiDelete,
   mdiIdentifier,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -18,7 +17,6 @@ import { handleStructError } from "../../../../common/structs/handle-errors";
 import type { TriggerSidebarConfig } from "../../../../data/automation";
 import { isTriggerList } from "../../../../data/trigger";
 import type { HomeAssistant } from "../../../../types";
-import { isMac } from "../../../../util/is_mac";
 import { sidebarEditorStyles } from "../styles";
 import "../trigger/ha-automation-trigger-editor";
 import type HaAutomationTriggerEditor from "../trigger/ha-automation-trigger-editor";
@@ -91,13 +89,10 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .clickAction=${this.config.rename}
           .disabled=${disabled || type === "list"}
         >
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.rename"
+          )}
           <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
-          <div class="overflow-label">
-            ${this.hass.localize(
-              "ui.panel.config.automation.editor.triggers.rename"
-            )}
-            <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-          </div>
         </ha-md-menu-item>
         ${!this.yamlMode &&
         !("id" in this.config.config) &&
@@ -107,13 +102,10 @@ export default class HaAutomationSidebarTrigger extends LitElement {
               .clickAction=${this._showTriggerId}
               .disabled=${disabled || type === "list"}
             >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.edit_id"
+              )}
               <ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
-              <div class="overflow-label">
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.triggers.edit_id"
-                )}
-                <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-              </div>
             </ha-md-menu-item>`
           : nothing}
 
@@ -131,10 +123,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.duplicate"
           )}
-          <ha-svg-icon
-            slot="start"
-            .path=${mdiPlusCircleMultipleOutline}
-          ></ha-svg-icon>
+          <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
         </ha-md-menu-item>
 
         <ha-md-menu-item
@@ -142,28 +131,10 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .clickAction=${this.config.copy}
           .disabled=${this.disabled}
         >
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.copy"
+          )}
           <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-          <div class="overflow-label">
-            ${this.hass.localize(
-              "ui.panel.config.automation.editor.triggers.copy"
-            )}
-            ${!this.narrow
-              ? html`<span class="shortcut">
-                  <span
-                    >${isMac
-                      ? html`<ha-svg-icon
-                          slot="start"
-                          .path=${mdiAppleKeyboardCommand}
-                        ></ha-svg-icon>`
-                      : this.hass.localize(
-                          "ui.panel.config.automation.editor.ctrl"
-                        )}</span
-                  >
-                  <span>+</span>
-                  <span>C</span>
-                </span>`
-              : nothing}
-          </div>
         </ha-md-menu-item>
 
         <ha-md-menu-item
@@ -171,41 +142,20 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .clickAction=${this.config.cut}
           .disabled=${this.disabled}
         >
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.cut"
+          )}
           <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
-          <div class="overflow-label">
-            ${this.hass.localize(
-              "ui.panel.config.automation.editor.triggers.cut"
-            )}
-            ${!this.narrow
-              ? html`<span class="shortcut">
-                  <span
-                    >${isMac
-                      ? html`<ha-svg-icon
-                          slot="start"
-                          .path=${mdiAppleKeyboardCommand}
-                        ></ha-svg-icon>`
-                      : this.hass.localize(
-                          "ui.panel.config.automation.editor.ctrl"
-                        )}</span
-                  >
-                  <span>+</span>
-                  <span>X</span>
-                </span>`
-              : nothing}
-          </div>
         </ha-md-menu-item>
         <ha-md-menu-item
           slot="menu-items"
           .clickAction=${this._toggleYamlMode}
           .disabled=${!this.config.uiSupported || !!this._warnings}
         >
+          ${this.hass.localize(
+            `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
+          )}
           <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
-          <div class="overflow-label">
-            ${this.hass.localize(
-              `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
-            )}
-            <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-          </div>
         </ha-md-menu-item>
         <ha-md-divider
           slot="menu-items"
@@ -217,16 +167,13 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .clickAction=${this.config.disable}
           .disabled=${type === "list"}
         >
+          ${this.hass.localize(
+            `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
+          )}
           <ha-svg-icon
             slot="start"
             .path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
           ></ha-svg-icon>
-          <div class="overflow-label">
-            ${this.hass.localize(
-              `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
-            )}
-            <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-          </div>
         </ha-md-menu-item>
         <ha-md-menu-item
           slot="menu-items"
@@ -234,32 +181,10 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .disabled=${this.disabled}
           class="warning"
         >
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.actions.delete"
+          )}
           <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-          <div class="overflow-label">
-            ${this.hass.localize(
-              "ui.panel.config.automation.editor.actions.delete"
-            )}
-            ${!this.narrow
-              ? html`<span class="shortcut">
-                  <span
-                    >${isMac
-                      ? html`<ha-svg-icon
-                          slot="start"
-                          .path=${mdiAppleKeyboardCommand}
-                        ></ha-svg-icon>`
-                      : this.hass.localize(
-                          "ui.panel.config.automation.editor.ctrl"
-                        )}</span
-                  >
-                  <span>+</span>
-                  <span
-                    >${this.hass.localize(
-                      "ui.panel.config.automation.editor.del"
-                    )}</span
-                  >
-                </span>`
-              : nothing}
-          </div>
         </ha-md-menu-item>
         ${keyed(
           this.sidebarKey,

src/panels/config/automation/styles.ts

@@ -136,11 +136,6 @@ export const manualEditorStyles = css`
   .content {
     padding-top: 24px;
     padding-bottom: 72px;
-    transition: padding-bottom 180ms ease-in-out;
-  }
-
-  .content.has-bottom-sheet {
-    padding-bottom: calc(90vh - 72px);
   }
 
   ha-automation-sidebar {
@@ -189,7 +184,8 @@ export const automationRowsStyles = css`
     scroll-margin-top: 48px;
   }
   .handle {
-    padding: 4px;
+    margin: 4px;
+    padding: 8px;
     cursor: move; /* fallback if grab cursor is unsupported */
     cursor: grab;
     border-radius: var(--ha-border-radius-pill);
@@ -222,34 +218,4 @@ export const sidebarEditorStyles = css`
   .description {
     padding-top: 16px;
   }
-  .overflow-label {
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-    white-space: nowrap;
-  }
-  .overflow-label .shortcut {
-    --mdc-icon-size: 12px;
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 2px;
-  }
-  .overflow-label .shortcut span {
-    font-size: var(--ha-font-size-s);
-    font-family: var(--ha-font-family-code);
-    color: var(--ha-color-text-secondary);
-  }
-  .shortcut-placeholder {
-    display: inline-block;
-    width: 60px;
-  }
-  .shortcut-placeholder.mac {
-    width: 46px;
-  }
-  @media all and (max-width: 870px) {
-    .shortcut-placeholder {
-      display: none;
-    }
-  }
 `;

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

@@ -4,12 +4,12 @@ import {
   mdiArrowUp,
   mdiContentCopy,
   mdiContentCut,
+  mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
   mdiIdentifier,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -52,7 +52,6 @@ import {
   showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
-import { showToast } from "../../../../util/toast";
 import "../ha-automation-editor-warning";
 import { rowStyles } from "../styles";
 import "./ha-automation-trigger-editor";
@@ -154,10 +153,6 @@ export default class HaAutomationTriggerRow extends LitElement {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
 
-  get selected() {
-    return this._selected;
-  }
-
   private _triggerUnsub?: Promise<UnsubscribeFunc>;
 
   private _renderRow() {
@@ -226,7 +221,7 @@ export default class HaAutomationTriggerRow extends LitElement {
               )}
               <ha-svg-icon
                 slot="start"
-                .path=${mdiPlusCircleMultipleOutline}
+                .path=${mdiContentDuplicate}
               ></ha-svg-icon>
             </ha-md-menu-item>
 
@@ -354,13 +349,10 @@ export default class HaAutomationTriggerRow extends LitElement {
           ? html`<ha-automation-row
               .disabled=${"enabled" in this.trigger &&
               this.trigger.enabled === false}
+              @click=${this._toggleSidebar}
               .selected=${this._selected}
               .highlight=${this.highlight}
               .sortSelected=${this.sortSelected}
-              @click=${this._toggleSidebar}
-              @copy-row=${this._copyTrigger}
-              @cut-row=${this._cutTrigger}
-              @delete-row=${this._onDelete}
               >${this._selected
                 ? "selected"
                 : nothing}${this._renderRow()}</ha-automation-row
@@ -481,7 +473,8 @@ export default class HaAutomationTriggerRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      fireEvent(this, "request-close-sidebar");
+      this._selected = false;
+      fireEvent(this, "close-sidebar");
       return;
     }
     this.openSidebar();
@@ -518,12 +511,12 @@ export default class HaAutomationTriggerRow extends LitElement {
     this._selected = true;
 
     if (this.narrow) {
-      window.setTimeout(() => {
+      requestAnimationFrame(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      }, 180);
+      });
     }
   }
 
@@ -641,12 +634,6 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   private _copyTrigger = () => {
     this._setClipboard();
-    showToast(this, {
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.triggers.copied_to_clipboard"
-      ),
-      duration: 2000,
-    });
   };
 
   private _cutTrigger = () => {
@@ -655,12 +642,6 @@ export default class HaAutomationTriggerRow extends LitElement {
     if (this._selected) {
       fireEvent(this, "close-sidebar");
     }
-    showToast(this, {
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.triggers.cut_to_clipboard"
-      ),
-      duration: 2000,
-    });
   };
 
   private _moveUp = () => {
@@ -698,6 +679,10 @@ export default class HaAutomationTriggerRow extends LitElement {
       customElements.get(`ha-automation-trigger-${type}`) !== undefined
   );
 
+  public isSelected() {
+    return this._selected;
+  }
+
   public focus() {
     this._automationRowElement?.focus();
   }

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

@@ -10,6 +10,7 @@ import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-sortable";
+import type { HaSortableClonedEventData } from "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import type {
   AutomationClipboard,
@@ -71,6 +72,7 @@ export default class HaAutomationTrigger extends LitElement {
         @item-moved=${this._triggerMoved}
         @item-added=${this._triggerAdded}
         @item-removed=${this._triggerRemoved}
+        @item-cloned=${this._triggerCloned}
       >
         <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
           ${repeat(
@@ -258,8 +260,11 @@ export default class HaAutomationTrigger extends LitElement {
   private async _triggerAdded(ev: CustomEvent): Promise<void> {
     ev.stopPropagation();
     const { index, data } = ev.detail;
-    const item = ev.detail.item as HaAutomationTriggerRow;
-    const selected = item.selected;
+    let selected = false;
+    if (data?.["ha-automation-row-selected"]) {
+      selected = true;
+      delete data["ha-automation-row-selected"];
+    }
 
     let triggers = [
       ...this.triggers.slice(0, index),
@@ -298,6 +303,12 @@ export default class HaAutomationTrigger extends LitElement {
     fireEvent(this, "value-changed", { value: triggers });
   }
 
+  private _triggerCloned(ev: CustomEvent<HaSortableClonedEventData>) {
+    if (ev.detail.item.isSelected()) {
+      ev.detail.item.trigger["ha-automation-row-selected"] = true;
+    }
+  }
+
   private _triggerChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const triggers = [...this.triggers];

src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts

@@ -42,8 +42,6 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
         .disabled=${this.disabled || this._tags.length === 0}
         .value=${this.trigger.tag_id}
         @selected=${this._tagChanged}
-        fixedMenuPosition
-        naturalMenuWidth
       >
         ${this._tags.map(
           (tag) => html`

src/panels/config/devices/ha-config-device-page.ts

@@ -773,11 +773,6 @@ export class HaConfigDevicePage extends LitElement {
                         appearance="plain"
                         target=${ifDefined(firstDeviceAction!.target)}
                         class=${ifDefined(firstDeviceAction!.classes)}
-                        .variant=${firstDeviceAction!.classes?.includes(
-                          "warning"
-                        )
-                          ? "danger"
-                          : "brand"}
                         .action=${firstDeviceAction!.action}
                         @click=${this._deviceActionClicked}
                       >

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

@@ -1,5 +1,5 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-code-editor";
@@ -11,22 +11,13 @@ import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-d
 import "../../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
-import {
-  subscribeBluetoothConnectionAllocations,
-  subscribeBluetoothScannerState,
-  subscribeBluetoothScannersDetails,
-} from "../../../../../data/bluetooth";
-import type {
-  BluetoothAllocationsData,
-  BluetoothScannerState,
-  BluetoothScannersDetails,
-  HaScannerType,
-} from "../../../../../data/bluetooth";
+import { subscribeBluetoothConnectionAllocations } from "../../../../../data/bluetooth";
 import {
   getValueInPercentage,
   roundWithOneDecimal,
 } from "../../../../../util/calculate";
 import "../../../../../components/ha-metric";
+import type { BluetoothAllocationsData } from "../../../../../data/bluetooth";
 
 @customElement("bluetooth-config-dashboard")
 export class BluetoothConfigDashboard extends LitElement {
@@ -38,26 +29,16 @@ export class BluetoothConfigDashboard extends LitElement {
 
   @state() private _connectionAllocationsError?: string;
 
-  @state() private _scannerState?: BluetoothScannerState;
-
-  @state() private _scannerDetails?: BluetoothScannersDetails;
-
   private _configEntry = new URLSearchParams(window.location.search).get(
     "config_entry"
   );
 
   private _unsubConnectionAllocations?: (() => Promise<void>) | undefined;
 
-  private _unsubScannerState?: (() => Promise<void>) | undefined;
-
-  private _unsubScannerDetails?: (() => void) | undefined;
-
   public connectedCallback(): void {
     super.connectedCallback();
     if (this.hass) {
       this._subscribeBluetoothConnectionAllocations();
-      this._subscribeBluetoothScannerState();
-      this._subscribeScannerDetails();
     }
   }
 
@@ -80,45 +61,12 @@ export class BluetoothConfigDashboard extends LitElement {
     }
   }
 
-  private async _subscribeBluetoothScannerState(): Promise<void> {
-    if (this._unsubScannerState || !this._configEntry) {
-      return;
-    }
-    this._unsubScannerState = await subscribeBluetoothScannerState(
-      this.hass.connection,
-      (scannerState) => {
-        this._scannerState = scannerState;
-      },
-      this._configEntry
-    );
-  }
-
-  private _subscribeScannerDetails(): void {
-    if (this._unsubScannerDetails) {
-      return;
-    }
-    this._unsubScannerDetails = subscribeBluetoothScannersDetails(
-      this.hass.connection,
-      (details) => {
-        this._scannerDetails = details;
-      }
-    );
-  }
-
   public disconnectedCallback() {
     super.disconnectedCallback();
     if (this._unsubConnectionAllocations) {
       this._unsubConnectionAllocations();
       this._unsubConnectionAllocations = undefined;
     }
-    if (this._unsubScannerState) {
-      this._unsubScannerState();
-      this._unsubScannerState = undefined;
-    }
-    if (this._unsubScannerDetails) {
-      this._unsubScannerDetails();
-      this._unsubScannerDetails = undefined;
-    }
   }
 
   protected render(): TemplateResult {
@@ -130,7 +78,6 @@ export class BluetoothConfigDashboard extends LitElement {
               "ui.panel.config.bluetooth.settings_title"
             )}
           >
-            <div class="card-content">${this._renderScannerState()}</div>
             <div class="card-actions">
               <ha-button @click=${this._openOptionFlow}
                 >${this.hass.localize(
@@ -195,118 +142,6 @@ export class BluetoothConfigDashboard extends LitElement {
   private _getUsedAllocations = (used: number, total: number) =>
     roundWithOneDecimal(getValueInPercentage(used, 0, total));
 
-  private _renderScannerMismatchWarning(
-    scannerState: BluetoothScannerState,
-    scannerType: HaScannerType,
-    formatMode: (mode: string | null) => string
-  ) {
-    const instructions: string[] = [];
-
-    if (scannerType === "remote" || scannerType === "unknown") {
-      instructions.push(
-        this.hass.localize(
-          "ui.panel.config.bluetooth.scanner_mode_mismatch_remote"
-        )
-      );
-    }
-    if (scannerType === "usb" || scannerType === "unknown") {
-      instructions.push(
-        this.hass.localize(
-          "ui.panel.config.bluetooth.scanner_mode_mismatch_usb"
-        )
-      );
-    }
-    if (scannerType === "uart" || scannerType === "unknown") {
-      instructions.push(
-        this.hass.localize(
-          "ui.panel.config.bluetooth.scanner_mode_mismatch_uart"
-        )
-      );
-    }
-
-    return html`<ha-alert alert-type="warning">
-      <div>
-        ${this.hass.localize(
-          "ui.panel.config.bluetooth.scanner_mode_mismatch",
-          {
-            requested: formatMode(scannerState.requested_mode),
-            current: formatMode(scannerState.current_mode),
-          }
-        )}
-      </div>
-      <ul>
-        ${instructions.map((instruction) => html`<li>${instruction}</li>`)}
-      </ul>
-    </ha-alert>`;
-  }
-
-  private _renderScannerState() {
-    if (!this._configEntry || !this._scannerState) {
-      return html`<div>
-        ${this.hass.localize(
-          "ui.panel.config.bluetooth.no_scanner_state_available"
-        )}
-      </div>`;
-    }
-
-    const scannerState = this._scannerState;
-    // Find the scanner details for this source
-    const scannerDetails = this._scannerDetails?.[scannerState.source];
-    const scannerType: HaScannerType =
-      scannerDetails?.scanner_type ?? "unknown";
-
-    const formatMode = (mode: string | null) => {
-      switch (mode) {
-        case null:
-          return this.hass.localize(
-            "ui.panel.config.bluetooth.scanning_mode_none"
-          );
-        case "active":
-          return this.hass.localize(
-            "ui.panel.config.bluetooth.scanning_mode_active"
-          );
-        case "passive":
-          return this.hass.localize(
-            "ui.panel.config.bluetooth.scanning_mode_passive"
-          );
-        default:
-          return mode; // Fallback for unknown modes
-      }
-    };
-
-    return html`
-      <div class="scanner-state">
-        <div class="state-row">
-          <span
-            >${this.hass.localize(
-              "ui.panel.config.bluetooth.current_scanning_mode"
-            )}:</span
-          >
-          <span class="state-value"
-            >${formatMode(scannerState.current_mode)}</span
-          >
-        </div>
-        <div class="state-row">
-          <span
-            >${this.hass.localize(
-              "ui.panel.config.bluetooth.requested_scanning_mode"
-            )}:</span
-          >
-          <span class="state-value"
-            >${formatMode(scannerState.requested_mode)}</span
-          >
-        </div>
-        ${scannerState.current_mode !== scannerState.requested_mode
-          ? this._renderScannerMismatchWarning(
-              scannerState,
-              scannerType,
-              formatMode
-            )
-          : nothing}
-      </div>
-    `;
-  }
-
   private _renderConnectionAllocations() {
     if (this._connectionAllocationsError) {
       return html`<ha-alert alert-type="error"
@@ -385,18 +220,6 @@ export class BluetoothConfigDashboard extends LitElement {
           display: flex;
           justify-content: flex-end;
         }
-        .scanner-state {
-          margin-bottom: 16px;
-        }
-        .state-row {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 4px 0;
-        }
-        .state-value {
-          font-weight: 500;
-        }
       `,
     ];
   }

src/panels/config/repairs/show-dialog-repair-flow.ts

@@ -289,15 +289,6 @@ export const showRepairsFlowDialog = (
         );
       },
 
-      renderMenuOptionDescription(hass, step, option) {
-        return hass.localize(
-          `component.${issue.domain}.issues.${
-            issue.translation_key || issue.issue_id
-          }.fix_flow.step.${step.step_id}.menu_option_descriptions.${option}`,
-          mergePlaceholders(issue, step)
-        );
-      },
-
       renderLoadingDescription(hass, reason) {
         return (
           hass.localize(

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

@@ -1,6 +1,7 @@
 import { consume } from "@lit/context";
 import {
   mdiCog,
+  mdiContentDuplicate,
   mdiContentSave,
   mdiDebugStepOver,
   mdiDelete,
@@ -10,11 +11,12 @@ import {
   mdiInformationOutline,
   mdiPlay,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiRobotConfused,
   mdiTag,
   mdiTransitConnection,
+  mdiUnfoldLessHorizontal,
+  mdiUnfoldMoreHorizontal,
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -306,7 +308,7 @@ export class HaScriptEditor extends SubscribeMixin(
             )}
             <ha-svg-icon
               slot="graphic"
-              .path=${mdiPlusCircleMultipleOutline}
+              .path=${mdiContentDuplicate}
             ></ha-svg-icon>
           </ha-list-item>
 
@@ -340,6 +342,30 @@ export class HaScriptEditor extends SubscribeMixin(
             <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
           </ha-list-item>
 
+          ${!useBlueprint
+            ? html`
+                <ha-list-item graphic="icon" @click=${this._collapseAll}>
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiUnfoldLessHorizontal}
+                  ></ha-svg-icon>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.collapse_all"
+                  )}
+                </ha-list-item>
+
+                <ha-list-item graphic="icon" @click=${this._expandAll}>
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiUnfoldMoreHorizontal}
+                  ></ha-svg-icon>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.expand_all"
+                  )}
+                </ha-list-item>
+              `
+            : nothing}
+
           <li divider role="separator"></li>
 
           <ha-list-item
@@ -1021,9 +1047,6 @@ export class HaScriptEditor extends SubscribeMixin(
   protected supportedShortcuts(): SupportedShortcuts {
     return {
       s: () => this._handleSaveScript(),
-      c: () => this._copySelectedRow(),
-      x: () => this._cutSelectedRow(),
-      Delete: () => this._deleteSelectedRow(),
     };
   }
 
@@ -1035,28 +1058,14 @@ export class HaScriptEditor extends SubscribeMixin(
     return this._confirmUnsavedChanged();
   }
 
-  // @ts-ignore
   private _collapseAll() {
     this._manualEditor?.collapseAll();
   }
 
-  // @ts-ignore
   private _expandAll() {
     this._manualEditor?.expandAll();
   }
 
-  private _copySelectedRow() {
-    this._manualEditor?.copySelectedRow();
-  }
-
-  private _cutSelectedRow() {
-    this._manualEditor?.cutSelectedRow();
-  }
-
-  private _deleteSelectedRow() {
-    this._manualEditor?.deleteSelectedRow();
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/script/ha-script-field-row.ts

@@ -64,7 +64,6 @@ export default class HaScriptFieldRow extends LitElement {
           @toggle-collapsed=${this._toggleCollapse}
           .collapsed=${this._collapsed}
           .highlight=${this.highlight}
-          @delete-row=${this._onDelete}
         >
           <h3 slot="header">${this.key}</h3>
 
@@ -162,7 +161,8 @@ export default class HaScriptFieldRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      fireEvent(this, "request-close-sidebar");
+      this._selected = false;
+      fireEvent(this, "close-sidebar");
       return;
     }
 
@@ -175,7 +175,8 @@ export default class HaScriptFieldRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selectorRowSelected) {
-      fireEvent(this, "request-close-sidebar");
+      this._selectorRowSelected = false;
+      fireEvent(this, "close-sidebar");
       return;
     }
 
@@ -234,12 +235,12 @@ export default class HaScriptFieldRow extends LitElement {
     } satisfies ScriptFieldSidebarConfig);
 
     if (this.narrow) {
-      window.setTimeout(() => {
+      requestAnimationFrame(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      }, 180); // duration of transition of added padding for bottom sheet
+      });
     }
   }
 

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

@@ -76,12 +76,10 @@ export default class HaScriptFields extends LitElement {
       row.focus();
 
       if (this.narrow) {
-        window.setTimeout(() => {
-          row.scrollIntoView({
-            block: "start",
-            behavior: "smooth",
-          });
-        }, 180); // duration of transition of added padding for bottom sheet
+        row.scrollIntoView({
+          block: "start",
+          behavior: "smooth",
+        });
       }
     });
   }

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

@@ -2,13 +2,7 @@ import { mdiContentSave, mdiHelpCircle } from "@mdi/js";
 import { load } from "js-yaml";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import {
-  customElement,
-  property,
-  query,
-  queryAll,
-  state,
-} from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import {
   any,
@@ -30,10 +24,7 @@ import {
 } from "../../../common/url/search-params";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-markdown";
-import type {
-  ActionSidebarConfig,
-  SidebarConfig,
-} from "../../../data/automation";
+import type { SidebarConfig } from "../../../data/automation";
 import type { Action, Fields, ScriptConfig } from "../../../data/script";
 import {
   getActionType,
@@ -89,11 +80,6 @@ export class HaManualScriptEditor extends LitElement {
 
   @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
 
-  @queryAll("ha-automation-action, ha-script-fields")
-  private _collapsableElements?: NodeListOf<
-    HaAutomationAction | HaScriptFields
-  >;
-
   private _previousConfig?: ScriptConfig;
 
   private _openFields = false;
@@ -170,7 +156,6 @@ export class HaManualScriptEditor extends LitElement {
               .disabled=${this.disabled}
               .narrow=${this.narrow}
               @open-sidebar=${this._openSidebar}
-              @request-close-sidebar=${this._triggerCloseSidebar}
               @close-sidebar=${this._handleCloseSidebar}
             ></ha-script-fields>`
         : nothing
@@ -201,7 +186,6 @@ export class HaManualScriptEditor extends LitElement {
       .highlightedActions=${this._pastedConfig?.sequence || []}
       @value-changed=${this._sequenceChanged}
       @open-sidebar=${this._openSidebar}
-      @request-close-sidebar=${this._triggerCloseSidebar}
       @close-sidebar=${this._handleCloseSidebar}
       .hass=${this.hass}
       .narrow=${this.narrow}
@@ -220,11 +204,7 @@ export class HaManualScriptEditor extends LitElement {
         })}
       >
         <div class="content-wrapper">
-          <div
-            class="content ${this._sidebarConfig && this.narrow
-              ? "has-bottom-sheet"
-              : ""}"
-          >
+          <div class="content">
             <slot name="alerts"></slot>
             ${this._renderContent()}
           </div>
@@ -377,11 +357,7 @@ export class HaManualScriptEditor extends LitElement {
     if (normalized) {
       ev.preventDefault();
 
-      if (
-        this.dirty ||
-        ensureArray(this.config.sequence)?.length ||
-        Object.keys(this.config.fields || {}).length
-      ) {
+      if (this.dirty) {
         const result = await new Promise<boolean>((resolve) => {
           showPasteReplaceDialog(this, {
             domain: "script",
@@ -508,13 +484,11 @@ export class HaManualScriptEditor extends LitElement {
     };
   }
 
-  private _triggerCloseSidebar() {
+  private _closeSidebar() {
     if (this._sidebarConfig) {
-      if (this._sidebarElement) {
-        this._sidebarElement.triggerCloseSidebar();
-        return;
-      }
-      this._sidebarConfig?.close();
+      const closeRow = this._sidebarConfig?.close;
+      this._sidebarConfig = undefined;
+      closeRow?.();
     }
   }
 
@@ -523,40 +497,28 @@ export class HaManualScriptEditor extends LitElement {
   }
 
   private _saveScript() {
-    this._triggerCloseSidebar();
+    this._closeSidebar();
     fireEvent(this, "save-script");
   }
 
+  private _getCollapsableElements() {
+    return this.shadowRoot!.querySelectorAll<
+      HaAutomationAction | HaScriptFields
+    >("ha-automation-action, ha-script-fields");
+  }
+
   public expandAll() {
-    this._collapsableElements?.forEach((element) => {
+    this._getCollapsableElements().forEach((element) => {
       element.expandAll();
     });
   }
 
   public collapseAll() {
-    this._collapsableElements?.forEach((element) => {
+    this._getCollapsableElements().forEach((element) => {
       element.collapseAll();
     });
   }
 
-  public copySelectedRow() {
-    if ((this._sidebarConfig as ActionSidebarConfig)?.copy) {
-      (this._sidebarConfig as ActionSidebarConfig).copy();
-    }
-  }
-
-  public cutSelectedRow() {
-    if ((this._sidebarConfig as ActionSidebarConfig)?.cut) {
-      (this._sidebarConfig as ActionSidebarConfig).cut();
-    }
-  }
-
-  public deleteSelectedRow() {
-    if ((this._sidebarConfig as ActionSidebarConfig)?.delete) {
-      (this._sidebarConfig as ActionSidebarConfig).delete();
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       saveFabStyles,

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

@@ -54,10 +54,6 @@ class DeveloperToolsRouter extends HassRouterPage {
         tag: "developer-tools-debug",
         load: () => import("./debug/developer-tools-debug"),
       },
-      "time-picker": {
-        tag: "developer-tools-time-picker",
-        load: () => import("../time-picker/ha-panel-time-picker"),
-      },
     },
   };
 

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -80,13 +80,6 @@ class PanelDeveloperTools extends LitElement {
           <sl-tab slot="nav" panel="assist" .active=${page === "assist"}
             >Assist</sl-tab
           >
-          <sl-tab
-            slot="nav"
-            panel="time-picker"
-            .active=${page === "time-picker"}
-          >
-            Time Picker
-          </sl-tab>
         </sl-tab-group>
       </div>
       <developer-tools-router

src/panels/lovelace/card-features/hui-button-card-feature.ts

@@ -4,8 +4,6 @@ import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
-import { hasScriptFields } from "../../../data/script";
-import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
 import { cardFeatureStyles } from "./common/card-feature-styles";
@@ -48,14 +46,6 @@ class HuiButtonCardFeature extends LitElement implements LovelaceCardFeature {
     const service =
       domain === "button" || domain === "input_button" ? "press" : "turn_on";
 
-    if (domain === "script") {
-      const entityId = this._stateObj.entity_id;
-      if (hasScriptFields(this.hass!, entityId)) {
-        showMoreInfoDialog(this, { entityId: entityId });
-        return;
-      }
-    }
-
     this.hass.callService(domain, service, {
       entity_id: this._stateObj.entity_id,
     });

src/panels/lovelace/card-features/hui-history-chart-card-feature.ts

@@ -0,0 +1,317 @@
+import { css, html, LitElement, nothing, svg } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import {
+  computeHistory,
+  subscribeHistoryStatesTimeWindow,
+} from "../../../data/history";
+import type {
+  HistoryResult,
+  LineChartUnit,
+  TimelineEntity,
+} from "../../../data/history";
+import type { HomeAssistant } from "../../../types";
+import type { LovelaceCardFeature } from "../types";
+import type {
+  LovelaceCardFeatureContext,
+  HistoryChartCardFeatureConfig,
+} from "./types";
+import { getSensorNumericDeviceClasses } from "../../../data/sensor";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import { computeTimelineColor } from "../../../components/chart/timeline-color";
+import { downSampleLineData } from "../../../components/chart/down-sample";
+import { fireEvent } from "../../../common/dom/fire_event";
+
+export const supportsHistoryChartCardFeature = (
+  _hass: HomeAssistant,
+  context: LovelaceCardFeatureContext
+) =>
+  !!context.entity_id &&
+  ["sensor", "binary_sensor"].includes(computeDomain(context.entity_id));
+
+@customElement("hui-history-chart-card-feature")
+class HuiHistoryChartCardFeature
+  extends SubscribeMixin(LitElement)
+  implements LovelaceCardFeature
+{
+  @property({ attribute: false, hasChanged: () => false })
+  public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
+
+  @state() private _config?: HistoryChartCardFeatureConfig;
+
+  @state() private _stateHistory?: HistoryResult;
+
+  private _interval?: number;
+
+  static getStubConfig(): HistoryChartCardFeatureConfig {
+    return {
+      type: "history-chart",
+      hours_to_show: 24,
+    };
+  }
+
+  public setConfig(config: HistoryChartCardFeatureConfig): void {
+    if (!config) {
+      throw new Error("Invalid configuration");
+    }
+    this._config = config;
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    // redraw the graph every minute to update the time axis
+    clearInterval(this._interval);
+    this._interval = window.setInterval(() => this.requestUpdate(), 1000 * 60);
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    clearInterval(this._interval);
+  }
+
+  protected hassSubscribe() {
+    return [this._subscribeHistory()];
+  }
+
+  protected render() {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this.context ||
+      !this._stateHistory ||
+      !supportsHistoryChartCardFeature(this.hass, this.context)
+    ) {
+      return nothing;
+    }
+
+    const line = this._stateHistory.line[0];
+    const timeline = this._stateHistory.timeline[0];
+    const width = this.clientWidth;
+    const height = this.clientHeight;
+    if (line) {
+      const { points, yAxisOrigin } = this._generateLinePoints(line);
+      const { paths, filledPaths } = this._getLinePaths(points, yAxisOrigin);
+
+      return html`
+        <div class="line" @click=${this._handleClick}>
+          ${svg`<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+            ${paths.map(
+              (path) =>
+                svg`<path d="${path}" stroke="var(--feature-color)" stroke-width="1" stroke-linecap="round" fill="none" />`
+            )}
+            ${filledPaths.map(
+              (path) =>
+                svg`<path d="${path}" stroke="none" stroke-linecap="round" fill="var(--feature-color)" fill-opacity="0.2" />`
+            )}
+              </svg>`}
+        </div>
+      `;
+    }
+    if (timeline) {
+      const ranges = this._generateTimelineRanges(timeline);
+      return html`
+        <div class="timeline" @click=${this._handleClick}>
+          ${svg`<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+            <g>
+                ${ranges.map((r) => svg`<rect x="${r.startX}" y="0" width="${r.endX - r.startX}" height="${height}" fill="${r.color}" />`)}
+            </g>
+            </svg>`}
+        </div>
+      `;
+    }
+    return nothing;
+  }
+
+  private _handleClick() {
+    // open more info dialog to show more detailed history
+    fireEvent(this, "hass-more-info", { entityId: this.context!.entity_id! });
+  }
+
+  private async _subscribeHistory(): Promise<() => Promise<void>> {
+    if (
+      !isComponentLoaded(this.hass!, "history") ||
+      !this.context?.entity_id ||
+      !this._config
+    ) {
+      return () => Promise.resolve();
+    }
+
+    const { numeric_device_classes: sensorNumericDeviceClasses } =
+      await getSensorNumericDeviceClasses(this.hass!);
+
+    return subscribeHistoryStatesTimeWindow(
+      this.hass!,
+      (historyStates) => {
+        this._stateHistory = computeHistory(
+          this.hass!,
+          historyStates,
+          [this.context!.entity_id!],
+          this.hass!.localize,
+          sensorNumericDeviceClasses,
+          false
+        );
+      },
+      this._config!.hours_to_show ?? 24,
+      [this.context!.entity_id!]
+    );
+  }
+
+  private _generateLinePoints(line: LineChartUnit): {
+    points: { x: number; y: number }[];
+    yAxisOrigin: number;
+  } {
+    const width = this.clientWidth;
+    const height = this.clientHeight;
+    let yAxisOrigin = height;
+    let minY = Number(line.data[0].states[0].state);
+    let maxY = Number(line.data[0].states[0].state);
+    const minX = line.data[0].states[0].last_changed;
+    const maxX = Date.now();
+    line.data[0].states.forEach((stateData) => {
+      const stateValue = Number(stateData.state);
+      if (stateValue < minY) {
+        minY = stateValue;
+      } else if (stateValue > maxY) {
+        maxY = stateValue;
+      }
+    });
+    const rangeY = maxY - minY || minY * 0.1;
+    const sampledData = downSampleLineData(
+      line.data[0].states.map((stateData) => [
+        stateData.last_changed,
+        Number(stateData.state),
+      ]),
+      width,
+      minX,
+      maxX
+    );
+    if (maxY < 0) {
+      // all values are negative
+      // add margin
+      maxY += rangeY * 0.1;
+      maxY = Math.min(0, maxY);
+      yAxisOrigin = 0;
+    } else if (minY < 0) {
+      // some values are negative
+      yAxisOrigin = (maxY / (maxY - minY || 1)) * height;
+    } else {
+      // all values are positive
+      // add margin
+      minY -= rangeY * 0.1;
+      minY = Math.max(0, minY);
+    }
+    const yDenom = maxY - minY || 1;
+    const xDenom = maxX - minX || 1;
+    const points = sampledData!.map((point) => {
+      const x = ((point![0] - minX) / xDenom) * width;
+      const y = height - ((Number(point![1]) - minY) / yDenom) * height;
+      return { x, y };
+    });
+    points.push({ x: width, y: points[points.length - 1].y });
+    return { points, yAxisOrigin };
+  }
+
+  private _generateTimelineRanges(timeline: TimelineEntity) {
+    if (timeline.data.length === 0) {
+      return [];
+    }
+    const computedStyles = getComputedStyle(this);
+    const width = this.clientWidth;
+    const minX = timeline.data[0].last_changed;
+    const maxX = Date.now();
+    let prevEndX = 0;
+    let prevStateColor = "";
+    const ranges = timeline.data.map((t) => {
+      const x = ((t.last_changed - minX) / (maxX - minX)) * width;
+      const range = {
+        startX: prevEndX,
+        endX: x,
+        color: prevStateColor,
+      };
+      prevStateColor = computeTimelineColor(
+        t.state,
+        computedStyles,
+        this.hass!.states[timeline.entity_id]
+      );
+      prevEndX = x;
+      return range;
+    });
+    ranges.push({
+      startX: prevEndX,
+      endX: width,
+      color: prevStateColor,
+    });
+    return ranges;
+  }
+
+  private _getLinePaths(
+    points: { x: number; y: number }[],
+    yAxisOrigin: number
+  ) {
+    const paths: string[] = [];
+    const filledPaths: string[] = [];
+    if (!points.length) {
+      return { paths, filledPaths };
+    }
+    // path can interupted by missing data, so we need to split the path into segments
+    const pathSegments: { x: number; y: number }[][] = [[]];
+    points.forEach((point) => {
+      if (!isNaN(point.y)) {
+        pathSegments[pathSegments.length - 1].push(point);
+      } else if (pathSegments[pathSegments.length - 1].length > 0) {
+        pathSegments.push([]);
+      }
+    });
+
+    pathSegments.forEach((pathPoints) => {
+      // create a smoothed path
+      let next: { x: number; y: number };
+      let path = "";
+      let last = pathPoints[0];
+
+      path += `M ${last.x},${last.y}`;
+
+      pathPoints.forEach((coord) => {
+        next = coord;
+        path += ` ${(next.x + last.x) / 2},${(next.y + last.y) / 2}`;
+        path += ` Q${next.x},${next.y}`;
+        last = next;
+      });
+
+      path += ` ${next!.x},${next!.y}`;
+      paths.push(path);
+      filledPaths.push(
+        path +
+          ` L ${next!.x},${yAxisOrigin} L ${pathPoints[0].x},${yAxisOrigin} Z`
+      );
+    });
+
+    return { paths, filledPaths };
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: var(--feature-height);
+    }
+    :host > div {
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+    }
+    .timeline {
+      border-radius: 4px;
+      overflow: hidden;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-history-chart-card-feature": HuiHistoryChartCardFeature;
+  }
+}

src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts

@@ -1,157 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { computeDomain } from "../../../common/entity/compute_domain";
-import { isNumericFromAttributes } from "../../../common/number/format_number";
-import "../../../components/ha-spinner";
-import { subscribeHistoryStatesTimeWindow } from "../../../data/history";
-import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import type { HomeAssistant } from "../../../types";
-import { coordinatesMinimalResponseCompressedState } from "../common/graph/coordinates";
-import "../components/hui-graph-base";
-import type { LovelaceCardFeature } from "../types";
-import type {
-  TrendGraphCardFeatureConfig,
-  LovelaceCardFeatureContext,
-} from "./types";
-
-export const supportsTrendGraphCardFeature = (
-  hass: HomeAssistant,
-  context: LovelaceCardFeatureContext
-) => {
-  const stateObj = context.entity_id
-    ? hass.states[context.entity_id]
-    : undefined;
-  if (!stateObj) return false;
-  const domain = computeDomain(stateObj.entity_id);
-  return domain === "sensor" && isNumericFromAttributes(stateObj.attributes);
-};
-
-const DEFAULT_HOURS_TO_SHOW = 24;
-
-@customElement("hui-trend-graph-card-feature")
-class HuiHistoryChartCardFeature
-  extends SubscribeMixin(LitElement)
-  implements LovelaceCardFeature
-{
-  @property({ attribute: false, hasChanged: () => false })
-  public hass?: HomeAssistant;
-
-  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
-
-  @state() private _config?: TrendGraphCardFeatureConfig;
-
-  @state() private _coordinates?: [number, number][];
-
-  private _interval?: number;
-
-  static getStubConfig(): TrendGraphCardFeatureConfig {
-    return {
-      type: "trend-graph",
-    };
-  }
-
-  public setConfig(config: TrendGraphCardFeatureConfig): void {
-    if (!config) {
-      throw new Error("Invalid configuration");
-    }
-    this._config = config;
-  }
-
-  public connectedCallback() {
-    super.connectedCallback();
-    // redraw the graph every minute to update the time axis
-    clearInterval(this._interval);
-    this._interval = window.setInterval(() => this.requestUpdate(), 1000 * 60);
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    clearInterval(this._interval);
-  }
-
-  protected hassSubscribe() {
-    return [this._subscribeHistory()];
-  }
-
-  protected render() {
-    if (
-      !this._config ||
-      !this.hass ||
-      !this.context ||
-      !supportsTrendGraphCardFeature(this.hass, this.context)
-    ) {
-      return nothing;
-    }
-    if (!this._coordinates) {
-      return html`
-        <div class="container">
-          <ha-spinner size="small"></ha-spinner>
-        </div>
-      `;
-    }
-    if (!this._coordinates.length) {
-      return html`
-        <div class="container">
-          <div class="info">No state history found.</div>
-        </div>
-      `;
-    }
-    return html`
-      <hui-graph-base .coordinates=${this._coordinates}></hui-graph-base>
-    `;
-  }
-
-  private async _subscribeHistory(): Promise<() => Promise<void>> {
-    if (
-      !isComponentLoaded(this.hass!, "history") ||
-      !this.context?.entity_id ||
-      !this._config
-    ) {
-      return () => Promise.resolve();
-    }
-
-    const hourToShow = this._config.hours_to_show ?? DEFAULT_HOURS_TO_SHOW;
-
-    return subscribeHistoryStatesTimeWindow(
-      this.hass!,
-      (historyStates) => {
-        this._coordinates =
-          coordinatesMinimalResponseCompressedState(
-            historyStates[this.context!.entity_id!],
-            hourToShow,
-            500,
-            2,
-            undefined
-          ) || [];
-      },
-      hourToShow,
-      [this.context!.entity_id!]
-    );
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      width: 100%;
-      height: var(--feature-height);
-      flex-direction: column;
-      justify-content: flex-end;
-      align-items: flex-end;
-      pointer-events: none !important;
-    }
-    hui-graph-base {
-      width: 100%;
-      --accent-color: var(--feature-color);
-      border-bottom-right-radius: 8px;
-      border-bottom-left-radius: 8px;
-      overflow: hidden;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-trend-graph-card-feature": HuiHistoryChartCardFeature;
-  }
-}

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

@@ -187,9 +187,9 @@ export interface UpdateActionsCardFeatureConfig {
   backup?: "yes" | "no" | "ask";
 }
 
-export interface TrendGraphCardFeatureConfig {
-  type: "trend-graph";
-  hours_to_show?: number;
+export interface HistoryChartCardFeatureConfig {
+  type: "history-chart";
+  hours_to_show: number;
 }
 
 export const AREA_CONTROLS = [
@@ -239,7 +239,7 @@ export type LovelaceCardFeatureConfig =
   | FanOscillateCardFeatureConfig
   | FanPresetModesCardFeatureConfig
   | FanSpeedCardFeatureConfig
-  | TrendGraphCardFeatureConfig
+  | HistoryChartCardFeatureConfig
   | HumidifierToggleCardFeatureConfig
   | HumidifierModesCardFeatureConfig
   | LawnMowerCommandsCardFeatureConfig
@@ -251,7 +251,7 @@ export type LovelaceCardFeatureConfig =
   | MediaPlayerVolumeSliderCardFeatureConfig
   | NumericInputCardFeatureConfig
   | SelectOptionsCardFeatureConfig
-  | TrendGraphCardFeatureConfig
+  | HistoryChartCardFeatureConfig
   | TargetHumidityCardFeatureConfig
   | TargetTemperatureCardFeatureConfig
   | ToggleCardFeatureConfig

src/panels/lovelace/cards/hui-home-summary-card.ts

@@ -31,8 +31,8 @@ import type { HomeSummaryCard } from "./types";
 const COLORS: Record<HomeSummary, string> = {
   lights: "amber",
   climate: "deep-orange",
-  security: "blue-grey",
-  media_players: "blue",
+  security: "blue",
+  media_players: "purple",
 };
 
 @customElement("hui-home-summary-card")
@@ -119,7 +119,7 @@ export class HuiHomeSummaryCard extends LitElement implements LovelaceCard {
 
         const sensorsValues = areaSensors
           .map(
-            (entityId) => parseFloat(this.hass!.states[entityId!]?.state) || NaN
+            (entityId) => parseFloat(this.hass!.states[entityId!].state) || NaN
           )
           .filter((value) => !isNaN(value));
 

src/panels/lovelace/common/graph/coordinates.ts

@@ -14,8 +14,8 @@ const calcPoints = (
   detail: number,
   min: number,
   max: number
-): [number, number][] => {
-  const coords = [] as [number, number][];
+): number[][] => {
+  const coords = [] as number[][];
   const height = 80;
   let yRatio = (max - min) / height;
   yRatio = yRatio !== 0 ? yRatio : height;
@@ -61,7 +61,7 @@ export const coordinates = (
   width: number,
   detail: number,
   limits?: { min?: number; max?: number }
-): [number, number][] | undefined => {
+): number[][] | undefined => {
   history.forEach((item) => {
     item.state = Number(item.state);
   });
@@ -119,7 +119,7 @@ export const coordinatesMinimalResponseCompressedState = (
   width: number,
   detail: number,
   limits?: { min?: number; max?: number }
-): [number, number][] | undefined => {
+): number[][] | undefined => {
   if (!history) {
     return undefined;
   }

src/panels/lovelace/components/hui-graph-base.ts

@@ -13,7 +13,7 @@ export class HuiGraphBase extends LitElement {
   protected render(): TemplateResult {
     return html`
       ${this._path
-        ? svg`<svg width="100%" height="100%" viewBox="0 0 500 100" preserveAspectRatio="none">
+        ? svg`<svg width="100%" height="100%" viewBox="0 0 500 100">
           <g>
             <mask id="fill">
               <path
@@ -25,10 +25,8 @@ export class HuiGraphBase extends LitElement {
             <rect height="100%" width="100%" id="fill-rect" fill="var(--accent-color)" mask="url(#fill)"></rect>
             <mask id="line">
               <path
-                vector-effect="non-scaling-stroke"
-                class='line'
                 fill="none"
-                stroke="white"
+                stroke="var(--accent-color)"
                 stroke-width="${strokeWidth}"
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -56,10 +54,6 @@ export class HuiGraphBase extends LitElement {
     :host {
       display: flex;
       width: 100%;
-      height: 100%;
-    }
-    .line {
-      opacity: 0.8;
     }
     .fill {
       opacity: 0.1;

src/panels/lovelace/create-element/create-card-feature-element.ts

@@ -36,7 +36,7 @@ import "../card-features/hui-valve-position-card-feature";
 import "../card-features/hui-water-heater-operation-modes-card-feature";
 import "../card-features/hui-area-controls-card-feature";
 import "../card-features/hui-bar-gauge-card-feature";
-import "../card-features/hui-trend-graph-card-feature";
+import "../card-features/hui-history-chart-card-feature";
 
 import type { LovelaceCardFeatureConfig } from "../card-features/types";
 import {
@@ -75,7 +75,7 @@ const TYPES = new Set<LovelaceCardFeatureConfig["type"]>([
   "media-player-volume-slider",
   "numeric-input",
   "select-options",
-  "trend-graph",
+  "history-chart",
   "target-humidity",
   "target-temperature",
   "toggle",

src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts

@@ -46,7 +46,7 @@ import { supportsMediaPlayerPlaybackCardFeature } from "../../card-features/hui-
 import { supportsMediaPlayerVolumeSliderCardFeature } from "../../card-features/hui-media-player-volume-slider-card-feature";
 import { supportsNumericInputCardFeature } from "../../card-features/hui-numeric-input-card-feature";
 import { supportsSelectOptionsCardFeature } from "../../card-features/hui-select-options-card-feature";
-import { supportsTrendGraphCardFeature } from "../../card-features/hui-trend-graph-card-feature";
+import { supportsHistoryChartCardFeature } from "../../card-features/hui-history-chart-card-feature";
 import { supportsTargetHumidityCardFeature } from "../../card-features/hui-target-humidity-card-feature";
 import { supportsTargetTemperatureCardFeature } from "../../card-features/hui-target-temperature-card-feature";
 import { supportsToggleCardFeature } from "../../card-features/hui-toggle-card-feature";
@@ -100,7 +100,7 @@ const UI_FEATURE_TYPES = [
   "media-player-volume-slider",
   "numeric-input",
   "select-options",
-  "trend-graph",
+  "history-chart",
   "target-humidity",
   "target-temperature",
   "toggle",
@@ -168,7 +168,7 @@ const SUPPORTS_FEATURE_TYPES: Record<
   "media-player-volume-slider": supportsMediaPlayerVolumeSliderCardFeature,
   "numeric-input": supportsNumericInputCardFeature,
   "select-options": supportsSelectOptionsCardFeature,
-  "trend-graph": supportsTrendGraphCardFeature,
+  "history-chart": supportsHistoryChartCardFeature,
   "target-humidity": supportsTargetHumidityCardFeature,
   "target-temperature": supportsTargetTemperatureCardFeature,
   toggle: supportsToggleCardFeature,

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

@@ -61,7 +61,7 @@ export class HuiGraphHeaderFooter
 
   @state() protected _config?: GraphHeaderFooterConfig;
 
-  @state() private _coordinates?: [number, number][];
+  @state() private _coordinates?: number[][];
 
   private _error?: string;
 

src/panels/lovelace/strategies/home/home-climate-view-strategy.ts

@@ -12,11 +12,30 @@ import {
 } from "../areas/helpers/areas-strategy-helper";
 import { getHomeStructure } from "./helpers/home-structure";
 import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
+import { computeStateName } from "../../../../common/entity/compute_state_name";
+import { computeObjectId } from "../../../../common/entity/compute_object_id";
 
 export interface HomeClimateViewStrategyConfig {
   type: "home-climate";
 }
 
+const createTempHumidBadge = (hass: HomeAssistant, entityId: string) => {
+  const stateObj = hass.states[entityId];
+  return {
+    type: "tile",
+    entity: entityId,
+    name: stateObj
+      ? computeStateName(stateObj)
+      : computeObjectId(entityId).replace(/_/g, " "),
+    features: [
+      {
+        type: "history-chart",
+        hours_to_show: 3,
+      },
+    ],
+  };
+};
+
 const processAreasForClimate = (
   areaIds: string[],
   hass: HomeAssistant,
@@ -33,28 +52,8 @@ const processAreasForClimate = (
       area: area.area_id,
     });
     const areaEntities = entities.filter(areaFilter);
-    const areaCards: LovelaceCardConfig[] = [];
 
-    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" }],
-      });
-    }
-
-    for (const entityId of areaEntities) {
-      areaCards.push(computeTileCard(entityId));
-    }
-
-    if (areaCards.length > 0) {
+    if (areaEntities.length > 0) {
       cards.push({
         heading_style: "subtitle",
         type: "heading",
@@ -64,7 +63,21 @@ const processAreasForClimate = (
           navigation_path: `areas-${area.area_id}`,
         },
       });
-      cards.push(...areaCards);
+
+      if (hass.areas[areaId].temperature_entity_id) {
+        cards.push(
+          createTempHumidBadge(hass, hass.areas[areaId].temperature_entity_id)
+        );
+      }
+      if (hass.areas[areaId].humidity_entity_id) {
+        cards.push(
+          createTempHumidBadge(hass, hass.areas[areaId].humidity_entity_id)
+        );
+      }
+
+      for (const entityId of areaEntities) {
+        cards.push(computeTileCard(entityId));
+      }
     }
   }
 

src/panels/lovelace/strategies/home/home-lights-view-strategy.ts

@@ -32,15 +32,10 @@ const processAreasForLights = (
       area: area.area_id,
     });
     const areaLights = entities.filter(areaFilter);
-    const areaCards: LovelaceCardConfig[] = [];
 
     const computeTileCard = computeAreaTileCardConfig(hass, "", false);
 
-    for (const entityId of areaLights) {
-      areaCards.push(computeTileCard(entityId));
-    }
-
-    if (areaCards.length > 0) {
+    if (areaLights.length > 0) {
       cards.push({
         heading_style: "subtitle",
         type: "heading",
@@ -50,7 +45,10 @@ const processAreasForLights = (
           navigation_path: `areas-${area.area_id}`,
         },
       });
-      cards.push(...areaCards);
+
+      for (const entityId of areaLights) {
+        cards.push(computeTileCard(entityId));
+      }
     }
   }
 

src/panels/lovelace/strategies/home/home-main-view-strategy.ts

@@ -207,7 +207,6 @@ export class HomeMainViewStrategy extends ReactiveElement {
             "ui.panel.lovelace.cards.energy.energy_distribution.title_today"
           ),
           type: "energy-distribution",
-          collection_key: "energy_home_dashboard",
           link_dashboard: true,
         });
       }

src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts

@@ -29,14 +29,6 @@ const processAreasForMediaPlayers = (
       area: area.area_id,
     });
     const areaEntities = entities.filter(areaFilter);
-    const areaCards: LovelaceCardConfig[] = [];
-
-    for (const entityId of areaEntities) {
-      cards.push({
-        type: "media-control",
-        entity: entityId,
-      } satisfies MediaControlCardConfig);
-    }
 
     if (areaEntities.length > 0) {
       cards.push({
@@ -48,7 +40,13 @@ const processAreasForMediaPlayers = (
           navigation_path: `areas-${area.area_id}`,
         },
       });
-      cards.push(...areaCards);
+
+      for (const entityId of areaEntities) {
+        cards.push({
+          type: "media-control",
+          entity: entityId,
+        } satisfies MediaControlCardConfig);
+      }
     }
   }
 

src/panels/lovelace/strategies/home/home-security-view-strategy.ts

@@ -12,6 +12,9 @@ import {
 } from "../areas/helpers/areas-strategy-helper";
 import { getHomeStructure } from "./helpers/home-structure";
 import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
+import { computeDomain } from "../../../../common/entity/compute_domain";
+import { computeStateName } from "../../../../common/entity/compute_state_name";
+import { computeObjectId } from "../../../../common/entity/compute_object_id";
 
 export interface HomeSecurityViewStrategyConfig {
   type: "home-security";
@@ -32,13 +35,7 @@ const processAreasForSecurity = (
     const areaFilter = generateEntityFilter(hass, {
       area: area.area_id,
     });
-
     const areaEntities = entities.filter(areaFilter);
-    const areaCards: LovelaceCardConfig[] = [];
-
-    for (const entityId of areaEntities) {
-      areaCards.push(computeTileCard(entityId));
-    }
 
     if (areaEntities.length > 0) {
       cards.push({
@@ -50,7 +47,28 @@ const processAreasForSecurity = (
           navigation_path: `areas-${area.area_id}`,
         },
       });
-      cards.push(...areaCards);
+
+      for (const entityId of areaEntities) {
+        const stateObj = hass.states[entityId];
+        cards.push(
+          computeDomain(entityId) === "binary_sensor" &&
+            stateObj?.attributes.device_class === "motion"
+            ? {
+                type: "tile",
+                entity: entityId,
+                name: stateObj
+                  ? computeStateName(stateObj)
+                  : computeObjectId(entityId).replace(/_/g, " "),
+                features: [
+                  {
+                    type: "history-chart",
+                    hours_to_show: 6,
+                  },
+                ],
+              }
+            : computeTileCard(entityId)
+        );
+      }
     }
   }
 

src/panels/time-picker/ha-panel-time-picker.ts

@@ -1,180 +0,0 @@
-import { html, LitElement, css } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import type { HomeAssistant } from "../../types";
-import "../../components/ha-time-picker";
-import "../../components/ha-card";
-import "../../components/ha-button";
-import "../../components/ha-alert";
-import "../../components/ha-selector/ha-selector";
-
-@customElement("developer-tools-time-picker")
-export class DeveloperToolsTimePicker extends LitElement {
-  @property({ attribute: false })
-  public hass!: HomeAssistant;
-
-  @property({ type: Boolean, reflect: true })
-  public narrow = false;
-
-  @state()
-  private _timeValue = "14:15:00";
-
-  @state()
-  private _timeValue2 = "09:05:05";
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        padding: 16px;
-        max-width: 800px;
-        margin: 0 auto;
-      }
-
-      .header {
-        margin-bottom: 24px;
-      }
-
-      .header h1 {
-        margin: 0 0 8px 0;
-        color: var(--primary-text-color);
-        font-size: 28px;
-        font-weight: 400;
-      }
-
-      .header p {
-        margin: 0;
-        color: var(--secondary-text-color);
-        font-size: 16px;
-        line-height: 1.5;
-      }
-
-      .section {
-        margin-bottom: 32px;
-      }
-
-      .section h2 {
-        margin: 0 0 16px 0;
-        color: var(--primary-text-color);
-        font-size: 20px;
-        font-weight: 500;
-      }
-
-      .example {
-        background: var(--card-background-color);
-        border-radius: 12px;
-        padding: 24px;
-        margin-bottom: 16px;
-        border: 1px solid var(--divider-color);
-      }
-
-      .example h3 {
-        margin: 0 0 16px 0;
-        color: var(--primary-text-color);
-        font-size: 16px;
-        font-weight: 500;
-      }
-
-      .time-picker-container {
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        margin-bottom: 16px;
-      }
-
-      .value-display {
-        background: var(--secondary-background-color);
-        padding: 8px 12px;
-        border-radius: 6px;
-        font-family: monospace;
-        font-size: 14px;
-        color: var(--primary-text-color);
-        min-width: 100px;
-        text-align: center;
-      }
-
-      .controls {
-        display: flex;
-        gap: 12px;
-        align-items: center;
-        flex-wrap: wrap;
-      }
-
-      .form-toggle {
-        margin-top: 16px;
-      }
-
-      @media (max-width: 600px) {
-        :host {
-          padding: 12px;
-        }
-
-        .time-picker-container {
-          flex-direction: column;
-          align-items: stretch;
-        }
-
-        .controls {
-          flex-direction: column;
-          align-items: stretch;
-        }
-      }
-    `;
-  }
-
-  protected render() {
-    return html`
-      <div class="header">
-        <h1>Time picker demo</h1>
-        <p>
-          This page demonstrates the ha-time-picker component with various
-          configurations and use cases.
-        </p>
-      </div>
-
-      <div class="section">
-        <h2>Time picker</h2>
-        <div class="example">
-          <div class="time-picker-container">
-            <ha-time-picker
-              .locale=${this.hass.locale}
-              .value=${this._timeValue}
-              @value-changed=${this._onTimeChanged}
-            ></ha-time-picker>
-            <div class="value-display">${this._timeValue}</div>
-          </div>
-          <p>Current value: ${this._timeValue}</p>
-        </div>
-      </div>
-
-      <div class="section">
-        <h2>Time picker with seconds</h2>
-        <div class="example">
-          <div class="time-picker-container">
-            <ha-time-picker
-              .locale=${this.hass.locale}
-              .value=${this._timeValue2}
-              .enableSeconds=${true}
-              @value-changed=${this._onTime2Changed}
-            ></ha-time-picker>
-            <div class="value-display">${this._timeValue2}</div>
-          </div>
-          <p>Current value: ${this._timeValue2}</p>
-        </div>
-      </div>
-    `;
-  }
-
-  private _onTimeChanged(ev: CustomEvent) {
-    this._timeValue = ev.detail.value;
-  }
-
-  private _onTime2Changed(ev: CustomEvent) {
-    this._timeValue2 = ev.detail.value;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "developer-tools-time-picker": DeveloperToolsTimePicker;
-  }
-}

src/resources/theme/color/color.globals.ts

@@ -218,7 +218,6 @@ export const colorStyles = css`
     --table-row-alternative-background-color: var(--secondary-background-color);
     --data-table-background-color: var(--card-background-color);
     --markdown-code-background-color: var(--primary-background-color);
-    --bar-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
 
     /* https://github.com/material-components/material-web/blob/master/docs/theming.md */
     --mdc-theme-primary: var(--primary-color);
@@ -247,7 +246,6 @@ export const colorStyles = css`
     --mdc-dialog-scroll-divider-color: var(--divider-color);
     --mdc-dialog-heading-ink-color: var(--primary-text-color);
     --mdc-dialog-content-ink-color: var(--primary-text-color);
-    --mdc-top-app-bar-fixed-box-shadow: var(--bar-box-shadow);
 
     --mdc-text-field-idle-line-color: var(--input-idle-line-color);
     --mdc-text-field-hover-line-color: var(--input-hover-line-color);
@@ -362,8 +360,6 @@ export const darkColorStyles = css`
     --ha-button-warning-light-color: #917b54c1;
     --ha-button-neutral-color: #d9dae0;
     --ha-button-neutral-light-color: #6a7081;
-
-    --bar-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);
   }
 `;
 

src/translations/en.json

@@ -5,7 +5,7 @@
     "config": "Settings",
     "states": "Overview",
     "map": "Map",
-    "logbook": "Logbook",
+    "logbook": "Activity",
     "history": "History",
     "todo": "To-do lists",
     "developer_tools": "Developer tools",
@@ -526,7 +526,7 @@
         }
       },
       "logbook": {
-        "entries_not_found": "No logbook events found.",
+        "entries_not_found": "No activity found.",
         "triggered_by": "triggered by",
         "triggered_by_automation": "triggered by automation",
         "triggered_by_script": "triggered by script",
@@ -539,7 +539,7 @@
         "triggered_by_homeassistant_stopping": "triggered by Home Assistant stopping",
         "triggered_by_homeassistant_starting": "triggered by Home Assistant starting",
         "show_trace": "[%key:ui::panel::config::automation::editor::show_trace%]",
-        "retrieval_error": "Could not load logbook",
+        "retrieval_error": "Could not load activity",
         "not_loaded": "[%key:ui::dialogs::helper_settings::platform_not_loaded%]",
         "messages": {
           "was_away": "was detected away",
@@ -678,7 +678,7 @@
       },
       "subpage-data-table": {
         "filters": "Filters",
-        "show_results": "Show {number} results",
+        "show_results": "show {number} results",
         "clear_filter": "Clear filter",
         "close_filter": "Close filters",
         "exit_selection_mode": "Exit selection mode",
@@ -1382,13 +1382,8 @@
         "info": "Information",
         "related": "Related",
         "history": "History",
-        "logbook": "Logbook",
+        "logbook": "Activity",
         "device_info": "Device info",
-        "device_or_service_info": "[%key:ui::panel::config::devices::device_info%]",
-        "device_type": {
-          "device": "[%key:ui::panel::config::devices::type::device_heading%]",
-          "service": "[%key:ui::panel::config::devices::type::service_heading%]"
-        },
         "last_changed": "Last changed",
         "last_updated": "Last updated",
         "show_more": "Show more",
@@ -1619,7 +1614,7 @@
             "preload_stream": "Preload camera stream",
             "preload_stream_description": "This keeps the camera stream open in the background so it shows quicker. Warning! This is device intensive.",
             "stream_orientation": "Camera stream orientation",
-            "stream_orientation_description": "The orientation transformation to use for the camera stream.\nWarning: Stream orientation processing occurs on the Home Assistant device and may impact system performance. When possible, configure this setting directly on your camera instead.",
+            "stream_orientation_description": "The orientation transformation to use for the camera stream.",
             "stream_orientation_1": "No orientation transform",
             "stream_orientation_2": "Mirror",
             "stream_orientation_3": "Rotate 180",
@@ -2043,7 +2038,8 @@
         "shortcuts": {
           "double_click": "Double-click",
           "scroll_wheel": "Scroll",
-          "drag": "Drag"
+          "drag": "Drag",
+          "ctrl_cmd": "Ctrl/Cmd"
         },
         "searching": {
           "title": "Searching",
@@ -2060,9 +2056,6 @@
         },
         "automation_script": {
           "title": "Automations / Scripts",
-          "copy": "to copy the selected item to clipboard",
-          "cut": "to cut the selected item and place it on the clipboard",
-          "delete": "to delete the selected item",
           "paste": "to paste automation/script YAML from clipboard to editor",
           "save": "to save automation/script"
         },
@@ -3863,9 +3856,6 @@
             "type_script_plural": "[%key:ui::panel::config::blueprint::overview::types_plural::script%]",
             "new_automation_setup_failed_title": "New {type} setup failed",
             "new_automation_setup_failed_text": "Your new {type} has saved, but waiting for it to setup has timed out. This could be due to errors parsing your configuration.yaml, please check the configuration in developer tools. Your {type} will not be visible until this is corrected, and {types} are reloaded. Changes to area, category, or labels were not saved and must be reapplied.",
-            "item_pasted": "{item} pasted",
-            "ctrl": "Ctrl",
-            "del": "Del",
             "triggers": {
               "name": "Triggers",
               "header": "When",
@@ -3892,8 +3882,6 @@
               "unknown_trigger": "[%key:ui::panel::config::devices::automation::triggers::unknown_trigger%]",
               "triggering_event_detail": "Triggering event detail",
               "trigger": "Trigger",
-              "copied_to_clipboard": "Trigger copied to clipboard",
-              "cut_to_clipboard": "Trigger cut to clipboard",
               "groups": {
                 "entity": {
                   "label": "Entity",
@@ -4156,8 +4144,6 @@
               "type_select": "Condition type",
               "unknown_condition": "[%key:ui::panel::config::devices::automation::conditions::unknown_condition%]",
               "condition": "Condition",
-              "copied_to_clipboard": "Condition copied to clipboard",
-              "cut_to_clipboard": "Condition cut to clipboard",
               "groups": {
                 "entity": {
                   "label": "Entity",
@@ -4327,8 +4313,6 @@
               "type_select": "Action type",
               "continue_on_error": "Continue on error",
               "action": "Action",
-              "copied_to_clipboard": "Action copied to clipboard",
-              "cut_to_clipboard": "Action cut to clipboard",
               "groups": {
                 "helpers": {
                   "label": "Helpers"
@@ -4593,7 +4577,7 @@
             "tabs": {
               "details": "Step details",
               "timeline": "Trace timeline",
-              "logbook": "Related logbook entries",
+              "logbook": "Related activity",
               "automation_config": "Automation config",
               "step_config": "Step config",
               "changed_variables": "Changed variables",
@@ -4610,7 +4594,7 @@
               "error": "Error: {error}",
               "result": "Result:",
               "step_not_executed": "This step was not executed.",
-              "no_logbook_entries": "No logbook entries found for this step.",
+              "no_logbook_entries": "No activity found for this step.",
               "no_variables_changed": "No variables changed",
               "unable_to_find_config": "Unable to find config"
             },
@@ -4636,8 +4620,8 @@
               "disabled": "(disabled)",
               "triggered_by": "{triggeredBy, select, \n alias {{alias} triggered}\n other {Triggered} \n} {triggeredPath, select, \n trigger {by the {trigger}}\n other {manually} \n} at {time}",
               "path_error": "Unable to extract path {path}. Download trace and report as bug.",
-              "not_all_entries_are_related_automation_note": "Not all shown logbook entries might be related to this automation.",
-              "not_all_entries_are_related_script_note": "Not all shown logbook entries might be related to this script."
+              "not_all_entries_are_related_automation_note": "Not all shown activity might be related to this automation.",
+              "not_all_entries_are_related_script_note": "Not all shown activity might be related to this script."
             }
           }
         },
@@ -5740,16 +5724,6 @@
           "no_advertisements_found": "No matching Bluetooth advertisements found",
           "no_connection_slot_allocations": "No connection slot allocations information available",
           "no_active_connection_support": "This adapter does not support making active (GATT) connections.",
-          "no_scanner_state_available": "No scanner state available",
-          "current_scanning_mode": "Current scanning mode",
-          "requested_scanning_mode": "Requested scanning mode",
-          "scanning_mode_none": "none",
-          "scanning_mode_active": "active",
-          "scanning_mode_passive": "passive",
-          "scanner_mode_mismatch": "Scanner requested {requested} mode but is operating in {current} mode. The scanner is in a bad state and needs to be power cycled.",
-          "scanner_mode_mismatch_remote": "For proxies: reboot the device",
-          "scanner_mode_mismatch_usb": "For USB adapters: unplug and plug back in",
-          "scanner_mode_mismatch_uart": "For UART/onboard adapters: power down the system completely and power it back up",
           "address": "Address",
           "name": "Name",
           "source": "Source",
@@ -7564,8 +7538,8 @@
               "square": "Render cards as squares"
             },
             "logbook": {
-              "name": "Logbook",
-              "description": "The Logbook card shows a list of events for entities."
+              "name": "Activity",
+              "description": "The Activity card shows a list of events for entities."
             },
             "history-graph": {
               "name": "History graph",
@@ -8206,8 +8180,8 @@
               "bar-gauge": {
                 "label": "Bar gauge"
               },
-              "trend-graph": {
-                "label": "Trend graph"
+              "history-chart": {
+                "label": "History chart"
               }
             }
           },

yarn.lock

@@ -4445,10 +4445,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/chromecast-caf-receiver@npm:6.0.24":
-  version: 6.0.24
-  resolution: "@types/chromecast-caf-receiver@npm:6.0.24"
-  checksum: 10/1f2b95e8a15dbb36d5328895229d4a5cb255b33e62d46335bd6ed75e16aa9ea6a7d765a64ae120d19b3134fb3e51e9547d2544c7277f7bffe0bf0b3999f026da
+"@types/chromecast-caf-receiver@npm:6.0.22":
+  version: 6.0.22
+  resolution: "@types/chromecast-caf-receiver@npm:6.0.22"
+  checksum: 10/6c51cb52527776ddfa187a261b88184c98bdd61c129dd8719cba213894d565cf69073734d6473696ffd60a768f6fb5a3fe9932693f43174fbc5e7af201db8a90
   languageName: node
   linkType: hard
 
@@ -9385,7 +9385,7 @@ __metadata:
     "@tsparticles/engine": "npm:3.9.1"
     "@tsparticles/preset-links": "npm:3.2.0"
     "@types/babel__plugin-transform-runtime": "npm:7.9.5"
-    "@types/chromecast-caf-receiver": "npm:6.0.24"
+    "@types/chromecast-caf-receiver": "npm:6.0.22"
     "@types/chromecast-caf-sender": "npm:1.0.11"
     "@types/color-name": "npm:2.0.0"
     "@types/culori": "npm:4.0.0"