ha-wa-dialog show header border on scroll (#27605)

Author: wendevlin

src/components/ha-dialog-header.ts

@@ -6,6 +6,9 @@ export class HaDialogHeader extends LitElement {
   @property({ type: String, attribute: "subtitle-position" })
   public subtitlePosition: "above" | "below" = "below";
 
+  @property({ type: Boolean, reflect: true, attribute: "show-border" })
+  public showBorder = false;
+
   protected render() {
     const titleSlot = html`<div class="header-title">
       <slot name="title"></slot>

src/components/ha-wa-dialog.ts

@@ -1,12 +1,12 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
 import "@home-assistant/webawesome/dist/components/dialog/dialog";
 import { mdiClose } from "@mdi/js";
-import "./ha-dialog-header";
-import "./ha-icon-button";
-import type { HomeAssistant } from "../types";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, eventOptions, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
+import "./ha-dialog-header";
+import "./ha-icon-button";
 
 export type DialogWidth = "small" | "medium" | "large" | "full";
 
@@ -90,6 +90,9 @@ export class HaWaDialog extends LitElement {
   @state()
   private _open = false;
 
+  @state()
+  private _bodyScrolled = false;
+
   protected updated(
     changedProperties: Map<string | number | symbol, unknown>
   ): void {
@@ -110,7 +113,10 @@ export class HaWaDialog extends LitElement {
         @wa-after-hide=${this._handleAfterHide}
       >
         <slot name="header">
-          <ha-dialog-header .subtitlePosition=${this.headerSubtitlePosition}>
+          <ha-dialog-header
+            .subtitlePosition=${this.headerSubtitlePosition}
+            .showBorder=${this._bodyScrolled}
+          >
             <slot name="headerNavigationIcon" slot="navigationIcon">
               <ha-icon-button
                 data-dialog="close"
@@ -129,7 +135,7 @@ export class HaWaDialog extends LitElement {
             <slot name="headerActionItems" slot="actionItems"></slot>
           </ha-dialog-header>
         </slot>
-        <div class="body ha-scrollbar">
+        <div class="body ha-scrollbar" @scroll=${this._handleBodyScroll}>
           <slot></slot>
         </div>
         <slot name="footer" slot="footer"></slot>
@@ -156,6 +162,11 @@ export class HaWaDialog extends LitElement {
     this._open = false;
   }
 
+  @eventOptions({ passive: true })
+  private _handleBodyScroll(ev: Event) {
+    this._bodyScrolled = (ev.target as HTMLDivElement).scrollTop > 0;
+  }
+
   static styles = [
     haStyleScrollbar,
     css`