20230601.1 (#16728)

hassio/src/components/supervisor-backup-content.ts

@@ -1,5 +1,6 @@
 import { mdiFolder, mdiHomeAssistant, mdiPuzzle } from "@mdi/js";
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import "@polymer/paper-input/paper-input";
+import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResultGroup,

hassio/src/dialogs/backup/dialog-hassio-backup.ts

@@ -7,6 +7,7 @@ import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
 import { slugify } from "../../../../src/common/string/slugify";
+import "../../../../src/components/ha-dialog";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button-menu";

package.json

@@ -151,8 +151,8 @@
   "devDependencies": {
     "@babel/core": "7.22.1",
     "@babel/plugin-proposal-decorators": "7.22.3",
-    "@babel/plugin-transform-runtime": "7.22.2",
+    "@babel/plugin-transform-runtime": "7.22.4",
-    "@babel/preset-env": "7.22.2",
+    "@babel/preset-env": "7.22.4",
     "@babel/preset-typescript": "7.21.5",
     "@koa/cors": "4.0.0",
     "@octokit/auth-oauth-device": "4.0.4",

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20230601.0"
+version      = "20230601.1"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

src/common/const.ts

@@ -83,6 +83,7 @@ export const FIXED_DOMAIN_ICONS = {
   configurator: mdiCog,
   conversation: mdiMicrophoneMessage,
   counter: mdiCounter,
+  datetime: mdiCalendarClock,
   date: mdiCalendar,
   demo: mdiHomeAssistant,
   google_assistant: mdiGoogleAssistant,
@@ -112,6 +113,7 @@ export const FIXED_DOMAIN_ICONS = {
   siren: mdiBullhorn,
   stt: mdiMicrophoneMessage,
   text: mdiFormTextbox,
+  time: mdiClock,
   timer: mdiTimerOutline,
   tts: mdiSpeakerMessage,
   updater: mdiCloudUpload,

src/components/ha-hs-color-picker.ts

@@ -317,9 +317,13 @@ class HaHsColorPicker extends LitElement {
     const cy = ((y + 1) * size) / 2;
 
     const markerPosition = `${cx}px, ${cy}px`;
-    const markerScale = this._pressed ? "1.5" : "1";
+    const markerScale = this._pressed
+      ? this._pressed === "touch"
+        ? "2.5"
+        : "1.5"
+      : "1";
     const markerOffset =
-      this._pressed === "touch" ? `0px, -${size / 8}px` : "0px, 0px";
+      this._pressed === "touch" ? `0px, -${size / 16}px` : "0px, 0px";
 
     return html`
       <div class="container ${classMap({ pressed: Boolean(this._pressed) })}">

src/components/ha-list-item.ts

@@ -17,8 +17,14 @@ export class HaListItem extends ListItemBase {
       styles,
       css`
         :host {
-          padding-left: var(--mdc-list-side-padding, 20px);
+          padding-left: var(
-          padding-right: var(--mdc-list-side-padding, 20px);
+            --mdc-list-side-padding-left,
+            var(--mdc-list-side-padding, 20px)
+          );
+          padding-right: var(
+            --mdc-list-side-padding-right,
+            var(--mdc-list-side-padding, 20px)
+          );
         }
         :host([graphic="avatar"]:not([twoLine])),
         :host([graphic="icon"]:not([twoLine])) {

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

@@ -29,9 +29,10 @@ export class HaOutlinedIconButton extends IconButton {
         --md-ripple-hover-opacity: 0;
         --md-ripple-pressed-opacity: 0;
       }
-      button {
+      .outlined {
-        /* Fix md-outlined-icon-button padding for iOS */
+        /* Fix md-outlined-icon-button padding and margin for iOS */
         padding: 0;
+        margin: 0;
       }
     `,
   ];

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

@@ -305,9 +305,13 @@ class HaTempColorPicker extends LitElement {
     const cy = ((y + 1) * size) / 2;
 
     const markerPosition = `${cx}px, ${cy}px`;
-    const markerScale = this._pressed ? "1.5" : "1";
+    const markerScale = this._pressed
+      ? this._pressed === "touch"
+        ? "2.5"
+        : "1.5"
+      : "1";
     const markerOffset =
-      this._pressed === "touch" ? `0px, -${size / 8}px` : "0px, 0px";
+      this._pressed === "touch" ? `0px, -${size / 16}px` : "0px, 0px";
 
     return html`
       <div class="container ${classMap({ pressed: Boolean(this._pressed) })}">

src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts

@@ -79,6 +79,7 @@ class DialogLightColorFavorite extends LitElement {
         <light-color-picker
           .hass=${this.hass}
           entityId=${this._entry.entity_id}
+          .defaultMode=${this._dialogParams?.defaultMode}
           @color-changed=${this._colorChanged}
         >
         </light-color-picker>

src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts

@@ -31,6 +31,7 @@ import {
 import { HomeAssistant } from "../../../../types";
 import { showConfirmationDialog } from "../../../generic/show-dialog-box";
 import "./ha-favorite-color-button";
+import type { LightPickerMode } from "./light-color-picker";
 import { showLightColorFavoriteDialog } from "./show-dialog-light-color-favorite";
 
 @customElement("ha-more-info-light-favorite-colors")
@@ -147,8 +148,14 @@ export class HaMoreInfoLightFavoriteColors extends LitElement {
   private _edit = async (index) => {
     // Make sure the current favorite color is set
     await this._apply(index);
+
+    const defaultMode: LightPickerMode =
+      "color_temp_kelvin" in this._favoriteColors[index]
+        ? "color_temp"
+        : "color";
     const color = await showLightColorFavoriteDialog(this, {
       entry: this.entry!,
+      defaultMode,
       title: this.hass.localize(
         "ui.dialogs.more_info_control.light.favorite_color.edit_title"
       ),

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

@@ -1,6 +1,7 @@
 import "@material/mwc-button";
 import "@material/mwc-tab-bar/mwc-tab-bar";
 import "@material/mwc-tab/mwc-tab";
+import { mdiEyedropper } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -10,7 +11,14 @@ import {
   PropertyValues,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { hs2rgb, rgb2hs } from "../../../../common/color/convert-color";
+import {
+  hex2rgb,
+  hs2rgb,
+  hsv2rgb,
+  rgb2hex,
+  rgb2hs,
+  rgb2hsv,
+} from "../../../../common/color/convert-color";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { throttle } from "../../../../common/util/throttle";
 import "../../../../components/ha-button-toggle-group";
@@ -27,8 +35,9 @@ import {
   lightSupportsColorMode,
 } from "../../../../data/light";
 import { HomeAssistant } from "../../../../types";
+import "../../../../components/ha-icon";
 
-type Mode = "color_temp" | "color";
+export type LightPickerMode = "color_temp" | "color";
 
 declare global {
   interface HASSDomEvents {
@@ -42,7 +51,7 @@ class LightColorPicker extends LitElement {
 
   @property() public entityId!: string;
 
-  @property() public defaultMode!: Mode;
+  @property() public defaultMode?: LightPickerMode;
 
   @state() private _cwSliderValue?: number;
 
@@ -58,9 +67,9 @@ class LightColorPicker extends LitElement {
 
   @state() private _ctPickerValue?: number;
 
-  @state() private _mode?: Mode;
+  @state() private _mode?: LightPickerMode;
 
-  @state() private _modes: Mode[] = [];
+  @state() private _modes: LightPickerMode[] = [];
 
   get stateObj() {
     return this.hass.states[this.entityId] as LightEntity | undefined;
@@ -80,6 +89,16 @@ class LightColorPicker extends LitElement {
       !supportsRgbww &&
       lightSupportsColorMode(this.stateObj, LightColorMode.RGBW);
 
+    const hexValue = this._hsPickerValue
+      ? rgb2hex(
+          hsv2rgb([
+            this._hsPickerValue[0],
+            this._hsPickerValue[1],
+            ((this._colorBrightnessSliderValue ?? 100) / 100) * 255,
+          ])
+        )
+      : "";
+
     return html`
       ${this._modes.length > 1
         ? html`
@@ -116,27 +135,37 @@ class LightColorPicker extends LitElement {
           : nothing}
         ${this._mode === "color"
           ? html`
-              <ha-hs-color-picker
+              <div class="color-container">
-                @value-changed=${this._hsColorChanged}
+                <label class="native-color-picker">
-                @cursor-moved=${this._hsColorCursorMoved}
+                  <input
-                .value=${this._hsPickerValue}
+                    type="color"
-                .colorBrightness=${this._colorBrightnessSliderValue != null
+                    .value=${hexValue ?? ""}
-                  ? (this._colorBrightnessSliderValue * 255) / 100
+                    @input=${this._nativeColorChanged}
-                  : undefined}
+                  />
-                .wv=${this._wvSliderValue != null
+                  <ha-svg-icon .path=${mdiEyedropper}></ha-svg-icon>
-                  ? (this._wvSliderValue * 255) / 100
+                </label>
-                  : undefined}
-                .ww=${this._wwSliderValue != null
-                  ? (this._wwSliderValue * 255) / 100
-                  : undefined}
-                .cw=${this._cwSliderValue != null
-                  ? (this._cwSliderValue * 255) / 100
-                  : undefined}
-                .minKelvin=${this.stateObj.attributes.min_color_temp_kelvin}
-                .maxKelvin=${this.stateObj.attributes.max_color_temp_kelvin}
-              >
-              </ha-hs-color-picker>
 
+                <ha-hs-color-picker
+                  @value-changed=${this._hsColorChanged}
+                  @cursor-moved=${this._hsColorCursorMoved}
+                  .value=${this._hsPickerValue}
+                  .colorBrightness=${this._colorBrightnessSliderValue != null
+                    ? (this._colorBrightnessSliderValue * 255) / 100
+                    : undefined}
+                  .wv=${this._wvSliderValue != null
+                    ? (this._wvSliderValue * 255) / 100
+                    : undefined}
+                  .ww=${this._wwSliderValue != null
+                    ? (this._wwSliderValue * 255) / 100
+                    : undefined}
+                  .cw=${this._cwSliderValue != null
+                    ? (this._cwSliderValue * 255) / 100
+                    : undefined}
+                  .minKelvin=${this.stateObj.attributes.min_color_temp_kelvin}
+                  .maxKelvin=${this.stateObj.attributes.max_color_temp_kelvin}
+                >
+                </ha-hs-color-picker>
+              </div>
               ${supportsRgbw || supportsRgbww
                 ? html`<ha-labeled-slider
                     .caption=${this.hass.localize(
@@ -267,7 +296,7 @@ class LightColorPicker extends LitElement {
 
       const supportsColor = lightSupportsColor(this.stateObj!);
 
-      const modes: Mode[] = [];
+      const modes: LightPickerMode[] = [];
       if (supportsColor) {
         modes.push("color");
       }
@@ -349,6 +378,23 @@ class LightColorPicker extends LitElement {
     }
   }
 
+  private _nativeColorChanged(ev) {
+    const rgb = hex2rgb(ev.currentTarget.value);
+
+    const hsv = rgb2hsv(rgb);
+
+    this._hsPickerValue = [hsv[0], hsv[1]];
+
+    if (
+      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW) ||
+      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW)
+    ) {
+      this._colorBrightnessSliderValue = hsv[2] / 2.55;
+    }
+
+    this._throttleUpdateColor();
+  }
+
   private _hsColorChanged(ev: CustomEvent) {
     if (!ev.detail.value) {
       return;
@@ -537,10 +583,65 @@ class LightColorPicker extends LitElement {
           flex: 1;
         }
 
-        ha-hs-color-picker {
+        .native-color-picker {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+
+        .native-color-picker ha-svg-icon {
+          pointer-events: none;
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          margin: auto;
+          padding: 0;
+        }
+
+        input[type="color"] {
+          appearance: none;
+          -webkit-appearance: none;
+          border: none;
+          outline: none;
+          display: block;
+          width: var(--mdc-icon-button-size, 48px);
+          height: var(--mdc-icon-button-size, 48px);
+          padding: calc(
+            (var(--mdc-icon-button-size, 48px) - var(--mdc-icon-size, 24px)) / 2
+          );
+          background-color: transparent;
+          border-radius: calc(var(--mdc-icon-button-size, 48px) / 2);
+          overflow: hidden;
+          cursor: pointer;
+          transition: background-color 180ms ease-in-out;
+        }
+
+        input[type="color"]:focus-visible,
+        input[type="color"]:hover {
+          background-color: rgb(127, 127, 127, 0.15);
+        }
+
+        input[type="color"]::-webkit-color-swatch-wrapper {
+          display: none;
+          background: none;
+        }
+
+        input[type="color"]::-webkit-color-swatch {
+          border: none;
+        }
+
+        .color-container {
+          position: relative;
           max-width: 300px;
           min-width: 200px;
-          margin: 44px 0 44px 0;
+          margin: 0 0 44px 0;
+          padding-top: 44px;
+        }
+
+        ha-hs-color-picker {
+          width: 100%;
         }
 
         ha-temp-color-picker {

src/dialogs/more-info/components/lights/show-dialog-light-color-favorite.ts

@@ -1,10 +1,12 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { ExtEntityRegistryEntry } from "../../../../data/entity_registry";
 import { LightColor } from "../../../../data/light";
+import type { LightPickerMode } from "./light-color-picker";
 
 export interface LightColorFavoriteDialogParams {
   entry: ExtEntityRegistryEntry;
   title: string;
+  defaultMode?: LightPickerMode;
   submit?: (color?: LightColor) => void;
   cancel?: () => void;
 }

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

@@ -1,8 +1,9 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type { LightPickerMode } from "./light-color-picker";
 
 export interface LightColorPickerViewParams {
   entityId: string;
-  defaultMode: "color" | "color_temp";
+  defaultMode: LightPickerMode;
 }
 
 export const loadLightColorPickerView = () =>

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

@@ -191,6 +191,7 @@ export default class HaAutomationActionRow extends LitElement {
                   slot="icons"
                   @action=${this._handleAction}
                   @click=${preventDefault}
+                  fixed
                 >
                   <ha-icon-button
                     slot="trigger"

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

@@ -147,7 +147,11 @@ export default class HaAutomationAction extends LitElement {
           `
         )}
       </div>
-      <ha-button-menu @action=${this._addAction} .disabled=${this.disabled}>
+      <ha-button-menu
+        @action=${this._addAction}
+        .disabled=${this.disabled}
+        fixed
+      >
         <ha-button
           slot="trigger"
           outlined
@@ -262,9 +266,9 @@ export default class HaAutomationAction extends LitElement {
         `ha-automation-action-${action}`
       ) as CustomElementConstructor & { defaultConfig: Action };
 
-      actions = this.actions.concat({
+      actions = this.actions.concat(
-        ...elClass.defaultConfig,
+        elClass ? { ...elClass.defaultConfig } : { [action]: {} }
-      });
+      );
     }
     this._focusLastActionOnChange = true;
     fireEvent(this, "value-changed", { value: actions });

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

@@ -130,6 +130,7 @@ export default class HaAutomationConditionRow extends LitElement {
                   slot="icons"
                   @action=${this._handleAction}
                   @click=${preventDefault}
+                  fixed
                 >
                   <ha-icon-button
                     slot="trigger"

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

@@ -191,7 +191,11 @@ export default class HaAutomationCondition extends LitElement {
           `
         )}
       </div>
-      <ha-button-menu @action=${this._addCondition} .disabled=${this.disabled}>
+      <ha-button-menu
+        @action=${this._addCondition}
+        .disabled=${this.disabled}
+        fixed
+      >
         <ha-button
           slot="trigger"
           outlined

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

@@ -153,6 +153,7 @@ export default class HaAutomationTriggerRow extends LitElement {
                   slot="icons"
                   @action=${this._handleAction}
                   @click=${preventDefault}
+                  fixed
                 >
                   <ha-icon-button
                     slot="trigger"

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

@@ -75,27 +75,25 @@ export default class HaAutomationTrigger extends LitElement {
 
   protected render() {
     return html`
-      ${
+      ${this.reOrderMode && !this.nested
-        this.reOrderMode && !this.nested
+        ? html`
-          ? html`
+            <ha-alert
-              <ha-alert
+              alert-type="info"
-                alert-type="info"
+              .title=${this.hass.localize(
-                .title=${this.hass.localize(
+                "ui.panel.config.automation.editor.re_order_mode.title"
-                  "ui.panel.config.automation.editor.re_order_mode.title"
+              )}
-                )}
+            >
-              >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.re_order_mode.description_triggers"
+              )}
+              <mwc-button slot="action" @click=${this._exitReOrderMode}>
                 ${this.hass.localize(
-                  "ui.panel.config.automation.editor.re_order_mode.description_triggers"
+                  "ui.panel.config.automation.editor.re_order_mode.exit"
                 )}
-                <mwc-button slot="action" @click=${this._exitReOrderMode}>
+              </mwc-button>
-                  ${this.hass.localize(
+            </ha-alert>
-                    "ui.panel.config.automation.editor.re_order_mode.exit"
+          `
-                  )}
+        : null}
-                </mwc-button>
-              </ha-alert>
-            `
-          : null
-      }
       <div class="triggers">
         ${repeat(
           this.triggers,
@@ -141,8 +139,11 @@ export default class HaAutomationTrigger extends LitElement {
             </ha-automation-trigger-row>
           `
         )}
-        </div>
+        <ha-button-menu
-        <ha-button-menu @action=${this._addTrigger} .disabled=${this.disabled}>
+          @action=${this._addTrigger}
+          .disabled=${this.disabled}
+          fixed
+        >
           <ha-button
             slot="trigger"
             outlined
@@ -153,22 +154,20 @@ export default class HaAutomationTrigger extends LitElement {
           >
             <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
           </ha-button>
-          ${
+          ${this.clipboard?.trigger
-            this.clipboard?.trigger
+            ? html` <mwc-list-item .value=${PASTE_VALUE} graphic="icon">
-              ? html` <mwc-list-item .value=${PASTE_VALUE} graphic="icon">
+                ${this.hass.localize(
-                  ${this.hass.localize(
+                  "ui.panel.config.automation.editor.triggers.paste"
-                    "ui.panel.config.automation.editor.triggers.paste"
+                )}
-                  )}
+                (${this.hass.localize(
-                  (${this.hass.localize(
+                  `ui.panel.config.automation.editor.triggers.type.${this.clipboard.trigger.platform}.label`
-                    `ui.panel.config.automation.editor.triggers.type.${this.clipboard.trigger.platform}.label`
+                )})
-                  )})
+                <ha-svg-icon
-                  <ha-svg-icon
+                  slot="graphic"
-                    slot="graphic"
+                  .path=${mdiContentPaste}
-                    .path=${mdiContentPaste}
+                ></ha-svg-icon
-                  ></ha-svg-icon
+              ></mwc-list-item>`
-                ></mwc-list-item>`
+            : nothing}
-              : nothing
-          }
           ${this._processedTypes(this.hass.localize).map(
             ([opt, label, icon]) => html`
               <mwc-list-item .value=${opt} graphic="icon">

src/panels/config/entities/entity-registry-settings.ts

@@ -55,6 +55,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
   }
 
   private async _fetchHelperConfigEntry() {
+    this._helperConfigEntry = undefined;
     if (!this.entry?.config_entry_id) {
       return;
     }
@@ -68,12 +69,9 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
       );
       if (manifest.integration_type === "helper") {
         this._helperConfigEntry = configEntry;
-      } else {
-        this._helperConfigEntry = undefined;
       }
-    } catch (err) {
+      // eslint-disable-next-line no-empty
-      this._helperConfigEntry = undefined;
+    } catch (err) {}
-    }
   }
 
   protected render() {

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

@@ -415,7 +415,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                 )}
               </h1>
               ${configEntries.length === 0
-                ? html`<div class="card-content">
+                ? html`<div class="card-content no-entries">
                     ${this.hass.localize(
                       `ui.panel.config.integrations.integration_page.no_entries`
                     )}
@@ -1168,7 +1168,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         .card-header {
           padding-bottom: 0;
         }
-        .card-content {
+        .no-entries {
           padding-top: 12px;
         }
         .logo-container {
@@ -1179,12 +1179,16 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
           padding: 0;
         }
         img {
-          width: 200px;
+          max-width: 200px;
+          max-height: 100px;
         }
         ha-alert {
           display: block;
           margin-top: 4px;
         }
+        ha-alert:first-of-type {
+          margin-top: 16px;
+        }
         ha-list-item.discovered {
           --mdc-list-item-meta-size: auto;
           --mdc-list-item-meta-display: flex;

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

@@ -1,7 +1,12 @@
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import "@material/mwc-button";
 import "@material/mwc-list";
-import { mdiApplication, mdiCog, mdiDevices, mdiShape } from "@mdi/js";
+import {
+  mdiCogOutline,
+  mdiDevices,
+  mdiHandExtendedOutline,
+  mdiShapeOutline,
+} from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -78,7 +83,7 @@ export class HaIntegrationCard extends LitElement {
             href=${`/config/integrations/integration/${this.domain}`}
             slot="header-button"
           >
-            <ha-icon-button .path=${mdiCog}></ha-icon-button>
+            <ha-icon-button .path=${mdiCogOutline}></ha-icon-button>
           </a>
         </ha-integration-header>
 
@@ -103,7 +108,7 @@ export class HaIntegrationCard extends LitElement {
             >
               <ha-list-item hasMeta graphic="icon">
                 <ha-svg-icon
-                  .path=${services ? mdiApplication : mdiDevices}
+                  .path=${services ? mdiHandExtendedOutline : mdiDevices}
                   slot="graphic"
                 ></ha-svg-icon>
                 ${this.hass.localize(
@@ -122,7 +127,10 @@ export class HaIntegrationCard extends LitElement {
               href=${`/config/entities?historyBack=1&domain=${this.domain}`}
             >
               <ha-list-item hasMeta graphic="icon">
-                <ha-svg-icon .path=${mdiShape} slot="graphic"></ha-svg-icon>
+                <ha-svg-icon
+                  .path=${mdiShapeOutline}
+                  slot="graphic"
+                ></ha-svg-icon>
                 ${this.hass.localize(
                   `ui.panel.config.integrations.config_entry.entities`,
                   "count",
@@ -191,6 +199,7 @@ export class HaIntegrationCard extends LitElement {
           display: flex;
           flex-direction: column;
           height: 100%;
+          overflow: hidden;
           --state-color: var(--divider-color, #e0e0e0);
           --ha-card-border-color: var(--state-color);
           --state-message-color: var(--state-color);
@@ -219,7 +228,9 @@ export class HaIntegrationCard extends LitElement {
         }
         .content {
           flex: 1;
-          --mdc-list-side-padding: 16px;
+          --mdc-list-side-padding-right: 20px;
+          --mdc-list-side-padding-left: 24px;
+          --mdc-list-item-graphic-margin: 24px;
         }
         a {
           text-decoration: none;

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

@@ -1,13 +1,14 @@
 import "@material/mwc-button/mwc-button";
 import { mdiHelpCircle } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
 import deepClone from "deep-clone-simple";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { LocalStorage } from "../../../common/decorators/local-storage";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
-import { Action, ScriptConfig } from "../../../data/script";
 import { Clipboard } from "../../../data/automation";
+import { Action, ScriptConfig } from "../../../data/script";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
@@ -25,7 +26,8 @@ export class HaManualScriptEditor extends LitElement {
 
   @property({ attribute: false }) public config!: ScriptConfig;
 
-  @state() private _clipboard: Clipboard = {};
+  @LocalStorage("automationClipboard", true, false, window.sessionStorage)
+  private _clipboard: Clipboard = {};
 
   protected render() {
     return html`

yarn.lock

@@ -376,7 +376,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.22.0":
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.22.3"
   dependencies:
@@ -507,7 +507,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-attributes@npm:^7.22.0":
+"@babel/plugin-syntax-import-attributes@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-syntax-import-attributes@npm:7.22.3"
   dependencies:
@@ -673,7 +673,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:^7.22.0":
+"@babel/plugin-transform-async-generator-functions@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-async-generator-functions@npm:7.22.3"
   dependencies:
@@ -722,7 +722,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.22.0":
+"@babel/plugin-transform-class-properties@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-class-properties@npm:7.22.3"
   dependencies:
@@ -734,7 +734,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-static-block@npm:^7.22.0":
+"@babel/plugin-transform-class-static-block@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-class-static-block@npm:7.22.3"
   dependencies:
@@ -836,7 +836,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-export-namespace-from@npm:^7.22.0":
+"@babel/plugin-transform-export-namespace-from@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-export-namespace-from@npm:7.22.3"
   dependencies:
@@ -872,7 +872,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-json-strings@npm:^7.22.0":
+"@babel/plugin-transform-json-strings@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-json-strings@npm:7.22.3"
   dependencies:
@@ -895,7 +895,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-logical-assignment-operators@npm:^7.22.0":
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.22.3"
   dependencies:
@@ -943,7 +943,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.22.0":
+"@babel/plugin-transform-modules-systemjs@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-modules-systemjs@npm:7.22.3"
   dependencies:
@@ -969,7 +969,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.22.0":
+"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.22.3"
   dependencies:
@@ -981,7 +981,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-new-target@npm:^7.22.0":
+"@babel/plugin-transform-new-target@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-new-target@npm:7.22.3"
   dependencies:
@@ -992,7 +992,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.0":
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.22.3"
   dependencies:
@@ -1004,7 +1004,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-numeric-separator@npm:^7.22.0":
+"@babel/plugin-transform-numeric-separator@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-numeric-separator@npm:7.22.3"
   dependencies:
@@ -1016,7 +1016,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-rest-spread@npm:^7.22.0":
+"@babel/plugin-transform-object-rest-spread@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-object-rest-spread@npm:7.22.3"
   dependencies:
@@ -1043,7 +1043,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-catch-binding@npm:^7.22.0":
+"@babel/plugin-transform-optional-catch-binding@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.22.3"
   dependencies:
@@ -1055,7 +1055,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.22.0, @babel/plugin-transform-optional-chaining@npm:^7.22.3":
+"@babel/plugin-transform-optional-chaining@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.22.3"
   dependencies:
@@ -1068,7 +1068,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.22.0, @babel/plugin-transform-parameters@npm:^7.22.3":
+"@babel/plugin-transform-parameters@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-parameters@npm:7.22.3"
   dependencies:
@@ -1079,7 +1079,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-methods@npm:^7.22.0":
+"@babel/plugin-transform-private-methods@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-private-methods@npm:7.22.3"
   dependencies:
@@ -1091,7 +1091,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-property-in-object@npm:^7.22.0":
+"@babel/plugin-transform-private-property-in-object@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-private-property-in-object@npm:7.22.3"
   dependencies:
@@ -1139,19 +1139,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-runtime@npm:7.22.2":
+"@babel/plugin-transform-runtime@npm:7.22.4":
-  version: 7.22.2
+  version: 7.22.4
-  resolution: "@babel/plugin-transform-runtime@npm:7.22.2"
+  resolution: "@babel/plugin-transform-runtime@npm:7.22.4"
   dependencies:
     "@babel/helper-module-imports": ^7.21.4
     "@babel/helper-plugin-utils": ^7.21.5
-    babel-plugin-polyfill-corejs2: ^0.4.2
+    babel-plugin-polyfill-corejs2: ^0.4.3
     babel-plugin-polyfill-corejs3: ^0.8.1
     babel-plugin-polyfill-regenerator: ^0.5.0
     semver: ^6.3.0
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 1fedc30de67a921edca22505bfb31807b47634e413bb5ee42c194b6c70c32dceab9e4e4d0eaabadda7b45d975bf46cdfc8111c43c090ec8a19b1f722308ba9b1
+  checksum: e51400ffeccfc8875c6d136510aa6145e44d825ee7fb52da462401388b4303a6a274ca94fad4aa46b06870c6fdc6141dafa51f681423160d924a21212daa8792
   languageName: node
   linkType: hard
 
@@ -1236,7 +1236,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-property-regex@npm:^7.22.0":
+"@babel/plugin-transform-unicode-property-regex@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.22.3"
   dependencies:
@@ -1260,7 +1260,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-sets-regex@npm:^7.22.0":
+"@babel/plugin-transform-unicode-sets-regex@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.22.3"
   dependencies:
@@ -1272,16 +1272,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:7.22.2, @babel/preset-env@npm:^7.11.0":
+"@babel/preset-env@npm:7.22.4, @babel/preset-env@npm:^7.11.0":
-  version: 7.22.2
+  version: 7.22.4
-  resolution: "@babel/preset-env@npm:7.22.2"
+  resolution: "@babel/preset-env@npm:7.22.4"
   dependencies:
-    "@babel/compat-data": ^7.22.0
+    "@babel/compat-data": ^7.22.3
     "@babel/helper-compilation-targets": ^7.22.1
     "@babel/helper-plugin-utils": ^7.21.5
     "@babel/helper-validator-option": ^7.21.0
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.18.6
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.22.0
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.22.3
     "@babel/plugin-proposal-private-property-in-object": ^7.21.0
     "@babel/plugin-syntax-async-generators": ^7.8.4
     "@babel/plugin-syntax-class-properties": ^7.12.13
@@ -1289,7 +1289,7 @@ __metadata:
     "@babel/plugin-syntax-dynamic-import": ^7.8.3
     "@babel/plugin-syntax-export-namespace-from": ^7.8.3
     "@babel/plugin-syntax-import-assertions": ^7.20.0
-    "@babel/plugin-syntax-import-attributes": ^7.22.0
+    "@babel/plugin-syntax-import-attributes": ^7.22.3
     "@babel/plugin-syntax-import-meta": ^7.10.4
     "@babel/plugin-syntax-json-strings": ^7.8.3
     "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4
@@ -1302,12 +1302,12 @@ __metadata:
     "@babel/plugin-syntax-top-level-await": ^7.14.5
     "@babel/plugin-syntax-unicode-sets-regex": ^7.18.6
     "@babel/plugin-transform-arrow-functions": ^7.21.5
-    "@babel/plugin-transform-async-generator-functions": ^7.22.0
+    "@babel/plugin-transform-async-generator-functions": ^7.22.3
     "@babel/plugin-transform-async-to-generator": ^7.20.7
     "@babel/plugin-transform-block-scoped-functions": ^7.18.6
     "@babel/plugin-transform-block-scoping": ^7.21.0
-    "@babel/plugin-transform-class-properties": ^7.22.0
+    "@babel/plugin-transform-class-properties": ^7.22.3
-    "@babel/plugin-transform-class-static-block": ^7.22.0
+    "@babel/plugin-transform-class-static-block": ^7.22.3
     "@babel/plugin-transform-classes": ^7.21.0
     "@babel/plugin-transform-computed-properties": ^7.21.5
     "@babel/plugin-transform-destructuring": ^7.21.3
@@ -1315,28 +1315,28 @@ __metadata:
     "@babel/plugin-transform-duplicate-keys": ^7.18.9
     "@babel/plugin-transform-dynamic-import": ^7.22.1
     "@babel/plugin-transform-exponentiation-operator": ^7.18.6
-    "@babel/plugin-transform-export-namespace-from": ^7.22.0
+    "@babel/plugin-transform-export-namespace-from": ^7.22.3
     "@babel/plugin-transform-for-of": ^7.21.5
     "@babel/plugin-transform-function-name": ^7.18.9
-    "@babel/plugin-transform-json-strings": ^7.22.0
+    "@babel/plugin-transform-json-strings": ^7.22.3
     "@babel/plugin-transform-literals": ^7.18.9
-    "@babel/plugin-transform-logical-assignment-operators": ^7.22.0
+    "@babel/plugin-transform-logical-assignment-operators": ^7.22.3
     "@babel/plugin-transform-member-expression-literals": ^7.18.6
     "@babel/plugin-transform-modules-amd": ^7.20.11
     "@babel/plugin-transform-modules-commonjs": ^7.21.5
-    "@babel/plugin-transform-modules-systemjs": ^7.22.0
+    "@babel/plugin-transform-modules-systemjs": ^7.22.3
     "@babel/plugin-transform-modules-umd": ^7.18.6
-    "@babel/plugin-transform-named-capturing-groups-regex": ^7.22.0
+    "@babel/plugin-transform-named-capturing-groups-regex": ^7.22.3
-    "@babel/plugin-transform-new-target": ^7.22.0
+    "@babel/plugin-transform-new-target": ^7.22.3
-    "@babel/plugin-transform-nullish-coalescing-operator": ^7.22.0
+    "@babel/plugin-transform-nullish-coalescing-operator": ^7.22.3
-    "@babel/plugin-transform-numeric-separator": ^7.22.0
+    "@babel/plugin-transform-numeric-separator": ^7.22.3
-    "@babel/plugin-transform-object-rest-spread": ^7.22.0
+    "@babel/plugin-transform-object-rest-spread": ^7.22.3
     "@babel/plugin-transform-object-super": ^7.18.6
-    "@babel/plugin-transform-optional-catch-binding": ^7.22.0
+    "@babel/plugin-transform-optional-catch-binding": ^7.22.3
-    "@babel/plugin-transform-optional-chaining": ^7.22.0
+    "@babel/plugin-transform-optional-chaining": ^7.22.3
-    "@babel/plugin-transform-parameters": ^7.22.0
+    "@babel/plugin-transform-parameters": ^7.22.3
-    "@babel/plugin-transform-private-methods": ^7.22.0
+    "@babel/plugin-transform-private-methods": ^7.22.3
-    "@babel/plugin-transform-private-property-in-object": ^7.22.0
+    "@babel/plugin-transform-private-property-in-object": ^7.22.3
     "@babel/plugin-transform-property-literals": ^7.18.6
     "@babel/plugin-transform-regenerator": ^7.21.5
     "@babel/plugin-transform-reserved-words": ^7.18.6
@@ -1346,19 +1346,19 @@ __metadata:
     "@babel/plugin-transform-template-literals": ^7.18.9
     "@babel/plugin-transform-typeof-symbol": ^7.18.9
     "@babel/plugin-transform-unicode-escapes": ^7.21.5
-    "@babel/plugin-transform-unicode-property-regex": ^7.22.0
+    "@babel/plugin-transform-unicode-property-regex": ^7.22.3
     "@babel/plugin-transform-unicode-regex": ^7.18.6
-    "@babel/plugin-transform-unicode-sets-regex": ^7.22.0
+    "@babel/plugin-transform-unicode-sets-regex": ^7.22.3
     "@babel/preset-modules": ^0.1.5
-    "@babel/types": ^7.22.0
+    "@babel/types": ^7.22.4
-    babel-plugin-polyfill-corejs2: ^0.4.2
+    babel-plugin-polyfill-corejs2: ^0.4.3
     babel-plugin-polyfill-corejs3: ^0.8.1
     babel-plugin-polyfill-regenerator: ^0.5.0
     core-js-compat: ^3.30.2
     semver: ^6.3.0
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: bf74b935bcd59ca2274309bf82c3ee1341ab45cd83e2c8d80bca87a776202d3f719c64c2a5ccb223735b60dec03112f7a73c89ad829e168f99eadc4accf84b4b
+  checksum: 68ae8b712e7548cb0aa593019bf22ed473bd83887c621c1f820ef0af99958d48b687c01b8aee16035cbc70edae1edc703b892e6efed14b95c8435343a2cb2bda
   languageName: node
   linkType: hard
 
@@ -1437,14 +1437,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.18.6, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.5, @babel/types@npm:^7.21.0, @babel/types@npm:^7.21.4, @babel/types@npm:^7.21.5, @babel/types@npm:^7.22.0, @babel/types@npm:^7.22.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
+"@babel/types@npm:^7.18.6, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.5, @babel/types@npm:^7.21.0, @babel/types@npm:^7.21.4, @babel/types@npm:^7.21.5, @babel/types@npm:^7.22.0, @babel/types@npm:^7.22.3, @babel/types@npm:^7.22.4, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
-  version: 7.22.3
+  version: 7.22.4
-  resolution: "@babel/types@npm:7.22.3"
+  resolution: "@babel/types@npm:7.22.4"
   dependencies:
     "@babel/helper-string-parser": ^7.21.5
     "@babel/helper-validator-identifier": ^7.19.1
     to-fast-properties: ^2.0.0
-  checksum: 6111fa5990635dfba8812a84bb4889429feb41a2c03c89de2654724e88a85b5740d4795c64a480d188d2f7109e7b47f3f0ba3d56da1b697cd31c65922f4decf7
+  checksum: ffe36bb4f4a99ad13c426a98c3b508d70736036cae4e471d9c862e3a579847ed4f480686af0fce2633f6f7c0f0d3bf02da73da36e7edd3fde0b2061951dcba9a
   languageName: node
   linkType: hard
 
@@ -6049,7 +6049,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs2@npm:^0.4.2":
+"babel-plugin-polyfill-corejs2@npm:^0.4.3":
   version: 0.4.3
   resolution: "babel-plugin-polyfill-corejs2@npm:0.4.3"
   dependencies:
@@ -9609,8 +9609,8 @@ __metadata:
   dependencies:
     "@babel/core": 7.22.1
     "@babel/plugin-proposal-decorators": 7.22.3
-    "@babel/plugin-transform-runtime": 7.22.2
+    "@babel/plugin-transform-runtime": 7.22.4
-    "@babel/preset-env": 7.22.2
+    "@babel/preset-env": 7.22.4
     "@babel/preset-typescript": 7.21.5
     "@babel/runtime": 7.22.3
     "@braintree/sanitize-url": 6.0.2