20240402.0 (#20314)

demo/src/stubs/area_registry.ts

@@ -4,4 +4,11 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockAreaRegistry = (
   hass: MockHomeAssistant,
   data: AreaRegistryEntry[] = []
-) => hass.mockWS("config/area_registry/list", () => data);
+) => {
+  hass.mockWS("config/area_registry/list", () => data);
+  const areas = {};
+  data.forEach((area) => {
+    areas[area.area_id] = area;
+  });
+  hass.updateHass({ areas });
+};

demo/src/stubs/device_registry.ts

@@ -4,4 +4,11 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockDeviceRegistry = (
   hass: MockHomeAssistant,
   data: DeviceRegistryEntry[] = []
-) => hass.mockWS("config/device_registry/list", () => data);
+) => {
+  hass.mockWS("config/device_registry/list", () => data);
+  const devices = {};
+  data.forEach((device) => {
+    devices[device.id] = device;
+  });
+  hass.updateHass({ devices });
+};

demo/src/stubs/floor_registry.ts

@@ -0,0 +1,7 @@
+import { FloorRegistryEntry } from "../../../src/data/floor_registry";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockFloorRegistry = (
+  hass: MockHomeAssistant,
+  data: FloorRegistryEntry[] = []
+) => hass.mockWS("config/floor_registry/list", () => data);

demo/src/stubs/label_registry.ts

@@ -0,0 +1,7 @@
+import { LabelRegistryEntry } from "../../../src/data/label_registry";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockLabelRegistry = (
+  hass: MockHomeAssistant,
+  data: LabelRegistryEntry[] = []
+) => hass.mockWS("config/label_registry/list", () => data);

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

@@ -17,6 +17,10 @@ import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
 import type { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
+import { FloorRegistryEntry } from "../../../../src/data/floor_registry";
+import { LabelRegistryEntry } from "../../../../src/data/label_registry";
+import { mockFloorRegistry } from "../../../../demo/src/stubs/floor_registry";
+import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {
@@ -100,7 +104,7 @@ const DEVICES = [
 const AREAS: AreaRegistryEntry[] = [
   {
     area_id: "backyard",
-    floor_id: null,
+    floor_id: "ground",
     name: "Backyard",
     icon: null,
     picture: null,
@@ -109,7 +113,7 @@ const AREAS: AreaRegistryEntry[] = [
   },
   {
     area_id: "bedroom",
-    floor_id: null,
+    floor_id: "first",
     name: "Bedroom",
     icon: "mdi:bed",
     picture: null,
@@ -118,7 +122,7 @@ const AREAS: AreaRegistryEntry[] = [
   },
   {
     area_id: "livingroom",
-    floor_id: null,
+    floor_id: "ground",
     name: "Livingroom",
     icon: "mdi:sofa",
     picture: null,
@@ -127,6 +131,45 @@ const AREAS: AreaRegistryEntry[] = [
   },
 ];
 
+const FLOORS: FloorRegistryEntry[] = [
+  {
+    floor_id: "ground",
+    name: "Ground floor",
+    level: 0,
+    icon: null,
+    aliases: [],
+  },
+  {
+    floor_id: "first",
+    name: "First floor",
+    level: 1,
+    icon: "mdi:numeric-1",
+    aliases: [],
+  },
+  {
+    floor_id: "second",
+    name: "Second floor",
+    level: 2,
+    icon: "mdi:numeric-2",
+    aliases: [],
+  },
+];
+
+const LABELS: LabelRegistryEntry[] = [
+  {
+    label_id: "energy",
+    name: "Energy",
+    icon: null,
+    color: "yellow",
+  },
+  {
+    label_id: "entertainment",
+    name: "Entertainment",
+    icon: "mdi:popcorn",
+    color: "blue",
+  },
+];
+
 const SCHEMAS: {
   name: string;
   input: Record<string, (BlueprintInput & { required?: boolean }) | null>;
@@ -134,7 +177,12 @@ const SCHEMAS: {
   {
     name: "One of each",
     input: {
+      label: { name: "Label", selector: { label: {} } },
+      floor: { name: "Floor", selector: { floor: {} } },
+      area: { name: "Area", selector: { area: {} } },
+      device: { name: "Device", selector: { device: {} } },
       entity: { name: "Entity", selector: { entity: {} } },
+      target: { name: "Target", selector: { target: {} } },
       state: {
         name: "State",
         selector: { state: { entity_id: "alarm_control_panel.alarm" } },
@@ -143,15 +191,12 @@ const SCHEMAS: {
         name: "Attribute",
         selector: { attribute: { entity_id: "" } },
       },
-      device: { name: "Device", selector: { device: {} } },
       config_entry: {
         name: "Integration",
         selector: { config_entry: {} },
       },
       duration: { name: "Duration", selector: { duration: {} } },
       addon: { name: "Addon", selector: { addon: {} } },
-      area: { name: "Area", selector: { area: {} } },
-      target: { name: "Target", selector: { target: {} } },
       number_box: {
         name: "Number Box",
         selector: {
@@ -300,6 +345,8 @@ const SCHEMAS: {
       entity: { name: "Entity", selector: { entity: { multiple: true } } },
       device: { name: "Device", selector: { device: { multiple: true } } },
       area: { name: "Area", selector: { area: { multiple: true } } },
+      floor: { name: "Floor", selector: { floor: { multiple: true } } },
+      label: { name: "Label", selector: { label: { multiple: true } } },
       select: {
         name: "Select Multiple",
         selector: {
@@ -356,6 +403,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     mockDeviceRegistry(hass, DEVICES);
     mockConfigEntries(hass);
     mockAreaRegistry(hass, AREAS);
+    mockFloorRegistry(hass, FLOORS);
+    mockLabelRegistry(hass, LABELS);
     mockHassioSupervisor(hass);
     hass.mockWS("auth/sign_path", (params) => params);
     hass.mockWS("media_player/browse_media", this._browseMedia);

package.json

@@ -33,7 +33,7 @@
     "@codemirror/legacy-modes": "6.3.3",
     "@codemirror/search": "6.5.6",
     "@codemirror/state": "6.4.1",
-    "@codemirror/view": "6.26.0",
+    "@codemirror/view": "6.26.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.12.3",
     "@formatjs/intl-displaynames": "6.6.6",

pyproject.toml

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

src/components/chips/ha-assist-chip.ts

@@ -22,14 +22,6 @@ export class HaAssistChip extends MdAssistChip {
         );
         --md-assist-chip-outline-color: var(--outline-color);
         --md-assist-chip-label-text-weight: 400;
-        --ha-assist-chip-filled-container-color: rgba(
-          var(--rgb-primary-text-color),
-          0.15
-        );
-        --ha-assist-chip-active-container-color: rgba(
-          var(--rgb-primary-color),
-          0.15
-        );
       }
       /** Material 3 doesn't have a filled chip, so we have to make our own **/
       .filled {
@@ -52,10 +44,17 @@ export class HaAssistChip extends MdAssistChip {
         margin-inline-end: unset;
         margin-inline-start: var(--_icon-label-space);
       }
+      ::before {
+        background: var(--ha-assist-chip-container-color);
+        opacity: var(--ha-assist-chip-container-opacity);
+      }
       :where(.active)::before {
         background: var(--ha-assist-chip-active-container-color);
         opacity: var(--ha-assist-chip-active-container-opacity);
       }
+      .label {
+        font-family: Roboto, sans-serif;
+      }
     `,
   ];
 

src/components/data-table/ha-data-table.ts

@@ -181,6 +181,13 @@ export class HaDataTable extends LitElement {
     this._checkedRowsChanged();
   }
 
+  public selectAll(): void {
+    this._checkedRows = this._filteredData
+      .filter((data) => data.selectable !== false)
+      .map((data) => data[this.id]);
+    this._checkedRowsChanged();
+  }
+
   public connectedCallback() {
     super.connectedCallback();
     if (this._items.length) {
@@ -386,7 +393,7 @@ export class HaDataTable extends LitElement {
     `;
   }
 
-  private _keyFunction = (row: DataTableRowData) => row[this.id] || row;
+  private _keyFunction = (row: DataTableRowData) => row?.[this.id] || row;
 
   private _renderRow = (row: DataTableRowData, index: number) => {
     // not sure how this happens...
@@ -593,10 +600,7 @@ export class HaDataTable extends LitElement {
   private _handleHeaderRowCheckboxClick(ev: Event) {
     const checkbox = ev.target as HaCheckbox;
     if (checkbox.checked) {
-      this._checkedRows = this._filteredData
+      this.selectAll();
-        .filter((data) => data.selectable !== false)
-        .map((data) => data[this.id]);
-      this._checkedRowsChanged();
     } else {
       this._checkedRows = [];
       this._checkedRowsChanged();
@@ -623,9 +627,13 @@ export class HaDataTable extends LitElement {
       ev
         .composedPath()
         .find((el) =>
-          ["ha-checkbox", "mwc-button", "ha-button", "ha-assist-chip"].includes(
+          [
-            (el as HTMLElement).localName
+            "ha-checkbox",
-          )
+            "mwc-button",
+            "ha-button",
+            "ha-icon-button",
+            "ha-assist-chip",
+          ].includes((el as HTMLElement).localName)
         )
     ) {
       return;

src/components/ha-button-menu-new.ts

@@ -0,0 +1,89 @@
+import { Button } from "@material/mwc-button";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
+import type { HaIconButton } from "./ha-icon-button";
+import "./ha-menu";
+import type { HaMenu } from "./ha-menu";
+
+@customElement("ha-button-menu-new")
+export class HaButtonMenuNew extends LitElement {
+  protected readonly [FOCUS_TARGET];
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() public positioning?: "fixed" | "absolute" | "popover";
+
+  @property({ type: Boolean, attribute: "has-overflow" }) public hasOverflow =
+    false;
+
+  @query("ha-menu", true) private _menu!: HaMenu;
+
+  public get items() {
+    return this._menu.items;
+  }
+
+  public override focus() {
+    if (this._menu.open) {
+      this._menu.focus();
+    } else {
+      this._triggerButton?.focus();
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div @click=${this._handleClick}>
+        <slot name="trigger" @slotchange=${this._setTriggerAria}></slot>
+      </div>
+      <ha-menu
+        .positioning=${this.positioning}
+        .hasOverflow=${this.hasOverflow}
+      >
+        <slot></slot>
+      </ha-menu>
+    `;
+  }
+
+  private _handleClick(): void {
+    if (this.disabled) {
+      return;
+    }
+    this._menu.anchorElement = this;
+    if (this._menu.open) {
+      this._menu.close();
+    } else {
+      this._menu.show();
+    }
+  }
+
+  private get _triggerButton() {
+    return this.querySelector(
+      'ha-icon-button[slot="trigger"], mwc-button[slot="trigger"], ha-assist-chip[slot="trigger"]'
+    ) as HaIconButton | Button | null;
+  }
+
+  private _setTriggerAria() {
+    if (this._triggerButton) {
+      this._triggerButton.ariaHasPopup = "menu";
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+      ::slotted([disabled]) {
+        color: var(--disabled-text-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-button-menu-new": HaButtonMenuNew;
+  }
+}

src/components/ha-color-picker.ts

@@ -6,6 +6,7 @@ import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import "./ha-select";
+import "./ha-list-item";
 import { HomeAssistant } from "../types";
 import { LocalizeKeys } from "../common/translations/localize";
 
@@ -53,18 +54,18 @@ export class HaColorPicker extends LitElement {
             `
           : nothing}
         ${this.defaultColor
-          ? html` <mwc-list-item value="default">
+          ? html` <ha-list-item value="default">
               ${this.hass.localize(`ui.components.color-picker.default_color`)}
-            </mwc-list-item>`
+            </ha-list-item>`
           : nothing}
         ${Array.from(THEME_COLORS).map(
           (color) => html`
-            <mwc-list-item .value=${color} graphic="icon">
+            <ha-list-item .value=${color} graphic="icon">
               ${this.hass.localize(
                 `ui.components.color-picker.colors.${color}` as LocalizeKeys
               ) || color}
               <span slot="graphic">${this.renderColorCircle(color)}</span>
-            </mwc-list-item>
+            </ha-list-item>
           `
         )}
       </ha-select>

src/components/ha-filter-blueprints.ts

@@ -50,7 +50,7 @@ export class HaFilterBlueprints extends LitElement {
                     ? nothing
                     : html`<ha-check-list-item
                         .value=${id}
-                        .selected=${this.value?.includes(id)}
+                        .selected=${(this.value || []).includes(id)}
                       >
                         ${blueprint.metadata.name || id}
                       </ha-check-list-item>`

src/components/ha-filter-devices.ts

@@ -57,7 +57,8 @@ export class HaFilterDevices extends LitElement {
         ${this._shouldRender
           ? html`<mwc-list class="ha-scrollbar">
               <lit-virtualizer
-                .items=${this._devices(this.hass.devices)}
+                .items=${this._devices(this.hass.devices, this.value)}
+                .keyFunction=${this._keyFunction}
                 .renderItem=${this._renderItem}
                 @click=${this._handleItemClick}
               >
@@ -68,6 +69,8 @@ export class HaFilterDevices extends LitElement {
     `;
   }
 
+  private _keyFunction = (device) => device?.id;
+
   private _renderItem = (device) =>
     html`<ha-check-list-item
       .value=${device.id}
@@ -109,7 +112,7 @@ export class HaFilterDevices extends LitElement {
     this.expanded = ev.detail.expanded;
   }
 
-  private _devices = memoizeOne((devices: HomeAssistant["devices"]) => {
+  private _devices = memoizeOne((devices: HomeAssistant["devices"], _value) => {
     const values = Object.values(devices);
     return values.sort((a, b) =>
       stringCompare(

src/components/ha-filter-entities.ts

@@ -59,7 +59,12 @@ export class HaFilterEntities extends LitElement {
           ? html`
               <mwc-list class="ha-scrollbar">
                 <lit-virtualizer
-                  .items=${this._entities(this.hass.states, this.type)}
+                  .items=${this._entities(
+                    this.hass.states,
+                    this.type,
+                    this.value
+                  )}
+                  .keyFunction=${this._keyFunction}
                   .renderItem=${this._renderItem}
                   @click=${this._handleItemClick}
                 >
@@ -81,6 +86,8 @@ export class HaFilterEntities extends LitElement {
     }
   }
 
+  private _keyFunction = (entity) => entity?.entity_id;
+
   private _renderItem = (entity) =>
     html`<ha-check-list-item
       .value=${entity.entity_id}
@@ -119,7 +126,7 @@ export class HaFilterEntities extends LitElement {
   }
 
   private _entities = memoizeOne(
-    (states: HomeAssistant["states"], type: this["type"]) => {
+    (states: HomeAssistant["states"], type: this["type"], _value) => {
       const values = Object.values(states);
       return values
         .filter(

src/components/ha-filter-integrations.ts

@@ -1,15 +1,16 @@
 import { SelectedDetail } from "@material/mwc-list";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
-import { haStyleScrollbar } from "../resources/styles";
-import type { HomeAssistant } from "../types";
 import {
   fetchIntegrationManifests,
   IntegrationManifest,
 } from "../data/integration";
+import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
 import "./ha-domain-icon";
 
 @customElement("ha-filter-integrations")
@@ -47,11 +48,15 @@ export class HaFilterIntegrations extends LitElement {
                 multi
                 class="ha-scrollbar"
               >
-                ${this._integrations(this._manifests).map(
+                ${repeat(
+                  this._integrations(this._manifests, this.value),
+                  (i) => i.domain,
                   (integration) =>
                     html`<ha-check-list-item
                       .value=${integration.domain}
-                      .selected=${this.value?.includes(integration.domain)}
+                      .selected=${(this.value || []).includes(
+                        integration.domain
+                      )}
                       graphic="icon"
                     >
                       <ha-domain-icon
@@ -92,26 +97,27 @@ export class HaFilterIntegrations extends LitElement {
     this._manifests = await fetchIntegrationManifests(this.hass);
   }
 
-  private _integrations = memoizeOne((manifest: IntegrationManifest[]) =>
+  private _integrations = memoizeOne(
-    manifest
+    (manifest: IntegrationManifest[], _value) =>
-      .filter(
+      manifest
-        (mnfst) =>
+        .filter(
-          !mnfst.integration_type ||
+          (mnfst) =>
-          !["entity", "system", "hardware"].includes(mnfst.integration_type)
+            !mnfst.integration_type ||
-      )
+            !["entity", "system", "hardware"].includes(mnfst.integration_type)
-      .sort((a, b) =>
+        )
-        stringCompare(
+        .sort((a, b) =>
-          a.name || a.domain,
+          stringCompare(
-          b.name || b.domain,
+            a.name || a.domain,
-          this.hass.locale.language
+            b.name || b.domain,
+            this.hass.locale.language
+          )
         )
-      )
   );
 
   private async _integrationsSelected(
     ev: CustomEvent<SelectedDetail<Set<number>>>
   ) {
-    const integrations = this._integrations(this._manifests!);
+    const integrations = this._integrations(this._manifests!, this.value);
 
     if (!ev.detail.index.size) {
       fireEvent(this, "data-table-filter-changed", {

src/components/ha-filter-labels.ts

@@ -1,9 +1,10 @@
 import { SelectedDetail } from "@material/mwc-list";
 import "@material/mwc-menu/mwc-menu-surface";
+import { mdiPlus } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { mdiPlus } from "@mdi/js";
+import { repeat } from "lit/directives/repeat";
 import { computeCssColor } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import {
@@ -12,13 +13,13 @@ import {
   subscribeLabelRegistry,
 } from "../data/label_registry";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import { showLabelDetailDialog } from "../panels/config/labels/show-dialog-label-detail";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-icon";
 import "./ha-label";
-import { showLabelDetailDialog } from "../panels/config/labels/show-dialog-label-detail";
 
 @customElement("ha-filter-labels")
 export class HaFilterLabels extends SubscribeMixin(LitElement) {
@@ -63,26 +64,30 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
                 class="ha-scrollbar"
                 multi
               >
-                ${this._labels.map((label) => {
+                ${repeat(
-                  const color = label.color
+                  this._labels,
-                    ? computeCssColor(label.color)
+                  (label) => label.label_id,
-                    : undefined;
+                  (label) => {
-                  return html`<ha-check-list-item
+                    const color = label.color
-                    .value=${label.label_id}
+                      ? computeCssColor(label.color)
-                    .selected=${this.value?.includes(label.label_id)}
+                      : undefined;
-                    hasMeta
+                    return html`<ha-check-list-item
-                  >
+                      .value=${label.label_id}
-                    <ha-label style=${color ? `--color: ${color}` : ""}>
+                      .selected=${(this.value || []).includes(label.label_id)}
-                      ${label.icon
+                      hasMeta
-                        ? html`<ha-icon
+                    >
-                            slot="icon"
+                      <ha-label style=${color ? `--color: ${color}` : ""}>
-                            .icon=${label.icon}
+                        ${label.icon
-                          ></ha-icon>`
+                          ? html`<ha-icon
-                        : nothing}
+                              slot="icon"
-                      ${label.name}
+                              .icon=${label.icon}
-                    </ha-label>
+                            ></ha-icon>`
-                  </ha-check-list-item>`;
+                          : nothing}
-                })}
+                        ${label.name}
+                      </ha-label>
+                    </ha-check-list-item>`;
+                  }
+                )}
               </mwc-list>
             `
           : nothing}

src/components/ha-floor-picker.ts

@@ -274,7 +274,7 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
       if (areaIds) {
         const floorAreaLookup = getFloorAreaLookup(areas);
         outputFloors = outputFloors.filter((floor) =>
-          floorAreaLookup[floor.floor_id].some((area) =>
+          floorAreaLookup[floor.floor_id]?.some((area) =>
             areaIds!.includes(area.area_id)
           )
         );

src/components/ha-floors-picker.ts

@@ -0,0 +1,169 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import type { HomeAssistant } from "../types";
+import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
+import "./ha-floor-picker";
+
+@customElement("ha-floors-picker")
+export class HaFloorsPicker extends SubscribeMixin(LitElement) {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public label?: string;
+
+  @property({ type: Array }) public value?: string[];
+
+  @property() public helper?: string;
+
+  @property() public placeholder?: string;
+
+  @property({ type: Boolean, attribute: "no-add" })
+  public noAdd = false;
+
+  /**
+   * Show only floors with entities from specific domains.
+   * @type {Array}
+   * @attr include-domains
+   */
+  @property({ type: Array, attribute: "include-domains" })
+  public includeDomains?: string[];
+
+  /**
+   * Show no floors with entities of these domains.
+   * @type {Array}
+   * @attr exclude-domains
+   */
+  @property({ type: Array, attribute: "exclude-domains" })
+  public excludeDomains?: string[];
+
+  /**
+   * Show only floors with entities of these device classes.
+   * @type {Array}
+   * @attr include-device-classes
+   */
+  @property({ type: Array, attribute: "include-device-classes" })
+  public includeDeviceClasses?: string[];
+
+  @property({ attribute: false })
+  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+
+  @property({ attribute: false })
+  public entityFilter?: (entity: HassEntity) => boolean;
+
+  @property({ attribute: "picked-floor-label" })
+  public pickedFloorLabel?: string;
+
+  @property({ attribute: "pick-floor-label" })
+  public pickFloorLabel?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  protected render() {
+    if (!this.hass) {
+      return nothing;
+    }
+
+    const currentFloors = this._currentFloors;
+    return html`
+      ${currentFloors.map(
+        (floor) => html`
+          <div>
+            <ha-floor-picker
+              .curValue=${floor}
+              .noAdd=${this.noAdd}
+              .hass=${this.hass}
+              .value=${floor}
+              .label=${this.pickedFloorLabel}
+              .includeDomains=${this.includeDomains}
+              .excludeDomains=${this.excludeDomains}
+              .includeDeviceClasses=${this.includeDeviceClasses}
+              .deviceFilter=${this.deviceFilter}
+              .entityFilter=${this.entityFilter}
+              .disabled=${this.disabled}
+              @value-changed=${this._floorChanged}
+            ></ha-floor-picker>
+          </div>
+        `
+      )}
+      <div>
+        <ha-floor-picker
+          .noAdd=${this.noAdd}
+          .hass=${this.hass}
+          .label=${this.pickFloorLabel}
+          .helper=${this.helper}
+          .includeDomains=${this.includeDomains}
+          .excludeDomains=${this.excludeDomains}
+          .includeDeviceClasses=${this.includeDeviceClasses}
+          .deviceFilter=${this.deviceFilter}
+          .entityFilter=${this.entityFilter}
+          .disabled=${this.disabled}
+          .placeholder=${this.placeholder}
+          .required=${this.required && !currentFloors.length}
+          @value-changed=${this._addFloor}
+          .excludeFloors=${currentFloors}
+        ></ha-floor-picker>
+      </div>
+    `;
+  }
+
+  private get _currentFloors(): string[] {
+    return this.value || [];
+  }
+
+  private async _updateFloors(floors) {
+    this.value = floors;
+
+    fireEvent(this, "value-changed", {
+      value: floors,
+    });
+  }
+
+  private _floorChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const curValue = (ev.currentTarget as any).curValue;
+    const newValue = ev.detail.value;
+    if (newValue === curValue) {
+      return;
+    }
+    const currentFloors = this._currentFloors;
+    if (!newValue || currentFloors.includes(newValue)) {
+      this._updateFloors(currentFloors.filter((ent) => ent !== curValue));
+      return;
+    }
+    this._updateFloors(
+      currentFloors.map((ent) => (ent === curValue ? newValue : ent))
+    );
+  }
+
+  private _addFloor(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    const toAdd = ev.detail.value;
+    if (!toAdd) {
+      return;
+    }
+    (ev.currentTarget as any).value = "";
+    const currentFloors = this._currentFloors;
+    if (currentFloors.includes(toAdd)) {
+      return;
+    }
+
+    this._updateFloors([...currentFloors, toAdd]);
+  }
+
+  static override styles = css`
+    div {
+      margin-top: 8px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-floors-picker": HaFloorsPicker;
+  }
+}

src/components/ha-menu-item.ts

@@ -0,0 +1,37 @@
+import { customElement } from "lit/decorators";
+import "element-internals-polyfill";
+import { CSSResult, css } from "lit";
+import { MdMenuItem } from "@material/web/menu/menu-item";
+
+@customElement("ha-menu-item")
+export class HaMenuItem extends MdMenuItem {
+  static override styles: CSSResult[] = [
+    ...MdMenuItem.styles,
+    css`
+      :host {
+        --ha-icon-display: block;
+        --md-sys-color-primary: var(--primary-text-color);
+        --md-sys-color-on-primary: var(--primary-text-color);
+        --md-sys-color-secondary: var(--secondary-text-color);
+        --md-sys-color-surface: var(--card-background-color);
+        --md-sys-color-on-surface: var(--primary-text-color);
+        --md-sys-color-on-surface-variant: var(--secondary-text-color);
+        --md-sys-color-secondary-container: rgba(
+          var(--rgb-primary-color),
+          0.15
+        );
+        --md-sys-color-on-secondary-container: var(--text-primary-color);
+        --mdc-icon-size: 16px;
+
+        --md-sys-color-on-primary-container: var(--primary-text-color);
+        --md-sys-color-on-secondary-container: var(--primary-text-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-menu-item": HaMenuItem;
+  }
+}

src/components/ha-menu.ts

@@ -0,0 +1,22 @@
+import { customElement } from "lit/decorators";
+import "element-internals-polyfill";
+import { CSSResult, css } from "lit";
+import { MdMenu } from "@material/web/menu/menu";
+
+@customElement("ha-menu")
+export class HaMenu extends MdMenu {
+  static override styles: CSSResult[] = [
+    ...MdMenu.styles,
+    css`
+      :host {
+        --md-sys-color-surface-container: var(--card-background-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-menu": HaMenu;
+  }
+}

src/components/ha-outlined-text-field.ts

@@ -27,6 +27,9 @@ export class HaOutlinedTextField extends MdOutlinedTextField {
         --md-outlined-field-focus-outline-width: 1px;
         --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
       }
+      .input {
+        font-family: Roboto, sans-serif;
+      }
     `,
   ];
 }

src/components/ha-selector/ha-selector-area.ts

@@ -87,8 +87,12 @@ export class HaAreaSelector extends LitElement {
           .label=${this.label}
           .helper=${this.helper}
           no-add
-          .deviceFilter=${this._filterDevices}
+          .deviceFilter=${this.selector.area?.device
-          .entityFilter=${this._filterEntities}
+            ? this._filterDevices
+            : undefined}
+          .entityFilter=${this.selector.area?.entity
+            ? this._filterEntities
+            : undefined}
           .disabled=${this.disabled}
           .required=${this.required}
         ></ha-area-picker>
@@ -102,8 +106,12 @@ export class HaAreaSelector extends LitElement {
         .helper=${this.helper}
         .pickAreaLabel=${this.label}
         no-add
-        .deviceFilter=${this._filterDevices}
+        .deviceFilter=${this.selector.area?.device
-        .entityFilter=${this._filterEntities}
+          ? this._filterDevices
+          : undefined}
+        .entityFilter=${this.selector.area?.entity
+          ? this._filterEntities
+          : undefined}
         .disabled=${this.disabled}
         .required=${this.required}
       ></ha-areas-picker>

src/components/ha-selector/ha-selector-floor.ts

@@ -0,0 +1,153 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { html, LitElement, PropertyValues, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { ensureArray } from "../../common/array/ensure-array";
+import type { DeviceRegistryEntry } from "../../data/device_registry";
+import { getDeviceIntegrationLookup } from "../../data/device_registry";
+import { fireEvent } from "../../common/dom/fire_event";
+import {
+  EntitySources,
+  fetchEntitySourcesWithCache,
+} from "../../data/entity_sources";
+import type { FloorSelector } from "../../data/selector";
+import {
+  filterSelectorDevices,
+  filterSelectorEntities,
+} from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-floor-picker";
+import "../ha-floors-picker";
+
+@customElement("ha-selector-floor")
+export class HaFloorSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: FloorSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @state() private _entitySources?: EntitySources;
+
+  private _deviceIntegrationLookup = memoizeOne(getDeviceIntegrationLookup);
+
+  private _hasIntegration(selector: FloorSelector) {
+    return (
+      (selector.floor?.entity &&
+        ensureArray(selector.floor.entity).some(
+          (filter) => filter.integration
+        )) ||
+      (selector.floor?.device &&
+        ensureArray(selector.floor.device).some((device) => device.integration))
+    );
+  }
+
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (changedProperties.has("selector") && this.value !== undefined) {
+      if (this.selector.floor?.multiple && !Array.isArray(this.value)) {
+        this.value = [this.value];
+        fireEvent(this, "value-changed", { value: this.value });
+      } else if (!this.selector.floor?.multiple && Array.isArray(this.value)) {
+        this.value = this.value[0];
+        fireEvent(this, "value-changed", { value: this.value });
+      }
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    if (
+      changedProperties.has("selector") &&
+      this._hasIntegration(this.selector) &&
+      !this._entitySources
+    ) {
+      fetchEntitySourcesWithCache(this.hass).then((sources) => {
+        this._entitySources = sources;
+      });
+    }
+  }
+
+  protected render() {
+    if (this._hasIntegration(this.selector) && !this._entitySources) {
+      return nothing;
+    }
+
+    if (!this.selector.floor?.multiple) {
+      return html`
+        <ha-floor-picker
+          .hass=${this.hass}
+          .value=${this.value}
+          .label=${this.label}
+          .helper=${this.helper}
+          no-add
+          .deviceFilter=${this.selector.floor?.device
+            ? this._filterDevices
+            : undefined}
+          .entityFilter=${this.selector.floor?.entity
+            ? this._filterEntities
+            : undefined}
+          .disabled=${this.disabled}
+          .required=${this.required}
+        ></ha-floor-picker>
+      `;
+    }
+
+    return html`
+      <ha-floors-picker
+        .hass=${this.hass}
+        .value=${this.value}
+        .helper=${this.helper}
+        .pickFloorLabel=${this.label}
+        no-add
+        .deviceFilter=${this.selector.floor?.device
+          ? this._filterDevices
+          : undefined}
+        .entityFilter=${this.selector.floor?.entity
+          ? this._filterEntities
+          : undefined}
+        .disabled=${this.disabled}
+        .required=${this.required}
+      ></ha-floors-picker>
+    `;
+  }
+
+  private _filterEntities = (entity: HassEntity): boolean => {
+    if (!this.selector.floor?.entity) {
+      return true;
+    }
+
+    return ensureArray(this.selector.floor.entity).some((filter) =>
+      filterSelectorEntities(filter, entity, this._entitySources)
+    );
+  };
+
+  private _filterDevices = (device: DeviceRegistryEntry): boolean => {
+    if (!this.selector.floor?.device) {
+      return true;
+    }
+
+    const deviceIntegrations = this._entitySources
+      ? this._deviceIntegrationLookup(
+          this._entitySources,
+          Object.values(this.hass.entities)
+        )
+      : undefined;
+
+    return ensureArray(this.selector.floor.device).some((filter) =>
+      filterSelectorDevices(filter, device, deviceIntegrations)
+    );
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-floor": HaFloorSelector;
+  }
+}

src/components/ha-selector/ha-selector.ts

@@ -30,6 +30,7 @@ const LOAD_ELEMENTS = {
   entity: () => import("./ha-selector-entity"),
   statistic: () => import("./ha-selector-statistic"),
   file: () => import("./ha-selector-file"),
+  floor: () => import("./ha-selector-floor"),
   label: () => import("./ha-selector-label"),
   language: () => import("./ha-selector-language"),
   navigation: () => import("./ha-selector-navigation"),

src/components/ha-sub-menu.ts

@@ -0,0 +1,38 @@
+import { customElement } from "lit/decorators";
+import "element-internals-polyfill";
+import { CSSResult, css } from "lit";
+import { MdSubMenu } from "@material/web/menu/sub-menu";
+
+@customElement("ha-sub-menu")
+// @ts-expect-error
+export class HaSubMenu extends MdSubMenu {
+  static override styles: CSSResult[] = [
+    MdSubMenu.styles,
+    css`
+      :host {
+        --ha-icon-display: block;
+        --md-sys-color-primary: var(--primary-text-color);
+        --md-sys-color-on-primary: var(--primary-text-color);
+        --md-sys-color-secondary: var(--secondary-text-color);
+        --md-sys-color-surface: var(--card-background-color);
+        --md-sys-color-on-surface: var(--primary-text-color);
+        --md-sys-color-on-surface-variant: var(--secondary-text-color);
+        --md-sys-color-secondary-container: rgba(
+          var(--rgb-primary-color),
+          0.15
+        );
+        --md-sys-color-on-secondary-container: var(--text-primary-color);
+        --mdc-icon-size: 16px;
+
+        --md-sys-color-on-primary-container: var(--primary-text-color);
+        --md-sys-color-on-secondary-container: var(--primary-text-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-sub-menu": HaSubMenu;
+  }
+}

src/data/selector.ts

@@ -31,6 +31,7 @@ export type Selector =
   | DateSelector
   | DateTimeSelector
   | DeviceSelector
+  | FloorSelector
   | LegacyDeviceSelector
   | DurationSelector
   | EntitySelector
@@ -170,6 +171,14 @@ export interface DeviceSelector {
   } | null;
 }
 
+export interface FloorSelector {
+  floor: {
+    entity?: EntitySelectorFilter | readonly EntitySelectorFilter[];
+    device?: DeviceSelectorFilter | readonly DeviceSelectorFilter[];
+    multiple?: boolean;
+  } | null;
+}
+
 export interface LegacyDeviceSelector {
   device: DeviceSelector["device"] & {
     /**

src/layouts/hass-subpage.ts

@@ -142,9 +142,12 @@ class HassSubpage extends LitElement {
           right: calc(16px + env(safe-area-inset-right));
           inset-inline-end: calc(16px + env(safe-area-inset-right));
           inset-inline-start: initial;
-
           bottom: calc(16px + env(safe-area-inset-bottom));
           z-index: 1;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: flex-end;
+          gap: 8px;
         }
         :host([narrow]) #fab.tabs {
           bottom: calc(84px + env(safe-area-inset-bottom));

src/layouts/hass-tabs-subpage-data-table.ts

@@ -1,15 +1,13 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import "@material/mwc-button/mwc-button";
-import "@material/web/menu/menu";
+import "@material/web/divider/divider";
-import type { MdMenu } from "@material/web/menu/menu";
-import "@material/web/menu/menu-item";
 import {
   mdiArrowDown,
   mdiArrowUp,
   mdiClose,
-  mdiFilterRemove,
   mdiFilterVariant,
+  mdiFilterVariantRemove,
   mdiFormatListChecks,
   mdiMenuDown,
 } from "@mdi/js";
@@ -34,7 +32,10 @@ import type {
   HaDataTable,
   SortingDirection,
 } from "../components/data-table/ha-data-table";
+import "../components/ha-button-menu-new";
 import "../components/ha-dialog";
+import { HaMenu } from "../components/ha-menu";
+import "../components/ha-menu-item";
 import "../components/search-input-outlined";
 import type { HomeAssistant, Route } from "../types";
 import "./hass-tabs-subpage";
@@ -177,9 +178,9 @@ export class HaTabsSubpageDataTable extends LitElement {
 
   @query("ha-data-table", true) private _dataTable!: HaDataTable;
 
-  @query("#group-by-menu") private _groupByMenu!: MdMenu;
+  @query("#group-by-menu") private _groupByMenu!: HaMenu;
 
-  @query("#sort-by-menu") private _sortByMenu!: MdMenu;
+  @query("#sort-by-menu") private _sortByMenu!: HaMenu;
 
   private _showPaneController = new ResizeController(this, {
     callback: (entries) => entries[0]?.contentRect.width > 750,
@@ -227,6 +228,9 @@ export class HaTabsSubpageDataTable extends LitElement {
             class="has-dropdown select-mode-chip"
             .active=${this._selectMode}
             @click=${this._enableSelectMode}
+            .title=${localize(
+              "ui.components.subpage-data-table.enter_selection_mode"
+            )}
           >
             <ha-svg-icon slot="icon" .path=${mdiFormatListChecks}></ha-svg-icon>
           </ha-assist-chip>`
@@ -252,8 +256,11 @@ export class HaTabsSubpageDataTable extends LitElement {
             id="sort-by-anchor"
             @click=${this._toggleSortBy}
           >
-            <ha-svg-icon slot="trailing-icon" .path=${mdiMenuDown}></ha-svg-icon
+            <ha-svg-icon
-          ></ha-assist-chip>
+              slot="trailing-icon"
+              .path=${mdiMenuDown}
+            ></ha-svg-icon>
+          </ha-assist-chip>
         `
       : nothing;
 
@@ -290,11 +297,45 @@ export class HaTabsSubpageDataTable extends LitElement {
       >
         ${this._selectMode
           ? html`<div class="selection-bar" slot="toolbar">
-              <div class="center-vertical">
+              <div class="selection-controls">
                 <ha-icon-button
                   .path=${mdiClose}
                   @click=${this._disableSelectMode}
+                  .label=${localize(
+                    "ui.components.subpage-data-table.exit_selection_mode"
+                  )}
                 ></ha-icon-button>
+                <ha-button-menu-new positioning="absolute">
+                  <ha-assist-chip
+                    .label=${localize(
+                      "ui.components.subpage-data-table.select"
+                    )}
+                    slot="trigger"
+                  >
+                    <ha-svg-icon
+                      slot="icon"
+                      .path=${mdiFormatListChecks}
+                    ></ha-svg-icon>
+                    <ha-svg-icon
+                      slot="trailing-icon"
+                      .path=${mdiMenuDown}
+                    ></ha-svg-icon
+                  ></ha-assist-chip>
+                  <ha-menu-item .value=${undefined} @click=${this._selectAll}
+                    >${localize("ui.components.subpage-data-table.select_all")}
+                  </ha-menu-item>
+                  <ha-menu-item .value=${undefined} @click=${this._selectNone}
+                    >${localize("ui.components.subpage-data-table.select_none")}
+                  </ha-menu-item>
+                  <md-divider role="separator" tabindex="-1"></md-divider>
+                  <ha-menu-item
+                    .value=${undefined}
+                    @click=${this._disableSelectMode}
+                    >${localize(
+                      "ui.components.subpage-data-table.close_select_mode"
+                    )}
+                  </ha-menu-item>
+                </ha-button-menu-new>
                 <p>
                   ${localize("ui.components.subpage-data-table.selected", {
                     selected: this.selected || "0",
@@ -318,6 +359,9 @@ export class HaTabsSubpageDataTable extends LitElement {
                     slot="navigationIcon"
                     .path=${mdiClose}
                     @click=${this._toggleFilters}
+                    .label=${localize(
+                      "ui.components.subpage-data-table.close_filter"
+                    )}
                   ></ha-icon-button>
                   <span slot="title"
                     >${localize(
@@ -326,7 +370,11 @@ export class HaTabsSubpageDataTable extends LitElement {
                   >
                   <ha-icon-button
                     slot="actionItems"
-                    .path=${mdiFilterRemove}
+                    @click=${this._clearFilters}
+                    .path=${mdiFilterVariantRemove}
+                    .label=${localize(
+                      "ui.components.subpage-data-table.clear_filter"
+                    )}
                   ></ha-icon-button>
                 </ha-dialog-header>
                 <div class="filter-dialog-content">
@@ -347,8 +395,11 @@ export class HaTabsSubpageDataTable extends LitElement {
                     ></ha-svg-icon>
                   </ha-assist-chip>
                   <ha-icon-button
-                    .path=${mdiFilterRemove}
+                    .path=${mdiFilterVariantRemove}
                     @click=${this._clearFilters}
+                    .label=${localize(
+                      "ui.components.subpage-data-table.clear_filter"
+                    )}
                   ></ha-icon-button>
                 </div>
                 <div class="pane-content">
@@ -409,39 +460,39 @@ export class HaTabsSubpageDataTable extends LitElement {
               </ha-data-table>`}
         <div slot="fab"><slot name="fab"></slot></div>
       </hass-tabs-subpage>
-      <md-menu anchor="group-by-anchor" id="group-by-menu" positioning="fixed">
+      <ha-menu anchor="group-by-anchor" id="group-by-menu" positioning="fixed">
         ${Object.entries(this.columns).map(([id, column]) =>
           column.groupable
             ? html`
-                <md-menu-item
+                <ha-menu-item
                   .value=${id}
                   @click=${this._handleGroupBy}
                   .selected=${id === this._groupColumn}
                   class=${classMap({ selected: id === this._groupColumn })}
                 >
                   ${column.title || column.label}
-                </md-menu-item>
+                </ha-menu-item>
               `
             : nothing
         )}
-        <li divider role="separator"></li>
+        <md-divider role="separator" tabindex="-1"></md-divider>
-        <md-menu-item
+        <ha-menu-item
           .value=${undefined}
           @click=${this._handleGroupBy}
           .selected=${this._groupColumn === undefined}
           class=${classMap({ selected: this._groupColumn === undefined })}
-          >${localize(
-            "ui.components.subpage-data-table.dont_group_by"
-          )}</md-menu-item
         >
-      </md-menu>
+          ${localize("ui.components.subpage-data-table.dont_group_by")}
-      <md-menu anchor="sort-by-anchor" id="sort-by-menu" positioning="fixed">
+        </ha-menu-item>
+      </ha-menu>
+      <ha-menu anchor="sort-by-anchor" id="sort-by-menu" positioning="fixed">
         ${Object.entries(this.columns).map(([id, column]) =>
           column.sortable
             ? html`
-                <md-menu-item
+                <ha-menu-item
                   .value=${id}
                   @click=${this._handleSortBy}
+                  keep-open
                   .selected=${id === this._sortColumn}
                   class=${classMap({ selected: id === this._sortColumn })}
                 >
@@ -456,11 +507,11 @@ export class HaTabsSubpageDataTable extends LitElement {
                       `
                     : nothing}
                   ${column.title || column.label}
-                </md-menu-item>
+                </ha-menu-item>
               `
             : nothing
         )}
-      </md-menu>
+      </ha-menu>
     `;
   }
 
@@ -478,8 +529,6 @@ export class HaTabsSubpageDataTable extends LitElement {
   }
 
   private _handleSortBy(ev) {
-    ev.stopPropagation();
-    ev.preventDefault();
     const columnId = ev.currentTarget.value;
     if (!this._sortDirection || this._sortColumn !== columnId) {
       this._sortDirection = "asc";
@@ -504,6 +553,14 @@ export class HaTabsSubpageDataTable extends LitElement {
     this._dataTable.clearSelection();
   }
 
+  private _selectAll() {
+    this._dataTable.selectAll();
+  }
+
+  private _selectNone() {
+    this._dataTable.clearSelection();
+  }
+
   private _handleSearchChange(ev: CustomEvent) {
     if (this.filter === ev.detail.value) {
       return;
@@ -637,6 +694,8 @@ export class HaTabsSubpageDataTable extends LitElement {
         position: absolute;
         top: -4px;
         right: -4px;
+        inset-inline-end: -4px;
+        inset-inline-start: initial;
         min-width: 16px;
         box-sizing: border-box;
         border-radius: 50%;
@@ -669,21 +728,31 @@ export class HaTabsSubpageDataTable extends LitElement {
         padding: 8px 12px;
         box-sizing: border-box;
         font-size: 14px;
+        --ha-assist-chip-container-color: var(--primary-background-color);
+      }
+
+      .selection-controls {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .selection-controls p {
+        margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
       }
 
       .center-vertical {
         display: flex;
         align-items: center;
+        gap: 8px;
       }
 
       .relative {
         position: relative;
       }
 
-      .selection-bar p {
-        margin-left: 16px;
-      }
-
       ha-assist-chip {
         --ha-assist-chip-container-shape: 10px;
       }
@@ -712,23 +781,10 @@ export class HaTabsSubpageDataTable extends LitElement {
         display: flex;
         flex-direction: column;
       }
-      /* TODO: Migrate to ha-menu and ha-menu-item */
+
-      md-menu {
-        --md-menu-container-color: var(--card-background-color);
-      }
-      md-menu-item {
-        --md-menu-item-label-text-color: var(--primary-text-color);
-        --mdc-icon-size: 16px;
-        --md-menu-item-selected-container-color: rgba(
-          var(--rgb-primary-color),
-          0.15
-        );
-      }
-      md-menu-item.selected {
-        --md-menu-item-label-text-color: var(--primary-color);
-      }
       #sort-by-anchor,
-      #group-by-anchor {
+      #group-by-anchor,
+      ha-button-menu-new ha-assist-chip {
         --md-assist-chip-trailing-space: 8px;
       }
     `;

src/layouts/hass-tabs-subpage.ts

@@ -344,6 +344,10 @@ class HassTabsSubpage extends LitElement {
           inset-inline-start: initial;
           bottom: calc(16px + env(safe-area-inset-bottom));
           z-index: 1;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: flex-end;
+          gap: 8px;
         }
         :host([narrow]) #fab.tabs {
           bottom: calc(84px + env(safe-area-inset-bottom));

src/managers/notification-manager.ts

@@ -27,7 +27,7 @@ class NotificationManager extends LitElement {
   @query("ha-toast") private _toast!: HaToast | undefined;
 
   public async showDialog(parameters: ShowToastParams) {
-    if (this._parameters) {
+    if (this._parameters && this._parameters.message !== parameters.message) {
       this._parameters = undefined;
       await this.updateComplete;
     }

src/panels/config/areas/dialog-floor-registry-detail.ts

@@ -213,6 +213,9 @@ class DialogFloorDetail extends LitElement {
           display: block;
           margin-bottom: 16px;
         }
+        ha-floor-icon {
+          color: var(--secondary-text-color);
+        }
       `,
     ];
   }

src/panels/config/areas/ha-config-areas-dashboard.ts

@@ -23,9 +23,11 @@ import "../../../components/ha-fab";
 import "../../../components/ha-floor-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-sortable";
 import {
   AreaRegistryEntry,
   createAreaRegistryEntry,
+  updateAreaRegistryEntry,
 } from "../../../data/area_registry";
 import {
   FloorRegistryEntry,
@@ -50,6 +52,10 @@ import {
 } from "./show-dialog-area-registry-detail";
 import { showFloorRegistryDetailDialog } from "./show-dialog-floor-registry-detail";
 
+const UNASSIGNED_PATH = ["__unassigned__"];
+
+const SORT_OPTIONS = { sort: false, delay: 500, delayOnTouchOnly: true };
+
 @customElement("ha-config-areas-dashboard")
 export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -187,13 +193,22 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
                     >
                   </ha-button-menu>
                 </div>
-                <div class="areas">
+                <ha-sortable
-                  ${floor.areas.map((area) => this._renderArea(area))}
+                  handle-selector="a"
-                </div>
+                  draggable-selector="a"
+                  @item-moved=${this._areaMoved}
+                  group="floor"
+                  .options=${SORT_OPTIONS}
+                  .path=${[floor.floor_id]}
+                >
+                  <div class="areas">
+                    ${floor.areas.map((area) => this._renderArea(area))}
+                  </div>
+                </ha-sortable>
               </div>`
           )}
           ${areasAndFloors?.unassisgnedAreas.length
-            ? html`<div class="unassigned">
+            ? html`<div class="floor">
                 <div class="header">
                   <h2>
                     ${this.hass.localize(
@@ -201,11 +216,20 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
                     )}
                   </h2>
                 </div>
-                <div class="areas">
+                <ha-sortable
-                  ${areasAndFloors?.unassisgnedAreas.map((area) =>
+                  handle-selector="a"
-                    this._renderArea(area)
+                  draggable-selector="a"
-                  )}
+                  @item-moved=${this._areaMoved}
-                </div>
+                  group="floor"
+                  .options=${SORT_OPTIONS}
+                  .path=${UNASSIGNED_PATH}
+                >
+                  <div class="areas">
+                    ${areasAndFloors?.unassisgnedAreas.map((area) =>
+                      this._renderArea(area)
+                    )}
+                  </div>
+                </ha-sortable>
               </div>`
             : nothing}
         </div>
@@ -281,6 +305,29 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
     loadAreaRegistryDetailDialog();
   }
 
+  private async _areaMoved(ev) {
+    const areasAndFloors = this._processAreas(
+      this.hass.areas,
+      this.hass.devices,
+      this.hass.entities,
+      this._floors!
+    );
+    let area: AreaRegistryEntry;
+    if (ev.detail.oldPath === UNASSIGNED_PATH) {
+      area = areasAndFloors.unassisgnedAreas[ev.detail.oldIndex];
+    } else {
+      const oldFloor = areasAndFloors.floors!.find(
+        (floor) => floor.floor_id === ev.detail.oldPath[0]
+      );
+      area = oldFloor!.areas[ev.detail.oldIndex];
+    }
+
+    await updateAreaRegistryEntry(this.hass, area.area_id, {
+      floor_id:
+        ev.detail.newPath === UNASSIGNED_PATH ? null : ev.detail.newPath[0],
+    });
+  }
+
   private _handleFloorAction(ev: CustomEvent<ActionDetail>) {
     const floor = (ev.currentTarget as any).floor;
     switch (ev.detail.index) {
@@ -424,7 +471,6 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
       }
       .floor {
         --primary-color: var(--secondary-text-color);
-        margin-inline-end: 8px;
       }
       .warning {
         color: var(--error-color);

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

@@ -556,7 +556,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
                   ></ha-svg-icon
                   ><ha-svg-icon slot="end" .path=${mdiPlus}></ha-svg-icon>
                 </ha-list-item-new>
-                <md-divider></md-divider>`
+                <md-divider role="separator" tabindex="-1"></md-divider>`
             : ""}
           ${repeat(
             items,

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

@@ -1,16 +1,23 @@
 import { consume } from "@lit-labs/context";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
+import "@material/web/divider/divider";
 import {
+  mdiChevronRight,
+  mdiCog,
   mdiContentDuplicate,
   mdiDelete,
+  mdiDotsVertical,
   mdiHelpCircle,
   mdiInformationOutline,
+  mdiMenuDown,
   mdiPlay,
   mdiPlayCircleOutline,
   mdiPlus,
   mdiRobotHappy,
   mdiStopCircleOutline,
   mdiTag,
+  mdiToggleSwitch,
+  mdiToggleSwitchOffOutline,
   mdiTransitConnection,
 } from "@mdi/js";
 import { differenceInDays } from "date-fns/esm";
@@ -24,9 +31,10 @@ import {
   html,
   nothing,
 } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
+import { computeCssColor } from "../../../common/color/compute-color";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatShortDateTime } from "../../../common/datetime/format_date_time";
 import { relativeTime } from "../../../common/datetime/relative_time";
@@ -38,6 +46,7 @@ import "../../../components/chips/ha-assist-chip";
 import type {
   DataTableColumnContainer,
   RowClickedEvent,
+  SelectionChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-entity-toggle";
@@ -50,6 +59,9 @@ import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-overflow-menu";
+import "../../../components/ha-menu";
+import "../../../components/ha-menu-item";
+import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import {
   AutomationEntity,
@@ -66,7 +78,11 @@ import {
 } from "../../../data/category_registry";
 import { fullEntitiesContext } from "../../../data/context";
 import { UNAVAILABLE } from "../../../data/entity";
-import { EntityRegistryEntry } from "../../../data/entity_registry";
+import {
+  EntityRegistryEntry,
+  UpdateEntityRegistryEntryResult,
+  updateEntityRegistryEntry,
+} from "../../../data/entity_registry";
 import {
   LabelRegistryEntry,
   subscribeLabelRegistry,
@@ -79,11 +95,13 @@ import {
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
-import { HomeAssistant, Route } from "../../../types";
+import { HomeAssistant, Route, ServiceCallResponse } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
+import { turnOnOffEntity } from "../../lovelace/common/entity/turn-on-off-entity";
 import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
 import { configSections } from "../ha-panel-config";
 import { showNewAutomationDialog } from "./show-dialog-new-automation";
+import type { HaMenu } from "../../../components/ha-menu";
 
 type AutomationItem = AutomationEntity & {
   name: string;
@@ -116,6 +134,8 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
 
   @state() private _expandedFilter?: string;
 
+  @state() private _selected: string[] = [];
+
   @state()
   _categories!: CategoryRegistryEntry[];
 
@@ -126,6 +146,10 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
 
+  @state() private _overflowAutomation?: AutomationItem;
+
+  @query("#overflow-menu") private _overflowMenu!: HaMenu;
+
   private _automations = memoizeOne(
     (
       automations: AutomationEntity[],
@@ -274,82 +298,33 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
       columns.actions = {
         title: "",
         width: "64px",
-        type: "overflow-menu",
+        type: "icon-button",
         template: (automation) => html`
-          <ha-icon-overflow-menu
+          <ha-icon-button
-            .hass=${this.hass}
+            .automation=${automation}
-            narrow
+            .label=${this.hass.localize("ui.common.overflow_menu")}
-            .items=${[
+            .path=${mdiDotsVertical}
-              {
+            @click=${this._showOverflowMenu}
-                path: mdiInformationOutline,
+          ></ha-icon-button>
-                label: this.hass.localize(
-                  "ui.panel.config.automation.editor.show_info"
-                ),
-                action: () => this._showInfo(automation),
-              },
-              {
-                path: mdiTag,
-                label: this.hass.localize(
-                  `ui.panel.config.automation.picker.${automation.category ? "edit_category" : "assign_category"}`
-                ),
-                action: () => this._editCategory(automation),
-              },
-              {
-                path: mdiPlay,
-                label: this.hass.localize(
-                  "ui.panel.config.automation.editor.run"
-                ),
-                action: () => this._runActions(automation),
-              },
-              {
-                path: mdiTransitConnection,
-                label: this.hass.localize(
-                  "ui.panel.config.automation.editor.show_trace"
-                ),
-                action: () => this._showTrace(automation),
-              },
-              {
-                divider: true,
-              },
-              {
-                path: mdiContentDuplicate,
-                label: this.hass.localize(
-                  "ui.panel.config.automation.picker.duplicate"
-                ),
-                action: () => this.duplicate(automation),
-              },
-              {
-                path:
-                  automation.state === "off"
-                    ? mdiPlayCircleOutline
-                    : mdiStopCircleOutline,
-                label:
-                  automation.state === "off"
-                    ? this.hass.localize(
-                        "ui.panel.config.automation.editor.enable"
-                      )
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.disable"
-                      ),
-                action: () => this._toggle(automation),
-              },
-              {
-                label: this.hass.localize(
-                  "ui.panel.config.automation.picker.delete"
-                ),
-                path: mdiDelete,
-                action: () => this._deleteConfirm(automation),
-                warning: true,
-              },
-            ]}
-          >
-          </ha-icon-overflow-menu>
         `,
       };
       return columns;
     }
   );
 
+  private _showOverflowMenu = (ev) => {
+    if (
+      this._overflowMenu.open &&
+      ev.target === this._overflowMenu.anchorElement
+    ) {
+      this._overflowMenu.close();
+      return;
+    }
+    this._overflowAutomation = ev.target.automation;
+    this._overflowMenu.anchorElement = ev.target;
+    this._overflowMenu.show();
+  };
+
   protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
     return [
       subscribeCategoryRegistry(
@@ -366,6 +341,40 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
   }
 
   protected render(): TemplateResult {
+    const categoryItems = html`${this._categories?.map(
+        (category) =>
+          html`<ha-menu-item
+            .value=${category.category_id}
+            @click=${this._handleBulkCategory}
+          >
+            ${category.icon
+              ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
+              : html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
+            <div slot="headline">${category.name}</div>
+          </ha-menu-item>`
+      )}
+      <ha-menu-item .value=${null} @click=${this._handleBulkCategory}>
+        <div slot="headline">
+          ${this.hass.localize(
+            "ui.panel.config.automation.picker.bulk_actions.no_category"
+          )}
+        </div>
+      </ha-menu-item>`;
+    const labelItems = html` ${this._labels?.map((label) => {
+      const color = label.color ? computeCssColor(label.color) : undefined;
+      return html`<ha-menu-item
+        .value=${label.label_id}
+        @click=${this._handleBulkLabel}
+      >
+        <ha-label style=${color ? `--color: ${color}` : ""}>
+          ${label.icon
+            ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
+            : nothing}
+          ${label.name}
+        </ha-label>
+      </ha-menu-item>`;
+    })}`;
+
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -374,10 +383,14 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         id="entity_id"
         .route=${this.route}
         .tabs=${configSections.automations}
+        selectable
+        .selected=${this._selected.length}
+        @selection-changed=${this._handleSelectionChanged}
         hasFilters
-        .filters=${Object.values(this._filters).filter(
+        .filters=${
-          (filter) => filter.value?.length
+          Object.values(this._filters).filter((filter) => filter.value?.length)
-        ).length}
+            .length
+        }
         .columns=${this._columns(
           this.narrow,
           this.hass.localize,
@@ -466,36 +479,156 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           .narrow=${this.narrow}
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-blueprints>
-        ${!this.automations.length
+          ${
-          ? html`<div class="empty" slot="empty">
+            !this.narrow
-              <ha-svg-icon .path=${mdiRobotHappy}></ha-svg-icon>
+              ? html`<ha-button-menu-new slot="selection-bar">
-              <h1>
+                    <ha-assist-chip
+                      slot="trigger"
+                      .label=${this.hass.localize(
+                        "ui.panel.config.automation.picker.bulk_actions.move_category"
+                      )}
+                    >
+                      <ha-svg-icon
+                        slot="trailing-icon"
+                        .path=${mdiMenuDown}
+                      ></ha-svg-icon>
+                    </ha-assist-chip>
+                    ${categoryItems}
+                  </ha-button-menu-new>
+                  ${this.hass.dockedSidebar === "docked"
+                    ? nothing
+                    : html`<ha-button-menu-new slot="selection-bar">
+                        <ha-assist-chip
+                          slot="trigger"
+                          .label=${this.hass.localize(
+                            "ui.panel.config.automation.picker.bulk_actions.add_label"
+                          )}
+                        >
+                          <ha-svg-icon
+                            slot="trailing-icon"
+                            .path=${mdiMenuDown}
+                          ></ha-svg-icon>
+                        </ha-assist-chip>
+                        ${labelItems}
+                      </ha-button-menu-new>`}`
+              : nothing
+          }
+          <ha-button-menu-new has-overflow slot="selection-bar">
+            ${
+              this.narrow
+                ? html`<ha-assist-chip
+                    .label=${this.hass.localize(
+                      "ui.panel.config.automation.picker.bulk_action"
+                    )}
+                    slot="trigger"
+                  >
+                    <ha-svg-icon
+                      slot="trailing-icon"
+                      .path=${mdiMenuDown}
+                    ></ha-svg-icon>
+                  </ha-assist-chip>`
+                : html`<ha-icon-button
+                    .path=${mdiDotsVertical}
+                    .label=${"ui.panel.config.automation.picker.bulk_action"}
+                    slot="trigger"
+                  ></ha-icon-button>`
+            }
+              <ha-svg-icon
+                slot="trailing-icon"
+                .path=${mdiMenuDown}
+              ></ha-svg-icon
+            ></ha-assist-chip>
+            ${
+              this.narrow
+                ? html`<ha-sub-menu>
+                    <ha-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.picker.bulk_actions.move_category"
+                        )}
+                      </div>
+                      <ha-svg-icon
+                        slot="end"
+                        .path=${mdiChevronRight}
+                      ></ha-svg-icon>
+                    </ha-menu-item>
+                    <ha-menu slot="menu">${categoryItems}</ha-menu>
+                  </ha-sub-menu>`
+                : nothing
+            }
+            ${
+              this.narrow || this.hass.dockedSidebar === "docked"
+                ? html` <ha-sub-menu>
+                    <ha-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.picker.bulk_actions.add_label"
+                        )}
+                      </div>
+                      <ha-svg-icon
+                        slot="end"
+                        .path=${mdiChevronRight}
+                      ></ha-svg-icon>
+                    </ha-menu-item>
+                    <ha-menu slot="menu">${labelItems}</ha-menu>
+                  </ha-sub-menu>`
+                : nothing
+            }
+            <ha-menu-item @click=${this._handleBulkEnable}>
+              <ha-svg-icon slot="start" .path=${mdiToggleSwitch}></ha-svg-icon>
+              <div slot="headline">
                 ${this.hass.localize(
-                  "ui.panel.config.automation.picker.empty_header"
+                  "ui.panel.config.automation.picker.bulk_actions.enable"
                 )}
-              </h1>
+              </div>
-              <p>
+            </ha-menu-item>
+            <ha-menu-item @click=${this._handleBulkDisable}>
+              <ha-svg-icon
+                slot="start"
+                .path=${mdiToggleSwitchOffOutline}
+              ></ha-svg-icon>
+              <div slot="headline">
                 ${this.hass.localize(
-                  "ui.panel.config.automation.picker.empty_text_1"
+                  "ui.panel.config.automation.picker.bulk_actions.disable"
                 )}
-              </p>
+              </div>
-              <p>
+            </ha-menu-item>
-                ${this.hass.localize(
+          </ha-button-menu-new>
-                  "ui.panel.config.automation.picker.empty_text_2",
+        ${
-                  { user: this.hass.user?.name || "Alice" }
+          !this.automations.length
-                )}
+            ? html`<div class="empty" slot="empty">
-              </p>
+                <ha-svg-icon .path=${mdiRobotHappy}></ha-svg-icon>
-              <a
+                <h1>
-                href=${documentationUrl(this.hass, "/docs/automation/editor/")}
+                  ${this.hass.localize(
-                target="_blank"
+                    "ui.panel.config.automation.picker.empty_header"
-                rel="noreferrer"
+                  )}
-              >
+                </h1>
-                <ha-button>
+                <p>
-                  ${this.hass.localize("ui.panel.config.common.learn_more")}
+                  ${this.hass.localize(
-                </ha-button>
+                    "ui.panel.config.automation.picker.empty_text_1"
-              </a>
+                  )}
-            </div>`
+                </p>
-          : nothing}
+                <p>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.picker.empty_text_2",
+                    { user: this.hass.user?.name || "Alice" }
+                  )}
+                </p>
+                <a
+                  href=${documentationUrl(
+                    this.hass,
+                    "/docs/automation/editor/"
+                  )}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <ha-button>
+                    ${this.hass.localize("ui.panel.config.common.learn_more")}
+                  </ha-button>
+                </a>
+              </div>`
+            : nothing
+        }
         <ha-fab
           slot="fab"
           .label=${this.hass.localize(
@@ -507,6 +640,80 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-fab>
       </hass-tabs-subpage-data-table>
+      <ha-menu id="overflow-menu" positioning="fixed">
+        <ha-menu-item @click=${this._showInfo}>
+          <ha-svg-icon
+            .path=${mdiInformationOutline}
+            slot="start"
+          ></ha-svg-icon>
+          <div slot="headline">
+            ${this.hass.localize("ui.panel.config.automation.editor.show_info")}
+          </div>
+        </ha-menu-item>
+
+        <ha-menu-item @click=${this._showSettings}>
+          <ha-svg-icon .path=${mdiCog} slot="start"></ha-svg-icon>
+          <div slot="headline">
+            ${this.hass.localize(
+              "ui.panel.config.automation.picker.show_settings"
+            )}
+          </div>
+        </ha-menu-item>
+        <ha-menu-item @click=${this._editCategory}>
+          <ha-svg-icon .path=${mdiTag} slot="start"></ha-svg-icon>
+          <div slot="headline">
+            ${this.hass.localize(
+              `ui.panel.config.automation.picker.${this._overflowAutomation?.category ? "edit_category" : "assign_category"}`
+            )}
+          </div>
+        </ha-menu-item>
+        <ha-menu-item @click=${this._runActions}>
+          <ha-svg-icon .path=${mdiPlay} slot="start"></ha-svg-icon>
+          <div slot="headline">
+            ${this.hass.localize("ui.panel.config.automation.editor.run")}
+          </div>
+        </ha-menu-item>
+        <ha-menu-item @click=${this._showTrace}>
+          <ha-svg-icon .path=${mdiTransitConnection} slot="start"></ha-svg-icon>
+          <div slot="headline">
+            ${this.hass.localize(
+              "ui.panel.config.automation.editor.show_trace"
+            )}
+          </div>
+        </ha-menu-item>
+        <md-divider role="separator" tabindex="-1"></md-divider>
+        <ha-menu-item @click=${this._duplicate}>
+          <ha-svg-icon .path=${mdiContentDuplicate} slot="start"></ha-svg-icon>
+          <div slot="headline">
+            ${this.hass.localize("ui.panel.config.automation.picker.duplicate")}
+          </div>
+        </ha-menu-item>
+        <ha-menu-item @click=${this._toggle}>
+          <ha-svg-icon
+            .path=${
+              this._overflowAutomation?.state === "off"
+                ? mdiPlayCircleOutline
+                : mdiStopCircleOutline
+            }
+            slot="start"
+          ></ha-svg-icon>
+          <div slot="headline">
+            ${
+              this._overflowAutomation?.state === "off"
+                ? this.hass.localize("ui.panel.config.automation.editor.enable")
+                : this.hass.localize(
+                    "ui.panel.config.automation.editor.disable"
+                  )
+            }
+          </div>
+        </ha-menu-item>
+        <ha-menu-item @click=${this._deleteConfirm} class="warning">
+          <ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
+          <div slot="headline">
+            ${this.hass.localize("ui.panel.config.automation.picker.delete")}
+          </div>
+        </ha-menu-item>
+      </ha-menu>
     `;
   }
 
@@ -633,15 +840,29 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     this._applyFilters();
   }
 
-  private _showInfo(automation: any) {
+  private _showInfo(ev) {
+    const automation = ev.currentTarget.parentElement.anchorElement.automation;
     fireEvent(this, "hass-more-info", { entityId: automation.entity_id });
   }
 
-  private _runActions(automation: any) {
+  private _showSettings(ev) {
+    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+
+    fireEvent(this, "hass-more-info", {
+      entityId: automation.entity_id,
+      view: "settings",
+    });
+  }
+
+  private _runActions(ev) {
+    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+
     triggerAutomationActions(this.hass, automation.entity_id);
   }
 
-  private _editCategory(automation: any) {
+  private _editCategory(ev) {
+    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+
     const entityReg = this._entityReg.find(
       (reg) => reg.entity_id === automation.entity_id
     );
@@ -662,7 +883,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _showTrace(automation: any) {
+  private _showTrace(ev) {
+    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+
     if (!automation.attributes.id) {
       showAlertDialog(this, {
         text: this.hass.localize(
@@ -676,14 +899,18 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     );
   }
 
-  private async _toggle(automation): Promise<void> {
+  private async _toggle(ev): Promise<void> {
+    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+
     const service = automation.state === "off" ? "turn_on" : "turn_off";
     await this.hass.callService("automation", service, {
       entity_id: automation.entity_id,
     });
   }
 
-  private async _deleteConfirm(automation) {
+  private async _deleteConfirm(ev) {
+    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+
     showConfirmationDialog(this, {
       title: this.hass.localize(
         "ui.panel.config.automation.picker.delete_confirm_title"
@@ -717,7 +944,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     }
   }
 
-  private async duplicate(automation) {
+  private async _duplicate(ev) {
+    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+
     try {
       const config = await fetchAutomationFileConfig(
         this.hass,
@@ -776,6 +1005,12 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     }
   }
 
+  private _handleSelectionChanged(
+    ev: HASSDomEvent<SelectionChangedEvent>
+  ): void {
+    this._selected = ev.detail.value;
+  }
+
   private _createNew() {
     if (isComponentLoaded(this.hass, "blueprint")) {
       showNewAutomationDialog(this, { mode: "automation" });
@@ -784,6 +1019,48 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     }
   }
 
+  private async _handleBulkCategory(ev) {
+    const category = ev.currentTarget.value;
+    const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
+    this._selected.forEach((entityId) => {
+      promises.push(
+        updateEntityRegistryEntry(this.hass, entityId, {
+          categories: { automation: category },
+        })
+      );
+    });
+    await Promise.all(promises);
+  }
+
+  private async _handleBulkLabel(ev) {
+    const label = ev.currentTarget.value;
+    const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
+    this._selected.forEach((entityId) => {
+      promises.push(
+        updateEntityRegistryEntry(this.hass, entityId, {
+          labels: this.hass.entities[entityId].labels.concat(label),
+        })
+      );
+    });
+    await Promise.all(promises);
+  }
+
+  private async _handleBulkEnable() {
+    const promises: Promise<ServiceCallResponse>[] = [];
+    this._selected.forEach((entityId) => {
+      promises.push(turnOnOffEntity(this.hass, entityId, true));
+    });
+    await Promise.all(promises);
+  }
+
+  private async _handleBulkDisable() {
+    const promises: Promise<ServiceCallResponse>[] = [];
+    this._selected.forEach((entityId) => {
+      promises.push(turnOnOffEntity(this.hass, entityId, false));
+    });
+    await Promise.all(promises);
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -799,6 +1076,16 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           --mdc-icon-size: 80px;
           max-width: 500px;
         }
+        ha-assist-chip {
+          --ha-assist-chip-container-shape: 10px;
+        }
+        ha-button-menu-new ha-assist-chip {
+          --md-assist-chip-trailing-space: 8px;
+        }
+        ha-label {
+          --ha-label-background-color: var(--color, var(--grey-color));
+          --ha-label-background-opacity: 0.5;
+        }
       `,
     ];
   }

src/panels/config/entities/ha-config-entities.ts

@@ -527,11 +527,11 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         .filters=${Object.values(this._filters).filter(
           (filter) => filter.value?.length
         ).length}
-        .selected=${this._selectedEntities.length}
         .filter=${this._filter}
         selectable
-        clickable
+        .selected=${this._selectedEntities.length}
         @selection-changed=${this._handleSelectionChanged}
+        clickable
         @clear-filter=${this._clearFilter}
         @search-changed=${this._handleSearchChange}
         @row-click=${this._openEditEntry}

src/panels/config/helpers/ha-config-helpers.ts

@@ -1,8 +1,17 @@
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { mdiAlertCircle, mdiPencilOff, mdiPlus } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { LitElement, PropertyValues, TemplateResult, html } from "lit";
+import {
+  CSSResultGroup,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+  css,
+  html,
+  nothing,
+} from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { consume } from "@lit-labs/context";
 import memoizeOne from "memoize-one";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { navigate } from "../../../common/navigate";
@@ -15,6 +24,7 @@ import {
   DataTableColumnContainer,
   RowClickedEvent,
 } from "../../../components/data-table/ha-data-table";
+import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon";
 import "../../../components/ha-state-icon";
@@ -44,6 +54,13 @@ import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
 import { isHelperDomain } from "./const";
 import { showHelperDetailDialog } from "./show-dialog-helper-detail";
+import {
+  LabelRegistryEntry,
+  subscribeLabelRegistry,
+} from "../../../data/label_registry";
+import { fullEntitiesContext } from "../../../data/context";
+import "../../../components/ha-filter-labels";
+import { haStyle } from "../../../resources/styles";
 
 type HelperItem = {
   id: string;
@@ -54,6 +71,7 @@ type HelperItem = {
   type: string;
   configEntry?: ConfigEntry;
   entity?: HassEntity;
+  label_entries: LabelRegistryEntry[];
 };
 
 // This groups items by a key but only returns last entry per key.
@@ -93,6 +111,24 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
 
   @state() private _configEntries?: Record<string, ConfigEntry>;
 
+  @state() private _activeFilters?: string[];
+
+  @state() private _filters: Record<
+    string,
+    { value: string[] | undefined; items: Set<string> | undefined }
+  > = {};
+
+  @state() private _expandedFilter?: string;
+
+  @state()
+  _labels!: LabelRegistryEntry[];
+
+  @state()
+  @consume({ context: fullEntitiesContext, subscribe: true })
+  _entityReg!: EntityRegistryEntry[];
+
+  @state() private _filteredStateItems?: string[] | null;
+
   public hassSubscribe() {
     return [
       subscribeConfigEntries(
@@ -117,6 +153,9 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
       subscribeEntityRegistry(this.hass.connection!, (entries) => {
         this._entityEntries = groupByOne(entries, (entry) => entry.entity_id);
       }),
+      subscribeLabelRegistry(this.hass.connection, (labels) => {
+        this._labels = labels;
+      }),
     ];
   }
 
@@ -146,10 +185,17 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
           grows: true,
           direction: "asc",
           template: (helper) => html`
-            ${helper.name}
+            <div style="font-size: 14px;">${helper.name}</div>
             ${narrow
               ? html`<div class="secondary">${helper.entity_id}</div> `
-              : ""}
+              : nothing}
+            ${helper.label_entries.length
+              ? html`
+                  <ha-data-table-labels
+                    .labels=${helper.label_entries}
+                  ></ha-data-table-labels>
+                `
+              : nothing}
           `,
         },
       };
@@ -201,8 +247,15 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
       localize: LocalizeFunc,
       stateItems: HassEntity[],
       entityEntries: Record<string, EntityRegistryEntry>,
-      configEntries: Record<string, ConfigEntry>
+      configEntries: Record<string, ConfigEntry>,
+      entityReg: EntityRegistryEntry[],
+      labelReg?: LabelRegistryEntry[],
+      filteredStateItems?: string[] | null
     ): HelperItem[] => {
+      if (filteredStateItems === null) {
+        return [];
+      }
+
       const configEntriesCopy = { ...configEntries };
 
       const states = stateItems.map((entityState) => {
@@ -241,14 +294,29 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         entity: undefined,
       }));
 
-      return [...states, ...entries].map((item) => ({
+      return [...states, ...entries]
-        ...item,
+        .filter((item) =>
-        localized_type: item.configEntry
+          filteredStateItems
-          ? domainToName(localize, item.type)
+            ? filteredStateItems?.includes(item.entity_id)
-          : localize(
+            : true
-              `ui.panel.config.helpers.types.${item.type}` as LocalizeKeys
+        )
-            ) || item.type,
+        .map((item) => {
-      }));
+          const entityRegEntry = entityReg.find(
+            (reg) => reg.entity_id === item.entity_id
+          );
+          const labels = labelReg && entityRegEntry?.labels;
+          return {
+            ...item,
+            localized_type: item.configEntry
+              ? domainToName(localize, item.type)
+              : localize(
+                  `ui.panel.config.helpers.types.${item.type}` as LocalizeKeys
+                ) || item.type,
+            label_entries: (labels || []).map(
+              (lbl) => labelReg!.find((label) => label.label_id === lbl)!
+            ),
+          };
+        });
     }
   );
 
@@ -269,20 +337,40 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.devices}
+        hasFilters
+        .filters=${Object.values(this._filters).filter(
+          (filter) => filter.value?.length
+        ).length}
         .columns=${this._columns(this.narrow, this.hass.localize)}
         .data=${this._getItems(
           this.hass.localize,
           this._stateItems,
           this._entityEntries,
-          this._configEntries
+          this._configEntries,
+          this._entityReg,
+          this._labels,
+          this._filteredStateItems
         )}
+        .activeFilters=${this._activeFilters}
+        @clear-filter=${this._clearFilter}
         @row-click=${this._openEditDialog}
         hasFab
         clickable
         .noDataText=${this.hass.localize(
           "ui.panel.config.helpers.picker.no_helpers"
         )}
+        class=${this.narrow ? "narrow" : ""}
       >
+        <ha-filter-labels
+          .hass=${this.hass}
+          .value=${this._filters["ha-filter-labels"]?.value}
+          @data-table-filter-changed=${this._filterChanged}
+          slot="filter-pane"
+          .expanded=${this._expandedFilter === "ha-filter-labels"}
+          .narrow=${this.narrow}
+          @expanded-changed=${this._filterExpanded}
+        ></ha-filter-labels>
+
         <ha-integration-overflow-menu
           .hass=${this.hass}
           slot="toolbar-icon"
@@ -293,7 +381,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
             "ui.panel.config.helpers.picker.create_helper"
           )}
           extended
-          @click=${this._createHelpler}
+          @click=${this._createHelper}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-fab>
@@ -301,6 +389,63 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
     `;
   }
 
+  private _filterExpanded(ev) {
+    if (ev.detail.expanded) {
+      this._expandedFilter = ev.target.localName;
+    } else if (this._expandedFilter === ev.target.localName) {
+      this._expandedFilter = undefined;
+    }
+  }
+
+  private _filterChanged(ev) {
+    const type = ev.target.localName;
+    this._filters[type] = ev.detail;
+    this._applyFilters();
+  }
+
+  private _applyFilters() {
+    const filters = Object.entries(this._filters);
+    let items: Set<string> | undefined;
+    for (const [key, filter] of filters) {
+      if (filter.items) {
+        if (!items) {
+          items = filter.items;
+          continue;
+        }
+        items =
+          "intersection" in items
+            ? // @ts-ignore
+              items.intersection(filter.items)
+            : new Set([...items].filter((x) => filter.items!.has(x)));
+      }
+      if (key === "ha-filter-labels" && filter.value?.length) {
+        const labelItems: Set<string> = new Set();
+        this._stateItems
+          .filter((stateItem) =>
+            this._entityReg
+              .find((reg) => reg.entity_id === stateItem.entity_id)
+              ?.labels.some((lbl) => filter.value!.includes(lbl))
+          )
+          .forEach((stateItem) => labelItems.add(stateItem.entity_id));
+        if (!items) {
+          items = labelItems;
+          continue;
+        }
+        items =
+          "intersection" in items
+            ? // @ts-ignore
+              items.intersection(labelItems)
+            : new Set([...items].filter((x) => labelItems!.has(x)));
+      }
+    }
+    this._filteredStateItems = items ? [...items] : undefined;
+  }
+
+  private _clearFilter() {
+    this._filters = {};
+    this._applyFilters();
+  }
+
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     if (this.route.path === "/add") {
@@ -418,9 +563,23 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _createHelpler() {
+  private _createHelper() {
     showHelperDetailDialog(this, {});
   }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        hass-tabs-subpage-data-table {
+          --data-table-row-height: 60px;
+        }
+        hass-tabs-subpage-data-table.narrow {
+          --data-table-row-height: 72px;
+        }
+      `,
+    ];
+  }
 }
 
 declare global {

src/panels/config/labels/dialog-label-detail.ts

@@ -49,11 +49,19 @@ class DialogLabelDetail
       this._icon = "";
       this._color = "";
     }
+    document.body.addEventListener("keydown", this._handleKeyPress);
   }
 
+  private _handleKeyPress = (ev: KeyboardEvent) => {
+    if (ev.key === "Escape") {
+      ev.stopPropagation();
+    }
+  };
+
   public closeDialog(): void {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
+    document.body.removeEventListener("keydown", this._handleKeyPress);
   }
 
   protected render() {

src/resources/styles-data.ts

@@ -143,7 +143,10 @@ export const derivedStyles = {
   "mdc-select-disabled-ink-color": "var(--input-disabled-ink-color)",
   "mdc-select-dropdown-icon-color": "var(--input-dropdown-icon-color)",
   "mdc-select-disabled-dropdown-icon-color": "var(--input-disabled-ink-color)",
-
+  "ha-assist-chip-filled-container-color":
+    "rgba(var(--rgb-primary-text-color),0.15)",
+  "ha-assist-chip-active-container-color":
+    "rgba(var(--rgb-primary-color),0.15)",
   "chip-background-color": "rgba(var(--rgb-primary-text-color), 0.15)",
   // Vaadin
   "material-body-text-color": "var(--primary-text-color)",

src/translations/en.json

@@ -501,11 +501,18 @@
       },
       "subpage-data-table": {
         "filters": "Filters",
+        "clear_filter": "Clear filter",
+        "close_filter": "Close filters",
+        "exit_selection_mode": "Exit selection mode",
+        "enter_selection_mode": "Enter selection mode",
         "sort_by": "Sort by {sortColumn}",
         "group_by": "Group by {groupColumn}",
         "dont_group_by": "Don't group",
         "select": "Select",
-        "selected": "Selected {selected}"
+        "selected": "Selected {selected}",
+        "close_select_mode": "Close selection mode",
+        "select_all": "Select all",
+        "select_none": "Select none"
       },
       "config-entry-picker": {
         "config_entry": "Integration"
@@ -2669,6 +2676,7 @@
             "edit_automation": "Edit automation",
             "dev_automation": "Debug automation",
             "show_info_automation": "Show info about automation",
+            "show_settings": "Show settings",
             "delete": "[%key:ui::common::delete%]",
             "delete_confirm_title": "Delete automation?",
             "delete_confirm_text": "{name} will be permanently deleted.",
@@ -2689,6 +2697,14 @@
               "state": "State",
               "category": "Category"
             },
+            "bulk_action": "Action",
+            "bulk_actions": {
+              "move_category": "Move to category",
+              "no_category": "No category",
+              "add_label": "Add label",
+              "enable": "Enable",
+              "disable": "Disable"
+            },
             "empty_header": "Start automating",
             "empty_text_1": "Automations make Home Assistant automatically respond to things happening in and around your home.",
             "empty_text_2": "Automations connect triggers to actions in a ''when trigger then action'' fashion with optional conditions. For example: ''When the sun sets and if {user} is home, then turn on the lights''."

yarn.lock

@@ -1526,14 +1526,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:6.26.0, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0":
+"@codemirror/view@npm:6.26.1, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0":
-  version: 6.26.0
+  version: 6.26.1
-  resolution: "@codemirror/view@npm:6.26.0"
+  resolution: "@codemirror/view@npm:6.26.1"
   dependencies:
     "@codemirror/state": "npm:^6.4.0"
     style-mod: "npm:^4.1.0"
     w3c-keyname: "npm:^2.2.4"
-  checksum: 10/d4ef249044cbc293a7267c83e08671a68646fd7bbe1efb8d205c01385f157c93918eabeaedb62a4cc10598ab63818ac749cec4f6355fe0404d9d4beb7857c31f
+  checksum: 10/6d2b19b2439c36b2712d3560eeb0c198ad2ee442ad22641c2b4bce94077812cffbb52ca12328219d3b9663b2dd0ffc63481432a2550839e5c7a7a53704e82a9a
   languageName: node
   linkType: hard
 
@@ -9604,7 +9604,7 @@ __metadata:
     "@codemirror/legacy-modes": "npm:6.3.3"
     "@codemirror/search": "npm:6.5.6"
     "@codemirror/state": "npm:6.4.1"
-    "@codemirror/view": "npm:6.26.0"
+    "@codemirror/view": "npm:6.26.1"
     "@egjs/hammerjs": "npm:2.0.17"
     "@formatjs/intl-datetimeformat": "npm:6.12.3"
     "@formatjs/intl-displaynames": "npm:6.6.6"