diff --git a/src/components/entity/ha-entities-picker.ts b/src/components/entity/ha-entities-picker.ts
index 19c20886fa..c0116a68b1 100644
--- a/src/components/entity/ha-entities-picker.ts
+++ b/src/components/entity/ha-entities-picker.ts
@@ -1,5 +1,5 @@
import type { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, TemplateResult } from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { isValidEntityId } from "../../common/entity/valid_entity_id";
@@ -51,6 +51,8 @@ class HaEntitiesPickerLight extends LitElement {
@property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string;
+ @property() public label?: string;
+
protected render(): TemplateResult {
if (!this.hass) {
return html``;
@@ -58,6 +60,7 @@ class HaEntitiesPickerLight extends LitElement {
const currentEntities = this._currentEntities;
return html`
+
${this.label}
${currentEntities.map(
(entityId) => html`
@@ -145,6 +148,14 @@ class HaEntitiesPickerLight extends LitElement {
this._updateEntities([...currentEntities, toAdd]);
}
+
+ static get styles(): CSSResultGroup {
+ return css`
+ :host {
+ display: var(--entity-picker-display);
+ }
+ `;
+ }
}
declare global {
diff --git a/src/components/entity/ha-statistic-picker.ts b/src/components/entity/ha-statistic-picker.ts
index 080a78a252..b2d52bef5d 100644
--- a/src/components/entity/ha-statistic-picker.ts
+++ b/src/components/entity/ha-statistic-picker.ts
@@ -296,6 +296,10 @@ export class HaStatisticPicker extends LitElement {
static get styles(): CSSResultGroup {
return css`
+ :host {
+ display: var(--entity-picker-display);
+ }
+
paper-input > ha-icon-button {
--mdc-icon-button-size: 24px;
padding: 2px;
diff --git a/src/panels/lovelace/components/hui-entity-editor.ts b/src/panels/lovelace/components/hui-entity-editor.ts
index ff81d8ec67..b2da87e6fa 100644
--- a/src/panels/lovelace/components/hui-entity-editor.ts
+++ b/src/panels/lovelace/components/hui-entity-editor.ts
@@ -186,6 +186,10 @@ export class HuiEntityEditor extends LitElement {
return [
sortableStyles,
css`
+ :host {
+ display: var(--entity-picker-display);
+ }
+
.entity {
display: flex;
align-items: center;
diff --git a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
index 5be36b9d66..1381bd0a42 100644
--- a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
@@ -111,15 +111,12 @@ export class HuiCalendarCardEditor
@value-changed=${this._valueChanged}
>
-
- ${this.hass.localize(
- "ui.panel.lovelace.editor.card.calendar.calendar_entities"
- ) +
- " (" +
- this.hass!.localize("ui.panel.lovelace.editor.card.config.required") +
- ")"}
-
-
- ${`${this.hass!.localize(
+ .label=${`${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entities"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.required"
)})`}
-
-