Introduce ha-dropdown

2025-10-11 04:39:44 +00:00 · 2025-10-08 17:24:10 +00:00
53 changed files with 509 additions and 1855 deletions
--- a/gallery/src/pages/components/ha-dropdown.markdown
+++ b/gallery/src/pages/components/ha-dropdown.markdown
@@ -0,0 +1,5 @@
+---
+title: Dropdown
+---
+
+# Dropdown `<ha-dropdown>`
--- a/gallery/src/pages/components/ha-dropdown.ts
+++ b/gallery/src/pages/components/ha-dropdown.ts
@@ -0,0 +1,133 @@
+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
@@ -1,3 +0,0 @@
---
-title: Dialog (ha-wa-dialog)
---
--- a/gallery/src/pages/components/ha-wa-dialog.ts
+++ b/gallery/src/pages/components/ha-wa-dialog.ts
@@ -1,523 +0,0 @@
-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.4",
+    "@home-assistant/webawesome": "3.0.0-beta.6.ha.2",
    "@lezer/highlight": "1.2.1",
    "@lit-labs/motion": "1.0.9",
    "@lit-labs/observers": "2.0.6",
@@ -217,7 +217,7 @@
    "terser-webpack-plugin": "5.3.14",
    "ts-lit-plugin": "2.0.2",
    "typescript": "5.9.3",
-    "typescript-eslint": "8.46.0",
+    "typescript-eslint": "8.45.0",
    "vite-tsconfig-paths": "5.1.4",
    "vitest": "3.2.4",
    "webpack-stats-plugin": "1.1.3",
--- a/renovate.json
+++ b/renovate.json
@@ -9,7 +9,7 @@
    ":semanticCommitsDisabled",
    "group:monorepos",
    "group:recommended",
-    "security:minimumReleaseAgeNpm"
+    "npm:unpublishSafe"
  ],
  "enabledManagers": ["npm", "nvm"],
  "postUpdateOptions": ["yarnDedupeHighest"],
--- a/src/common/util/xss.ts
+++ b/src/common/util/xss.ts
@@ -1,8 +0,0 @@
-import xss from "xss";
-
-export const filterXSS = (html: string) =>
-  xss(html, {
-    whiteList: {},
-    stripIgnoreTag: true,
-    stripIgnoreTagBody: true,
-  });
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -27,7 +27,6 @@ import type { HomeAssistant } from "../../types";
 import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
 import "../ha-icon-button";
-import { filterXSS } from "../../common/util/xss";
 import { formatTimeLabel } from "./axis-label";
 import { downSampleLineData } from "./down-sample";

@@ -812,8 +811,7 @@ export class HaChartBase extends LitElement {
          };
        }
      }
-      const name = filterXSS(String(s.name ?? s.id ?? ""));
-      return { ...s, name, data };
+      return { ...s, data };
    });
    return series as ECOption["series"];
  }
--- a/src/components/chart/ha-sankey-chart.ts
+++ b/src/components/chart/ha-sankey-chart.ts
@@ -9,7 +9,6 @@ import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type { HomeAssistant } from "../../types";
 import type { ECOption } from "../../resources/echarts";
 import { measureTextWidth } from "../../util/text";
-import { filterXSS } from "../../common/util/xss";
 import "./ha-chart-base";
 import { NODE_SIZE } from "../trace/hat-graph-const";
 import "../ha-alert";
@@ -93,12 +92,12 @@ export class HaSankeyChart extends LitElement {
      : data.value;
    if (data.id) {
      const node = this.data.nodes.find((n) => n.id === data.id);
-      return `${params.marker} ${filterXSS(node?.label ?? data.id)}<br>${value}`;
+      return `${params.marker} ${node?.label ?? data.id}<br>${value}`;
    }
    if (data.source && data.target) {
      const source = this.data.nodes.find((n) => n.id === data.source);
      const target = this.data.nodes.find((n) => n.id === data.target);
-      return `${filterXSS(source?.label ?? data.source)} → ${filterXSS(target?.label ?? data.target)}<br>${value}`;
+      return `${source?.label ?? data.source} → ${target?.label ?? data.target}<br>${value}`;
    }
    return null;
  };
--- a/src/components/ha-dialog-footer.ts
+++ b/src/components/ha-dialog-footer.ts
@@ -1,52 +0,0 @@
-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,20 +1,9 @@
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement } 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">
@@ -22,9 +11,12 @@ export class HaDialogHeader extends LitElement {
            <slot name="navigationIcon"></slot>
          </section>
          <section class="header-content">
-            ${this.subtitlePosition === "above"
-              ? html`${subtitleSlot}${titleSlot}`
-              : html`${titleSlot}${subtitleSlot}`}
+            <div class="header-title">
+              <slot name="title"></slot>
+            </div>
+            <div class="header-subtitle">
+              <slot name="subtitle"></slot>
+            </div>
          </section>
          <section class="header-action-items">
            <slot name="actionItems"></slot>
@@ -48,7 +40,7 @@ export class HaDialogHeader extends LitElement {
        .header-bar {
          display: flex;
          flex-direction: row;
-          align-items: center;
+          align-items: flex-start;
          padding: 4px;
          box-sizing: border-box;
        }
@@ -61,17 +53,13 @@ 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-medium);
+          font-weight: var(--ha-font-weight-normal);
        }
        .header-subtitle {
          font-size: var(--ha-font-size-m);
-          line-height: var(--ha-line-height-normal);
+          line-height: 20px;
          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
@@ -0,0 +1,23 @@
+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
@@ -0,0 +1,20 @@
+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,7 +61,6 @@ 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,11 +105,6 @@ 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-picture-upload.ts
+++ b/src/components/ha-picture-upload.ts
@@ -39,15 +39,6 @@ export class HaPictureUpload extends LitElement {
  @property({ type: Boolean, attribute: "select-media" }) public selectMedia =
    false;

-  // This property is set when this component is used inside a media selector.
-  // When set, it returns selected media or uploaded files as MediaSelectorValue
-  // When unset, it only allows selecting images from image-upload, and returns
-  // selected or uploaded images as a string starting with /api/...
-  @property({ type: Boolean, attribute: "full-media" }) public fullMedia =
-    false;
-
-  @property({ attribute: false }) public contentIdHelper?: string;
-
  @property({ attribute: false }) public cropOptions?: CropOptions;

  @property({ type: Boolean }) public original = false;
@@ -173,33 +164,12 @@ export class HaPictureUpload extends LitElement {
    this._uploading = true;
    try {
      const media = await createImage(this.hass, file);
-      if (this.fullMedia) {
-        const item = {
-          media_content_id: `${MEDIA_PREFIX}/${media.id}`,
-          media_content_type: media.content_type,
-          title: media.name,
-          media_class: "image" as const,
-          can_play: true,
-          can_expand: false,
-          can_search: false,
-          thumbnail: generateImageThumbnailUrl(media.id, 256),
-        } as const;
-        const navigateIds = [
-          {},
-          { media_content_type: "app", media_content_id: MEDIA_PREFIX },
-        ];
-        fireEvent(this, "media-picked", {
-          item,
-          navigateIds,
-        });
-      } else {
-        this.value = generateImageThumbnailUrl(
-          media.id,
-          this.size,
-          this.original
-        );
-        fireEvent(this, "change");
-      }
+      this.value = generateImageThumbnailUrl(
+        media.id,
+        this.size,
+        this.original
+      );
+      fireEvent(this, "change");
    } catch (err: any) {
      showAlertDialog(this, {
        text: err.toString(),
@@ -213,24 +183,15 @@ export class HaPictureUpload extends LitElement {
    showMediaBrowserDialog(this, {
      action: "pick",
      entityId: "browser",
-      accept: ["image/*"],
-      navigateIds: this.fullMedia
-        ? undefined
-        : [
-            { media_content_id: undefined, media_content_type: undefined },
-            {
-              media_content_id: MEDIA_PREFIX,
-              media_content_type: "app",
-            },
-          ],
-      minimumNavigateLevel: this.fullMedia ? undefined : 2,
-      hideContentType: true,
-      contentIdHelper: this.contentIdHelper,
+      navigateIds: [
+        { media_content_id: undefined, media_content_type: undefined },
+        {
+          media_content_id: MEDIA_PREFIX,
+          media_content_type: "app",
+        },
+      ],
+      minimumNavigateLevel: 2,
      mediaPickedCallback: async (pickedMedia: MediaPickedEvent) => {
-        if (this.fullMedia) {
-          fireEvent(this, "media-picked", pickedMedia);
-          return;
-        }
        const mediaId = getIdFromUrl(pickedMedia.item.media_content_id);
        if (mediaId) {
          if (this.crop) {
--- a/src/components/ha-resizable-bottom-sheet.ts
+++ b/src/components/ha-resizable-bottom-sheet.ts
@@ -220,7 +220,7 @@ export class HaResizableBottomSheet extends LitElement {
      min-height: var(--min-height, 30dvh);
      background-color: var(
        --ha-bottom-sheet-surface-background,
-        var(--ha-color-surface-default)
+        var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
      );
      display: flex;
      flex-direction: column;
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/src/components/ha-selector/ha-selector-media.ts
@@ -19,7 +19,6 @@ import "../ha-form/ha-form";
 import type { SchemaUnion } from "../ha-form/types";
 import { showMediaBrowserDialog } from "../media-player/show-media-browser-dialog";
 import { ensureArray } from "../../common/array/ensure-array";
-import "../ha-picture-upload";

 const MANUAL_SCHEMA = [
  { name: "media_content_id", required: false, selector: { text: {} } },
@@ -106,17 +105,6 @@ export class HaMediaSelector extends LitElement {
      (stateObj &&
        supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));

-    if (this.selector.media?.image_upload && !this.value) {
-      return html`<ha-picture-upload
-        .hass=${this.hass}
-        .value=${null}
-        .contentIdHelper=${this.selector.media?.content_id_helper}
-        select-media
-        full-media
-        @media-picked=${this._pictureUploadMediaPicked}
-      ></ha-picture-upload>`;
-    }
-
    return html`
      ${this._hasAccept ||
      (this._contextEntities && this._contextEntities.length <= 1)
@@ -154,7 +142,8 @@ export class HaMediaSelector extends LitElement {
              .computeHelper=${this._computeHelperCallback}
            ></ha-form>
          `
-        : html`<ha-card
+        : html`
+            <ha-card
              outlined
              tabindex="0"
              role="button"
@@ -214,20 +203,7 @@ export class HaMediaSelector extends LitElement {
                </div>
              </div>
            </ha-card>
-            ${this.selector.media?.clearable
-              ? html`<div>
-                  <ha-button
-                    appearance="plain"
-                    size="small"
-                    variant="danger"
-                    @click=${this._clearValue}
-                  >
-                    ${this.hass.localize(
-                      "ui.components.picture-upload.clear_picture"
-                    )}
-                  </ha-button>
-                </div>`
-              : nothing}`}
+          `}
    `;
  }

@@ -272,8 +248,6 @@ export class HaMediaSelector extends LitElement {
      accept: this.selector.media?.accept,
      defaultId: this.value?.media_content_id,
      defaultType: this.value?.media_content_type,
-      hideContentType: this.selector.media?.hide_content_type,
-      contentIdHelper: this.selector.media?.content_id_helper,
      mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
        fireEvent(this, "value-changed", {
          value: {
@@ -315,31 +289,6 @@ export class HaMediaSelector extends LitElement {
    }
  }

-  private _pictureUploadMediaPicked(ev) {
-    const pickedMedia = ev.detail as MediaPickedEvent;
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.value,
-        media_content_id: pickedMedia.item.media_content_id,
-        media_content_type: pickedMedia.item.media_content_type,
-        metadata: {
-          title: pickedMedia.item.title,
-          thumbnail: pickedMedia.item.thumbnail,
-          media_class: pickedMedia.item.media_class,
-          children_media_class: pickedMedia.item.children_media_class,
-          navigateIds: pickedMedia.navigateIds?.map((id) => ({
-            media_content_type: id.media_content_type,
-            media_content_id: id.media_content_id,
-          })),
-        },
-      },
-    });
-  }
-
-  private _clearValue() {
-    fireEvent(this, "value-changed", { value: undefined });
-  }
-
  static styles = css`
    ha-entity-picker {
      display: block;
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -857,7 +857,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          justify-content: center;
          align-items: center;
          min-width: 8px;
-          border-radius: var(--ha-border-radius-xl);
+          border-radius: var(--ha-border-radius-md);
          font-weight: var(--ha-font-weight-normal);
          line-height: normal;
          background-color: var(--accent-color);
--- a/src/components/ha-wa-dialog.ts
+++ b/src/components/ha-wa-dialog.ts
@@ -1,320 +0,0 @@
-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/components/media-player/dialog-media-player-browse.ts
+++ b/src/components/media-player/dialog-media-player-browse.ts
@@ -167,8 +167,6 @@ class DialogMediaPlayerBrowse extends LitElement {
          .accept=${this._params.accept}
          .defaultId=${this._params.defaultId}
          .defaultType=${this._params.defaultType}
-          .hideContentType=${this._params.hideContentType}
-          .contentIdHelper=${this._params.contentIdHelper}
          @close-dialog=${this.closeDialog}
          @media-picked=${this._mediaPicked}
          @media-browsed=${this._mediaBrowsed}
--- a/src/components/media-player/ha-browse-media-manual.ts
+++ b/src/components/media-player/ha-browse-media-manual.ts
@@ -19,12 +19,8 @@ class BrowseMediaManual extends LitElement {

  @property({ attribute: false }) public item!: MediaPlayerItemId;

-  @property({ attribute: false }) public hideContentType = false;
-
-  @property({ attribute: false }) public contentIdHelper?: string;
-
  private _schema = memoizeOne(
-    (hideContentType: boolean) =>
+    () =>
      [
        {
          name: "media_content_id",
@@ -33,17 +29,13 @@ class BrowseMediaManual extends LitElement {
            text: {},
          },
        },
-        ...(hideContentType
-          ? []
-          : [
-              {
-                name: "media_content_type",
-                required: false,
-                selector: {
-                  text: {},
-                },
-              },
-            ]),
+        {
+          name: "media_content_type",
+          required: false,
+          selector: {
+            text: {},
+          },
+        },
      ] as const
  );

@@ -53,7 +45,7 @@ class BrowseMediaManual extends LitElement {
        <div class="card-content">
          <ha-form
            .hass=${this.hass}
-            .schema=${this._schema(this.hideContentType)}
+            .schema=${this._schema()}
            .data=${this.item}
            .computeLabel=${this._computeLabel}
            .computeHelper=${this._computeHelper}
@@ -77,35 +69,13 @@ class BrowseMediaManual extends LitElement {

  private _computeLabel = (
    entry: SchemaUnion<ReturnType<typeof this._schema>>
-  ): string => {
-    switch (entry.name) {
-      case "media_content_id":
-      case "media_content_type":
-        return this.hass.localize(
-          `ui.components.selectors.media.${entry.name}`
-        );
-    }
-    return entry.name;
-  };
+  ): string =>
+    this.hass.localize(`ui.components.selectors.media.${entry.name}`);

  private _computeHelper = (
    entry: SchemaUnion<ReturnType<typeof this._schema>>
-  ): string => {
-    switch (entry.name) {
-      case "media_content_id":
-        return (
-          this.contentIdHelper ||
-          this.hass.localize(
-            `ui.components.selectors.media.${entry.name}_detail`
-          )
-        );
-      case "media_content_type":
-        return this.hass.localize(
-          `ui.components.selectors.media.${entry.name}_detail`
-        );
-    }
-    return "";
-  };
+  ): string =>
+    this.hass.localize(`ui.components.selectors.media.${entry.name}_detail`);

  private _mediaPicked() {
    fireEvent(this, "manual-media-picked", {
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -76,8 +76,8 @@ declare global {
 }

 export interface MediaPlayerItemId {
-  media_content_id?: string | undefined;
-  media_content_type?: string | undefined;
+  media_content_id: string | undefined;
+  media_content_type: string | undefined;
 }

 const MANUAL_ITEM: MediaPlayerItem = {
@@ -113,10 +113,6 @@ export class HaMediaPlayerBrowse extends LitElement {

  @property({ attribute: false }) public defaultType?: string;

-  @property({ attribute: false }) public hideContentType = false;
-
-  @property({ attribute: false }) public contentIdHelper?: string;
-
  // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
  @property({ type: Boolean, reflect: true }) public narrow = false;

@@ -525,8 +521,6 @@ export class HaMediaPlayerBrowse extends LitElement {
                        media_content_type: this.defaultType || "",
                      }}
                      .hass=${this.hass}
-                      .hideContentType=${this.hideContentType}
-                      .contentIdHelper=${this.contentIdHelper}
                      @manual-media-picked=${this._manualPicked}
                    ></ha-browse-media-manual>`
                  : isTTSMediaSource(currentItem.media_content_id)
--- a/src/components/media-player/show-media-browser-dialog.ts
+++ b/src/components/media-player/show-media-browser-dialog.ts
@@ -14,8 +14,6 @@ export interface MediaPlayerBrowseDialogParams {
  accept?: string[];
  defaultId?: string;
  defaultType?: string;
-  hideContentType?: boolean;
-  contentIdHelper?: string;
 }

 export const showMediaBrowserDialog = (
--- a/src/data/recorder.ts
+++ b/src/data/recorder.ts
@@ -95,9 +95,7 @@ export interface StatisticsValidationResultUnitsChanged {
  data: {
    statistic_id: string;
    state_unit: string;
-    state_unit_class: string | null;
    metadata_unit: string;
-    metadata_unit_class: string | null;
    supported_unit: string;
  };
 }
@@ -233,14 +231,12 @@ export const validateStatistics = (hass: HomeAssistant) =>
 export const updateStatisticsMetadata = (
  hass: HomeAssistant,
  statistic_id: string,
-  unit_of_measurement: string | null,
-  unit_class: string | null
+  unit_of_measurement: string | null
 ) =>
  hass.callWS<undefined>({
    type: "recorder/update_statistics_metadata",
    statistic_id,
    unit_of_measurement,
-    unit_class,
  });

 export const clearStatistics = (hass: HomeAssistant, statistic_ids: string[]) =>
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -312,10 +312,6 @@ export interface LocationSelectorValue {
 export interface MediaSelector {
  media: {
    accept?: string[];
-    image_upload?: boolean;
-    clearable?: boolean;
-    hide_content_type?: boolean;
-    content_id_helper?: string;
  } | null;
 }

--- a/src/dialogs/restart/dialog-restart.ts
+++ b/src/dialogs/restart/dialog-restart.ts
@@ -1,6 +1,7 @@
 import "@material/mwc-linear-progress/mwc-linear-progress";
 import {
  mdiAutoFix,
+  mdiClose,
  mdiLifebuoy,
  mdiPower,
  mdiPowerCycle,
@@ -8,14 +9,16 @@ import {
 } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, 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-wa-dialog";
+import "../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../components/ha-md-dialog";
 import "../../components/ha-md-list";
 import "../../components/ha-md-list-item";
 import "../../components/ha-spinner";
@@ -55,14 +58,12 @@ class DialogRestart extends LitElement {
  @state()
  private _hostInfo?: HassioHostInfo;

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

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

    this._open = true;
-    this._dialogOpen = true;

    if (isHassioLoaded && !this._hostInfo) {
      this._loadHostInfo();
@@ -91,13 +92,16 @@ 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;
@@ -109,13 +113,17 @@ class DialogRestart extends LitElement {
    const dialogTitle = this.hass.localize("ui.dialogs.restart.heading");

    return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._dialogOpen}
-        header-title=${dialogTitle}
-        @closed=${this._dialogClosed}
-      >
-        <div class="content">
+      <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">
          <div class="action-loader">
            ${this._loadingBackupInfo
              ? html`<ha-fade-in .delay=${250}>
@@ -257,12 +265,12 @@ class DialogRestart extends LitElement {
                </ha-expansion-panel>
              `}
        </div>
-      </ha-wa-dialog>
+      </ha-md-dialog>
    `;
  }

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

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

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

    let actionFunc;

@@ -405,9 +413,15 @@ class DialogRestart extends LitElement {
      haStyle,
      haStyleDialog,
      css`
-        ha-wa-dialog {
+        ha-md-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/config/automation/ha-automation-sidebar.ts
+++ b/src/panels/config/automation/ha-automation-sidebar.ts
@@ -302,8 +302,6 @@ export default class HaAutomationSidebar extends LitElement {
      --ha-bottom-sheet-border-style: solid;
      --ha-bottom-sheet-border-color: var(--primary-color);
      margin-top: var(--safe-area-inset-top);
-
-      --ha-bottom-sheet-surface-background: var(--card-background-color);
    }

    @media all and (max-width: 870px) {
--- a/src/panels/config/backup/dialogs/dialog-generate-backup.ts
+++ b/src/panels/config/backup/dialogs/dialog-generate-backup.ts
@@ -1,7 +1,7 @@
 import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
@@ -9,9 +9,9 @@ import "../../../../components/ha-button";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-icon-button-prev";
-import "../../../../components/ha-wa-dialog";
+import "../../../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 import "../../../../components/ha-md-list";
 import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-md-select";
@@ -73,13 +73,12 @@ class DialogGenerateBackup extends LitElement implements HassDialog {

  @state() private _formData?: FormData;

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

  public showDialog(_params: GenerateBackupDialogParams): void {
    this._step = STEPS[0];
    this._formData = INITIAL_DATA;
    this._params = _params;
-    this._open = true;

    this._fetchAgents();
    this._fetchBackupConfig();
@@ -89,7 +88,6 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
    if (this._params!.cancel) {
      this._params!.cancel();
    }
-    this._open = false;
    this._step = undefined;
    this._formData = undefined;
    this._agents = [];
@@ -116,7 +114,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
  }

  public closeDialog() {
-    this._open = false;
+    this._dialog?.close();
    return true;
  }

@@ -181,19 +179,15 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
    const selectedAgents = this._formData.agent_ids;

    return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        @closed=${this._dialogClosed}
-      >
-        <ha-dialog-header slot="header">
+      <ha-md-dialog open disable-cancel-action @closed=${this._dialogClosed}>
+        <ha-dialog-header slot="headline">
          ${isFirstStep
            ? html`
                <ha-icon-button
                  slot="navigationIcon"
-                  data-dialog="close"
                  .label=${this.hass.localize("ui.common.close")}
                  .path=${mdiClose}
+                  @click=${this.closeDialog}
                ></ha-icon-button>
              `
            : html`
@@ -204,17 +198,13 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
              `}
          <span slot="title" .title=${dialogTitle}> ${dialogTitle} </span>
        </ha-dialog-header>
-        <div class="content">
+        <div slot="content" class="content">
          ${this._step === "data" ? this._renderData() : this._renderSync()}
        </div>
-        <ha-dialog-footer slot="footer">
+        <div slot="actions">
          ${isFirstStep
            ? html`
-                <ha-button
-                  slot="secondaryAction"
-                  @click=${this.closeDialog}
-                  appearance="plain"
-                >
+                <ha-button @click=${this.closeDialog} appearance="plain">
                  ${this.hass.localize("ui.common.cancel")}
                </ha-button>
              `
@@ -222,7 +212,6 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
          ${isLastStep
            ? html`
                <ha-button
-                  slot="primaryAction"
                  @click=${this._submit}
                  .disabled=${this._formData.agents_mode === "custom" &&
                  !selectedAgents.length}
@@ -234,15 +223,14 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
              `
            : html`
                <ha-button
-                  slot="primaryAction"
                  @click=${this._nextStep}
                  .disabled=${this._step === "data" && this._noDataSelected}
                >
                  ${this.hass.localize("ui.common.next")}
                </ha-button>
              `}
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        </div>
+      </ha-md-dialog>
    `;
  }

@@ -448,8 +436,9 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
      haStyle,
      haStyleDialog,
      css`
-        ha-wa-dialog {
+        ha-md-dialog {
          --dialog-content-padding: 24px;
+          max-height: calc(100vh - 48px);
        }
        ha-md-list {
          background: none;
--- a/src/panels/config/storage/dialog-move-datadisk.ts
+++ b/src/panels/config/storage/dialog-move-datadisk.ts
@@ -110,7 +110,7 @@ class MoveDatadiskDialog extends LitElement {
      >
        ${this._moving
          ? html`
-              <ha-spinner aria-label="Moving" size="large"></ha-spinner>
+              <ha-spinner aria-label="Moving" size="large"> </ha-spinner>
              <p class="progress-text">
                ${this.hass.localize(
                  "ui.panel.config.storage.datadisk.moving_desc"
@@ -206,7 +206,8 @@ class MoveDatadiskDialog extends LitElement {
        }
        ha-spinner {
          display: block;
-          margin: 32px auto;
+          margin: 32px;
+          text-align: center;
        }

        .progress-text {
--- a/src/panels/developer-tools/statistics/dialog-statistics-fix-units-changed.ts
+++ b/src/panels/developer-tools/statistics/dialog-statistics-fix-units-changed.ts
@@ -139,8 +139,7 @@ export class DialogStatisticsFixUnitsChanged extends LitElement {
      await updateStatisticsMetadata(
        this.hass,
        this._params!.issue.data.statistic_id,
-        this._params!.issue.data.state_unit,
-        this._params!.issue.data.state_unit_class
+        this._params!.issue.data.state_unit
      );
    }
    this._params?.fixedCallback!();
--- a/src/panels/lovelace/cards/energy/common/energy-chart-options.ts
+++ b/src/panels/lovelace/cards/energy/common/energy-chart-options.ts
@@ -27,7 +27,6 @@ import {
 } from "../../../../../common/datetime/format_date";
 import { formatTime } from "../../../../../common/datetime/format_time";
 import type { ECOption } from "../../../../../resources/echarts";
-import { filterXSS } from "../../../../../common/util/xss";

 export function getSuggestedMax(dayDifference: number, end: Date): number {
  let suggestedMax = new Date(end);
@@ -202,7 +201,7 @@ function formatTooltip(
          countNegative++;
        }
      }
-      return `${param.marker} ${filterXSS(param.seriesName!)}: ${value} ${unit}`;
+      return `${param.marker} ${param.seriesName}: ${value} ${unit}`;
    })
    .filter(Boolean);
  let footer = "";
--- a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
@@ -6,7 +6,6 @@ import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import type { BarSeriesOption } from "echarts/charts";
 import type { ECElementEvent } from "echarts/types/dist/shared";
-import { filterXSS } from "../../../../common/util/xss";
 import { getGraphColorByIndex } from "../../../../common/color/colors";
 import { formatNumber } from "../../../../common/number/format_number";
 import "../../../../components/chart/ha-chart-base";
@@ -97,8 +96,9 @@ export class HuiEnergyDevicesGraphCard
  }

  private _renderTooltip(params: any) {
-    const deviceName = filterXSS(this._getDeviceName(params.value[1]));
-    const title = `<h4 style="text-align: center; margin: 0;">${deviceName}</h4>`;
+    const title = `<h4 style="text-align: center; margin: 0;">${this._getDeviceName(
+      params.value[1]
+    )}</h4>`;
    const value = `${formatNumber(
      params.value[0] as number,
      this.hass.locale,
--- a/src/panels/lovelace/cards/hui-button-card.ts
+++ b/src/panels/lovelace/cards/hui-button-card.ts
@@ -49,8 +49,6 @@ 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))
@@ -124,6 +122,11 @@ 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)
@@ -163,8 +166,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
      double_tap_action: { action: "none" },
      show_icon: true,
      show_name: true,
-      color:
-        config.color ?? (config.state_color === false ? "none" : undefined),
+      state_color: true,
      ...config,
    };
  }
@@ -187,6 +189,8 @@ 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}
@@ -201,10 +205,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
          hasAction(this._config.tap_action) ? "0" : undefined
        )}
        style=${styleMap({
-          "--state-color":
-            this._config.color !== "none"
-              ? this._computeColor(stateObj, this._config)
-              : undefined,
+          "--state-color": colored ? this._computeColor(stateObj) : undefined,
        })}
      >
        <ha-ripple></ha-ripple>
@@ -220,7 +221,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
                .hass=${this.hass}
                .stateObj=${stateObj}
                style=${styleMap({
-                  filter: stateObj ? stateColorBrightness(stateObj) : undefined,
+                  filter: colored ? stateColorBrightness(stateObj) : undefined,
                  height: this._config.icon_height
                    ? this._config.icon_height
                    : undefined,
@@ -333,20 +334,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
    ];
  }

-  private _computeColor(
-    stateObj: HassEntity | undefined,
-    config: ButtonCardConfig
-  ): string | undefined {
-    if (config.color) {
-      return !stateObj || stateActive(stateObj)
-        ? computeCssColor(config.color)
-        : undefined;
-    }
-
-    if (!stateObj) {
-      return undefined;
-    }
-
+  private _computeColor(stateObj: HassEntity): string | undefined {
    if (stateObj.attributes.rgb_color) {
      return `rgb(${stateObj.attributes.rgb_color.join(",")})`;
    }
--- a/src/panels/lovelace/cards/hui-picture-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-card.ts
@@ -93,21 +93,17 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
      changedProps.has("_config") &&
      changedProps.get("_config")?.image !== this._config?.image;

-    const image =
-      (typeof this._config?.image === "object" &&
-        this._config.image.media_content_id) ||
-      (this._config.image as string | undefined);
    if (
      (firstHass || imageChanged) &&
-      typeof image === "string" &&
-      isMediaSourceContentId(image)
+      typeof this._config?.image === "string" &&
+      isMediaSourceContentId(this._config.image)
    ) {
      this._resolvedImage = undefined;
-      resolveMediaSource(this.hass, image).then((result) => {
+      resolveMediaSource(this.hass, this._config?.image).then((result) => {
        this._resolvedImage = result.url;
      });
    } else if (imageChanged) {
-      this._resolvedImage = image;
+      this._resolvedImage = this._config?.image;
    }
  }

--- a/src/panels/lovelace/cards/hui-todo-list-card.ts
+++ b/src/panels/lovelace/cards/hui-todo-list-card.ts
@@ -331,16 +331,14 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
                : nothing}
            ${!this._reordering && uncheckedItems.length
              ? html`
-                  ${!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}
+                  <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._renderItems(uncheckedItems, unavailable)}
                `
              : nothing}
@@ -368,41 +366,39 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
              ? html`
                  <div>
                    <div class="divider" role="separator"></div>
-                    ${!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}
+                    <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}
                              >
-                                <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}
+                              </ha-svg-icon>
+                            </ha-list-item>
+                          </ha-button-menu>`
+                        : nothing}
+                    </div>
                  </div>
                  ${this._renderItems(checkedItems, unavailable)}
                `
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -29,7 +29,6 @@ import type {
 import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
 import type { LovelaceHeadingBadgeConfig } from "../heading-badges/types";
 import type { HomeSummary } from "../strategies/home/helpers/home-summaries";
-import type { MediaSelectorValue } from "../../../data/selector";

 export type AlarmPanelCardConfigState =
  | "arm_away"
@@ -137,10 +136,8 @@ 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 {
@@ -442,7 +439,7 @@ export interface StatisticCardConfig extends LovelaceCardConfig {
 }

 export interface PictureCardConfig extends LovelaceCardConfig {
-  image?: string | MediaSelectorValue;
+  image?: string;
  image_entity?: string;
  tap_action?: ActionConfig;
  hold_action?: ActionConfig;
@@ -535,7 +532,6 @@ export interface TodoListCardConfig extends LovelaceCardConfig {
  entity?: string;
  hide_completed?: boolean;
  hide_create?: boolean;
-  hide_section_headers?: boolean;
  sort?: string;
 }

--- a/src/panels/lovelace/create-element/create-heading-badge-element.ts
+++ b/src/panels/lovelace/create-element/create-heading-badge-element.ts
@@ -1,5 +1,4 @@
 import "../heading-badges/hui-entity-heading-badge";
-import "../heading-badges/hui-button-heading-badge";

 import {
  createLovelaceElement,
@@ -7,7 +6,7 @@ import {
 } from "./create-element-base";
 import type { LovelaceHeadingBadgeConfig } from "../heading-badges/types";

-const ALWAYS_LOADED_TYPES = new Set(["error", "entity", "button"]);
+const ALWAYS_LOADED_TYPES = new Set(["error", "entity"]);

 export const createHeadingBadgeElement = (config: LovelaceHeadingBadgeConfig) =>
  createLovelaceElement(
--- 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,8 +32,6 @@ const cardConfigStruct = assign(
    double_tap_action: optional(actionConfigStruct),
    theme: optional(string()),
    show_state: optional(boolean()),
-    state_color: optional(boolean()),
-    color: optional(string()),
  })
 );

@@ -48,19 +46,6 @@ 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;
  }

@@ -68,11 +53,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: {
@@ -82,18 +67,6 @@ 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: {} } },
          ],
        },
        {
@@ -106,6 +79,14 @@ 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-picture-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
@@ -1,8 +1,7 @@
 import { mdiGestureTap } from "@mdi/js";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, assign, object, optional, string, union } from "superstruct";
-import memoizeOne from "memoize-one";
+import { assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import "../../../../components/ha-theme-picker";
@@ -12,12 +11,11 @@ import "../../components/hui-action-editor";
 import type { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import type { LocalizeFunc } from "../../../../common/translations/localize";

 const cardConfigStruct = assign(
  baseLovelaceCardConfig,
  object({
-    image: optional(union([string(), object()])),
+    image: optional(string()),
    image_entity: optional(string()),
    tap_action: optional(actionConfigStruct),
    hold_action: optional(actionConfigStruct),
@@ -27,6 +25,47 @@ const cardConfigStruct = assign(
  })
 );

+const SCHEMA = [
+  { name: "image", selector: { image: {} } },
+  {
+    name: "image_entity",
+    selector: { entity: { domain: ["image", "person"] } },
+  },
+  { name: "alt_text", selector: { text: {} } },
+  { name: "theme", selector: { theme: {} } },
+  {
+    name: "interactions",
+    type: "expandable",
+    flatten: true,
+    iconPath: mdiGestureTap,
+    schema: [
+      {
+        name: "tap_action",
+        selector: {
+          ui_action: {
+            default_action: "more-info",
+          },
+        },
+      },
+      {
+        name: "",
+        type: "optional_actions",
+        flatten: true,
+        schema: (["hold_action", "double_tap_action"] as const).map(
+          (action) => ({
+            name: action,
+            selector: {
+              ui_action: {
+                default_action: "none" as const,
+              },
+            },
+          })
+        ),
+      },
+    ],
+  },
+] as const;
+
@customElement("hui-picture-card-editor")
 export class HuiPictureCardEditor
  extends LitElement
@@ -36,63 +75,6 @@ export class HuiPictureCardEditor

  @state() private _config?: PictureCardConfig;

-  private _schema = memoizeOne(
-    (localize: LocalizeFunc) =>
-      [
-        {
-          name: "image",
-          selector: {
-            media: {
-              accept: ["image/*"] as string[],
-              clearable: true,
-              image_upload: true,
-              hide_content_type: true,
-              content_id_helper: localize(
-                "ui.panel.lovelace.editor.card.picture.content_id_helper"
-              ),
-            },
-          },
-        },
-        {
-          name: "image_entity",
-          selector: { entity: { domain: ["image", "person"] } },
-        },
-        { name: "alt_text", selector: { text: {} } },
-        { name: "theme", selector: { theme: {} } },
-        {
-          name: "interactions",
-          type: "expandable",
-          flatten: true,
-          iconPath: mdiGestureTap,
-          schema: [
-            {
-              name: "tap_action",
-              selector: {
-                ui_action: {
-                  default_action: "more-info",
-                },
-              },
-            },
-            {
-              name: "",
-              type: "optional_actions",
-              flatten: true,
-              schema: (["hold_action", "double_tap_action"] as const).map(
-                (action) => ({
-                  name: action,
-                  selector: {
-                    ui_action: {
-                      default_action: "none" as const,
-                    },
-                  },
-                })
-              ),
-            },
-          ],
-        },
-      ] as const
-  );
-
  public setConfig(config: PictureCardConfig): void {
    assert(config, cardConfigStruct);
    this._config = config;
@@ -106,28 +88,19 @@ export class HuiPictureCardEditor
    return html`
      <ha-form
        .hass=${this.hass}
-        .data=${this._processData(this._config)}
-        .schema=${this._schema(this.hass.localize)}
+        .data=${this._config}
+        .schema=${SCHEMA}
        .computeLabel=${this._computeLabelCallback}
        @value-changed=${this._valueChanged}
      ></ha-form>
    `;
  }

-  private _processData = memoizeOne((config: PictureCardConfig) => ({
-    ...config,
-    ...(typeof config.image === "string"
-      ? { image: { media_content_id: config.image } }
-      : {}),
-  }));
-
  private _valueChanged(ev: CustomEvent): void {
    fireEvent(this, "config-changed", { config: ev.detail.value });
  }

-  private _computeLabelCallback = (
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
    switch (schema.name) {
      case "theme":
        return `${this.hass!.localize(
--- 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,7 +32,6 @@ 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()),
  })
@@ -60,7 +59,6 @@ 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: {
@@ -133,7 +131,6 @@ 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>
@@ -167,7 +164,6 @@ export class HuiTodoListEditor
        )})`;
      case "hide_completed":
      case "hide_create":
-      case "hide_section_headers":
      case "display_order":
      case "item_tap_action":
        return this.hass!.localize(
@@ -180,19 +176,6 @@ 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/lovelace/editor/heading-badge-editor/hui-button-heading-badge-editor.ts
+++ b/src/panels/lovelace/editor/heading-badge-editor/hui-button-heading-badge-editor.ts
@@ -1,238 +0,0 @@
-import { mdiEye, mdiGestureTap, mdiTextShort } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { any, array, assert, object, optional, string } from "superstruct";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-expansion-panel";
-import "../../../../components/ha-form/ha-form";
-import type {
-  HaFormSchema,
-  SchemaUnion,
-} from "../../../../components/ha-form/types";
-import type { HomeAssistant } from "../../../../types";
-import type { Condition } from "../../common/validate-condition";
-import type { UiAction } from "../../components/hui-action-editor";
-import type { ButtonHeadingBadgeConfig } from "../../heading-badges/types";
-import type { LovelaceGenericElementEditor } from "../../types";
-import "../conditions/ha-card-conditions-editor";
-import { configElementStyle } from "../config-elements/config-elements-style";
-import { actionConfigStruct } from "../structs/action-struct";
-
-export const DEFAULT_CONFIG: Partial<ButtonHeadingBadgeConfig> = {
-  type: "button",
-};
-
-const entityConfigStruct = object({
-  type: optional(string()),
-  text: optional(string()),
-  icon: optional(string()),
-  tap_action: optional(actionConfigStruct),
-  hold_action: optional(actionConfigStruct),
-  double_tap_action: optional(actionConfigStruct),
-  visibility: optional(array(any())),
-});
-
-const ALLOWED_ACTIONS: UiAction[] = [
-  "navigate",
-  "url",
-  "assist",
-  "call-service",
-  "none",
-];
-
-@customElement("hui-heading-button-editor")
-export class HuiHeadingButtonEditor
-  extends LitElement
-  implements LovelaceGenericElementEditor
-{
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @property({ type: Boolean }) public preview = false;
-
-  @state() private _config?: ButtonHeadingBadgeConfig;
-
-  public setConfig(config: ButtonHeadingBadgeConfig): void {
-    assert(config, entityConfigStruct);
-    this._config = {
-      ...DEFAULT_CONFIG,
-      ...config,
-    };
-  }
-
-  private _schema = memoizeOne(
-    () =>
-      [
-        {
-          name: "content",
-          type: "expandable",
-          flatten: true,
-          iconPath: mdiTextShort,
-          schema: [
-            {
-              name: "",
-              type: "grid",
-              schema: [
-                {
-                  name: "text",
-                  selector: {
-                    text: {},
-                  },
-                },
-                {
-                  name: "icon",
-                  selector: { icon: {} },
-                  context: { icon_entity: "entity" },
-                },
-              ],
-            },
-          ],
-        },
-        {
-          name: "interactions",
-          type: "expandable",
-          flatten: true,
-          iconPath: mdiGestureTap,
-          schema: [
-            {
-              name: "tap_action",
-              selector: {
-                ui_action: {
-                  default_action: "none",
-                  actions: ALLOWED_ACTIONS,
-                },
-              },
-            },
-            {
-              name: "",
-              type: "optional_actions",
-              flatten: true,
-              schema: (["hold_action", "double_tap_action"] as const).map(
-                (action) => ({
-                  name: action,
-                  selector: {
-                    ui_action: {
-                      default_action: "none" as const,
-                      actions: ALLOWED_ACTIONS,
-                    },
-                  },
-                })
-              ),
-            },
-          ],
-        },
-      ] as const satisfies readonly HaFormSchema[]
-  );
-
-  protected render() {
-    if (!this.hass || !this._config) {
-      return nothing;
-    }
-
-    const schema = this._schema();
-
-    const conditions = this._config.visibility ?? [];
-    return html`
-      <ha-form
-        .hass=${this.hass}
-        .data=${this._config}
-        .schema=${schema}
-        .computeLabel=${this._computeLabelCallback}
-        @value-changed=${this._valueChanged}
-      ></ha-form>
-      <ha-expansion-panel outlined>
-        <ha-svg-icon slot="leading-icon" .path=${mdiEye}></ha-svg-icon>
-        <h3 slot="header">
-          ${this.hass!.localize(
-            "ui.panel.lovelace.editor.card.heading.entity_config.visibility"
-          )}
-        </h3>
-        <div class="content">
-          <p class="intro">
-            ${this.hass.localize(
-              "ui.panel.lovelace.editor.card.heading.entity_config.visibility_explanation"
-            )}
-          </p>
-          <ha-card-conditions-editor
-            .hass=${this.hass}
-            .conditions=${conditions}
-            @value-changed=${this._conditionChanged}
-          >
-          </ha-card-conditions-editor>
-        </div>
-      </ha-expansion-panel>
-    `;
-  }
-
-  private _valueChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    if (!this._config || !this.hass) {
-      return;
-    }
-
-    const config = { ...ev.detail.value } as FormData;
-
-    fireEvent(this, "config-changed", { config });
-  }
-
-  private _conditionChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    if (!this._config || !this.hass) {
-      return;
-    }
-
-    const conditions = ev.detail.value as Condition[];
-
-    const newConfig: ButtonHeadingBadgeConfig = {
-      ...this._config,
-      visibility: conditions,
-    };
-    if (newConfig.visibility?.length === 0) {
-      delete newConfig.visibility;
-    }
-
-    fireEvent(this, "config-changed", { config: newConfig });
-  }
-
-  private _computeLabelCallback = (
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
-    switch (schema.name) {
-      case "text":
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.heading.button_config.${schema.name}`
-        );
-      default:
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.generic.${schema.name}`
-        );
-    }
-  };
-
-  static get styles() {
-    return [
-      configElementStyle,
-      css`
-        .container {
-          display: flex;
-          flex-direction: column;
-        }
-        ha-form {
-          display: block;
-          margin-bottom: 24px;
-        }
-        .intro {
-          margin: 0;
-          color: var(--secondary-text-color);
-          margin-bottom: 8px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-heading-button-editor": HuiHeadingButtonEditor;
-  }
-}
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -4,8 +4,8 @@ import { property, query, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { handleStructError } from "../../../common/structs/handle-errors";
 import { debounce } from "../../../common/util/debounce";
+import { handleStructError } from "../../../common/structs/handle-errors";
 import { deepEqual } from "../../../common/util/deep-equal";
 import "../../../components/ha-alert";
 import "../../../components/ha-spinner";
@@ -57,6 +57,8 @@ export abstract class HuiElementEditor<

  @property({ attribute: false }) public context?: C;

+  @property({ attribute: false }) public schema?;
+
  @state() private _config?: T;

  @state() private _configElement?: LovelaceGenericElementEditor;
@@ -312,6 +314,9 @@ export abstract class HuiElementEditor<
    if (this._configElement && changedProperties.has("context")) {
      this._configElement.context = this.context;
    }
+    if (this._configElement && changedProperties.has("schema")) {
+      this._configElement.schema = this.schema;
+    }
  }

  private _handleUIConfigChanged(ev: UIConfigChangedEvent<T>) {
@@ -399,6 +404,7 @@ export abstract class HuiElementEditor<
        configElement.lovelace = this.lovelace;
      }
      configElement.context = this.context;
+      configElement.schema = this.schema;
      configElement.addEventListener("config-changed", (ev) =>
        this._handleUIConfigChanged(ev as UIConfigChangedEvent<T>)
      );
--- a/src/panels/lovelace/editor/hui-form-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-form-element-editor.ts
@@ -1,19 +0,0 @@
-import { customElement, property } from "lit/decorators";
-import type { HaFormSchema } from "../../../components/ha-form/types";
-import type { LovelaceConfigForm } from "../types";
-import { HuiElementEditor } from "./hui-element-editor";
-
-@customElement("hui-form-element-editor")
-export class HuiFormElementEditor extends HuiElementEditor {
-  @property({ attribute: false }) public schema!: HaFormSchema[];
-
-  protected async getConfigForm(): Promise<LovelaceConfigForm | undefined> {
-    return { schema: this.schema };
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-form-element-editor": HuiFormElementEditor;
-  }
-}
--- a/src/panels/lovelace/editor/hui-sub-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts
@@ -12,7 +12,6 @@ import "./feature-editor/hui-card-feature-element-editor";
 import "./header-footer-editor/hui-header-footer-element-editor";
 import "./heading-badge-editor/hui-heading-badge-element-editor";
 import type { HuiElementEditor } from "./hui-element-editor";
-import "./hui-form-element-editor";
 import "./picture-element-editor/hui-picture-element-element-editor";
 import type { GUIModeChangedEvent, SubElementEditorConfig } from "./types";

@@ -84,18 +83,6 @@ export class HuiSubElementEditor extends LitElement {
  private _renderEditor() {
    const type = this.config.type;

-    if (this.schema) {
-      return html`
-        <hui-form-element-editor
-          class="editor"
-          .hass=${this.hass}
-          .value=${this.config.elementConfig}
-          .schema=${this.schema}
-          .context=${this.config.context}
-          @config-changed=${this._handleConfigChanged}
-        ></hui-form-element-editor>
-      `;
-    }
    switch (type) {
      case "row":
        return html`
@@ -104,6 +91,7 @@ export class HuiSubElementEditor extends LitElement {
            .hass=${this.hass}
            .value=${this.config.elementConfig}
            .context=${this.config.context}
+            .schema=${this.schema}
            @config-changed=${this._handleConfigChanged}
            @GUImode-changed=${this._handleGUIModeChanged}
          ></hui-row-element-editor>
--- a/src/panels/lovelace/heading-badges/hui-button-heading-badge.ts
+++ b/src/panels/lovelace/heading-badges/hui-button-heading-badge.ts
@@ -1,96 +0,0 @@
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import "../../../components/ha-state-icon";
-import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
-import "../../../state-display/state-display";
-import type { HomeAssistant } from "../../../types";
-import { actionHandler } from "../common/directives/action-handler-directive";
-import { handleAction } from "../common/handle-action";
-import { hasAction } from "../common/has-action";
-import { DEFAULT_CONFIG } from "../editor/heading-badge-editor/hui-entity-heading-badge-editor";
-import type {
-  LovelaceHeadingBadge,
-  LovelaceHeadingBadgeEditor,
-} from "../types";
-import type { ButtonHeadingBadgeConfig } from "./types";
-
-const DEFAULT_ACTIONS: Pick<
-  ButtonHeadingBadgeConfig,
-  "tap_action" | "hold_action" | "double_tap_action"
-> = {
-  tap_action: { action: "none" },
-  hold_action: { action: "none" },
-  double_tap_action: { action: "none" },
-};
-
-@customElement("hui-button-heading-badge")
-export class HuiButtonHeadingBadge
-  extends LitElement
-  implements LovelaceHeadingBadge
-{
-  public static async getConfigElement(): Promise<LovelaceHeadingBadgeEditor> {
-    await import(
-      "../editor/heading-badge-editor/hui-button-heading-badge-editor"
-    );
-    return document.createElement("hui-heading-button-editor");
-  }
-
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @state() private _config?: ButtonHeadingBadgeConfig;
-
-  @property({ type: Boolean }) public preview = false;
-
-  public setConfig(config): void {
-    this._config = {
-      ...DEFAULT_CONFIG,
-      ...DEFAULT_ACTIONS,
-      ...config,
-    };
-  }
-
-  get hasAction() {
-    return (
-      hasAction(this._config?.tap_action) ||
-      hasAction(this._config?.hold_action) ||
-      hasAction(this._config?.double_tap_action)
-    );
-  }
-
-  private _handleAction(ev: ActionHandlerEvent) {
-    handleAction(this, this.hass!, this._config!, ev.detail.action!);
-  }
-
-  protected render() {
-    if (!this.hass || !this._config) {
-      return nothing;
-    }
-
-    const config = this._config;
-
-    return html`
-      <ha-button
-        @action=${this._handleAction}
-        .actionHandler=${actionHandler({
-          hasHold: hasAction(this._config!.hold_action),
-          hasDoubleClick: hasAction(this._config!.double_tap_action),
-        })}
-      >
-        <ha-icon .icon=${config.icon}></ha-icon>
-        ${this._config.text}
-      </ha-button>
-    `;
-  }
-
-  static styles = css`
-    [role="button"] {
-      cursor: pointer;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-button-heading-badge": HuiButtonHeadingBadge;
-  }
-}
--- a/src/panels/lovelace/heading-badges/types.ts
+++ b/src/panels/lovelace/heading-badges/types.ts
@@ -26,12 +26,3 @@ export interface EntityHeadingBadgeConfig extends LovelaceHeadingBadgeConfig {
  hold_action?: ActionConfig;
  double_tap_action?: ActionConfig;
 }
-
-export interface ButtonHeadingBadgeConfig extends LovelaceHeadingBadgeConfig {
-  type?: "button";
-  icon: string;
-  text?: string;
-  tap_action: ActionConfig;
-  hold_action?: ActionConfig;
-  double_tap_action?: ActionConfig;
-}
--- a/src/panels/profile/ha-refresh-tokens-card.ts
+++ b/src/panels/profile/ha-refresh-tokens-card.ts
@@ -29,6 +29,8 @@ 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";
@@ -146,19 +148,18 @@ class HaRefreshTokens extends LitElement {
                          )}
                    </div>
                    <div>
-                      <ha-md-button-menu positioning="popover">
+                      <ha-dropdown>
                        <ha-icon-button
                          slot="trigger"
                          .label=${this.hass.localize("ui.common.menu")}
                          .path=${mdiDotsVertical}
                        ></ha-icon-button>
-                        <ha-md-menu-item
-                          graphic="icon"
+                        <ha-dropdown-item
                          @click=${this._toggleTokenExpiration}
                          .token=${token}
                        >
                          <ha-svg-icon
-                            slot="start"
+                            slot="icon"
                            .path=${token.expire_at
                              ? mdiClockRemoveOutline
                              : mdiClockCheckOutline}
@@ -170,24 +171,20 @@ class HaRefreshTokens extends LitElement {
                            : this.hass.localize(
                                "ui.panel.profile.refresh_tokens.enable_token_expiration"
                              )}
-                        </ha-md-menu-item>
-                        <ha-md-menu-item
-                          graphic="icon"
-                          class="warning"
+                        </ha-dropdown-item>
+                        <ha-dropdown-item
+                          variant="danger"
                          .disabled=${token.is_current}
                          @click=${this._deleteToken}
                          .token=${token}
                        >
                          <ha-svg-icon
-                            class="warning"
-                            slot="start"
+                            slot="icon"
                            .path=${mdiDelete}
                          ></ha-svg-icon>
-                          <div slot="headline">
-                            ${this.hass.localize("ui.common.delete")}
-                          </div>
-                        </ha-md-menu-item>
-                      </ha-md-button-menu>
+                          ${this.hass.localize("ui.common.delete")}
+                        </ha-dropdown-item>
+                      </ha-dropdown>
                    </div>
                  </ha-settings-row>
                `
--- a/src/resources/theme/color/semantic.globals.ts
+++ b/src/resources/theme/color/semantic.globals.ts
@@ -152,10 +152,6 @@ 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);
  }
 `;

@@ -284,9 +280,5 @@ 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,6 +52,9 @@ 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,7 +16,15 @@ export const waMainStyles = css`
    --wa-font-weight-action: var(--ha-font-weight-medium);
    --wa-transition-fast: 75ms;
    --wa-transition-easing: ease;
-    --wa-border-width-l: var(--ha-border-radius-l);
+    --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-space-xl: 32px;
  }

--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -7766,9 +7766,6 @@
                  "state": "[%key:ui::panel::lovelace::editor::badge::entity::displayed_elements_options::state%]"
                }
              },
-              "button_config": {
-                "text": "Text"
-              },
              "default_heading": "Kitchen"
            },
            "map": {
@@ -7883,8 +7880,7 @@
            },
            "picture": {
              "name": "Picture",
-              "description": "The Picture card allows you to set an image to use for navigation to various paths in your interface or to perform an action.",
-              "content_id_helper": "Enter a media_source id or a URL for the image to be displayed."
+              "description": "The Picture card allows you to set an image to use for navigation to various paths in your interface or to perform an action."
            },
            "picture-elements": {
              "name": "Picture elements",
@@ -7938,8 +7934,6 @@
              "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' sections with the 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.4":
-  version: 3.0.0-beta.6.ha.4
-  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.6.ha.4"
+"@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"
  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/d9072b321126ef458468ed2cf040e0b04cb2aff73336c6e742c0cfb25d9fb674b7672e7c9abcf5bcb0aa0b2fe953c20186f0910f485024c827bfe4cf399f10a4
+  checksum: 10/781d3aecc7d11a13307c0be12ae6383774242abdf8ce283167665c1d85d2be8380a8a08cc16d80cfe89bdfbb01fa718c2e43cd095288bbc0ef2d06621b412866
  languageName: node
  linkType: hard

@@ -4945,106 +4945,106 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/eslint-plugin@npm:8.46.0":
-  version: 8.46.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:8.46.0"
+"@typescript-eslint/eslint-plugin@npm:8.45.0":
+  version: 8.45.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.45.0"
  dependencies:
    "@eslint-community/regexpp": "npm:^4.10.0"
-    "@typescript-eslint/scope-manager": "npm:8.46.0"
-    "@typescript-eslint/type-utils": "npm:8.46.0"
-    "@typescript-eslint/utils": "npm:8.46.0"
-    "@typescript-eslint/visitor-keys": "npm:8.46.0"
+    "@typescript-eslint/scope-manager": "npm:8.45.0"
+    "@typescript-eslint/type-utils": "npm:8.45.0"
+    "@typescript-eslint/utils": "npm:8.45.0"
+    "@typescript-eslint/visitor-keys": "npm:8.45.0"
    graphemer: "npm:^1.4.0"
    ignore: "npm:^7.0.0"
    natural-compare: "npm:^1.4.0"
    ts-api-utils: "npm:^2.1.0"
  peerDependencies:
-    "@typescript-eslint/parser": ^8.46.0
+    "@typescript-eslint/parser": ^8.45.0
    eslint: ^8.57.0 || ^9.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/415afd894a5fec9cfe2c327c8b26377045979cc6bdf720aeecb32af335b9e6865c70fa6a355dd16f52a36dc38f50755df3eb1466d5822c53c80465ff824c9881
+  checksum: 10/6d31dbd3354028b4a010af0ea2614a171b11616e6f20d36d74529b8888681ae8d15e1269122b8a8d5fae117bdd66dac4a38cfc99dc2a0ee33bd22c10075f63e4
  languageName: node
  linkType: hard

-"@typescript-eslint/parser@npm:8.46.0":
-  version: 8.46.0
-  resolution: "@typescript-eslint/parser@npm:8.46.0"
+"@typescript-eslint/parser@npm:8.45.0":
+  version: 8.45.0
+  resolution: "@typescript-eslint/parser@npm:8.45.0"
  dependencies:
-    "@typescript-eslint/scope-manager": "npm:8.46.0"
-    "@typescript-eslint/types": "npm:8.46.0"
-    "@typescript-eslint/typescript-estree": "npm:8.46.0"
-    "@typescript-eslint/visitor-keys": "npm:8.46.0"
+    "@typescript-eslint/scope-manager": "npm:8.45.0"
+    "@typescript-eslint/types": "npm:8.45.0"
+    "@typescript-eslint/typescript-estree": "npm:8.45.0"
+    "@typescript-eslint/visitor-keys": "npm:8.45.0"
    debug: "npm:^4.3.4"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/6838fde776fd2b2932b259a20cc89b517e0c94a2cfa363a5e8531095c23fb35d8f803196f6594026d0510bf2a8ec003c67181bb2c407904685a64c97602da65f
+  checksum: 10/4f8b7c73ae3b53c2adc4e981ac2ca90839a118947635481b45d29423d39b7b73cde2b185ad1084c9e19c3239444bf1be81f40b861176eec4540cb46848731991
  languageName: node
  linkType: hard

-"@typescript-eslint/project-service@npm:8.46.0":
-  version: 8.46.0
-  resolution: "@typescript-eslint/project-service@npm:8.46.0"
+"@typescript-eslint/project-service@npm:8.45.0":
+  version: 8.45.0
+  resolution: "@typescript-eslint/project-service@npm:8.45.0"
  dependencies:
-    "@typescript-eslint/tsconfig-utils": "npm:^8.46.0"
-    "@typescript-eslint/types": "npm:^8.46.0"
+    "@typescript-eslint/tsconfig-utils": "npm:^8.45.0"
+    "@typescript-eslint/types": "npm:^8.45.0"
    debug: "npm:^4.3.4"
  peerDependencies:
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/de11af23ae6b82769b667e8d6e81d47ce039c7817465b99c1e29c8fbcac58af898bebe70368a274cd7b3c7232354134d53ceba0415b8d7e18317037bc4a4a2f7
+  checksum: 10/919c8260dae79eaec79de84a5ae66fbb09c2ab7aca8c3b7785cb011582a2864c8091e64c84013b05bce812e522fbc4a5ae1c68f86404e078fc84da0fe80247ce
  languageName: node
  linkType: hard

-"@typescript-eslint/scope-manager@npm:8.46.0":
-  version: 8.46.0
-  resolution: "@typescript-eslint/scope-manager@npm:8.46.0"
+"@typescript-eslint/scope-manager@npm:8.45.0":
+  version: 8.45.0
+  resolution: "@typescript-eslint/scope-manager@npm:8.45.0"
  dependencies:
-    "@typescript-eslint/types": "npm:8.46.0"
-    "@typescript-eslint/visitor-keys": "npm:8.46.0"
-  checksum: 10/ed85abd08c0edf088b1b11757c658acf593cf84051bddde651304a609d3a6cd9e331149e88653676606a565c3f92c191d4af049f540f6e3bb692a4f38305fd71
+    "@typescript-eslint/types": "npm:8.45.0"
+    "@typescript-eslint/visitor-keys": "npm:8.45.0"
+  checksum: 10/e45d63a0109eca00f6b431d87e73eacfa03b1795905f123e9144bcacb5abb83888167d1849317c6f90ba1f3553196b2eab13e5e7cdd1050d7a84eaadb65ba801
  languageName: node
  linkType: hard

-"@typescript-eslint/tsconfig-utils@npm:8.46.0, @typescript-eslint/tsconfig-utils@npm:^8.46.0":
-  version: 8.46.0
-  resolution: "@typescript-eslint/tsconfig-utils@npm:8.46.0"
+"@typescript-eslint/tsconfig-utils@npm:8.45.0, @typescript-eslint/tsconfig-utils@npm:^8.45.0":
+  version: 8.45.0
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.45.0"
  peerDependencies:
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/e78a66a854322423aca835070c5ee9489975c4d80d2f8ffe9cf4d6e3f67a1646ddc05b086f7156599c90ad521670ca572a4315f2b49a5922c33d6e49723558e4
+  checksum: 10/91696bbc34758749d3647236986bf418bacdc0de0e27c2d39cd7c2408c404c35ed18c47c2a55aea0bb9525cc7eb656586359c4e651144603f3438ce93fe80081
  languageName: node
  linkType: hard

-"@typescript-eslint/type-utils@npm:8.46.0":
-  version: 8.46.0
-  resolution: "@typescript-eslint/type-utils@npm:8.46.0"
+"@typescript-eslint/type-utils@npm:8.45.0":
+  version: 8.45.0
+  resolution: "@typescript-eslint/type-utils@npm:8.45.0"
  dependencies:
-    "@typescript-eslint/types": "npm:8.46.0"
-    "@typescript-eslint/typescript-estree": "npm:8.46.0"
-    "@typescript-eslint/utils": "npm:8.46.0"
+    "@typescript-eslint/types": "npm:8.45.0"
+    "@typescript-eslint/typescript-estree": "npm:8.45.0"
+    "@typescript-eslint/utils": "npm:8.45.0"
    debug: "npm:^4.3.4"
    ts-api-utils: "npm:^2.1.0"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/5405b71b91d02ed4eac1028fc156c053953403b9f48393d92340b15a8b05bee5bf1281324c6283ac31a0e03cc1a19baf94768cb3fd70b4621f8c07a4243837db
+  checksum: 10/81017b3f4780a65a4e4268ab208f1cb8891c1ced9ade23d8eb4575b18aeb99fe59a0d0ddbb4eea9c086567a1b4515d3466e850d4c81ec0d2d88658c43877a6cf
  languageName: node
  linkType: hard

-"@typescript-eslint/types@npm:8.46.0, @typescript-eslint/types@npm:^8.46.0":
-  version: 8.46.0
-  resolution: "@typescript-eslint/types@npm:8.46.0"
-  checksum: 10/0118b0dd592bf4beaf41e8c6be812980dd0adea44d48c90d8b0272777b58d4cfd6326b8bc363efa3c640be476a6bf3632aee2d97052d5e34071e6576b9c28264
+"@typescript-eslint/types@npm:8.45.0, @typescript-eslint/types@npm:^8.45.0":
+  version: 8.45.0
+  resolution: "@typescript-eslint/types@npm:8.45.0"
+  checksum: 10/889ded2b9bf376c876611b2a37f89051fdc8ec501314a4b97832caefa4305bffc4b752548941ce2e7f9659a81336d096d439d4c2ed236c99fefdf60b715593dd
  languageName: node
  linkType: hard

-"@typescript-eslint/typescript-estree@npm:8.46.0":
-  version: 8.46.0
-  resolution: "@typescript-eslint/typescript-estree@npm:8.46.0"
+"@typescript-eslint/typescript-estree@npm:8.45.0":
+  version: 8.45.0
+  resolution: "@typescript-eslint/typescript-estree@npm:8.45.0"
  dependencies:
-    "@typescript-eslint/project-service": "npm:8.46.0"
-    "@typescript-eslint/tsconfig-utils": "npm:8.46.0"
-    "@typescript-eslint/types": "npm:8.46.0"
-    "@typescript-eslint/visitor-keys": "npm:8.46.0"
+    "@typescript-eslint/project-service": "npm:8.45.0"
+    "@typescript-eslint/tsconfig-utils": "npm:8.45.0"
+    "@typescript-eslint/types": "npm:8.45.0"
+    "@typescript-eslint/visitor-keys": "npm:8.45.0"
    debug: "npm:^4.3.4"
    fast-glob: "npm:^3.3.2"
    is-glob: "npm:^4.0.3"
@@ -5053,32 +5053,32 @@ __metadata:
    ts-api-utils: "npm:^2.1.0"
  peerDependencies:
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/61053bd0c35a1fe5c82aef00cb70dbe0878ab28e55550cc1e2d6e7d4a0520c81947eb7505227c85a742a93db905d7e7376aed7d958dc257507b9bdda1daf0b00
+  checksum: 10/2fb4e63ad6128afbada8eabaabfe7d5a8f1a1f387bb13d7d3209103493ba974b518bf47b17e9a853beba10ec81efd5582ebf628c2eb77a924cf67d4d85466e5e
  languageName: node
  linkType: hard

-"@typescript-eslint/utils@npm:8.46.0":
-  version: 8.46.0
-  resolution: "@typescript-eslint/utils@npm:8.46.0"
+"@typescript-eslint/utils@npm:8.45.0":
+  version: 8.45.0
+  resolution: "@typescript-eslint/utils@npm:8.45.0"
  dependencies:
    "@eslint-community/eslint-utils": "npm:^4.7.0"
-    "@typescript-eslint/scope-manager": "npm:8.46.0"
-    "@typescript-eslint/types": "npm:8.46.0"
-    "@typescript-eslint/typescript-estree": "npm:8.46.0"
+    "@typescript-eslint/scope-manager": "npm:8.45.0"
+    "@typescript-eslint/types": "npm:8.45.0"
+    "@typescript-eslint/typescript-estree": "npm:8.45.0"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/4e0da60de389799afdd36249fd4bcf9e085a4d6f119e241e436a701b45cdf10becc3f1e3cdef29ebbf147a81f40d9a4800d428cb4a66799d3e4aa80b879c9ee2
+  checksum: 10/9e675a0da4434bd434901f9ba3e1e91d4d7ad542d7fcf8c23534a67f2f9039a569da20929e67a6562e3a263be226ad424cd0c1ac80f7828f4285f7f34e361926
  languageName: node
  linkType: hard

-"@typescript-eslint/visitor-keys@npm:8.46.0":
-  version: 8.46.0
-  resolution: "@typescript-eslint/visitor-keys@npm:8.46.0"
+"@typescript-eslint/visitor-keys@npm:8.45.0":
+  version: 8.45.0
+  resolution: "@typescript-eslint/visitor-keys@npm:8.45.0"
  dependencies:
-    "@typescript-eslint/types": "npm:8.46.0"
+    "@typescript-eslint/types": "npm:8.45.0"
    eslint-visitor-keys: "npm:^4.2.1"
-  checksum: 10/37e6145b6a5e960c59777d7fc86f722ff696e76c627106ac4577b945ca35744a5f96525d77bde50fe8c328503e9392e21e3adb7cf9899ae0efc054d63f4c3916
+  checksum: 10/8ae7e19c69c1f67fa8f952c18a09ad42a8cba492545d6e1dca6750e760893773f69ec6b1a96d0997e833c82aecc5ff7fb9546c5abd6c4427d91206670cf8ff37
  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.4"
+    "@home-assistant/webawesome": "npm:3.0.0-beta.6.ha.2"
    "@lezer/highlight": "npm:1.2.1"
    "@lit-labs/motion": "npm:1.0.9"
    "@lit-labs/observers": "npm:2.0.6"
@@ -9354,7 +9354,7 @@ __metadata:
    tinykeys: "npm:3.0.0"
    ts-lit-plugin: "npm:2.0.2"
    typescript: "npm:5.9.3"
-    typescript-eslint: "npm:8.46.0"
+    typescript-eslint: "npm:8.45.0"
    ua-parser-js: "npm:2.0.5"
    vite-tsconfig-paths: "npm:5.1.4"
    vitest: "npm:3.2.4"
@@ -14317,18 +14317,18 @@ __metadata:
  languageName: node
  linkType: hard

-"typescript-eslint@npm:8.46.0":
-  version: 8.46.0
-  resolution: "typescript-eslint@npm:8.46.0"
+"typescript-eslint@npm:8.45.0":
+  version: 8.45.0
+  resolution: "typescript-eslint@npm:8.45.0"
  dependencies:
-    "@typescript-eslint/eslint-plugin": "npm:8.46.0"
-    "@typescript-eslint/parser": "npm:8.46.0"
-    "@typescript-eslint/typescript-estree": "npm:8.46.0"
-    "@typescript-eslint/utils": "npm:8.46.0"
+    "@typescript-eslint/eslint-plugin": "npm:8.45.0"
+    "@typescript-eslint/parser": "npm:8.45.0"
+    "@typescript-eslint/typescript-estree": "npm:8.45.0"
+    "@typescript-eslint/utils": "npm:8.45.0"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/fd74aab1d21d661299a64107236b5c3515d6d955eb1764b56c5c9505b8cef5f2600e8290d251f1379138333573df94a1fe1fd7fef23952b5ab9f12ff2b774f92
+  checksum: 10/1c17ebb5bcbea418c8f372d71b5c2df8c9b8c6897d1bda8196ea17bac8fabeffe1814bc4f7a28d40f404fb811c97fcda0d69c4375b4f010d9bf44d19d8401706
  languageName: node
  linkType: hard