20240402.1 (#20326)

gallery/src/pages/components/ha-control-select.ts

@@ -187,7 +187,7 @@ export class DemoHaControlSelect extends LitElement {
         --mdc-icon-size: 24px;
         --control-select-color: var(--state-fan-active-color);
         --control-select-thickness: 130px;
-        --control-select-border-radius: 48px;
+        --control-select-border-radius: 36px;
       }
       .vertical-selects {
         height: 300px;

gallery/src/pages/components/ha-control-slider.ts

@@ -151,7 +151,7 @@ export class DemoHaBarSlider extends LitElement {
         --control-slider-background: #ffcf4c;
         --control-slider-background-opacity: 0.2;
         --control-slider-thickness: 130px;
-        --control-slider-border-radius: 48px;
+        --control-slider-border-radius: 36px;
       }
       .vertical-sliders {
         height: 300px;

gallery/src/pages/components/ha-control-switch.ts

@@ -118,7 +118,7 @@ export class DemoHaControlSwitch extends LitElement {
         --control-switch-on-color: var(--green-color);
         --control-switch-off-color: var(--red-color);
         --control-switch-thickness: 130px;
-        --control-switch-border-radius: 48px;
+        --control-switch-border-radius: 36px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }

pyproject.toml

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

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

@@ -5,20 +5,22 @@ import { LabelRegistryEntry } from "../../data/label_registry";
 import { computeCssColor } from "../../common/color/compute-color";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-label";
+import { stringCompare } from "../../common/string/compare";
 
 @customElement("ha-data-table-labels")
 class HaDataTableLabels extends LitElement {
   @property({ attribute: false }) public labels!: LabelRegistryEntry[];
 
   protected render(): TemplateResult {
+    const labels = this.labels.sort((a, b) => stringCompare(a.name, b.name));
     return html`
       <ha-chip-set>
         ${repeat(
-          this.labels.slice(0, 2),
+          labels.slice(0, 2),
           (label) => label.label_id,
           (label) => this._renderLabel(label, true)
         )}
-        ${this.labels.length > 2
+        ${labels.length > 2
           ? html`<ha-button-menu
               absolute
               role="button"
@@ -27,10 +29,10 @@ class HaDataTableLabels extends LitElement {
               @closed=${this._handleIconOverflowMenuClosed}
             >
               <ha-label slot="trigger" class="plus" dense>
-                +${this.labels.length - 2}
+                +${labels.length - 2}
               </ha-label>
               ${repeat(
-                this.labels.slice(2),
+                labels.slice(2),
                 (label) => label.label_id,
                 (label) => html`
                   <ha-list-item @click=${this._labelClicked} .item=${label}>

src/components/ha-area-picker.ts

@@ -21,10 +21,8 @@ import {
   getDeviceEntityDisplayLookup,
 } from "../data/device_registry";
 import { EntityRegistryDisplayEntry } from "../data/entity_registry";
-import {
+import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
-  showAlertDialog,
+import { showAreaRegistryDetailDialog } from "../panels/config/areas/show-dialog-area-registry-detail";
-  showPromptDialog,
-} from "../dialogs/generic/show-dialog-box";
 import { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box";
@@ -38,7 +36,7 @@ type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry;
 const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) =>
   html`<ha-list-item
     graphic="icon"
-    class=${classMap({ "add-new": item.area_id === "add_new" })}
+    class=${classMap({ "add-new": item.area_id === ADD_NEW_ID })}
   >
     ${item.icon
       ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
@@ -46,6 +44,10 @@ const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) =>
     ${item.name}
   </ha-list-item>`;
 
+const ADD_NEW_ID = "___ADD_NEW___";
+const NO_ITEMS_ID = "___NO_ITEMS___";
+const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
+
 @customElement("ha-area-picker")
 export class HaAreaPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -134,20 +136,6 @@ export class HaAreaPicker extends LitElement {
       noAdd: this["noAdd"],
       excludeAreas: this["excludeAreas"]
     ): AreaRegistryEntry[] => {
-      if (!areas.length) {
-        return [
-          {
-            area_id: "no_areas",
-            floor_id: null,
-            name: this.hass.localize("ui.components.area-picker.no_areas"),
-            picture: null,
-            icon: null,
-            aliases: [],
-            labels: [],
-          },
-        ];
-      }
-
       let deviceEntityLookup: DeviceEntityDisplayLookup = {};
       let inputDevices: DeviceRegistryEntry[] | undefined;
       let inputEntities: EntityRegistryDisplayEntry[] | undefined;
@@ -284,9 +272,9 @@ export class HaAreaPicker extends LitElement {
       if (!outputAreas.length) {
         outputAreas = [
           {
-            area_id: "no_areas",
+            area_id: NO_ITEMS_ID,
             floor_id: null,
-            name: this.hass.localize("ui.components.area-picker.no_match"),
+            name: this.hass.localize("ui.components.area-picker.no_areas"),
             picture: null,
             icon: null,
             aliases: [],
@@ -300,7 +288,7 @@ export class HaAreaPicker extends LitElement {
         : [
             ...outputAreas,
             {
-              area_id: "add_new",
+              area_id: ADD_NEW_ID,
               floor_id: null,
               name: this.hass.localize("ui.components.area-picker.add_new"),
               picture: null,
@@ -374,20 +362,40 @@ export class HaAreaPicker extends LitElement {
 
     const filteredItems = fuzzyFilterSort<ScorableAreaRegistryEntry>(
       filterString,
-      target.items || []
+      target.items?.filter(
+        (item) => ![NO_ITEMS_ID, ADD_NEW_ID].includes(item.label_id)
+      ) || []
     );
-    if (!this.noAdd && filteredItems?.length === 0) {
+    if (filteredItems.length === 0) {
-      this._suggestion = filterString;
+      if (!this.noAdd) {
-      this.comboBox.filteredItems = [
+        this.comboBox.filteredItems = [
-        {
+          {
-          area_id: "add_new_suggestion",
+            area_id: NO_ITEMS_ID,
-          name: this.hass.localize(
+            floor_id: null,
-            "ui.components.area-picker.add_new_sugestion",
+            name: this.hass.localize("ui.components.area-picker.no_match"),
-            { name: this._suggestion }
+            icon: null,
-          ),
+            picture: null,
-          picture: null,
+            labels: [],
-        },
+            aliases: [],
-      ];
+          },
+        ] as AreaRegistryEntry[];
+      } else {
+        this._suggestion = filterString;
+        this.comboBox.filteredItems = [
+          {
+            area_id: ADD_NEW_SUGGESTION_ID,
+            floor_id: null,
+            name: this.hass.localize(
+              "ui.components.area-picker.add_new_sugestion",
+              { name: this._suggestion }
+            ),
+            icon: "mdi:plus",
+            picture: null,
+            labels: [],
+            aliases: [],
+          },
+        ] as AreaRegistryEntry[];
+      }
     } else {
       this.comboBox.filteredItems = filteredItems;
     }
@@ -405,11 +413,13 @@ export class HaAreaPicker extends LitElement {
     ev.stopPropagation();
     let newValue = ev.detail.value;
 
-    if (newValue === "no_areas") {
+    if (newValue === NO_ITEMS_ID) {
       newValue = "";
+      this.comboBox.setInputValue("");
+      return;
     }
 
-    if (!["add_new_suggestion", "add_new"].includes(newValue)) {
+    if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {
       if (newValue !== this._value) {
         this._setValue(newValue);
       }
@@ -417,25 +427,14 @@ export class HaAreaPicker extends LitElement {
     }
 
     (ev.target as any).value = this._value;
-    showPromptDialog(this, {
+
-      title: this.hass.localize("ui.components.area-picker.add_dialog.title"),
+    this.hass.loadFragmentTranslation("config");
-      text: this.hass.localize("ui.components.area-picker.add_dialog.text"),
+
-      confirmText: this.hass.localize(
+    showAreaRegistryDetailDialog(this, {
-        "ui.components.area-picker.add_dialog.add"
+      suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
-      ),
+      createEntry: async (values) => {
-      inputLabel: this.hass.localize(
-        "ui.components.area-picker.add_dialog.name"
-      ),
-      defaultValue:
-        newValue === "add_new_suggestion" ? this._suggestion : undefined,
-      confirm: async (name) => {
-        if (!name) {
-          return;
-        }
         try {
-          const area = await createAreaRegistryEntry(this.hass, {
+          const area = await createAreaRegistryEntry(this.hass, values);
-            name,
-          });
           const areas = [...Object.values(this.hass.areas), area];
           this.comboBox.filteredItems = this._getAreas(
             areas,
@@ -455,18 +454,16 @@ export class HaAreaPicker extends LitElement {
         } catch (err: any) {
           showAlertDialog(this, {
             title: this.hass.localize(
-              "ui.components.area-picker.add_dialog.failed_create_area"
+              "ui.components.area-picker.failed_create_area"
             ),
             text: err.message,
           });
         }
       },
-      cancel: () => {
-        this._setValue(undefined);
-        this._suggestion = undefined;
-        this.comboBox.setInputValue("");
-      },
     });
+
+    this._suggestion = undefined;
+    this.comboBox.setInputValue("");
   }
 
   private _setValue(value?: string) {

src/components/ha-floor-picker.ts

@@ -23,11 +23,9 @@ import {
   getFloorAreaLookup,
   subscribeFloorRegistry,
 } from "../data/floor_registry";
-import {
+import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
-  showAlertDialog,
-  showPromptDialog,
-} from "../dialogs/generic/show-dialog-box";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import { showFloorRegistryDetailDialog } from "../panels/config/areas/show-dialog-floor-registry-detail";
 import { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box";
@@ -386,7 +384,7 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
         this.comboBox.filteredItems = [
           {
             floor_id: NO_FLOORS_ID,
-            name: this.hass.localize("ui.components.floor-picker.no_floors"),
+            name: this.hass.localize("ui.components.floor-picker.no_match"),
             icon: null,
             level: null,
             aliases: [],
@@ -438,25 +436,14 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
     }
 
     (ev.target as any).value = this._value;
-    showPromptDialog(this, {
+
-      title: this.hass.localize("ui.components.floor-picker.add_dialog.title"),
+    this.hass.loadFragmentTranslation("config");
-      text: this.hass.localize("ui.components.floor-picker.add_dialog.text"),
+
-      confirmText: this.hass.localize(
+    showFloorRegistryDetailDialog(this, {
-        "ui.components.floor-picker.add_dialog.add"
+      suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
-      ),
+      createEntry: async (values) => {
-      inputLabel: this.hass.localize(
-        "ui.components.floor-picker.add_dialog.name"
-      ),
-      defaultValue:
-        newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : undefined,
-      confirm: async (name) => {
-        if (!name) {
-          return;
-        }
         try {
-          const floor = await createFloorRegistryEntry(this.hass, {
+          const floor = await createFloorRegistryEntry(this.hass, values);
-            name,
-          });
           const floors = [...this._floors!, floor];
           this.comboBox.filteredItems = this._getFloors(
             floors,
@@ -477,18 +464,16 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
         } catch (err: any) {
           showAlertDialog(this, {
             title: this.hass.localize(
-              "ui.components.floor-picker.add_dialog.failed_create_floor"
+              "ui.components.floor-picker.failed_create_floor"
             ),
             text: err.message,
           });
         }
       },
-      cancel: () => {
-        this._setValue(undefined);
-        this._suggestion = undefined;
-        this.comboBox.setInputValue("");
-      },
     });
+
+    this._suggestion = undefined;
+    this.comboBox.setInputValue("");
   }
 
   private _setValue(value?: string) {

src/components/ha-label-picker.ts

@@ -445,6 +445,8 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
 
     (ev.target as any).value = this._value;
 
+    this.hass.loadFragmentTranslation("config");
+
     showLabelDetailDialog(this, {
       entry: undefined,
       suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",

src/components/ha-label.ts

@@ -43,6 +43,7 @@ class HaLabel extends LitElement {
           border-radius: 18px;
           color: var(--ha-label-text-color);
           --mdc-icon-size: 12px;
+          text-wrap: nowrap;
         }
         .content > * {
           position: relative;

src/components/ha-labels-picker.ts

@@ -17,6 +17,7 @@ import "./chips/ha-input-chip";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-label-picker";
 import type { HaLabelPicker } from "./ha-label-picker";
+import { stringCompare } from "../common/string/compare";
 
 @customElement("ha-labels-picker")
 export class HaLabelsPicker extends SubscribeMixin(LitElement) {
@@ -75,7 +76,7 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public required = false;
 
-  @state() private _labels?: LabelRegistryEntry[];
+  @state() private _labels?: { [id: string]: LabelRegistryEntry };
 
   @query("ha-label-picker", true) public labelPicker!: HaLabelPicker;
 
@@ -92,22 +93,28 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
   protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
     return [
       subscribeLabelRegistry(this.hass.connection, (labels) => {
-        this._labels = labels;
+        const lookUp = {};
+        labels.forEach((label) => {
+          lookUp[label.label_id] = label;
+        });
+        this._labels = lookUp;
       }),
     ];
   }
 
   protected render(): TemplateResult {
+    const labels = this.value
+      ?.map((id) => this._labels?.[id])
+      .sort((a, b) =>
+        stringCompare(a?.name || "", b?.name || "", this.hass.locale.language)
+      );
     return html`
-      ${this.value?.length
+      ${labels?.length
         ? html`<ha-chip-set>
             ${repeat(
-              this.value,
+              labels,
-              (item) => item,
+              (label) => label?.label_id,
-              (item, idx) => {
+              (label, idx) => {
-                const label = this._labels?.find(
-                  (lbl) => lbl.label_id === item
-                );
                 const color = label?.color
                   ? computeCssColor(label.color)
                   : undefined;
@@ -168,9 +175,6 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
           label.label_id,
           values
         );
-        this._labels = this._labels!.map((lbl) =>
-          lbl.label_id === updated.label_id ? updated : lbl
-        );
         return updated;
       },
     });

src/components/ha-menu-item.ts

@@ -1,7 +1,7 @@
-import { customElement } from "lit/decorators";
+import { MdMenuItem } from "@material/web/menu/menu-item";
 import "element-internals-polyfill";
 import { CSSResult, css } from "lit";
-import { MdMenuItem } from "@material/web/menu/menu-item";
+import { customElement } from "lit/decorators";
 
 @customElement("ha-menu-item")
 export class HaMenuItem extends MdMenuItem {
@@ -26,6 +26,13 @@ export class HaMenuItem extends MdMenuItem {
         --md-sys-color-on-primary-container: var(--primary-text-color);
         --md-sys-color-on-secondary-container: var(--primary-text-color);
       }
+      :host(.warning) {
+        --md-menu-item-label-text-color: var(--error-color);
+        --md-menu-item-leading-icon-color: var(--error-color);
+      }
+      ::slotted([slot="headline"]) {
+        text-wrap: nowrap;
+      }
     `,
   ];
 }

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

@@ -30,6 +30,7 @@ export class HaLabelSelector extends LitElement {
     if (this.selector.label.multiple) {
       return html`
         <ha-labels-picker
+          no-add
           .hass=${this.hass}
           .value=${ensureArray(this.value ?? [])}
           .disabled=${this.disabled}
@@ -41,6 +42,7 @@ export class HaLabelSelector extends LitElement {
     }
     return html`
       <ha-label-picker
+        no-add
         .hass=${this.hass}
         .value=${this.value}
         .disabled=${this.disabled}

src/dialogs/more-info/components/lights/light-color-temp-picker.ts

@@ -190,7 +190,7 @@ class LightColorTempPicker extends LitElement {
           max-height: 320px;
           min-height: 200px;
           --control-slider-thickness: 130px;
-          --control-slider-border-radius: 48px;
+          --control-slider-border-radius: 36px;
           --control-slider-color: var(--primary-color);
           --control-slider-background: -webkit-linear-gradient(
             top,

src/dialogs/more-info/controls/more-info-alarm_control_panel.ts

@@ -1,9 +1,8 @@
-import { mdiShieldOff } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { stateColorCss } from "../../../common/entity/state_color";
-import "../../../components/ha-outlined-button";
+import "../../../components/ha-control-button";
 import "../../../components/ha-state-icon";
 import { AlarmControlPanelEntity } from "../../../data/alarm_control_panel";
 import "../../../state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes";
@@ -57,15 +56,10 @@ class MoreInfoAlarmControlPanel extends LitElement {
         ${["triggered", "arming", "pending"].includes(this.stateObj.state)
           ? html`
               <div class="status">
-                <span></span>
                 <div class="icon">
                   <ha-state-icon .hass=${this.hass} .stateObj=${this.stateObj}>
                   </ha-state-icon>
                 </div>
-                <ha-outlined-button @click=${this._disarm}>
-                  ${this.hass.localize("ui.card.alarm_control_panel.disarm")}
-                  <ha-svg-icon slot="icon" .path=${mdiShieldOff}></ha-svg-icon>
-                </ha-outlined-button>
               </div>
             `
           : html`
@@ -76,7 +70,15 @@ class MoreInfoAlarmControlPanel extends LitElement {
               </ha-state-control-alarm_control_panel-modes>
             `}
       </div>
-      <span></span>
+      <div>
+        ${["triggered", "arming", "pending"].includes(this.stateObj.state)
+          ? html`
+              <ha-control-button @click=${this._disarm} class="disarm">
+                ${this.hass.localize("ui.card.alarm_control_panel.disarm")}
+              </ha-control-button>
+            `
+          : nothing}
+      </div>
     `;
   }
 
@@ -127,8 +129,12 @@ class MoreInfoAlarmControlPanel extends LitElement {
           transition: background-color 180ms ease-in-out;
           opacity: 0.2;
         }
-        .status ha-outlined-button {
+        ha-control-button.disarm {
-          margin-top: 32px;
+          height: 60px;
+          min-width: 130px;
+          max-width: 200px;
+          margin: 0 auto;
+          --control-button-border-radius: 24px;
         }
       `,
     ];

src/dialogs/more-info/controls/more-info-lock.ts

@@ -170,7 +170,7 @@ class MoreInfoLock extends LitElement {
           --control-button-border-radius: 24px;
         }
         .open-button {
-          width: 100px;
+          width: 130px;
           --control-button-background-color: var(--state-color);
         }
         .open-button.confirm {

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -77,6 +77,8 @@ declare global {
   }
 }
 
+const DEFAULT_VIEW: View = "info";
+
 @customElement("ha-more-info-dialog")
 export class MoreInfoDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -85,7 +87,9 @@ export class MoreInfoDialog extends LitElement {
 
   @state() private _entityId?: string | null;
 
-  @state() private _currView: View = "info";
+  @state() private _currView: View = DEFAULT_VIEW;
+
+  @state() private _initialView: View = DEFAULT_VIEW;
 
   @state() private _childView?: ChildView;
 
@@ -102,7 +106,8 @@ export class MoreInfoDialog extends LitElement {
       this.closeDialog();
       return;
     }
-    this._currView = params.view || "info";
+    this._currView = params.view || DEFAULT_VIEW;
+    this._initialView = params.view || DEFAULT_VIEW;
     this._childView = undefined;
     this.large = false;
     this._loadEntityRegistryEntry();
@@ -127,6 +132,7 @@ export class MoreInfoDialog extends LitElement {
     this._entry = undefined;
     this._childView = undefined;
     this._infoEditMode = false;
+    this._initialView = DEFAULT_VIEW;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -183,10 +189,15 @@ export class MoreInfoDialog extends LitElement {
     if (this._childView) {
       this._childView = undefined;
     } else {
-      this.setView("info");
+      this.setView(this._initialView);
     }
   }
 
+  private _resetInitialView() {
+    this._initialView = DEFAULT_VIEW;
+    this.setView(DEFAULT_VIEW);
+  }
+
   private _goToHistory() {
     this.setView("history");
   }
@@ -262,7 +273,10 @@ export class MoreInfoDialog extends LitElement {
 
     const title = this._childView?.viewTitle ?? name;
 
-    const isInfoView = this._currView === "info" && !this._childView;
+    const isDefaultView = this._currView === DEFAULT_VIEW && !this._childView;
+    const isSpecificInitialView =
+      this._initialView !== DEFAULT_VIEW && !this._childView;
+    const showCloseIcon = isDefaultView || isSpecificInitialView;
 
     return html`
       <ha-dialog
@@ -274,7 +288,7 @@ export class MoreInfoDialog extends LitElement {
         flexContent
       >
         <ha-dialog-header slot="heading">
-          ${isInfoView
+          ${showCloseIcon
             ? html`
                 <ha-icon-button
                   slot="navigationIcon"
@@ -297,7 +311,7 @@ export class MoreInfoDialog extends LitElement {
           <span slot="title" .title=${title} @click=${this._enlarge}>
             ${title}
           </span>
-          ${isInfoView
+          ${isDefaultView
             ? html`
                 ${this.shouldShowHistory(domain)
                   ? html`
@@ -407,7 +421,34 @@ export class MoreInfoDialog extends LitElement {
                     `
                   : nothing}
               `
-            : nothing}
+            : isSpecificInitialView
+              ? html`
+                  <ha-button-menu
+                    corner="BOTTOM_END"
+                    menuCorner="END"
+                    slot="actionItems"
+                    @closed=${stopPropagation}
+                    fixed
+                  >
+                    <ha-icon-button
+                      slot="trigger"
+                      .label=${this.hass.localize("ui.common.menu")}
+                      .path=${mdiDotsVertical}
+                    ></ha-icon-button>
+
+                    <ha-list-item
+                      graphic="icon"
+                      @request-selected=${this._resetInitialView}
+                    >
+                      ${this.hass.localize("ui.dialogs.more_info_control.info")}
+                      <ha-svg-icon
+                        slot="graphic"
+                        .path=${mdiInformationOutline}
+                      ></ha-svg-icon>
+                    </ha-list-item>
+                  </ha-button-menu>
+                `
+              : nothing}
         </ha-dialog-header>
         <div
           class="content"

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

@@ -52,7 +52,9 @@ class DialogAreaDetail extends LitElement {
   ): Promise<void> {
     this._params = params;
     this._error = undefined;
-    this._name = this._params.entry ? this._params.entry.name : "";
+    this._name = this._params.entry
+      ? this._params.entry.name
+      : this._params.suggestedName || "";
     this._aliases = this._params.entry ? this._params.entry.aliases : [];
     this._labels = this._params.entry ? this._params.entry.labels : [];
     this._picture = this._params.entry?.picture || null;

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

@@ -38,7 +38,9 @@ class DialogFloorDetail extends LitElement {
   ): Promise<void> {
     this._params = params;
     this._error = undefined;
-    this._name = this._params.entry ? this._params.entry.name : "";
+    this._name = this._params.entry
+      ? this._params.entry.name
+      : this._params.suggestedName || "";
     this._aliases = this._params.entry?.aliases || [];
     this._icon = this._params.entry?.icon || null;
     this._level = this._params.entry?.level ?? null;

src/panels/config/areas/show-dialog-area-registry-detail.ts

@@ -6,6 +6,7 @@ import {
 
 export interface AreaRegistryDetailDialogParams {
   entry?: AreaRegistryEntry;
+  suggestedName?: string;
   createEntry?: (values: AreaRegistryEntryMutableParams) => Promise<unknown>;
   updateEntry?: (
     updates: Partial<AreaRegistryEntryMutableParams>

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

@@ -6,6 +6,7 @@ import {
 
 export interface FloorRegistryDetailDialogParams {
   entry?: FloorRegistryEntry;
+  suggestedName?: string;
   createEntry?: (values: FloorRegistryEntryMutableParams) => Promise<unknown>;
   updateEntry?: (
     updates: Partial<FloorRegistryEntryMutableParams>

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

@@ -11,10 +11,8 @@ import {
   mdiInformationOutline,
   mdiMenuDown,
   mdiPlay,
-  mdiPlayCircleOutline,
   mdiPlus,
   mdiRobotHappy,
-  mdiStopCircleOutline,
   mdiTag,
   mdiToggleSwitch,
   mdiToggleSwitchOffOutline,
@@ -60,6 +58,7 @@ import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-overflow-menu";
 import "../../../components/ha-menu";
+import type { HaMenu } from "../../../components/ha-menu";
 import "../../../components/ha-menu-item";
 import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
@@ -101,7 +100,6 @@ 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;
@@ -379,7 +377,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        back-path="/config"
+        .backPath=${
+          this._searchParms.has("historyBack") ? undefined : "/config"
+        }
         id="entity_id"
         .route=${this.route}
         .tabs=${configSections.automations}
@@ -692,8 +692,8 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           <ha-svg-icon
             .path=${
               this._overflowAutomation?.state === "off"
-                ? mdiPlayCircleOutline
+                ? mdiToggleSwitch
-                : mdiStopCircleOutline
+                : mdiToggleSwitchOffOutline
             }
             slot="start"
           ></ha-svg-icon>
@@ -728,6 +728,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     if (this._searchParms.has("blueprint")) {
       this._filterBlueprint();
     }
+    if (this._searchParms.has("label")) {
+      this._filterLabel();
+    }
   }
 
   private _filterExpanded(ev) {
@@ -815,6 +818,21 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     this._filteredAutomations = items ? [...items] : undefined;
   }
 
+  private _filterLabel() {
+    const label = this._searchParms.get("label");
+    if (!label) {
+      return;
+    }
+    this._filters = {
+      ...this._filters,
+      "ha-filter-labels": {
+        value: [label],
+        items: undefined,
+      },
+    };
+    this._applyFilters();
+  }
+
   private async _filterBlueprint() {
     const blueprint = this._searchParms.get("blueprint");
     if (!blueprint) {

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

@@ -188,9 +188,7 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
         this.comboBox.filteredItems = [
           {
             category_id: NO_CATEGORIES_ID,
-            name: this.hass.localize(
+            name: this.hass.localize("ui.components.category-picker.no_match"),
-              "ui.components.category-picker.no_categories"
-            ),
             icon: null,
           },
         ] as ScorableCategoryRegistryEntry[];
@@ -239,6 +237,8 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
 
     (ev.target as any).value = this._value;
 
+    this.hass.loadFragmentTranslation("config");
+
     showCategoryRegistryDetailDialog(this, {
       scope: this.scope!,
       suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",

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

@@ -1,6 +1,6 @@
 import { consume } from "@lit-labs/context";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
-import { mdiPlus } from "@mdi/js";
+import { mdiChevronRight, mdiMenuDown, mdiPlus } from "@mdi/js";
 import {
   CSSResultGroup,
   LitElement,
@@ -13,6 +13,7 @@ import {
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { computeCssColor } from "../../../common/color/compute-color";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import {
@@ -24,6 +25,7 @@ import { LocalizeFunc } from "../../../common/translations/localize";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
+  SelectionChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-battery-icon";
@@ -37,12 +39,15 @@ import "../../../components/ha-filter-integrations";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-filter-states";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-menu-item";
+import "../../../components/ha-sub-menu";
 import { ConfigEntry, sortConfigEntries } from "../../../data/config_entries";
 import { fullEntitiesContext } from "../../../data/context";
 import {
   DeviceEntityLookup,
   DeviceRegistryEntry,
   computeDeviceName,
+  updateDeviceRegistryEntry,
 } from "../../../data/device_registry";
 import {
   EntityRegistryEntry,
@@ -91,6 +96,8 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
+  @state() private _selected: string[] = [];
+
   @state() private _filter: string = history.state?.filter || "";
 
   @state() private _filters: Record<
@@ -185,6 +192,23 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         },
       };
     }
+    if (this._searchParms.has("label")) {
+      this._filterLabel();
+    }
+  }
+
+  private _filterLabel() {
+    const label = this._searchParms.get("label");
+    if (!label) {
+      return;
+    }
+    this._filters = {
+      ...this._filters,
+      "ha-filter-labels": {
+        value: [label],
+        items: undefined,
+      },
+    };
   }
 
   private _clearFilter() {
@@ -518,6 +542,21 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
       this._labels
     );
 
+    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}
@@ -532,6 +571,9 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         )}
         .columns=${this._columns(this.hass.localize, this.narrow)}
         .data=${devicesOutput}
+        selectable
+        .selected=${this._selected.length}
+        @selection-changed=${this._handleSelectionChanged}
         .filter=${this._filter}
         hasFilters
         .filters=${Object.values(this._filters).filter(
@@ -604,6 +646,49 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
           .narrow=${this.narrow}
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-labels>
+
+        ${!this.narrow
+          ? 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>`
+          : html` <ha-button-menu-new has-overflow slot="selection-bar"
+              ><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>
+              <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>
+            </ha-button-menu-new>`}
       </hass-tabs-subpage-data-table>
     `;
   }
@@ -683,6 +768,25 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
     });
   }
 
+  private _handleSelectionChanged(
+    ev: HASSDomEvent<SelectionChangedEvent>
+  ): void {
+    this._selected = ev.detail.value;
+  }
+
+  private async _handleBulkLabel(ev) {
+    const label = ev.currentTarget.value;
+    const promises: Promise<DeviceRegistryEntry>[] = [];
+    this._selected.forEach((deviceId) => {
+      promises.push(
+        updateDeviceRegistryEntry(this.hass, deviceId, {
+          labels: this.hass.devices[deviceId].labels.concat(label),
+        })
+      );
+    });
+    await Promise.all(promises);
+  }
+
   static get styles(): CSSResultGroup {
     return [
       css`
@@ -704,6 +808,16 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
           text-transform: uppercase;
           direction: var(--direction);
         }
+        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;
+        }
       `,
       haStyle,
     ];

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

@@ -3,12 +3,17 @@ import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import {
   mdiAlertCircle,
   mdiCancel,
+  mdiChevronRight,
   mdiDelete,
+  mdiDotsVertical,
+  mdiEye,
   mdiEyeOff,
+  mdiMenuDown,
   mdiPencilOff,
   mdiPlus,
   mdiRestoreAlert,
-  mdiUndo,
+  mdiToggleSwitch,
+  mdiToggleSwitchOffOutline,
 } from "@mdi/js";
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
@@ -24,6 +29,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { until } from "lit/directives/until";
 import memoize from "memoize-one";
+import { computeCssColor } from "../../../common/color/compute-color";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -44,16 +50,19 @@ import "../../../components/ha-check-list-item";
 import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-integrations";
-import "../../../components/ha-filter-states";
 import "../../../components/ha-filter-labels";
+import "../../../components/ha-filter-states";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-menu-item";
+import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
 import { fullEntitiesContext } from "../../../data/context";
 import { UNAVAILABLE } from "../../../data/entity";
 import {
   EntityRegistryEntry,
+  UpdateEntityRegistryEntryResult,
   computeEntityRegistryName,
   removeEntityRegistryEntry,
   updateEntityRegistryEntry,
@@ -505,13 +514,28 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         [...filteredDomains][0]
       );
 
+    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}
         .narrow=${this.narrow}
-        .backPath=${this._searchParms.has("historyBack")
+        .backPath=${
-          ? undefined
+          this._searchParms.has("historyBack") ? undefined : "/config"
-          : "/config"}
+        }
         .route=${this.route}
         .tabs=${configSections.devices}
         .columns=${this._columns(
@@ -524,9 +548,10 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           "ui.panel.config.entities.picker.search"
         )}
         hasFilters
-        .filters=${Object.values(this._filters).filter(
+        .filters=${
-          (filter) => filter.value?.length
+          Object.values(this._filters).filter((filter) => filter.value?.length)
-        ).length}
+            .length
+        }
         .filter=${this._filter}
         selectable
         .selected=${this._selectedEntities.length}
@@ -543,100 +568,131 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           .hass=${this.hass}
           slot="toolbar-icon"
         ></ha-integration-overflow-menu>
-        <div class="header-btns" slot="selection-bar">
+
-          ${!this.narrow
+
-            ? html`
+${
-                <mwc-button
+  !this.narrow
-                  @click=${this._enableSelected}
+    ? html`<ha-button-menu-new slot="selection-bar">
-                  .disabled=${!this._selectedEntities.length}
+        <ha-assist-chip
-                  >${this.hass.localize(
+          slot="trigger"
-                    "ui.panel.config.entities.picker.enable_selected.button"
+          .label=${this.hass.localize(
-                  )}</mwc-button
+            "ui.panel.config.automation.picker.bulk_actions.add_label"
-                >
+          )}
-                <mwc-button
+        >
-                  @click=${this._disableSelected}
+          <ha-svg-icon slot="trailing-icon" .path=${mdiMenuDown}></ha-svg-icon>
-                  .disabled=${!this._selectedEntities.length}
+        </ha-assist-chip>
-                  >${this.hass.localize(
+        ${labelItems}
-                    "ui.panel.config.entities.picker.disable_selected.button"
+      </ha-button-menu-new>`
-                  )}</mwc-button
+    : nothing
-                >
+}
-                <mwc-button
+<ha-button-menu-new has-overflow slot="selection-bar">
-                  @click=${this._hideSelected}
+  ${
-                  .disabled=${!this._selectedEntities.length}
+    this.narrow
-                  >${this.hass.localize(
+      ? html`<ha-assist-chip
-                    "ui.panel.config.entities.picker.hide_selected.button"
+          .label=${this.hass.localize(
-                  )}</mwc-button
+            "ui.panel.config.automation.picker.bulk_action"
-                >
+          )}
-                <mwc-button
+          slot="trigger"
-                  @click=${this._removeSelected}
+        >
-                  .disabled=${!this._selectedEntities.length}
+          <ha-svg-icon slot="trailing-icon" .path=${mdiMenuDown}></ha-svg-icon>
-                  class="warning"
+        </ha-assist-chip>`
-                  >${this.hass.localize(
+      : html`<ha-icon-button
-                    "ui.panel.config.entities.picker.remove_selected.button"
+          .path=${mdiDotsVertical}
-                  )}</mwc-button
+          .label=${"ui.panel.config.automation.picker.bulk_action"}
-                >
+          slot="trigger"
-              `
+        ></ha-icon-button>`
-            : html`
+  }
-                <ha-icon-button
+    <ha-svg-icon
-                  id="enable-btn"
+      slot="trailing-icon"
-                  .disabled=${!this._selectedEntities.length}
+      .path=${mdiMenuDown}
-                  @click=${this._enableSelected}
+    ></ha-svg-icon
-                  .path=${mdiUndo}
+  ></ha-assist-chip>
-                  .label=${this.hass.localize("ui.common.enable")}
+  ${
-                ></ha-icon-button>
+    this.narrow
-                <simple-tooltip animation-delay="0" for="enable-btn">
+      ? html`<ha-sub-menu>
-                  ${this.hass.localize(
+            <ha-menu-item slot="item">
-                    "ui.panel.config.entities.picker.enable_selected.button"
+              <div slot="headline">
-                  )}
+                ${this.hass.localize(
-                </simple-tooltip>
+                  "ui.panel.config.automation.picker.bulk_actions.add_label"
-                <ha-icon-button
+                )}
-                  id="disable-btn"
+              </div>
-                  .disabled=${!this._selectedEntities.length}
+              <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
-                  @click=${this._disableSelected}
+            </ha-menu-item>
-                  .path=${mdiCancel}
+            <ha-menu slot="menu">${labelItems}</ha-menu>
-                  .label=${this.hass.localize("ui.common.disable")}
+          </ha-sub-menu>
-                ></ha-icon-button>
+          <md-divider role="separator" tabindex="-1"></md-divider>`
-                <simple-tooltip animation-delay="0" for="disable-btn">
+      : nothing
-                  ${this.hass.localize(
+  }
-                    "ui.panel.config.entities.picker.disable_selected.button"
+
-                  )}
+  <ha-menu-item @click=${this._enableSelected}>
-                </simple-tooltip>
+    <ha-svg-icon slot="start" .path=${mdiToggleSwitch}></ha-svg-icon>
-                <ha-icon-button
+    <div slot="headline">
-                  id="hide-btn"
+      ${this.hass.localize(
-                  .disabled=${!this._selectedEntities.length}
+        "ui.panel.config.entities.picker.enable_selected.button"
-                  @click=${this._hideSelected}
+      )}
-                  .path=${mdiEyeOff}
+    </div>
-                  .label=${this.hass.localize("ui.common.hide")}
+  </ha-menu-item>
-                ></ha-icon-button>
+  <ha-menu-item @click=${this._disableSelected}>
-                <simple-tooltip animation-delay="0" for="hide-btn">
+    <ha-svg-icon
-                  ${this.hass.localize(
+      slot="start"
-                    "ui.panel.config.entities.picker.hide_selected.button"
+      .path=${mdiToggleSwitchOffOutline}
-                  )}
+    ></ha-svg-icon>
-                </simple-tooltip>
+    <div slot="headline">
-                <ha-icon-button
+      ${this.hass.localize(
-                  class="warning"
+        "ui.panel.config.entities.picker.disable_selected.button"
-                  id="remove-btn"
+      )}
-                  .disabled=${!this._selectedEntities.length}
+    </div>
-                  @click=${this._removeSelected}
+  </ha-menu-item>
-                  .path=${mdiDelete}
+  <md-divider role="separator" tabindex="-1"></md-divider>
-                  .label=${this.hass.localize("ui.common.remove")}
+
-                ></ha-icon-button>
+  <ha-menu-item @click=${this._unhideSelected}>
-                <simple-tooltip animation-delay="0" for="remove-btn">
+    <ha-svg-icon
-                  ${this.hass.localize(
+      slot="start"
-                    "ui.panel.config.entities.picker.remove_selected.button"
+      .path=${mdiEye}
-                  )}
+    ></ha-svg-icon>
-                </simple-tooltip>
+    <div slot="headline">
-              `}
+      ${this.hass.localize(
-        </div>
+        "ui.panel.config.entities.picker.unhide_selected.button"
-        ${this._filters.config_entry?.value?.length
+      )}
-          ? html`<ha-alert slot="filter-pane">
+    </div>
-              Filtering by config entry
+  </ha-menu-item>
-              ${this._entries?.find(
+  <ha-menu-item @click=${this._hideSelected}>
-                (entry) =>
+    <ha-svg-icon
-                  entry.entry_id === this._filters.config_entry!.value![0]
+      slot="start"
-              )?.title || this._filters.config_entry.value[0]}
+      .path=${mdiEyeOff}
-            </ha-alert>`
+    ></ha-svg-icon>
-          : nothing}
+    <div slot="headline">
+      ${this.hass.localize(
+        "ui.panel.config.entities.picker.hide_selected.button"
+      )}
+    </div>
+  </ha-menu-item>
+  <md-divider role="separator" tabindex="-1"></md-divider>
+
+  <ha-menu-item @click=${this._removeSelected} class="warning">
+    <ha-svg-icon
+      slot="start"
+      .path=${mdiDelete}
+    ></ha-svg-icon>
+    <div slot="headline">
+      ${this.hass.localize(
+        "ui.panel.config.entities.picker.remove_selected.button"
+      )}
+    </div>
+  </ha-menu-item>
+
+</ha-button-menu-new>
+        ${
+          this._filters.config_entry?.value?.length
+            ? html`<ha-alert slot="filter-pane">
+                Filtering by config entry
+                ${this._entries?.find(
+                  (entry) =>
+                    entry.entry_id === this._filters.config_entry!.value![0]
+                )?.title || this._filters.config_entry.value[0]}
+              </ha-alert>`
+            : nothing
+        }
         <ha-filter-floor-areas
           .hass=${this.hass}
           type="entity"
@@ -688,16 +744,20 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           .narrow=${this.narrow}
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-labels>
-        ${includeAddDeviceFab
+        ${
-          ? html`<ha-fab
+          includeAddDeviceFab
-              .label=${this.hass.localize("ui.panel.config.devices.add_device")}
+            ? html`<ha-fab
-              extended
+                .label=${this.hass.localize(
-              @click=${this._addDevice}
+                  "ui.panel.config.devices.add_device"
-              slot="fab"
+                )}
-            >
+                extended
-              <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+                @click=${this._addDevice}
-            </ha-fab>`
+                slot="fab"
-          : nothing}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+              </ha-fab>`
+            : nothing
+        }
       </hass-tabs-subpage-data-table>
     `;
   }
@@ -758,6 +818,23 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         },
       };
     }
+    if (this._searchParms.has("label")) {
+      this._filterLabel();
+    }
+  }
+
+  private _filterLabel() {
+    const label = this._searchParms.get("label");
+    if (!label) {
+      return;
+    }
+    this._filters = {
+      ...this._filters,
+      "ha-filter-labels": {
+        value: [label],
+        items: undefined,
+      },
+    };
   }
 
   private _clearFilter() {
@@ -914,6 +991,28 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
     });
   }
 
+  private _unhideSelected() {
+    this._selectedEntities.forEach((entity) =>
+      updateEntityRegistryEntry(this.hass, entity, {
+        hidden_by: null,
+      })
+    );
+    this._clearSelection();
+  }
+
+  private async _handleBulkLabel(ev) {
+    const label = ev.currentTarget.value;
+    const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
+    this._selectedEntities.forEach((entityId) => {
+      promises.push(
+        updateEntityRegistryEntry(this.hass, entityId, {
+          labels: this.hass.entities[entityId].labels.concat(label),
+        })
+      );
+    });
+    await Promise.all(promises);
+  }
+
   private _removeSelected() {
     const removeableEntities = this._selectedEntities.filter((entity) => {
       const stateObj = this.hass.states[entity];
@@ -1063,6 +1162,17 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           text-transform: uppercase;
           direction: var(--direction);
         }
+
+        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/labels/ha-config-labels.ts

@@ -1,4 +1,11 @@
-import { mdiDelete, mdiHelpCircle, mdiPlus } from "@mdi/js";
+import {
+  mdiDelete,
+  mdiDevices,
+  mdiHelpCircle,
+  mdiPlus,
+  mdiRobot,
+  mdiShape,
+} from "@mdi/js";
 import { LitElement, PropertyValues, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -28,6 +35,7 @@ import "../../../layouts/hass-tabs-subpage-data-table";
 import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
 import { showLabelDetailDialog } from "./show-dialog-label-detail";
+import { navigate } from "../../../common/navigate";
 
 @customElement("ha-config-labels")
 export class HaConfigLabels extends LitElement {
@@ -81,6 +89,21 @@ export class HaConfigLabels extends LitElement {
             .hass=${this.hass}
             narrow
             .items=${[
+              {
+                label: this.hass.localize("ui.panel.config.entities.caption"),
+                path: mdiShape,
+                action: () => this._navigateEntities(label),
+              },
+              {
+                label: this.hass.localize("ui.panel.config.devices.caption"),
+                path: mdiDevices,
+                action: () => this._navigateDevices(label),
+              },
+              {
+                label: this.hass.localize("ui.panel.config.automation.caption"),
+                path: mdiRobot,
+                action: () => this._navigateAutomations(label),
+              },
               {
                 label: this.hass.localize("ui.common.delete"),
                 path: mdiDelete,
@@ -225,6 +248,20 @@ export class HaConfigLabels extends LitElement {
       return false;
     }
   }
+
+  private _navigateEntities(label: LabelRegistryEntry) {
+    navigate(`/config/entities?historyBack=1&label=${label.label_id}`);
+  }
+
+  private _navigateDevices(label: LabelRegistryEntry) {
+    navigate(`/config/devices/dashboard?historyBack=1&label=${label.label_id}`);
+  }
+
+  private _navigateAutomations(label: LabelRegistryEntry) {
+    navigate(
+      `/config/automation/dashboard?historyBack=1&label=${label.label_id}`
+    );
+  }
 }
 
 declare global {

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

@@ -1,10 +1,13 @@
 import { consume } from "@lit-labs/context";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import {
+  mdiChevronRight,
   mdiContentDuplicate,
   mdiDelete,
+  mdiDotsVertical,
   mdiHelpCircle,
   mdiInformationOutline,
+  mdiMenuDown,
   mdiPalette,
   mdiPencilOff,
   mdiPlay,
@@ -33,6 +36,7 @@ import { LocalizeFunc } from "../../../common/translations/localize";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
+  SelectionChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/ha-button";
@@ -46,13 +50,19 @@ import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-overflow-menu";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-menu-item";
+import "../../../components/ha-sub-menu";
 import {
   CategoryRegistryEntry,
   subscribeCategoryRegistry,
 } from "../../../data/category_registry";
 import { fullEntitiesContext } from "../../../data/context";
 import { isUnavailableState } from "../../../data/entity";
-import { EntityRegistryEntry } from "../../../data/entity_registry";
+import {
+  EntityRegistryEntry,
+  UpdateEntityRegistryEntryResult,
+  updateEntityRegistryEntry,
+} from "../../../data/entity_registry";
 import { forwardHaptic } from "../../../data/haptics";
 import {
   LabelRegistryEntry,
@@ -77,6 +87,7 @@ import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
 import { configSections } from "../ha-panel-config";
+import { computeCssColor } from "../../../common/color/compute-color";
 
 type SceneItem = SceneEntity & {
   name: string;
@@ -96,6 +107,10 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
 
   @property({ attribute: false }) public scenes!: SceneEntity[];
 
+  @state() private _searchParms = new URLSearchParams(window.location.search);
+
+  @state() private _selected: string[] = [];
+
   @state() private _activeFilters?: string[];
 
   @state() private _filteredScenes?: string[] | null;
@@ -317,6 +332,40 @@ class HaSceneDashboard 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}
@@ -324,6 +373,9 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.automations}
+        selectable
+        .selected=${this._selected.length}
+        @selection-changed=${this._handleSelectionChanged}
         hasFilters
         .filters=${Object.values(this._filters).filter(
           (filter) => filter.value?.length
@@ -405,6 +457,103 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-categories>
 
+        ${!this.narrow
+          ? html`<ha-button-menu-new slot="selection-bar">
+                <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}
+        ${this.narrow || this.hass.dockedSidebar === "docked"
+          ? html`
+          <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-button-menu-new>`
+          : nothing}
         ${!this.scenes.length
           ? html`<div class="empty" slot="empty">
               <ha-svg-icon .path=${mdiPalette}></ha-svg-icon>
@@ -530,6 +679,33 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
     this._applyFilters();
   }
 
+  firstUpdated() {
+    if (this._searchParms.has("label")) {
+      this._filterLabel();
+    }
+  }
+
+  private _filterLabel() {
+    const label = this._searchParms.get("label");
+    if (!label) {
+      return;
+    }
+    this._filters = {
+      ...this._filters,
+      "ha-filter-labels": {
+        value: [label],
+        items: undefined,
+      },
+    };
+    this._applyFilters();
+  }
+
+  private _handleSelectionChanged(
+    ev: HASSDomEvent<SelectionChangedEvent>
+  ): void {
+    this._selected = ev.detail.value;
+  }
+
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const scene = this.scenes.find((a) => a.entity_id === ev.detail.id);
 
@@ -538,6 +714,32 @@ class HaSceneDashboard 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: { scene: 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 _editCategory(scene: any) {
     const entityReg = this._entityReg.find(
       (reg) => reg.entity_id === scene.entity_id
@@ -641,6 +843,16 @@ class HaSceneDashboard 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/script/ha-script-picker.ts

@@ -1,9 +1,12 @@
 import { consume } from "@lit-labs/context";
 import {
+  mdiChevronRight,
   mdiContentDuplicate,
   mdiDelete,
+  mdiDotsVertical,
   mdiHelpCircle,
   mdiInformationOutline,
+  mdiMenuDown,
   mdiPlay,
   mdiPlus,
   mdiScriptText,
@@ -34,6 +37,7 @@ import { LocalizeFunc } from "../../../common/translations/localize";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
+  SelectionChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/ha-fab";
@@ -46,13 +50,19 @@ import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-overflow-menu";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-menu-item";
+import "../../../components/ha-sub-menu";
 import {
   CategoryRegistryEntry,
   subscribeCategoryRegistry,
 } 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,6 +89,7 @@ import { showToast } from "../../../util/toast";
 import { showNewAutomationDialog } from "../automation/show-dialog-new-automation";
 import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
 import { configSections } from "../ha-panel-config";
+import { computeCssColor } from "../../../common/color/compute-color";
 
 type ScriptItem = ScriptEntity & {
   name: string;
@@ -102,6 +113,8 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
+  @state() private _selected: string[] = [];
+
   @state() private _activeFilters?: string[];
 
   @state() private _filteredScripts?: string[] | null;
@@ -331,6 +344,40 @@ class HaScriptPicker 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}
@@ -340,6 +387,9 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         .tabs=${configSections.automations}
         hasFilters
         initialGroupColumn="category"
+        selectable
+        .selected=${this._selected.length}
+        @selection-changed=${this._handleSelectionChanged}
         .filters=${Object.values(this._filters).filter(
           (filter) => filter.value?.length
         ).length}
@@ -432,6 +482,104 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           .narrow=${this.narrow}
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-blueprints>
+
+        ${!this.narrow
+          ? html`<ha-button-menu-new slot="selection-bar">
+                <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}
+        ${this.narrow || this.hass.dockedSidebar === "docked"
+          ? html`
+          <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-button-menu-new>`
+          : nothing}
         ${!this.scripts.length
           ? html` <div class="empty" slot="empty">
               <ha-svg-icon .path=${mdiScriptText}></ha-svg-icon>
@@ -572,6 +720,24 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     if (this._searchParms.has("blueprint")) {
       this._filterBlueprint();
     }
+    if (this._searchParms.has("label")) {
+      this._filterLabel();
+    }
+  }
+
+  private _filterLabel() {
+    const label = this._searchParms.get("label");
+    if (!label) {
+      return;
+    }
+    this._filters = {
+      ...this._filters,
+      "ha-filter-labels": {
+        value: [label],
+        items: undefined,
+      },
+    };
+    this._applyFilters();
   }
 
   private async _filterBlueprint() {
@@ -611,6 +777,38 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     });
   }
 
+  private _handleSelectionChanged(
+    ev: HASSDomEvent<SelectionChangedEvent>
+  ): void {
+    this._selected = ev.detail.value;
+  }
+
+  private async _handleBulkCategory(ev) {
+    const category = ev.currentTarget.value;
+    const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
+    this._selected.forEach((entityId) => {
+      promises.push(
+        updateEntityRegistryEntry(this.hass, entityId, {
+          categories: { script: 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 _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const entry = this.entityRegistry.find((e) => e.entity_id === ev.detail.id);
     if (entry) {
@@ -764,6 +962,16 @@ class HaScriptPicker 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/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts

@@ -129,7 +129,7 @@ export class HaStateControlAlarmControlPanelModes extends LitElement {
         max-height: max(320px, var(--modes-count, 1) * 80px);
         min-height: max(200px, var(--modes-count, 1) * 80px);
         --control-select-thickness: 130px;
-        --control-select-border-radius: 48px;
+        --control-select-border-radius: 36px;
         --control-select-color: var(--primary-color);
         --control-select-background: var(--disabled-color);
         --control-select-background-opacity: 0.2;

src/state-control/cover/ha-state-control-cover-position.ts

@@ -75,7 +75,7 @@ export class HaStateControlCoverPosition extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-slider-thickness: 130px;
-        --control-slider-border-radius: 48px;
+        --control-slider-border-radius: 36px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;

src/state-control/cover/ha-state-control-cover-tilt-position.ts

@@ -112,7 +112,7 @@ export class HaStateControlInfoCoverTiltPosition extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-slider-thickness: 130px;
-        --control-slider-border-radius: 48px;
+        --control-slider-border-radius: 36px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;

src/state-control/cover/ha-state-control-cover-toggle.ts

@@ -142,7 +142,7 @@ export class HaStateControlCoverToggle extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-switch-thickness: 130px;
-        --control-switch-border-radius: 48px;
+        --control-switch-border-radius: 36px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }
@@ -159,7 +159,7 @@ export class HaStateControlCoverToggle extends LitElement {
       ha-control-button {
         flex: 1;
         width: 100%;
-        --control-button-border-radius: 48px;
+        --control-button-border-radius: 36px;
         --mdc-icon-size: 24px;
       }
       ha-control-button.active {

src/state-control/fan/ha-state-control-fan-speed.ts

@@ -142,7 +142,7 @@ export class HaStateControlFanSpeed extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-slider-thickness: 130px;
-        --control-slider-border-radius: 48px;
+        --control-slider-border-radius: 36px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;
@@ -153,7 +153,7 @@ export class HaStateControlFanSpeed extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-select-thickness: 130px;
-        --control-select-border-radius: 48px;
+        --control-select-border-radius: 36px;
         --control-select-color: var(--primary-color);
         --control-select-background: var(--disabled-color);
         --control-select-background-opacity: 0.2;

src/state-control/ha-state-control-toggle.ts

@@ -133,7 +133,7 @@ export class HaStateControlToggle extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-switch-thickness: 130px;
-        --control-switch-border-radius: 48px;
+        --control-switch-border-radius: 36px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }
@@ -150,7 +150,7 @@ export class HaStateControlToggle extends LitElement {
       ha-control-button {
         flex: 1;
         width: 100%;
-        --control-button-border-radius: 48px;
+        --control-button-border-radius: 36px;
         --mdc-icon-size: 24px;
       }
       ha-control-button.active {

src/state-control/light/ha-state-control-light-brightness.ts

@@ -89,7 +89,7 @@ export class HaStateControlLightBrightness extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-slider-thickness: 130px;
-        --control-slider-border-radius: 48px;
+        --control-slider-border-radius: 36px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;

src/state-control/lock/ha-state-control-lock-toggle.ts

@@ -167,7 +167,7 @@ export class HaStateControlLockToggle extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-switch-thickness: 130px;
-        --control-switch-border-radius: 48px;
+        --control-switch-border-radius: 36px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }
@@ -187,7 +187,7 @@ export class HaStateControlLockToggle extends LitElement {
       ha-control-button {
         flex: 1;
         width: 100%;
-        --control-button-border-radius: 48px;
+        --control-button-border-radius: 36px;
         --mdc-icon-size: 24px;
       }
       ha-control-button.active {

src/state-control/valve/ha-state-control-valve-position.ts

@@ -71,7 +71,7 @@ export class HaStateControlValvePosition extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-slider-thickness: 130px;
-        --control-slider-border-radius: 48px;
+        --control-slider-border-radius: 36px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;

src/state-control/valve/ha-state-control-valve-toggle.ts

@@ -142,7 +142,7 @@ export class HaStateControlValveToggle extends LitElement {
         max-height: 320px;
         min-height: 200px;
         --control-switch-thickness: 130px;
-        --control-switch-border-radius: 48px;
+        --control-switch-border-radius: 36px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }
@@ -159,7 +159,7 @@ export class HaStateControlValveToggle extends LitElement {
       ha-control-button {
         flex: 1;
         width: 100%;
-        --control-button-border-radius: 48px;
+        --control-button-border-radius: 36px;
         --mdc-icon-size: 24px;
       }
       ha-control-button.active {

src/translations/en.json

@@ -571,6 +571,7 @@
         "add_new_sugestion": "Add new category ''{name}''",
         "add_new": "Add new category…",
         "no_categories": "You don't have any categories",
+        "no_match": "No matching categories found",
         "add_dialog": {
           "title": "Add new category",
           "text": "Enter the name of the new category.",
@@ -599,13 +600,7 @@
         "no_areas": "You don't have any areas",
         "no_match": "No matching areas found",
         "unassigned_areas": "Unassigned areas",
-        "add_dialog": {
+        "failed_create_area": "Failed to create area."
-          "title": "Add new area",
-          "text": "Enter the name of the new area.",
-          "name": "Name",
-          "add": "Add",
-          "failed_create_area": "Failed to create area."
-        }
       },
       "floor-picker": {
         "clear": "Clear",
@@ -615,13 +610,7 @@
         "add_new": "Add new floor…",
         "no_floors": "You don't have any floors",
         "no_match": "No matching floors found",
-        "add_dialog": {
+        "failed_create_floor": "Failed to create floor."
-          "title": "Add new floor",
-          "text": "Enter the name of the new floor.",
-          "name": "Name",
-          "add": "Add",
-          "failed_create_floor": "Failed to create floor."
-        }
       },
       "area-filter": {
         "title": "Areas",
@@ -1125,6 +1114,7 @@
         "edit": "Edit entity",
         "details": "Details",
         "back_to_info": "Back to info",
+        "info": "Information",
         "related": "Related",
         "history": "History",
         "logbook": "Logbook",
@@ -4062,6 +4052,9 @@
               "button": "Hide selected",
               "confirm_title": "Do you want to hide {number} {number, plural,\n  one {entity}\n  other {entities}\n}?",
               "confirm_text": "Hidden entities will not be shown on your dashboard. Their history is still tracked and you can still interact with them with services."
+            },
+            "unhide_selected": {
+              "button": "Unhide selected"
             }
           }
         },