Display label inside field for entity picker and area picker

gallery/src/pages/components/ha-dropdown.markdown

@@ -1,55 +0,0 @@
----
-title: Dropdown
----
-
-# Dropdown `<ha-dropdown>`
-
-## Implementation
-
-A compact, accessible dropdown menu for choosing actions or settings. `ha-dropdown` supports composed menu items (`<ha-dropdown-item>`) for icons, submenus, checkboxes, disabled entries, and destructive variants. Use composition with `slot="trigger"` to control the trigger button and use `<ha-dropdown-item>` for rich item content.
-
-### Example usage (composition)
-
-```html
-<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>
-```
-
-### API
-
-This component is based on the webawesome dropdown component.
-Check the [webawesome documentation](https://webawesome.com/docs/components/dropdown/) for more details.

gallery/src/pages/components/ha-dropdown.ts

@@ -1,133 +0,0 @@
-import {
-  mdiContentCopy,
-  mdiContentCut,
-  mdiContentPaste,
-  mdiDelete,
-} from "@mdi/js";
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-svg-icon";
-import "../../../../src/components/ha-dropdown-item";
-import "@home-assistant/webawesome/dist/components/icon/icon";
-import "@home-assistant/webawesome/dist/components/button/button";
-import "@home-assistant/webawesome/dist/components/dropdown/dropdown";
-import "../../../../src/components/ha-dropdown";
-import "@home-assistant/webawesome/dist/components/popup/popup";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-import "../../../../src/components/ha-icon-button";
-
-@customElement("demo-components-ha-dropdown")
-export class DemoHaDropdown extends LitElement {
-  protected render(): TemplateResult {
-    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-button in ${mode}">
-              <div class="card-content">
-                <ha-dropdown open>
-                  <ha-button slot="trigger" with-caret>Dropdown</ha-button>
-
-                  <ha-dropdown-item>
-                    <ha-svg-icon
-                      .path=${mdiContentCut}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Cut
-                  </ha-dropdown-item>
-                  <ha-dropdown-item>
-                    <ha-svg-icon
-                      .path=${mdiContentCopy}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Copy
-                  </ha-dropdown-item>
-                  <ha-dropdown-item disabled>
-                    <ha-svg-icon
-                      .path=${mdiContentPaste}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Paste
-                  </ha-dropdown-item>
-                  <ha-dropdown-item>
-                    Show images
-                    <ha-dropdown-item slot="submenu" value="show-all-images"
-                      >Show All Images</ha-dropdown-item
-                    >
-                    <ha-dropdown-item slot="submenu" value="show-thumbnails"
-                      >Show Thumbnails</ha-dropdown-item
-                    >
-                  </ha-dropdown-item>
-                  <ha-dropdown-item type="checkbox" checked
-                    >Emoji Shortcuts</ha-dropdown-item
-                  >
-                  <ha-dropdown-item type="checkbox" checked
-                    >Word Wrap</ha-dropdown-item
-                  >
-                  <ha-dropdown-item variant="danger">
-                    <ha-svg-icon .path=${mdiDelete} slot="icon"></ha-svg-icon>
-                    Delete
-                  </ha-dropdown-item>
-                </ha-dropdown>
-              </div>
-            </ha-card>
-          </div>
-        `
-      )}
-    `;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
-      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
-    }
-    .button {
-      padding: unset;
-    }
-    ha-card {
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-    }
-    .card-content div {
-      display: flex;
-      gap: 8px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-dropdown": DemoHaDropdown;
-  }
-}

package.json

@@ -178,7 +178,7 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.0.6",
+    "@vitest/coverage-v8": "4.0.5",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
@@ -219,7 +219,7 @@
     "typescript": "5.9.3",
     "typescript-eslint": "8.46.2",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.6",
+    "vitest": "4.0.5",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"

src/components/chart/ha-chart-base.ts

@@ -652,13 +652,6 @@ export class HaChartBase extends LitElement {
           textBorderWidth: 2,
         },
       },
-      pie: {
-        label: {
-          color: style.getPropertyValue("--primary-text-color"),
-          textBorderColor: style.getPropertyValue("--primary-background-color"),
-          textBorderWidth: 2,
-        },
-      },
       sankey: {
         label: {
           color: style.getPropertyValue("--primary-text-color"),

src/components/chart/state-history-chart-line.ts

@@ -87,8 +87,6 @@ export class StateHistoryChartLine extends LitElement {
 
   private _previousYAxisLabelValue = 0;
 
-  private _yAxisMaximumFractionDigits = 0;
-
   protected render() {
     return html`
       <ha-chart-base
@@ -759,12 +757,8 @@ export class StateHistoryChartLine extends LitElement {
         Math.log10(Math.abs(value - this._previousYAxisLabelValue || 1))
       )
     );
-    this._yAxisMaximumFractionDigits = Math.max(
-      this._yAxisMaximumFractionDigits,
-      maximumFractionDigits
-    );
     const label = formatNumber(value, this.hass.locale, {
-      maximumFractionDigits: this._yAxisMaximumFractionDigits,
+      maximumFractionDigits,
     });
     const width = measureTextWidth(label, 12) + 5;
     if (width > this._yWidth) {

src/components/ha-area-picker.ts

@@ -357,7 +357,11 @@ export class HaAreaPicker extends LitElement {
 
   protected render(): TemplateResult {
     const placeholder =
-      this.placeholder ?? this.hass.localize("ui.components.area-picker.area");
+      this.placeholder ??
+      this.hass.localize("ui.components.area-picker.placeholder");
+    const notFoundLabel = this.hass.localize(
+      "ui.components.area-picker.no_match"
+    );
 
     const valueRenderer = this._computeValueRenderer(this.hass.areas);
 
@@ -367,9 +371,7 @@ export class HaAreaPicker extends LitElement {
         .autofocus=${this.autofocus}
         .label=${this.label}
         .helper=${this.helper}
-        .notFoundLabel=${this.hass.localize(
-          "ui.components.area-picker.no_match"
-        )}
+        .notFoundLabel=${notFoundLabel}
         .placeholder=${placeholder}
         .value=${this.value}
         .getItems=${this._getItems}

src/components/ha-dropdown-item.ts

@@ -1,33 +0,0 @@
-import DropdownItem from "@home-assistant/webawesome/dist/components/dropdown-item/dropdown-item";
-import { css, type CSSResultGroup } from "lit";
-import { customElement } from "lit/decorators";
-
-/**
- * Home Assistant dropdown item component
- *
- * @element ha-dropdown-item
- * @extends {DropdownItem}
- *
- * @summary
- * A stylable dropdown item component supporting Home Assistant theming, variants, and appearances based on webawesome dropdown item.
- *
- */
-@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;
-  }
-}

src/components/ha-dropdown.ts

@@ -1,45 +0,0 @@
-import Dropdown from "@home-assistant/webawesome/dist/components/dropdown/dropdown";
-import { css, type CSSResultGroup } from "lit";
-import { customElement, property } from "lit/decorators";
-
-/**
- * Home Assistant dropdown component
- *
- * @element ha-dropdown
- * @extends {Dropdown}
- *
- * @summary
- * A stylable dropdown component supporting Home Assistant theming, variants, and appearances based on webawesome dropdown.
- *
- */
-@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,
-      css`
-        :host {
-          --wa-color-surface-border: var(--ha-color-border-normal);
-          --wa-color-surface-raised: var(
-            --card-background-color,
-            var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
-          );
-        }
-
-        #menu {
-          --wa-shadow-m: 0px 4px 8px 0px var(--ha-color-shadow);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dropdown": HaDropdown;
-  }
-}

src/components/ha-generic-picker.ts

@@ -3,7 +3,6 @@ import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiPlaylistPlus } from "@mdi/js";
 import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
 import { tinykeys } from "tinykeys";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant } from "../types";
@@ -107,9 +106,6 @@ export class HaGenericPicker extends LitElement {
 
   protected render() {
     return html`
-      ${this.label
-        ? html`<label ?disabled=${this.disabled}>${this.label}</label>`
-        : nothing}
       <div class="container">
         <div id="picker">
           <slot name="field">
@@ -130,7 +126,7 @@ export class HaGenericPicker extends LitElement {
                   type="button"
                   class=${this._opened ? "opened" : ""}
                   compact
-                  aria-label=${ifDefined(this.label)}
+                  .label=${this.label}
                   @click=${this.open}
                   @clear=${this._clear}
                   .placeholder=${this.placeholder}

src/components/ha-picker-field.ts

@@ -8,6 +8,7 @@ import {
   type TemplateResult,
 } from "lit";
 import { customElement, property, query } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-combo-box-item";
 import type { HaComboBoxItem } from "./ha-combo-box-item";
@@ -33,6 +34,8 @@ export class HaPickerField extends LitElement {
 
   @property() public placeholder?: string;
 
+  @property() public label?: string;
+
   @property({ attribute: "hide-clear-icon", type: Boolean })
   public hideClearIcon = false;
 
@@ -51,15 +54,35 @@ export class HaPickerField extends LitElement {
       !!this.value && !this.required && !this.disabled && !this.hideClearIcon;
 
     return html`
-      <ha-combo-box-item .disabled=${this.disabled} type="button" compact>
+      <ha-combo-box-item
+        .disabled=${this.disabled}
+        type="button"
+        compact
+        aria-label=${ifDefined(this.label)}
+      >
         ${this.value
           ? this.valueRenderer
             ? this.valueRenderer(this.value)
-            : html`<slot name="headline">${this.value}</slot>`
+            : html`<span slot="headline">${this.value}</span>`
           : html`
-              <span slot="headline" class="placeholder">
-                ${this.placeholder}
-              </span>
+              ${this.label
+                ? html`
+                    <span
+                      slot="headline"
+                      class="label ${this.placeholder
+                        ? "with-placeholder"
+                        : ""}"
+                      >${this.label}</span
+                    >
+                  `
+                : nothing}
+              ${this.placeholder
+                ? html`
+                    <span slot="headline" class="placeholder">
+                      ${this.placeholder}
+                    </span>
+                  `
+                : nothing}
             `}
         ${showClearIcon
           ? html`
@@ -152,9 +175,24 @@ export class HaPickerField extends LitElement {
           width: 32px;
         }
 
+        .label {
+          padding: 0 8px;
+          color: var(--secondary-text-color);
+          line-height: var(--ha-line-height-normal);
+          font-size: var(--ha-font-size-m);
+          white-space: nowrap;
+        }
+
+        .label.with-placeholder {
+          line-height: var(--ha-line-height-condensed);
+          font-size: var(--ha-font-size-xs);
+        }
+
         .placeholder {
           color: var(--secondary-text-color);
           padding: 0 8px;
+          line-height: var(--ha-line-height-normal);
+          font-size: var(--ha-font-size-m);
         }
       `,
     ];

src/data/error_log.ts

@@ -1,5 +1,3 @@
-import { isComponentLoaded } from "../common/config/is_component_loaded";
-import { atLeastVersion } from "../common/config/version";
 import type { HomeAssistant } from "../types";
 
 export interface LogProvider {
@@ -10,8 +8,4 @@ export interface LogProvider {
 export const fetchErrorLog = (hass: HomeAssistant) =>
   hass.callApi<string>("GET", "error_log");
 
-export const getErrorLogDownloadUrl = (hass: HomeAssistant) =>
-  isComponentLoaded(hass, "hassio") &&
-  atLeastVersion(hass.config.version, 2025, 10)
-    ? "/api/hassio/core/logs/latest"
-    : "/api/error_log";
+export const getErrorLogDownloadUrl = "/api/error_log";

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

@@ -1137,11 +1137,11 @@ class DialogAddAutomationElement
         }
         .groups .selected {
           background-color: var(--ha-color-fill-primary-normal-active);
-          --md-list-item-label-text-color: var(--ha-color-on-primary-normal);
-          --icon-primary-color: var(--ha-color-on-primary-normal);
+          --md-list-item-label-text-color: var(--primary-color);
+          --icon-primary-color: var(--primary-color);
         }
         .groups .selected ha-svg-icon {
-          color: var(--ha-color-on-primary-normal);
+          color: var(--primary-color);
         }
 
         .collection-title {

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

@@ -1,3 +1,4 @@
+import { consume } from "@lit/context";
 import {
   mdiAppleKeyboardCommand,
   mdiContentCopy,
@@ -13,6 +14,7 @@ import {
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { keyed } from "lit/directives/keyed";
+import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
@@ -20,7 +22,16 @@ import "../../../../components/ha-md-divider";
 import "../../../../components/ha-md-menu-item";
 import { ACTION_BUILDING_BLOCKS } from "../../../../data/action";
 import type { ActionSidebarConfig } from "../../../../data/automation";
+import {
+  floorsContext,
+  fullEntitiesContext,
+  labelsContext,
+} from "../../../../data/context";
+import type { EntityRegistryEntry } from "../../../../data/entity_registry";
+import type { FloorRegistryEntry } from "../../../../data/floor_registry";
+import type { LabelRegistryEntry } from "../../../../data/label_registry";
 import type { RepeatAction } from "../../../../data/script";
+import { describeAction } from "../../../../data/script_i18n";
 import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
@@ -49,6 +60,18 @@ export default class HaAutomationSidebarAction extends LitElement {
 
   @state() private _warnings?: string[];
 
+  @state()
+  @consume({ context: fullEntitiesContext, subscribe: true })
+  _entityReg!: EntityRegistryEntry[];
+
+  @state()
+  @consume({ context: labelsContext, subscribe: true })
+  _labelReg!: LabelRegistryEntry[];
+
+  @state()
+  @consume({ context: floorsContext, subscribe: true })
+  _floorReg!: Record<string, FloorRegistryEntry>;
+
   @query(".sidebar-editor")
   public editor?: HaAutomationConditionEditor;
 
@@ -79,15 +102,20 @@ export default class HaAutomationSidebarAction extends LitElement {
 
     const isBuildingBlock = ACTION_BUILDING_BLOCKS.includes(type || "");
 
+    const title = capitalizeFirstLetter(
+      describeAction(
+        this.hass,
+        this._entityReg,
+        this._labelReg,
+        this._floorReg,
+        actionConfig
+      )
+    );
+
     const subtitle = this.hass.localize(
       "ui.panel.config.automation.editor.actions.action"
     );
 
-    const title =
-      this.hass.localize(
-        `ui.panel.config.automation.editor.actions.type.${type}.label` as LocalizeKeys
-      ) || type;
-
     const description = isBuildingBlock
       ? this.hass.localize(
           `ui.panel.config.automation.editor.actions.type.${type}.description.picker` as LocalizeKeys

src/panels/config/backup/ha-config-backup-backups.ts

@@ -125,6 +125,8 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
 
   @query("#overflow-menu") private _overflowMenu?: HaMdMenu;
 
+  private _overflowBackup?: BackupContent;
+
   public connectedCallback() {
     super.connectedCallback();
     window.addEventListener("location-changed", this._locationChanged);
@@ -260,7 +262,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
         type: "overflow-menu",
         template: (backup) => html`
           <ha-icon-button
-            .backup=${backup}
+            .selected=${backup}
             .label=${this.hass.localize("ui.common.overflow_menu")}
             .path=${mdiDotsVertical}
             @click=${this._toggleOverflowMenu}
@@ -292,6 +294,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
       this._overflowMenu.close();
       return;
     }
+    this._overflowBackup = ev.target.selected;
     this._overflowMenu.anchorElement = ev.target;
     this._overflowMenu.show();
   };
@@ -569,17 +572,15 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
     navigate(`/config/backup/details/${id}`);
   }
 
-  private async _downloadBackup(ev): Promise<void> {
-    const backup = ev.parentElement.anchorElement.backup;
-    if (!backup) {
+  private async _downloadBackup(): Promise<void> {
+    if (!this._overflowBackup) {
       return;
     }
-    downloadBackup(this.hass, this, backup, this.config);
+    downloadBackup(this.hass, this, this._overflowBackup, this.config);
   }
 
-  private async _deleteBackup(ev): Promise<void> {
-    const backup = ev.parentElement.anchorElement.backup;
-    if (!backup) {
+  private async _deleteBackup(): Promise<void> {
+    if (!this._overflowBackup) {
       return;
     }
 
@@ -595,9 +596,11 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
     }
 
     try {
-      await deleteBackup(this.hass, backup.backup_id);
-      if (this._selected.includes(backup.backup_id)) {
-        this._selected = this._selected.filter((id) => id !== backup.backup_id);
+      await deleteBackup(this.hass, this._overflowBackup.backup_id);
+      if (this._selected.includes(this._overflowBackup.backup_id)) {
+        this._selected = this._selected.filter(
+          (id) => id !== this._overflowBackup!.backup_id
+        );
       }
     } catch (err: any) {
       showAlertDialog(this, {

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

@@ -790,10 +790,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
     );
     const timeString = new Date().toISOString().replace(/:/g, "-");
     const logFileName = `home-assistant_${integration}_${timeString}.log`;
-    const signedUrl = await getSignedPath(
-      this.hass,
-      getErrorLogDownloadUrl(this.hass)
-    );
+    const signedUrl = await getSignedPath(this.hass, getErrorLogDownloadUrl);
     fileDownload(signedUrl.path, logFileName);
   }
 

src/panels/config/logs/error-log-card.ts

@@ -415,7 +415,7 @@ class ErrorLogCard extends LitElement {
       const downloadUrl =
         this.provider && this.provider !== "core"
           ? getHassioLogDownloadUrl(this.provider)
-          : getErrorLogDownloadUrl(this.hass);
+          : getErrorLogDownloadUrl;
       const logFileName =
         this.provider && this.provider !== "core"
           ? `${this.provider}_${timeString}.log`

src/panels/config/logs/system-log-card.ts

@@ -2,6 +2,8 @@ import { mdiDotsVertical, mdiDownload, mdiRefresh, mdiText } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { atLeastVersion } from "../../../common/config/version";
 import { fireEvent } from "../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import "../../../components/buttons/ha-call-service-button";
@@ -13,6 +15,7 @@ import "../../../components/ha-list-item";
 import "../../../components/ha-spinner";
 import { getSignedPath } from "../../../data/auth";
 import { getErrorLogDownloadUrl } from "../../../data/error_log";
+import { coreLatestLogsUrl } from "../../../data/hassio/supervisor";
 import { domainToName } from "../../../data/integration";
 import type { LoggedError } from "../../../data/system_log";
 import {
@@ -228,7 +231,11 @@ export class SystemLogCard extends LitElement {
 
   private async _downloadLogs() {
     const timeString = new Date().toISOString().replace(/:/g, "-");
-    const downloadUrl = getErrorLogDownloadUrl(this.hass);
+    const downloadUrl =
+      isComponentLoaded(this.hass, "hassio") &&
+      atLeastVersion(this.hass.config.version, 2025, 10)
+        ? coreLatestLogsUrl
+        : getErrorLogDownloadUrl;
     const logFileName = `home-assistant_${timeString}.log`;
     const signedUrl = await getSignedPath(this.hass, downloadUrl);
     fileDownload(signedUrl.path, logFileName);

src/panels/lovelace/cards/hui-calendar-card.ts

@@ -61,6 +61,8 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
 
   @state() private _calendars: Calendar[] = [];
 
+  @state() private _eventDisplay = "list-item";
+
   @state() private _narrow = false;
 
   @state() private _error?: string = undefined;
@@ -142,6 +144,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
           .hass=${this.hass}
           .views=${views}
           .initialView=${this._config.initial_view!}
+          .eventDisplay=${this._eventDisplay}
           .error=${this._error}
           @view-changed=${this._handleViewChanged}
         ></ha-full-calendar>
@@ -171,6 +174,8 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
   }
 
   private _handleViewChanged(ev: HASSDomEvent<CalendarViewChanged>): void {
+    this._eventDisplay =
+      ev.detail.view === "dayGridMonth" ? "list-item" : "auto";
     this._startDate = ev.detail.start;
     this._endDate = ev.detail.end;
     this._fetchCalendarEvents();

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

@@ -218,9 +218,6 @@ export class HuiGraphHeaderFooter
   }
 
   static styles = css`
-    :host {
-      display: block;
-    }
     ha-spinner {
       position: absolute;
       top: calc(50% - 14px);

src/panels/lovelace/hui-root.ts

@@ -391,11 +391,12 @@ class HUIRoot extends LitElement {
             slot="trigger"
             id="dashboardmenu"
             .path=${mdiDotsVertical}
-            .label=${this.hass!.localize("ui.panel.lovelace.editor.menu.open")}
-            hide-title
           ></ha-icon-button>
           ${listItems}
         </ha-button-menu>
+        <ha-tooltip placement="bottom" for="dashboardmenu">
+          ${this.hass!.localize("ui.panel.lovelace.editor.menu.open")}
+        </ha-tooltip>
       `);
     }
     return html`${result}`;

src/panels/profile/ha-refresh-tokens-card.ts

@@ -29,8 +29,6 @@ import {
 } from "../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import "../../components/ha-dropdown-item";
-import "../../components/ha-dropdown";
 
 // Client ID used by iOS app
 const iOSclientId = "https://home-assistant.io/iOS";
@@ -148,18 +146,19 @@ class HaRefreshTokens extends LitElement {
                           )}
                     </div>
                     <div>
-                      <ha-dropdown>
+                      <ha-md-button-menu positioning="popover">
                         <ha-icon-button
                           slot="trigger"
                           .label=${this.hass.localize("ui.common.menu")}
                           .path=${mdiDotsVertical}
                         ></ha-icon-button>
-                        <ha-dropdown-item
+                        <ha-md-menu-item
+                          graphic="icon"
                           @click=${this._toggleTokenExpiration}
                           .token=${token}
                         >
                           <ha-svg-icon
-                            slot="icon"
+                            slot="start"
                             .path=${token.expire_at
                               ? mdiClockRemoveOutline
                               : mdiClockCheckOutline}
@@ -171,20 +170,24 @@ class HaRefreshTokens extends LitElement {
                             : this.hass.localize(
                                 "ui.panel.profile.refresh_tokens.enable_token_expiration"
                               )}
-                        </ha-dropdown-item>
-                        <ha-dropdown-item
-                          variant="danger"
+                        </ha-md-menu-item>
+                        <ha-md-menu-item
+                          graphic="icon"
+                          class="warning"
                           .disabled=${token.is_current}
                           @click=${this._deleteToken}
                           .token=${token}
                         >
                           <ha-svg-icon
-                            slot="icon"
+                            class="warning"
+                            slot="start"
                             .path=${mdiDelete}
                           ></ha-svg-icon>
-                          ${this.hass.localize("ui.common.delete")}
-                        </ha-dropdown-item>
-                      </ha-dropdown>
+                          <div slot="headline">
+                            ${this.hass.localize("ui.common.delete")}
+                          </div>
+                        </ha-md-menu-item>
+                      </ha-md-button-menu>
                     </div>
                   </ha-settings-row>
                 `

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

@@ -155,10 +155,6 @@ export const semanticColorStyles = css`
 
     /* Surfaces */
     --ha-color-surface-default: var(--ha-color-neutral-95);
-    --ha-color-on-surface-default: var(--ha-color-neutral-05);
-    
-    /* shadow */
-    --ha-color-shadow: rgba(0, 0, 0, 0.2);
   }
 `;
 
@@ -290,9 +286,5 @@ export const darkSemanticColorStyles = css`
 
     /* Surfaces */
     --ha-color-surface-default: var(--ha-color-neutral-10);
-    --ha-color-on-surface-default: var(--ha-color-neutral-95);
-
-    /* shadow */
-    --ha-color-shadow: rgba(255, 255, 255, 0.2);
   }
 `;

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

@@ -52,9 +52,7 @@ 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-default: var(--card-background-color);    
-    --wa-color-surface-raised: var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff));
+    --wa-color-surface-default: var(--card-background-color);
     --wa-panel-border-radius: var(--ha-border-radius-3xl);
     --wa-panel-border-style: solid;
     --wa-panel-border-width: 1px;

src/resources/theme/wa.globals.ts

@@ -16,17 +16,7 @@ export const waMainStyles = css`
     --wa-font-weight-action: var(--ha-font-weight-medium);
     --wa-transition-fast: 75ms;
     --wa-transition-easing: ease;
-
-    --wa-border-style: solid;
-    --wa-border-width-s: var(--ha-border-width-sm);
-    --wa-border-width-m: var(--ha-border-width-md);
-    --wa-border-width-l: var(--ha-border-width-lg);
-    --wa-border-radius-s: var(--ha-border-radius-sm);
-    --wa-border-radius-m: var(--ha-border-radius-md);
-    --wa-border-radius-l: var(--ha-border-radius-lg);
-
-    --wa-line-height-condensed: 1.25;
-
+    --wa-border-width-l: var(--ha-border-radius-lg);
     --wa-space-xl: 32px;
   }
 

src/translations/en.json

@@ -824,6 +824,7 @@
         "add_new": "Add new area…",
         "no_areas": "You don't have any areas",
         "no_match": "No matching areas found",
+        "placeholder": "Select an area",
         "unassigned_areas": "Unassigned areas",
         "failed_create_area": "Failed to create area."
       },

yarn.lock

@@ -5400,12 +5400,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/coverage-v8@npm:4.0.6":
-  version: 4.0.6
-  resolution: "@vitest/coverage-v8@npm:4.0.6"
+"@vitest/coverage-v8@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@vitest/coverage-v8@npm:4.0.5"
   dependencies:
     "@bcoe/v8-coverage": "npm:^1.0.2"
-    "@vitest/utils": "npm:4.0.6"
+    "@vitest/utils": "npm:4.0.5"
     ast-v8-to-istanbul: "npm:^0.3.5"
     debug: "npm:^4.4.3"
     istanbul-lib-coverage: "npm:^3.2.2"
@@ -5416,34 +5416,34 @@ __metadata:
     std-env: "npm:^3.9.0"
     tinyrainbow: "npm:^3.0.3"
   peerDependencies:
-    "@vitest/browser": 4.0.6
-    vitest: 4.0.6
+    "@vitest/browser": 4.0.5
+    vitest: 4.0.5
   peerDependenciesMeta:
     "@vitest/browser":
       optional: true
-  checksum: 10/76b765a30178fe61937da242b72b4e931e0bcb39a03ed5f1d945ff0acc3828b517d976755b0d02866416a0b042db5fbbfd0bad3c49d2175716f2f1c22365518b
+  checksum: 10/ab007685e99950bf6768f8e9f1941306934c341cb7772c2b5cd5efb554791beda0622a40e603ff1b57d537c8c8bbbab0b6b9393dbc39ac2e5fe9155dd47f7be1
   languageName: node
   linkType: hard
 
-"@vitest/expect@npm:4.0.6":
-  version: 4.0.6
-  resolution: "@vitest/expect@npm:4.0.6"
+"@vitest/expect@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@vitest/expect@npm:4.0.5"
   dependencies:
     "@standard-schema/spec": "npm:^1.0.0"
     "@types/chai": "npm:^5.2.2"
-    "@vitest/spy": "npm:4.0.6"
-    "@vitest/utils": "npm:4.0.6"
+    "@vitest/spy": "npm:4.0.5"
+    "@vitest/utils": "npm:4.0.5"
     chai: "npm:^6.0.1"
     tinyrainbow: "npm:^3.0.3"
-  checksum: 10/70d6e03d413d208df722461ff7136a41249a0f8c34f985b4e7104f85e85583f272c3a92c4d7c9ea0ebd40ad77b64cb3b66d7ecd628210333ebd6813659a3422f
+  checksum: 10/c578034ec5db2fc6c2d7cc29551fe523a5516ca24f13e1c379f9c2d4d06f9c4a2ec87a53f797554281d5a002b50e3bb9dddf0e48c149efcf00dfed612f25ddd0
   languageName: node
   linkType: hard
 
-"@vitest/mocker@npm:4.0.6":
-  version: 4.0.6
-  resolution: "@vitest/mocker@npm:4.0.6"
+"@vitest/mocker@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@vitest/mocker@npm:4.0.5"
   dependencies:
-    "@vitest/spy": "npm:4.0.6"
+    "@vitest/spy": "npm:4.0.5"
     estree-walker: "npm:^3.0.3"
     magic-string: "npm:^0.30.19"
   peerDependencies:
@@ -5454,54 +5454,54 @@ __metadata:
       optional: true
     vite:
       optional: true
-  checksum: 10/82a1726ea7589a33e0a598cbe8c614ebd49900d3470b597e02a315a3a57c3fc9dcf84ea01a61df7cf1f9a23e273213b059cc721fc3a9b7fa87f49f4604f024d4
+  checksum: 10/999b562e84f06a712c311041bffcfff8ac0d4ebf8b61a0e5229266fe5d93047adc172c7340d6e946480a64c8e1919d8e394be6f97c9161dcae4bf5bd419854df
   languageName: node
   linkType: hard
 
-"@vitest/pretty-format@npm:4.0.6":
-  version: 4.0.6
-  resolution: "@vitest/pretty-format@npm:4.0.6"
+"@vitest/pretty-format@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@vitest/pretty-format@npm:4.0.5"
   dependencies:
     tinyrainbow: "npm:^3.0.3"
-  checksum: 10/34e7c423233fefdb9c45d4873d38dde0641121e0639cd5109fea9d57d298a70b4a516284ff7a044db6373e2b39e98ed1d18f8ad55471a3d774bc96eac3de4560
+  checksum: 10/ac09db54a575b4a65f53b9fd3aed95766cd9833080cb62c932e5c067d43ed6e4f01c97b77b44f3191e01c1587b2af4c0b0d742e1287f556cbf8b241f77db6f75
   languageName: node
   linkType: hard
 
-"@vitest/runner@npm:4.0.6":
-  version: 4.0.6
-  resolution: "@vitest/runner@npm:4.0.6"
+"@vitest/runner@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@vitest/runner@npm:4.0.5"
   dependencies:
-    "@vitest/utils": "npm:4.0.6"
+    "@vitest/utils": "npm:4.0.5"
     pathe: "npm:^2.0.3"
-  checksum: 10/40abea31fa33985d13d0eff46abd25f139c6634d34164642e48a9359e2469d592ca985d95d9df9ab9b3bec9857f9d5abbcf9865473a5e942e650487eb36a00be
+  checksum: 10/2631996bc031491c25be02706e395df88b6a8334ce99663694c40cd2f6343b13aa903e2229b75a12ce3686fe94fb3d535de1d17d4a0839f898c61a3bbdf760b2
   languageName: node
   linkType: hard
 
-"@vitest/snapshot@npm:4.0.6":
-  version: 4.0.6
-  resolution: "@vitest/snapshot@npm:4.0.6"
+"@vitest/snapshot@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@vitest/snapshot@npm:4.0.5"
   dependencies:
-    "@vitest/pretty-format": "npm:4.0.6"
+    "@vitest/pretty-format": "npm:4.0.5"
     magic-string: "npm:^0.30.19"
     pathe: "npm:^2.0.3"
-  checksum: 10/3477e1ab6a5ce23f4bf24c44a5d55f3e44448e9f4564022b3e0a4aaa0de6eef9cc4c913989a092a05345b4dd92e7545b681eb394d94f064be74479ac78911c7c
+  checksum: 10/f7c1b8ab75675a94bb6b74303ec8bf50108b18feff1343a57fbff97886dcca7e585b8daddb4b01825bb344bbf557deb0904ce3f0b1250769a0178047d8090ea3
   languageName: node
   linkType: hard
 
-"@vitest/spy@npm:4.0.6":
-  version: 4.0.6
-  resolution: "@vitest/spy@npm:4.0.6"
-  checksum: 10/ddbb1aff00719f90b051e86c49071e74af780c9536c03987d5e89bf139fd6f6c00f7927efc8f894252ec60db5b16dfeb0235f98f038779a39c1b62dcba1a6b44
+"@vitest/spy@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@vitest/spy@npm:4.0.5"
+  checksum: 10/9fd0eff868715171ffaebe43126d89fd78256b6b0f7e12f7f865c7210e4c8f03310dcd4b34009fbb2962fda121310f611b22f8cf85d650fa5d2d2c39ea0b95f6
   languageName: node
   linkType: hard
 
-"@vitest/utils@npm:4.0.6":
-  version: 4.0.6
-  resolution: "@vitest/utils@npm:4.0.6"
+"@vitest/utils@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@vitest/utils@npm:4.0.5"
   dependencies:
-    "@vitest/pretty-format": "npm:4.0.6"
+    "@vitest/pretty-format": "npm:4.0.5"
     tinyrainbow: "npm:^3.0.3"
-  checksum: 10/cb556e63e3f0f98a0eba21ec03793b44182bf343a5fdfd8ac2a70c5dfb3b14fbacf0de2aa5df0c3a14b2b4b634ce86f40077b8503e7486e79caffee2f07840e0
+  checksum: 10/1d2d71a94237c227928c16dabca300a05277918df58c63294771fb5a3d2f41538e21d4b75b2cc7421ff15443d1e496225c684dd32818601641be32affba09a74
   languageName: node
   linkType: hard
 
@@ -9323,7 +9323,7 @@ __metadata:
     "@vaadin/combo-box": "npm:24.9.4"
     "@vaadin/vaadin-themable-mixin": "npm:24.9.4"
     "@vibrant/color": "npm:4.0.0"
-    "@vitest/coverage-v8": "npm:4.0.6"
+    "@vitest/coverage-v8": "npm:4.0.5"
     "@vue/web-component-wrapper": "npm:1.3.0"
     "@webcomponents/scoped-custom-element-registry": "npm:0.0.10"
     "@webcomponents/webcomponentsjs": "npm:2.8.0"
@@ -9408,7 +9408,7 @@ __metadata:
     typescript-eslint: "npm:8.46.2"
     ua-parser-js: "npm:2.0.6"
     vite-tsconfig-paths: "npm:5.1.4"
-    vitest: "npm:4.0.6"
+    vitest: "npm:4.0.5"
     vue: "npm:2.7.16"
     vue2-daterange-picker: "npm:0.6.8"
     webpack-stats-plugin: "npm:1.1.3"
@@ -14783,17 +14783,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vitest@npm:4.0.6":
-  version: 4.0.6
-  resolution: "vitest@npm:4.0.6"
+"vitest@npm:4.0.5":
+  version: 4.0.5
+  resolution: "vitest@npm:4.0.5"
   dependencies:
-    "@vitest/expect": "npm:4.0.6"
-    "@vitest/mocker": "npm:4.0.6"
-    "@vitest/pretty-format": "npm:4.0.6"
-    "@vitest/runner": "npm:4.0.6"
-    "@vitest/snapshot": "npm:4.0.6"
-    "@vitest/spy": "npm:4.0.6"
-    "@vitest/utils": "npm:4.0.6"
+    "@vitest/expect": "npm:4.0.5"
+    "@vitest/mocker": "npm:4.0.5"
+    "@vitest/pretty-format": "npm:4.0.5"
+    "@vitest/runner": "npm:4.0.5"
+    "@vitest/snapshot": "npm:4.0.5"
+    "@vitest/spy": "npm:4.0.5"
+    "@vitest/utils": "npm:4.0.5"
     debug: "npm:^4.4.3"
     es-module-lexer: "npm:^1.7.0"
     expect-type: "npm:^1.2.2"
@@ -14811,10 +14811,10 @@ __metadata:
     "@edge-runtime/vm": "*"
     "@types/debug": ^4.1.12
     "@types/node": ^20.0.0 || ^22.0.0 || >=24.0.0
-    "@vitest/browser-playwright": 4.0.6
-    "@vitest/browser-preview": 4.0.6
-    "@vitest/browser-webdriverio": 4.0.6
-    "@vitest/ui": 4.0.6
+    "@vitest/browser-playwright": 4.0.5
+    "@vitest/browser-preview": 4.0.5
+    "@vitest/browser-webdriverio": 4.0.5
+    "@vitest/ui": 4.0.5
     happy-dom: "*"
     jsdom: "*"
   peerDependenciesMeta:
@@ -14838,7 +14838,7 @@ __metadata:
       optional: true
   bin:
     vitest: vitest.mjs
-  checksum: 10/79c723a7a76130af3ed4a08a1a073200fa28ec80431e431b3a88d5b91d6683be8909e2f05b286aae7f7671d5fae136294e06fc34a6e4d1b266970c4892e07182
+  checksum: 10/ed9800ad0310dbbb2c23dba26c4cbc9ecf667d5b681f1379cb042ef6f7343646ce8487e594e3d98bbe9c0c7553613d479f14151250e510fe5d4552290a6d93e8
   languageName: node
   linkType: hard