Update hide sections header helper translation

Ability to hide section headers from todo card (#26949 )
Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>
2025-10-10 12:19:46 +00:00 · 2025-10-09 09:16:26 +01:00 · 2025-10-09 08:11:03 +01:00 · 2025-10-09 08:16:25 +02:00 · 2025-10-09 08:54:01 +03:00
24 changed files with 1091 additions and 312 deletions
--- a/gallery/src/pages/components/ha-dropdown.markdown
+++ b/gallery/src/pages/components/ha-dropdown.markdown
@@ -1,5 +0,0 @@
---
-title: Dropdown
---
-
-# Dropdown `<ha-dropdown>`
--- a/gallery/src/pages/components/ha-dropdown.ts
+++ b/gallery/src/pages/components/ha-dropdown.ts
@@ -1,133 +0,0 @@
-import {
-  mdiContentCopy,
-  mdiContentCut,
-  mdiContentPaste,
-  mdiDelete,
-} from "@mdi/js";
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-svg-icon";
-import "../../../../src/components/ha-dropdown-item";
-import "@home-assistant/webawesome/dist/components/icon/icon";
-import "@home-assistant/webawesome/dist/components/button/button";
-import "@home-assistant/webawesome/dist/components/dropdown/dropdown";
-import "../../../../src/components/ha-dropdown";
-import "@home-assistant/webawesome/dist/components/popup/popup";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-import "../../../../src/components/ha-icon-button";
-
-@customElement("demo-components-ha-dropdown")
-export class DemoHaDropdown extends LitElement {
-  protected render(): TemplateResult {
-    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-button in ${mode}">
-              <div class="card-content">
-                <ha-dropdown open>
-                  <ha-button slot="trigger" with-caret>Dropdown</ha-button>
-
-                  <ha-dropdown-item>
-                    <ha-svg-icon
-                      .path=${mdiContentCut}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Cut
-                  </ha-dropdown-item>
-                  <ha-dropdown-item>
-                    <ha-svg-icon
-                      .path=${mdiContentCopy}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Copy
-                  </ha-dropdown-item>
-                  <ha-dropdown-item disabled>
-                    <ha-svg-icon
-                      .path=${mdiContentPaste}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Paste
-                  </ha-dropdown-item>
-                  <ha-dropdown-item>
-                    Show images
-                    <ha-dropdown-item slot="submenu" value="show-all-images"
-                      >Show All Images</ha-dropdown-item
-                    >
-                    <ha-dropdown-item slot="submenu" value="show-thumbnails"
-                      >Show Thumbnails</ha-dropdown-item
-                    >
-                  </ha-dropdown-item>
-                  <ha-dropdown-item type="checkbox" checked
-                    >Emoji Shortcuts</ha-dropdown-item
-                  >
-                  <ha-dropdown-item type="checkbox" checked
-                    >Word Wrap</ha-dropdown-item
-                  >
-                  <ha-dropdown-item variant="danger">
-                    <ha-svg-icon .path=${mdiDelete} slot="icon"></ha-svg-icon>
-                    Delete
-                  </ha-dropdown-item>
-                </ha-dropdown>
-              </div>
-            </ha-card>
-          </div>
-        `
-      )}
-    `;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
-      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
-    }
-    .button {
-      padding: unset;
-    }
-    ha-card {
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-    }
-    .card-content div {
-      display: flex;
-      gap: 8px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-dropdown": DemoHaDropdown;
-  }
-}
--- a/gallery/src/pages/components/ha-wa-dialog.markdown
+++ b/gallery/src/pages/components/ha-wa-dialog.markdown
@@ -0,0 +1,3 @@
+---
+title: Dialog (ha-wa-dialog)
+---
--- a/gallery/src/pages/components/ha-wa-dialog.ts
+++ b/gallery/src/pages/components/ha-wa-dialog.ts
@@ -0,0 +1,523 @@
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators";
+import { mdiCog, mdiHelp } from "@mdi/js";
+import "../../../../src/components/ha-button";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-dialog-footer";
+import "../../../../src/components/ha-form/ha-form";
+import "../../../../src/components/ha-icon-button";
+import "../../../../src/components/ha-wa-dialog";
+import type { HaFormSchema } from "../../../../src/components/ha-form/types";
+
+const SCHEMA: HaFormSchema[] = [
+  { type: "string", name: "Name", default: "", autofocus: true },
+  { type: "string", name: "Email", default: "" },
+];
+
+type DialogType =
+  | false
+  | "basic"
+  | "basic-subtitle-below"
+  | "basic-subtitle-above"
+  | "form"
+  | "actions";
+
+@customElement("demo-components-ha-wa-dialog")
+export class DemoHaWaDialog extends LitElement {
+  @state() private _openDialog: DialogType = false;
+
+  protected render() {
+    return html`
+      <div class="content">
+        <h1>Dialog <code>&lt;ha-wa-dialog&gt;</code></h1>
+
+        <p class="subtitle">Dialog component built with WebAwesome.</p>
+
+        <h2>Demos</h2>
+
+        <div class="buttons">
+          <ha-button @click=${this._handleOpenDialog("basic")}
+            >Basic dialog</ha-button
+          >
+          <ha-button @click=${this._handleOpenDialog("basic-subtitle-below")}
+            >Basic dialog with subtitle below</ha-button
+          >
+          <ha-button @click=${this._handleOpenDialog("basic-subtitle-above")}
+            >Basic dialog with subtitle above</ha-button
+          >
+          <ha-button @click=${this._handleOpenDialog("form")}
+            >Dialog with form</ha-button
+          >
+          <ha-button @click=${this._handleOpenDialog("actions")}
+            >Dialog with actions</ha-button
+          >
+        </div>
+
+        <ha-wa-dialog
+          .open=${this._openDialog === "basic"}
+          header-title="Basic dialog"
+          @closed=${this._handleClosed}
+        >
+          <div>Dialog content</div>
+        </ha-wa-dialog>
+
+        <ha-wa-dialog
+          .open=${this._openDialog === "basic-subtitle-below"}
+          header-title="Basic dialog with subtitle"
+          header-subtitle="This is a basic dialog with a subtitle below"
+          @closed=${this._handleClosed}
+        >
+          <div>Dialog content</div>
+        </ha-wa-dialog>
+
+        <ha-wa-dialog
+          .open=${this._openDialog === "basic-subtitle-above"}
+          header-title="Dialog with subtitle above"
+          header-subtitle="This is a basic dialog with a subtitle above"
+          header-subtitle-position="above"
+          @closed=${this._handleClosed}
+        >
+          <div>Dialog content</div>
+        </ha-wa-dialog>
+
+        <ha-wa-dialog
+          .open=${this._openDialog === "form"}
+          header-title="Dialog with form"
+          header-subtitle="This is a dialog with a form and a footer"
+          prevent-scrim-close
+          @closed=${this._handleClosed}
+        >
+          <ha-form autofocus .schema=${SCHEMA}></ha-form>
+          <ha-dialog-footer slot="footer">
+            <ha-button
+              data-dialog="close"
+              slot="secondaryAction"
+              variant="plain"
+              >Cancel</ha-button
+            >
+            <ha-button data-dialog="close" slot="primaryAction" variant="accent"
+              >Submit</ha-button
+            >
+          </ha-dialog-footer>
+        </ha-wa-dialog>
+
+        <ha-wa-dialog
+          .open=${this._openDialog === "actions"}
+          header-title="Dialog with actions"
+          header-subtitle="This is a dialog with header actions"
+          @closed=${this._handleClosed}
+        >
+          <div slot="headerActionItems">
+            <ha-icon-button label="Settings" path=${mdiCog}></ha-icon-button>
+            <ha-icon-button label="Help" path=${mdiHelp}></ha-icon-button>
+          </div>
+
+          <div>Dialog content</div>
+        </ha-wa-dialog>
+
+        <h2>Design</h2>
+
+        <h3>Width</h3>
+
+        <p>There are multiple widths available for the dialog.</p>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>small</code></td>
+              <td><code>min(320px, var(--full-width))</code></td>
+            </tr>
+            <tr>
+              <td><code>medium</code></td>
+              <td><code>min(580px, var(--full-width))</code></td>
+            </tr>
+            <tr>
+              <td><code>large</code></td>
+              <td><code>min(720px, var(--full-width))</code></td>
+            </tr>
+            <tr>
+              <td><code>full</code></td>
+              <td><code>var(--full-width)</code></td>
+            </tr>
+          </tbody>
+        </table>
+
+        <p>
+          <code>--full-width</code> is calculated based on the available width
+          of the screen. 95vw is the maximum width of the dialog on a large
+          screen, while on a small screen it is 100vw minus the safe area
+          insets.
+        </p>
+
+        <p>Dialogs have a default width of <code>medium</code>.</p>
+
+        <h3>Prevent scrim close</h3>
+
+        <p>
+          You can prevent the dialog from being closed by clicking the
+          scrim/overlay. This is allowed by default.
+        </p>
+
+        <h3>Header</h3>
+
+        <p>The header contains a title, a subtitle and action items.</p>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Slot</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>header</code></td>
+              <td>The entire header area.</td>
+            </tr>
+            <tr>
+              <td><code>headerTitle</code></td>
+              <td>The header title text.</td>
+            </tr>
+            <tr>
+              <td><code>headerSubtitle</code></td>
+              <td>The header subtitle text.</td>
+            </tr>
+            <tr>
+              <td><code>headerActionItems</code></td>
+              <td>The header action items.</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h4>Header title</h4>
+
+        <p>The header title is a text string.</p>
+
+        <h4>Header subtitle</h4>
+
+        <p>The header subtitle is a text string.</p>
+
+        <h4>Header action items</h4>
+
+        <p>
+          The header action items usually containing icon buttons and/or menu
+          buttons.
+        </p>
+
+        <h3>Body</h3>
+
+        <p>The body is the content of the dialog.</p>
+
+        <h3>Footer</h3>
+
+        <p>The footer is the footer of the dialog.</p>
+
+        <p>
+          It is recommended to use the <code>ha-dialog-footer</code> component
+          for the footer and to style the buttons inside the footer as so:
+        </p>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Slot</th>
+              <th>Description</th>
+              <th>Variant to use</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>secondaryAction</code></td>
+              <td>The secondary action button(s).</td>
+              <td><code>plain</code></td>
+            </tr>
+            <tr>
+              <td><code>primaryAction</code></td>
+              <td>The primary action button(s).</td>
+              <td><code>accent</code></td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h2>Implementation</h2>
+
+        <h3>Example Usage</h3>
+
+        <pre><code>&lt;ha-wa-dialog
+  open
+  header-title="Dialog title"
+  header-subtitle="Dialog subtitle"
+  prevent-scrim-close
+&gt;
+  &lt;div slot="headerActionItems"&gt;
+    &lt;ha-icon-button label="Settings" path="mdiCog"&gt;&lt;/ha-icon-button&gt;
+    &lt;ha-icon-button label="Help" path="mdiHelp"&gt;&lt;/ha-icon-button&gt;
+  &lt;/div&gt;
+  &lt;div&gt;Dialog content&lt;/div&gt;
+  &lt;ha-dialog-footer slot="footer"&gt;
+    &lt;ha-button data-dialog="close" slot="secondaryAction" variant="plain"
+      &gt;Cancel&lt;/ha-button
+    &gt;
+    &lt;ha-button slot="primaryAction" variant="accent"&gt;Submit&lt;/ha-button&gt;
+  &lt;/ha-dialog-footer&gt;
+&lt;/ha-wa-dialog&gt;</code></pre>
+
+        <h3>API</h3>
+
+        <p>
+          This component is based on the webawesome dialog component. Check the
+          <a
+            href="https://webawesome.com/docs/components/dialog/"
+            target="_blank"
+            rel="noopener noreferrer"
+            >webawesome documentation</a
+          >
+          for more details.
+        </p>
+
+        <h4>Attributes</h4>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Attribute</th>
+              <th>Description</th>
+              <th>Default</th>
+              <th>Options</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>open</code></td>
+              <td>Controls the dialog open state.</td>
+              <td><code>false</code></td>
+              <td><code>false</code>, <code>true</code></td>
+            </tr>
+            <tr>
+              <td><code>width</code></td>
+              <td>Preferred dialog width preset.</td>
+              <td><code>medium</code></td>
+              <td>
+                <code>small</code>, <code>medium</code>, <code>large</code>,
+                <code>full</code>
+              </td>
+            </tr>
+            <tr>
+              <td><code>prevent-scrim-close</code></td>
+              <td>
+                Prevents closing the dialog by clicking the scrim/overlay.
+              </td>
+              <td><code>false</code></td>
+              <td><code>true</code></td>
+            </tr>
+            <tr>
+              <td><code>header-title</code></td>
+              <td>Header title text when no custom title slot is provided.</td>
+              <td></td>
+              <td></td>
+            </tr>
+            <tr>
+              <td><code>header-subtitle</code></td>
+              <td>
+                Header subtitle text when no custom subtitle slot is provided.
+              </td>
+              <td></td>
+              <td></td>
+            </tr>
+            <tr>
+              <td><code>header-subtitle-position</code></td>
+              <td>Position of the subtitle relative to the title.</td>
+              <td><code>below</code></td>
+              <td><code>above</code>, <code>below</code></td>
+            </tr>
+            <tr>
+              <td><code>flexcontent</code></td>
+              <td>
+                Makes the dialog body a flex container for flexible layouts.
+              </td>
+              <td><code>false</code></td>
+              <td><code>false</code>, <code>true</code></td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h4>CSS Custom Properties</h4>
+
+        <table>
+          <thead>
+            <tr>
+              <th>CSS Property</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>--dialog-content-padding</code></td>
+              <td>Padding for dialog content sections.</td>
+            </tr>
+            <tr>
+              <td><code>--ha-dialog-show-duration</code></td>
+              <td>Show animation duration.</td>
+            </tr>
+            <tr>
+              <td><code>--ha-dialog-hide-duration</code></td>
+              <td>Hide animation duration.</td>
+            </tr>
+            <tr>
+              <td><code>--ha-dialog-surface-background</code></td>
+              <td>Dialog background color.</td>
+            </tr>
+            <tr>
+              <td><code>--ha-dialog-border-radius</code></td>
+              <td>Border radius of the dialog surface.</td>
+            </tr>
+            <tr>
+              <td><code>--dialog-z-index</code></td>
+              <td>Z-index for the dialog.</td>
+            </tr>
+            <tr>
+              <td><code>--dialog-surface-position</code></td>
+              <td>CSS position of the dialog surface.</td>
+            </tr>
+            <tr>
+              <td><code>--dialog-surface-margin-top</code></td>
+              <td>Top margin for the dialog surface.</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h4>Events</h4>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Event</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>opened</code></td>
+              <td>Fired when the dialog is shown.</td>
+            </tr>
+            <tr>
+              <td><code>closed</code></td>
+              <td>Fired after the dialog is hidden.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+
+  private _handleOpenDialog = (dialog: DialogType) => () => {
+    this._openDialog = dialog;
+  };
+
+  private _handleClosed = () => {
+    this._openDialog = false;
+  };
+
+  static styles = [
+    css`
+      :host {
+        display: block;
+        padding: var(--ha-space-4);
+      }
+
+      .content {
+        max-width: 1000px;
+        margin: 0 auto;
+      }
+
+      h1 {
+        margin-top: 0;
+        margin-bottom: var(--ha-space-2);
+      }
+
+      h2 {
+        margin-top: var(--ha-space-6);
+        margin-bottom: var(--ha-space-3);
+      }
+
+      h3,
+      h4 {
+        margin-top: var(--ha-space-4);
+        margin-bottom: var(--ha-space-2);
+      }
+
+      p {
+        margin: var(--ha-space-2) 0;
+        line-height: 1.6;
+      }
+
+      .subtitle {
+        color: var(--secondary-text-color);
+        font-size: 1.1em;
+        margin-bottom: var(--ha-space-4);
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: var(--ha-space-3) 0;
+      }
+
+      th,
+      td {
+        text-align: left;
+        padding: var(--ha-space-2);
+        border-bottom: 1px solid var(--divider-color);
+      }
+
+      th {
+        font-weight: 500;
+      }
+
+      code {
+        background-color: var(--secondary-background-color);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 0.9em;
+      }
+
+      pre {
+        background-color: var(--secondary-background-color);
+        padding: var(--ha-space-3);
+        border-radius: 8px;
+        overflow-x: auto;
+        margin: var(--ha-space-3) 0;
+      }
+
+      pre code {
+        background-color: transparent;
+        padding: 0;
+      }
+
+      .buttons {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: var(--ha-space-2);
+        margin: var(--ha-space-4) 0;
+      }
+
+      a {
+        color: var(--primary-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-wa-dialog": DemoHaWaDialog;
+  }
+}
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
    "@fullcalendar/list": "6.1.19",
    "@fullcalendar/luxon3": "6.1.19",
    "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-beta.6.ha.2",
+    "@home-assistant/webawesome": "3.0.0-beta.6.ha.1",
    "@lezer/highlight": "1.2.1",
    "@lit-labs/motion": "1.0.9",
    "@lit-labs/observers": "2.0.6",
--- a/src/components/ha-dialog-footer.ts
+++ b/src/components/ha-dialog-footer.ts
@@ -0,0 +1,52 @@
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+
+/**
+ * Home Assistant dialog footer component
+ *
+ * @element ha-dialog-footer
+ * @extends {LitElement}
+ *
+ * @summary
+ * A simple footer container for dialog actions,
+ * typically used as the `footer` slot in `ha-wa-dialog`.
+ *
+ * @slot primaryAction - Primary action button(s), aligned to the end.
+ * @slot secondaryAction - Secondary action button(s), placed before the primary action.
+ *
+ * @remarks
+ * **Button Styling Guidance:**
+ * - `primaryAction` slot: Use `variant="accent"`
+ * - `secondaryAction` slot: Use `variant="plain"`
+ */
+@customElement("ha-dialog-footer")
+export class HaDialogFooter extends LitElement {
+  protected render() {
+    return html`
+      <footer>
+        <slot name="secondaryAction"></slot>
+        <slot name="primaryAction"></slot>
+      </footer>
+    `;
+  }
+
+  static get styles() {
+    return [
+      css`
+        footer {
+          display: flex;
+          gap: var(--ha-space-3);
+          justify-content: flex-end;
+          align-items: center;
+          width: 100%;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-dialog-footer": HaDialogFooter;
+  }
+}
--- a/src/components/ha-dialog-header.ts
+++ b/src/components/ha-dialog-header.ts
@@ -1,9 +1,20 @@
 import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, property } from "lit/decorators";

@customElement("ha-dialog-header")
 export class HaDialogHeader extends LitElement {
+  @property({ type: String, attribute: "subtitle-position" })
+  public subtitlePosition: "above" | "below" = "below";
+
  protected render() {
+    const titleSlot = html`<div class="header-title">
+      <slot name="title"></slot>
+    </div>`;
+
+    const subtitleSlot = html`<div class="header-subtitle">
+      <slot name="subtitle"></slot>
+    </div>`;
+
    return html`
      <header class="header">
        <div class="header-bar">
@@ -11,12 +22,9 @@ export class HaDialogHeader extends LitElement {
            <slot name="navigationIcon"></slot>
          </section>
          <section class="header-content">
-            <div class="header-title">
-              <slot name="title"></slot>
-            </div>
-            <div class="header-subtitle">
-              <slot name="subtitle"></slot>
-            </div>
+            ${this.subtitlePosition === "above"
+              ? html`${subtitleSlot}${titleSlot}`
+              : html`${titleSlot}${subtitleSlot}`}
          </section>
          <section class="header-action-items">
            <slot name="actionItems"></slot>
@@ -32,6 +40,7 @@ export class HaDialogHeader extends LitElement {
      css`
        :host {
          display: block;
+          min-height: 48px;
        }
        :host([show-border]) {
          border-bottom: 1px solid
@@ -40,7 +49,7 @@ export class HaDialogHeader extends LitElement {
        .header-bar {
          display: flex;
          flex-direction: row;
-          align-items: flex-start;
+          align-items: center;
          padding: 4px;
          box-sizing: border-box;
        }
@@ -53,13 +62,17 @@ export class HaDialogHeader extends LitElement {
          white-space: nowrap;
        }
        .header-title {
+          height: var(
+            --ha-dialog-header-title-height,
+            calc(var(--ha-font-size-xl) + 4px)
+          );
          font-size: var(--ha-font-size-xl);
          line-height: var(--ha-line-height-condensed);
-          font-weight: var(--ha-font-weight-normal);
+          font-weight: var(--ha-font-weight-medium);
        }
        .header-subtitle {
          font-size: var(--ha-font-size-m);
-          line-height: 20px;
+          line-height: var(--ha-line-height-normal);
          color: var(--secondary-text-color);
        }
        @media all and (min-width: 450px) and (min-height: 500px) {
--- a/src/components/ha-dropdown-item.ts
+++ b/src/components/ha-dropdown-item.ts
@@ -1,23 +0,0 @@
-import DropdownItem from "@home-assistant/webawesome/dist/components/dropdown-item/dropdown-item";
-import { css, type CSSResultGroup } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-dropdown-item")
-export class HaDropdownItem extends DropdownItem {
-  static get styles(): CSSResultGroup {
-    return [
-      DropdownItem.styles,
-      css`
-        :host {
-          min-height: 40px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dropdown-item": HaDropdownItem;
-  }
-}
--- a/src/components/ha-dropdown.ts
+++ b/src/components/ha-dropdown.ts
@@ -1,20 +0,0 @@
-import Dropdown from "@home-assistant/webawesome/dist/components/dropdown/dropdown";
-import type { CSSResultGroup } from "lit";
-import { customElement, property } from "lit/decorators";
-
-@customElement("ha-dropdown")
-export class HaDropdown extends Dropdown {
-  @property({ attribute: false }) dropdownTag = "ha-dropdown";
-
-  @property({ attribute: false }) dropdownItemTag = "ha-dropdown-item";
-
-  static get styles(): CSSResultGroup {
-    return [Dropdown.styles];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dropdown": HaDropdown;
-  }
-}
--- a/src/components/ha-form/ha-form-string.ts
+++ b/src/components/ha-form/ha-form-string.ts
@@ -61,6 +61,7 @@ export class HaFormString extends LitElement implements HaFormElement {
        .required=${this.schema.required}
        .autoValidate=${this.schema.required}
        .name=${this.schema.name}
+        .autofocus=${this.schema.autofocus}
        .autocomplete=${this.schema.autocomplete}
        .suffix=${this.isPassword
          ? // reserve some space for the icon.
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@@ -105,6 +105,11 @@ export class HaForm extends LitElement implements HaFormElement {
    }
  }

+  static shadowRootOptions: ShadowRootInit = {
+    mode: "open",
+    delegatesFocus: true,
+  };
+
  protected render(): TemplateResult {
    return html`
      <div class="root" part="root">
--- a/src/components/ha-wa-dialog.ts
+++ b/src/components/ha-wa-dialog.ts
@@ -0,0 +1,320 @@
+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 { fireEvent } from "../common/dom/fire_event";
+import { haStyleScrollbar } from "../resources/styles";
+
+export type DialogWidth = "small" | "medium" | "large" | "full";
+
+/**
+ * Home Assistant dialog component
+ *
+ * @element ha-wa-dialog
+ * @extends {LitElement}
+ *
+ * @summary
+ * A stylable dialog built using the `wa-dialog` component, providing a standardized header (ha-dialog-header),
+ * body, and footer (preferably using `ha-dialog-footer`) with slots
+ *
+ * You can open and close the dialog declaratively by using the `data-dialog="close"` attribute.
+ * @see https://webawesome.com/docs/components/dialog/#opening-and-closing-dialogs-declaratively
+ *
+ * @slot header - Replace the entire header area.
+ * @slot headerNavigationIcon - Leading header action (e.g. close/back button).
+ * @slot headerActionItems - Trailing header actions (e.g. buttons, menus).
+ * @slot - Dialog content body.
+ * @slot footer - Dialog footer content.
+ *
+ * @csspart dialog - The dialog surface.
+ * @csspart header - The header container.
+ * @csspart body - The scrollable body container.
+ * @csspart footer - The footer container.
+ *
+ * @cssprop --dialog-content-padding - Padding for the dialog content sections.
+ * @cssprop --ha-dialog-show-duration - Show animation duration.
+ * @cssprop --ha-dialog-hide-duration - Hide animation duration.
+ * @cssprop --ha-dialog-surface-background - Dialog background color.
+ * @cssprop --ha-dialog-border-radius - Border radius of the dialog surface.
+ * @cssprop --dialog-z-index - Z-index for the dialog.
+ * @cssprop --dialog-surface-position - CSS position of the dialog surface.
+ * @cssprop --dialog-surface-margin-top - Top margin for the dialog surface.
+ *
+ * @attr {boolean} open - Controls the dialog open state.
+ * @attr {("small"|"medium"|"large"|"full")} width - Preferred dialog width preset. Defaults to "medium".
+ * @attr {boolean} prevent-scrim-close - Prevents closing the dialog by clicking the scrim/overlay. Defaults to false.
+ * @attr {string} header-title - Header title text when no custom title slot is provided.
+ * @attr {string} header-subtitle - Header subtitle text when no custom subtitle slot is provided.
+ * @attr {("above"|"below")} header-subtitle-position - Position of the subtitle relative to the title. Defaults to "below".
+ * @attr {boolean} flexcontent - Makes the dialog body a flex container for flexible layouts.
+ *
+ * @event opened - Fired when the dialog is shown.
+ * @event closed - Fired after the dialog is hidden.
+ *
+ * @remarks
+ * **Focus Management:**
+ * To automatically focus an element when the dialog opens, add the `autofocus` attribute to it.
+ * Components with `delegatesFocus: true` (like `ha-form`) will forward focus to their first focusable child.
+ * Example: `<ha-form autofocus .schema=${schema}></ha-form>`
+ *
+ * @see https://github.com/home-assistant/frontend/issues/27143
+ */
+@customElement("ha-wa-dialog")
+export class HaWaDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true })
+  public open = false;
+
+  @property({ type: String, reflect: true, attribute: "width" })
+  public width: DialogWidth = "medium";
+
+  @property({ type: Boolean, reflect: true, attribute: "prevent-scrim-close" })
+  public preventScrimClose = false;
+
+  @property({ type: String, attribute: "header-title" })
+  public headerTitle = "";
+
+  @property({ type: String, attribute: "header-subtitle" })
+  public headerSubtitle = "";
+
+  @property({ type: String, attribute: "header-subtitle-position" })
+  public headerSubtitlePosition: "above" | "below" = "below";
+
+  @property({ type: Boolean, reflect: true, attribute: "flexcontent" })
+  public flexContent = false;
+
+  @state()
+  private _open = false;
+
+  protected updated(
+    changedProperties: Map<string | number | symbol, unknown>
+  ): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("open")) {
+      this._open = this.open;
+    }
+  }
+
+  protected render() {
+    return html`
+      <wa-dialog
+        .open=${this._open}
+        .lightDismiss=${!this.preventScrimClose}
+        without-header
+        @wa-show=${this._handleShow}
+        @wa-after-hide=${this._handleAfterHide}
+      >
+        <slot name="header">
+          <ha-dialog-header .subtitlePosition=${this.headerSubtitlePosition}>
+            <slot name="headerNavigationIcon" slot="navigationIcon">
+              <ha-icon-button
+                data-dialog="close"
+                .label=${this.hass?.localize("ui.common.close") ?? "Close"}
+                .path=${mdiClose}
+              ></ha-icon-button>
+            </slot>
+            ${this.headerTitle
+              ? html`<span slot="title" class="title">
+                  ${this.headerTitle}
+                </span>`
+              : nothing}
+            ${this.headerSubtitle
+              ? html`<span slot="subtitle">${this.headerSubtitle}</span>`
+              : nothing}
+            <slot name="headerActionItems" slot="actionItems"></slot>
+          </ha-dialog-header>
+        </slot>
+        <div class="body ha-scrollbar">
+          <slot></slot>
+        </div>
+        <slot name="footer" slot="footer"></slot>
+      </wa-dialog>
+    `;
+  }
+
+  private _handleShow = async () => {
+    this._open = true;
+    fireEvent(this, "opened");
+
+    await this.updateComplete;
+
+    (this.querySelector("[autofocus]") as HTMLElement | null)?.focus();
+  };
+
+  private _handleAfterHide = () => {
+    this._open = false;
+    fireEvent(this, "closed");
+  };
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._open = false;
+  }
+
+  static styles = [
+    haStyleScrollbar,
+    css`
+      wa-dialog {
+        --full-width: var(
+          --ha-dialog-width-full,
+          min(
+            95vw,
+            calc(
+              100vw - var(--safe-area-inset-left, var(--ha-space-0)) - var(
+                  --safe-area-inset-right,
+                  var(--ha-space-0)
+                )
+            )
+          )
+        );
+        --width: var(--ha-dialog-width-md, min(580px, var(--full-width)));
+        --spacing: var(--dialog-content-padding, var(--ha-space-6));
+        --show-duration: var(--ha-dialog-show-duration, 200ms);
+        --hide-duration: var(--ha-dialog-hide-duration, 200ms);
+        --ha-dialog-surface-background: var(
+          --card-background-color,
+          var(--ha-color-surface-default)
+        );
+        --wa-color-surface-raised: var(
+          --ha-dialog-surface-background,
+          var(--card-background-color, var(--ha-color-surface-default))
+        );
+        --wa-panel-border-radius: var(
+          --ha-dialog-border-radius,
+          var(--ha-border-radius-3xl)
+        );
+        max-width: var(--ha-dialog-max-width, 100vw);
+        max-width: var(--ha-dialog-max-width, 100svw);
+      }
+
+      :host([width="small"]) wa-dialog {
+        --width: var(--ha-dialog-width-sm, min(320px, var(--full-width)));
+      }
+
+      :host([width="large"]) wa-dialog {
+        --width: var(--ha-dialog-width-lg, min(720px, var(--full-width)));
+      }
+
+      :host([width="full"]) wa-dialog {
+        --width: var(--full-width);
+      }
+
+      wa-dialog::part(dialog) {
+        min-width: var(--width, var(--full-width));
+        max-width: var(--width, var(--full-width));
+        max-height: var(
+          --ha-dialog-max-height,
+          calc(100% - var(--ha-space-20))
+        );
+        position: var(--dialog-surface-position, relative);
+        margin-top: var(--dialog-surface-margin-top, auto);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        :host {
+          --ha-dialog-border-radius: var(--ha-space-0);
+        }
+
+        wa-dialog {
+          --full-width: var(--ha-dialog-width-full, 100vw);
+        }
+
+        wa-dialog::part(dialog) {
+          min-height: var(--ha-dialog-min-height, 100vh);
+          min-height: var(--ha-dialog-min-height, 100svh);
+          max-height: var(--ha-dialog-max-height, 100vh);
+          max-height: var(--ha-dialog-max-height, 100svh);
+          padding-top: var(--safe-area-inset-top, var(--ha-space-0));
+          padding-bottom: var(--safe-area-inset-bottom, var(--ha-space-0));
+          padding-left: var(--safe-area-inset-left, var(--ha-space-0));
+          padding-right: var(--safe-area-inset-right, var(--ha-space-0));
+        }
+      }
+
+      .header-title-container {
+        display: flex;
+        align-items: center;
+      }
+
+      .header-title {
+        margin: 0;
+        margin-bottom: 0;
+        color: var(
+          --ha-dialog-header-title-color,
+          var(--ha-color-on-surface-default, var(--primary-text-color))
+        );
+        font-size: var(
+          --ha-dialog-header-title-font-size,
+          var(--ha-font-size-2xl)
+        );
+        line-height: var(
+          --ha-dialog-header-title-line-height,
+          var(--ha-line-height-condensed)
+        );
+        font-weight: var(
+          --ha-dialog-header-title-font-weight,
+          var(--ha-font-weight-normal)
+        );
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-right: var(--ha-space-3);
+      }
+
+      wa-dialog::part(body) {
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        max-width: 100%;
+        overflow: hidden;
+      }
+
+      .body {
+        position: var(--dialog-content-position, relative);
+        padding: 0 var(--dialog-content-padding, var(--ha-space-6))
+          var(--dialog-content-padding, var(--ha-space-6))
+          var(--dialog-content-padding, var(--ha-space-6));
+        overflow: auto;
+        flex-grow: 1;
+      }
+      :host([flexcontent]) .body {
+        max-width: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      wa-dialog::part(footer) {
+        padding: var(--ha-space-0);
+      }
+
+      ::slotted([slot="footer"]) {
+        display: flex;
+        padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4)
+          var(--ha-space-4);
+        gap: var(--ha-space-3);
+        justify-content: flex-end;
+        align-items: center;
+        width: 100%;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-wa-dialog": HaWaDialog;
+  }
+
+  interface HASSDomEvents {
+    opened: undefined;
+    closed: undefined;
+  }
+}
--- a/src/dialogs/restart/dialog-restart.ts
+++ b/src/dialogs/restart/dialog-restart.ts
@@ -1,7 +1,6 @@
 import "@material/mwc-linear-progress/mwc-linear-progress";
 import {
  mdiAutoFix,
-  mdiClose,
  mdiLifebuoy,
  mdiPower,
  mdiPowerCycle,
@@ -9,16 +8,14 @@ import {
 } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-alert";
 import "../../components/ha-expansion-panel";
 import "../../components/ha-fade-in";
-import "../../components/ha-icon-button";
 import "../../components/ha-icon-next";
-import "../../components/ha-md-dialog";
-import type { HaMdDialog } from "../../components/ha-md-dialog";
+import "../../components/ha-wa-dialog";
 import "../../components/ha-md-list";
 import "../../components/ha-md-list-item";
 import "../../components/ha-spinner";
@@ -58,12 +55,14 @@ class DialogRestart extends LitElement {
  @state()
  private _hostInfo?: HassioHostInfo;

-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+  @state()
+  private _dialogOpen = false;

  public async showDialog(): Promise<void> {
    const isHassioLoaded = isComponentLoaded(this.hass, "hassio");

    this._open = true;
+    this._dialogOpen = true;

    if (isHassioLoaded && !this._hostInfo) {
      this._loadHostInfo();
@@ -92,16 +91,13 @@ class DialogRestart extends LitElement {
  }

  private _dialogClosed(): void {
+    this._dialogOpen = false;
    this._open = false;
    this._loadingHostInfo = false;
    this._loadingBackupInfo = false;
    fireEvent(this, "dialog-closed", { dialog: this.localName });
  }

-  public closeDialog(): void {
-    this._dialog?.close();
-  }
-
  protected render() {
    if (!this._open) {
      return nothing;
@@ -113,17 +109,13 @@ class DialogRestart extends LitElement {
    const dialogTitle = this.hass.localize("ui.dialogs.restart.heading");

    return html`
-      <ha-md-dialog open @closed=${this._dialogClosed}>
-        <ha-dialog-header slot="headline">
-          <ha-icon-button
-            slot="navigationIcon"
-            .label=${this.hass.localize("ui.common.close") ?? "Close"}
-            .path=${mdiClose}
-            @click=${this.closeDialog}
-          ></ha-icon-button>
-          <span slot="title" .title=${dialogTitle}> ${dialogTitle} </span>
-        </ha-dialog-header>
-        <div slot="content" class="content">
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._dialogOpen}
+        header-title=${dialogTitle}
+        @closed=${this._dialogClosed}
+      >
+        <div class="content">
          <div class="action-loader">
            ${this._loadingBackupInfo
              ? html`<ha-fade-in .delay=${250}>
@@ -265,12 +257,12 @@ class DialogRestart extends LitElement {
                </ha-expansion-panel>
              `}
        </div>
-      </ha-md-dialog>
+      </ha-wa-dialog>
    `;
  }

  private async _reload() {
-    this.closeDialog();
+    this._dialogOpen = false;

    showToast(this, {
      message: this.hass.localize("ui.dialogs.restart.reload.reloading"),
@@ -374,7 +366,7 @@ class DialogRestart extends LitElement {
      return;
    }

-    this.closeDialog();
+    this._dialogOpen = false;

    let actionFunc;

@@ -413,15 +405,9 @@ class DialogRestart extends LitElement {
      haStyle,
      haStyleDialog,
      css`
-        ha-md-dialog {
+        ha-wa-dialog {
          --dialog-content-padding: 0;
        }
-        @media all and (min-width: 550px) {
-          ha-md-dialog {
-            min-width: 500px;
-            max-width: 500px;
-          }
-        }

        ha-expansion-panel {
          border-top: 1px solid var(--divider-color);
--- a/src/panels/lovelace/cards/hui-button-card.ts
+++ b/src/panels/lovelace/cards/hui-button-card.ts
@@ -49,6 +49,8 @@ import type {
  LovelaceGridOptions,
 } from "../types";
 import type { ButtonCardConfig } from "./types";
+import { computeCssColor } from "../../../common/color/compute-color";
+import { stateActive } from "../../../common/entity/state_active";

 export const getEntityDefaultButtonAction = (entityId?: string) =>
  entityId && DOMAINS_TOGGLE.has(computeDomain(entityId))
@@ -122,11 +124,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
  })
  _entity?: EntityRegistryDisplayEntry;

-  private _getStateColor(stateObj: HassEntity, config: ButtonCardConfig) {
-    const domain = stateObj ? computeStateDomain(stateObj) : undefined;
-    return config && (config.state_color ?? domain === "light");
-  }
-
  public getCardSize(): number {
    return (
      (this._config?.show_icon ? 4 : 0) + (this._config?.show_name ? 1 : 0)
@@ -166,7 +163,8 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
      double_tap_action: { action: "none" },
      show_icon: true,
      show_name: true,
-      state_color: true,
+      color:
+        config.color ?? (config.state_color === false ? "none" : undefined),
      ...config,
    };
  }
@@ -189,8 +187,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
      ? this._config.name || (stateObj ? computeStateName(stateObj) : "")
      : "";

-    const colored = stateObj && this._getStateColor(stateObj, this._config);
-
    return html`
      <ha-card
        @action=${this._handleAction}
@@ -205,7 +201,10 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
          hasAction(this._config.tap_action) ? "0" : undefined
        )}
        style=${styleMap({
-          "--state-color": colored ? this._computeColor(stateObj) : undefined,
+          "--state-color":
+            this._config.color !== "none"
+              ? this._computeColor(stateObj, this._config)
+              : undefined,
        })}
      >
        <ha-ripple></ha-ripple>
@@ -221,7 +220,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
                .hass=${this.hass}
                .stateObj=${stateObj}
                style=${styleMap({
-                  filter: colored ? stateColorBrightness(stateObj) : undefined,
+                  filter: stateObj ? stateColorBrightness(stateObj) : undefined,
                  height: this._config.icon_height
                    ? this._config.icon_height
                    : undefined,
@@ -334,7 +333,20 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
    ];
  }

-  private _computeColor(stateObj: HassEntity): string | undefined {
+  private _computeColor(
+    stateObj: HassEntity | undefined,
+    config: ButtonCardConfig
+  ): string | undefined {
+    if (config.color) {
+      return !stateObj || stateActive(stateObj)
+        ? computeCssColor(config.color)
+        : undefined;
+    }
+
+    if (!stateObj) {
+      return undefined;
+    }
+
    if (stateObj.attributes.rgb_color) {
      return `rgb(${stateObj.attributes.rgb_color.join(",")})`;
    }
--- a/src/panels/lovelace/cards/hui-todo-list-card.ts
+++ b/src/panels/lovelace/cards/hui-todo-list-card.ts
@@ -331,14 +331,16 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
                : nothing}
            ${!this._reordering && uncheckedItems.length
              ? html`
-                  <div class="header" role="separator">
-                    <h2>
-                      ${this.hass!.localize(
-                        "ui.panel.lovelace.cards.todo-list.unchecked_items"
-                      )}
-                    </h2>
-                    ${this._renderMenu(this._config, unavailable)}
-                  </div>
+                  ${!this._config.hide_section_headers
+                    ? html`<div class="header">
+                        <h2>
+                          ${this.hass!.localize(
+                            "ui.panel.lovelace.cards.todo-list.unchecked_items"
+                          )}
+                        </h2>
+                        ${this._renderMenu(this._config, unavailable)}
+                      </div>`
+                    : nothing}
                  ${this._renderItems(uncheckedItems, unavailable)}
                `
              : nothing}
@@ -366,39 +368,41 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
              ? html`
                  <div>
                    <div class="divider" role="separator"></div>
-                    <div class="header">
-                      <h2>
-                        ${this.hass!.localize(
-                          "ui.panel.lovelace.cards.todo-list.checked_items"
-                        )}
-                      </h2>
-                      ${this._todoListSupportsFeature(
-                        TodoListEntityFeature.DELETE_TODO_ITEM
-                      )
-                        ? html`<ha-button-menu
-                            @closed=${stopPropagation}
-                            fixed
-                            @action=${this._handleCompletedMenuAction}
-                          >
-                            <ha-icon-button
-                              slot="trigger"
-                              .path=${mdiDotsVertical}
-                            ></ha-icon-button>
-                            <ha-list-item graphic="icon" class="warning">
-                              ${this.hass!.localize(
-                                "ui.panel.lovelace.cards.todo-list.clear_items"
-                              )}
-                              <ha-svg-icon
-                                class="warning"
-                                slot="graphic"
-                                .path=${mdiDeleteSweep}
-                                .disabled=${unavailable}
+                    ${!this._config.hide_section_headers
+                      ? html`<div class="header">
+                          <h2>
+                            ${this.hass!.localize(
+                              "ui.panel.lovelace.cards.todo-list.checked_items"
+                            )}
+                          </h2>
+                          ${this._todoListSupportsFeature(
+                            TodoListEntityFeature.DELETE_TODO_ITEM
+                          )
+                            ? html`<ha-button-menu
+                                @closed=${stopPropagation}
+                                fixed
+                                @action=${this._handleCompletedMenuAction}
                              >
-                              </ha-svg-icon>
-                            </ha-list-item>
-                          </ha-button-menu>`
-                        : nothing}
-                    </div>
+                                <ha-icon-button
+                                  slot="trigger"
+                                  .path=${mdiDotsVertical}
+                                ></ha-icon-button>
+                                <ha-list-item graphic="icon" class="warning">
+                                  ${this.hass!.localize(
+                                    "ui.panel.lovelace.cards.todo-list.clear_items"
+                                  )}
+                                  <ha-svg-icon
+                                    class="warning"
+                                    slot="graphic"
+                                    .path=${mdiDeleteSweep}
+                                    .disabled=${unavailable}
+                                  >
+                                  </ha-svg-icon>
+                                </ha-list-item>
+                              </ha-button-menu>`
+                            : nothing}
+                        </div>`
+                      : nothing}
                  </div>
                  ${this._renderItems(checkedItems, unavailable)}
                `
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -136,8 +136,10 @@ export interface ButtonCardConfig extends LovelaceCardConfig {
  tap_action?: ActionConfig;
  hold_action?: ActionConfig;
  double_tap_action?: ActionConfig;
+  /** @deprecated use `color` instead */
  state_color?: boolean;
  show_state?: boolean;
+  color?: string;
 }

 export interface EnergyCardBaseConfig extends LovelaceCardConfig {
@@ -532,6 +534,7 @@ export interface TodoListCardConfig extends LovelaceCardConfig {
  entity?: string;
  hide_completed?: boolean;
  hide_create?: boolean;
+  hide_section_headers?: boolean;
  sort?: string;
 }

--- a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
@@ -32,6 +32,8 @@ const cardConfigStruct = assign(
    double_tap_action: optional(actionConfigStruct),
    theme: optional(string()),
    show_state: optional(boolean()),
+    state_color: optional(boolean()),
+    color: optional(string()),
  })
 );

@@ -46,6 +48,19 @@ export class HuiButtonCardEditor

  public setConfig(config: ButtonCardConfig): void {
    assert(config, cardConfigStruct);
+
+    // Migrate state_color to color
+    if (config.state_color !== undefined) {
+      config = {
+        ...config,
+        color: config.state_color ? undefined : "none",
+      };
+      delete config.state_color;
+
+      fireEvent(this, "config-changed", { config: config });
+      return;
+    }
+
    this._config = config;
  }

@@ -53,11 +68,11 @@ export class HuiButtonCardEditor
    (entityId: string | undefined) =>
      [
        { name: "entity", selector: { entity: {} } },
+        { name: "name", selector: { text: {} } },
        {
          name: "",
          type: "grid",
          schema: [
-            { name: "name", selector: { text: {} } },
            {
              name: "icon",
              selector: {
@@ -67,6 +82,18 @@ export class HuiButtonCardEditor
                icon_entity: "entity",
              },
            },
+            { name: "icon_height", selector: { text: { suffix: "px" } } },
+            {
+              name: "color",
+              selector: {
+                ui_color: {
+                  default_color: "state",
+                  include_state: true,
+                  include_none: true,
+                },
+              },
+            },
+            { name: "theme", selector: { theme: {} } },
          ],
        },
        {
@@ -79,14 +106,6 @@ export class HuiButtonCardEditor
            { name: "show_icon", selector: { boolean: {} } },
          ],
        },
-        {
-          name: "",
-          type: "grid",
-          schema: [
-            { name: "icon_height", selector: { text: { suffix: "px" } } },
-            { name: "theme", selector: { theme: {} } },
-          ],
-        },
        {
          name: "interactions",
          type: "expandable",
--- a/src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts
@@ -32,6 +32,7 @@ const cardConfigStruct = assign(
    entity: optional(string()),
    hide_completed: optional(boolean()),
    hide_create: optional(boolean()),
+    hide_section_headers: optional(boolean()),
    display_order: optional(string()),
    item_tap_action: optional(string()),
  })
@@ -59,6 +60,7 @@ export class HuiTodoListEditor
        { name: "theme", selector: { theme: {} } },
        { name: "hide_completed", selector: { boolean: {} } },
        { name: "hide_create", selector: { boolean: {} } },
+        { name: "hide_section_headers", selector: { boolean: {} } },
        {
          name: "display_order",
          selector: {
@@ -131,6 +133,7 @@ export class HuiTodoListEditor
          .data=${this._data(this._config)}
          .schema=${this._schema(this.hass.localize, this._todoListSupportsFeature(TodoListEntityFeature.MOVE_TODO_ITEM))}
          .computeLabel=${this._computeLabelCallback}
+          .computeHelper=${this._computeHelperCallback}
          @value-changed=${this._valueChanged}
        ></ha-form>
      </div>
@@ -164,6 +167,7 @@ export class HuiTodoListEditor
        )})`;
      case "hide_completed":
      case "hide_create":
+      case "hide_section_headers":
      case "display_order":
      case "item_tap_action":
        return this.hass!.localize(
@@ -176,6 +180,19 @@ export class HuiTodoListEditor
    }
  };

+  private _computeHelperCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
+    switch (schema.name) {
+      case "hide_section_headers":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.todo-list.${schema.name}_helper`
+        );
+      default:
+        return undefined;
+    }
+  };
+
  static get styles(): CSSResultGroup {
    return configElementStyle;
  }
--- a/src/panels/profile/ha-refresh-tokens-card.ts
+++ b/src/panels/profile/ha-refresh-tokens-card.ts
@@ -29,8 +29,6 @@ import {
 } from "../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import "../../components/ha-dropdown-item";
-import "../../components/ha-dropdown";

 // Client ID used by iOS app
 const iOSclientId = "https://home-assistant.io/iOS";
@@ -148,18 +146,19 @@ class HaRefreshTokens extends LitElement {
                          )}
                    </div>
                    <div>
-                      <ha-dropdown>
+                      <ha-md-button-menu positioning="popover">
                        <ha-icon-button
                          slot="trigger"
                          .label=${this.hass.localize("ui.common.menu")}
                          .path=${mdiDotsVertical}
                        ></ha-icon-button>
-                        <ha-dropdown-item
+                        <ha-md-menu-item
+                          graphic="icon"
                          @click=${this._toggleTokenExpiration}
                          .token=${token}
                        >
                          <ha-svg-icon
-                            slot="icon"
+                            slot="start"
                            .path=${token.expire_at
                              ? mdiClockRemoveOutline
                              : mdiClockCheckOutline}
@@ -171,20 +170,24 @@ class HaRefreshTokens extends LitElement {
                            : this.hass.localize(
                                "ui.panel.profile.refresh_tokens.enable_token_expiration"
                              )}
-                        </ha-dropdown-item>
-                        <ha-dropdown-item
-                          variant="danger"
+                        </ha-md-menu-item>
+                        <ha-md-menu-item
+                          graphic="icon"
+                          class="warning"
                          .disabled=${token.is_current}
                          @click=${this._deleteToken}
                          .token=${token}
                        >
                          <ha-svg-icon
-                            slot="icon"
+                            class="warning"
+                            slot="start"
                            .path=${mdiDelete}
                          ></ha-svg-icon>
-                          ${this.hass.localize("ui.common.delete")}
-                        </ha-dropdown-item>
-                      </ha-dropdown>
+                          <div slot="headline">
+                            ${this.hass.localize("ui.common.delete")}
+                          </div>
+                        </ha-md-menu-item>
+                      </ha-md-button-menu>
                    </div>
                  </ha-settings-row>
                `
--- a/src/resources/theme/color/semantic.globals.ts
+++ b/src/resources/theme/color/semantic.globals.ts
@@ -152,6 +152,10 @@ export const semanticColorStyles = css`
    --ha-color-on-success-quiet: var(--ha-color-green-50);
    --ha-color-on-success-normal: var(--ha-color-green-40);
    --ha-color-on-success-loud: var(--white-color);
+
+    /* Surfaces */
+    --ha-color-surface-default: var(--ha-color-neutral-95);
+    --ha-color-on-surface-default: var(--ha-color-neutral-05);
  }
 `;

@@ -280,5 +284,9 @@ export const darkSemanticColorStyles = css`
    --ha-color-on-success-quiet: var(--ha-color-green-70);
    --ha-color-on-success-normal: var(--ha-color-green-60);
    --ha-color-on-success-loud: var(--white-color);
+
+    /* Surfaces */
+    --ha-color-surface-default: var(--ha-color-neutral-10);
+    --ha-color-on-surface-default: var(--ha-color-neutral-95);
  }
 `;
--- a/src/resources/theme/color/wa.globals.ts
+++ b/src/resources/theme/color/wa.globals.ts
@@ -52,9 +52,6 @@ export const waColorStyles = css`
    --wa-color-danger-on-normal: var(--ha-color-on-danger-normal);
    --wa-color-danger-on-quiet: var(--ha-color-on-danger-quiet);

-    --wa-color-text-normal: var(--ha-color-text-primary);
-    --wa-color-surface-raised: var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff));
-
    --wa-focus-ring-color: var(--ha-color-neutral-60);
  }
 `;
--- a/src/resources/theme/wa.globals.ts
+++ b/src/resources/theme/wa.globals.ts
@@ -16,15 +16,7 @@ export const waMainStyles = css`
    --wa-font-weight-action: var(--ha-font-weight-medium);
    --wa-transition-fast: 75ms;
    --wa-transition-easing: ease;
-    --wa-border-width-s: var(--ha-border-width-sm);
-    --wa-border-width-m: var(--ha-border-width-md);
-    --wa-border-width-l: var(--ha-border-width-lg);
-    --wa-border-radius-s: var(--ha-border-radius-sm);
-    --wa-border-radius-m: var(--ha-border-radius-md);
-    --wa-border-radius-l: var(--ha-border-radius-lg);
-
-    --wa-line-height-condensed: 1.25;
-
+    --wa-border-width-l: var(--ha-border-radius-l);
    --wa-space-xl: 32px;
  }

--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -7934,6 +7934,8 @@
              "integration_not_loaded": "This card requires the `todo` integration to be set up.",
              "hide_completed": "Hide completed items",
              "hide_create": "Hide 'Add item' field",
+              "hide_section_headers": "Hide section headers",
+              "hide_section_headers_helper": "Removes the 'Active' and 'Completed' section headers and their overflow menus.",
              "display_order": "Display order",
              "item_tap_action": "Item tap behavior",
              "actions": {
--- a/yarn.lock
+++ b/yarn.lock
@@ -1942,9 +1942,9 @@ __metadata:
  languageName: node
  linkType: hard

-"@home-assistant/webawesome@npm:3.0.0-beta.6.ha.2":
-  version: 3.0.0-beta.6.ha.2
-  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.6.ha.2"
+"@home-assistant/webawesome@npm:3.0.0-beta.6.ha.1":
+  version: 3.0.0-beta.6.ha.1
+  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.6.ha.1"
  dependencies:
    "@ctrl/tinycolor": "npm:4.1.0"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -1955,7 +1955,7 @@ __metadata:
    lit: "npm:^3.2.1"
    nanoid: "npm:^5.1.5"
    qr-creator: "npm:^1.0.0"
-  checksum: 10/781d3aecc7d11a13307c0be12ae6383774242abdf8ce283167665c1d85d2be8380a8a08cc16d80cfe89bdfbb01fa718c2e43cd095288bbc0ef2d06621b412866
+  checksum: 10/c9510e0c65b682c3868b5cbbf046f62aea30e3c5d969128d9032e0d89a8943faa4c9d78c3500446ec04cffeb0ab1939b870b60d454db657faed2aa0ac6026a3e
  languageName: node
  linkType: hard

@@ -9207,7 +9207,7 @@ __metadata:
    "@fullcalendar/list": "npm:6.1.19"
    "@fullcalendar/luxon3": "npm:6.1.19"
    "@fullcalendar/timegrid": "npm:6.1.19"
-    "@home-assistant/webawesome": "npm:3.0.0-beta.6.ha.2"
+    "@home-assistant/webawesome": "npm:3.0.0-beta.6.ha.1"
    "@lezer/highlight": "npm:1.2.1"
    "@lit-labs/motion": "npm:1.0.9"
    "@lit-labs/observers": "npm:2.0.6"
Author	SHA1	Message	Date
Aidan Timson	eb92296360	Update hide sections header helper translation	2025-10-09 09:16:26 +01:00
Aidan Timson	31ccf114a6	Ability to hide section headers from todo card (#26949 ) Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>	2025-10-09 08:11:03 +01:00
Aidan Timson	1b932ae4a2	Setup webawesome dialog and update standard dialog header design (#27020 )	2025-10-09 08:16:25 +02:00
Krzysztof Dąbrowski	0df6019b95	Support custom color configuration in button card (#27029 ) * Support custom color configuration in button card * Fix lint issue * Fix logic for light domain * Implement state_color migration	2025-10-09 08:54:01 +03:00