review

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

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

@@ -11,7 +11,7 @@ A compact, accessible dropdown menu for choosing actions or settings. `ha-dropdo
 ### Example usage (composition)
 
 ```html
-<ha-dropdown open>
+<ha-dropdown>
   <ha-button slot="trigger" with-caret>Dropdown</ha-button>
 
   <ha-dropdown-item>

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

@@ -28,7 +28,7 @@ export class DemoHaDropdown extends LitElement {
           <div class=${mode}>
             <ha-card header="ha-button in ${mode}">
               <div class="card-content">
-                <ha-dropdown open>
+                <ha-dropdown>
                   <ha-button slot="trigger" with-caret>Dropdown</ha-button>
 
                   <ha-dropdown-item>

src/components/ha-condition-icon.ts

@@ -0,0 +1,84 @@
+import {
+  mdiAmpersand,
+  mdiClockOutline,
+  mdiCodeBraces,
+  mdiDevices,
+  mdiGateOr,
+  mdiIdentifier,
+  mdiMapMarkerRadius,
+  mdiNotEqualVariant,
+  mdiNumeric,
+  mdiStateMachine,
+  mdiWeatherSunny,
+} from "@mdi/js";
+import { html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { until } from "lit/directives/until";
+import { computeDomain } from "../common/entity/compute_domain";
+import { conditionIcon, FALLBACK_DOMAIN_ICONS } from "../data/icons";
+import type { HomeAssistant } from "../types";
+import "./ha-icon";
+import "./ha-svg-icon";
+
+export const CONDITION_ICONS = {
+  device: mdiDevices,
+  and: mdiAmpersand,
+  or: mdiGateOr,
+  not: mdiNotEqualVariant,
+  state: mdiStateMachine,
+  numeric_state: mdiNumeric,
+  sun: mdiWeatherSunny,
+  template: mdiCodeBraces,
+  time: mdiClockOutline,
+  trigger: mdiIdentifier,
+  zone: mdiMapMarkerRadius,
+};
+
+@customElement("ha-condition-icon")
+export class HaConditionIcon extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public condition?: string;
+
+  @property() public icon?: string;
+
+  protected render() {
+    if (this.icon) {
+      return html`<ha-icon .icon=${this.icon}></ha-icon>`;
+    }
+
+    if (!this.condition) {
+      return nothing;
+    }
+
+    if (!this.hass) {
+      return this._renderFallback();
+    }
+
+    const icon = conditionIcon(this.hass, this.condition).then((icn) => {
+      if (icn) {
+        return html`<ha-icon .icon=${icn}></ha-icon>`;
+      }
+      return this._renderFallback();
+    });
+
+    return html`${until(icon)}`;
+  }
+
+  private _renderFallback() {
+    const domain = computeDomain(this.condition!);
+
+    return html`
+      <ha-svg-icon
+        .path=${CONDITION_ICONS[this.condition!] ||
+        FALLBACK_DOMAIN_ICONS[domain]}
+      ></ha-svg-icon>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-condition-icon": HaConditionIcon;
+  }
+}

src/data/automation.ts

@@ -10,6 +10,7 @@ import type { LocalizeKeys } from "../common/translations/localize";
 import { createSearchParam } from "../common/url/search-params";
 import type { Context, HomeAssistant } from "../types";
 import type { BlueprintInput } from "./blueprint";
+import type { ConditionDescription } from "./condition";
 import { CONDITION_BUILDING_BLOCKS } from "./condition";
 import type { DeviceCondition, DeviceTrigger } from "./device_automation";
 import type { Action, Field, MODES } from "./script";
@@ -236,6 +237,12 @@ interface BaseCondition {
   condition: string;
   alias?: string;
   enabled?: boolean;
+  options?: Record<string, unknown>;
+}
+
+export interface PlatformCondition extends BaseCondition {
+  condition: Exclude<string, LegacyCondition["condition"]>;
+  target?: HassServiceTarget;
 }
 
 export interface LogicalCondition extends BaseCondition {
@@ -320,7 +327,7 @@ export type AutomationElementGroup = Record<
   { icon?: string; members?: AutomationElementGroup }
 >;
 
-export type Condition =
+export type LegacyCondition =
   | StateCondition
   | NumericStateCondition
   | SunCondition
@@ -331,6 +338,8 @@ export type Condition =
   | LogicalCondition
   | TriggerCondition;
 
+export type Condition = LegacyCondition | PlatformCondition;
+
 export type ConditionWithShorthand =
   | Condition
   | ShorthandAndConditionList
@@ -608,6 +617,7 @@ export interface ConditionSidebarConfig extends BaseSidebarConfig {
   insertAfter: (value: Condition | Condition[]) => boolean;
   toggleYamlMode: () => void;
   config: Condition;
+  description?: ConditionDescription;
   yamlMode: boolean;
   uiSupported: boolean;
 }

src/data/automation_i18n.ts

@@ -18,7 +18,14 @@ import {
 } from "../common/string/format-list";
 import { hasTemplate } from "../common/string/has-template";
 import type { HomeAssistant } from "../types";
-import type { Condition, ForDict, LegacyTrigger, Trigger } from "./automation";
+import type {
+  Condition,
+  ForDict,
+  LegacyCondition,
+  LegacyTrigger,
+  Trigger,
+} from "./automation";
+import { getConditionDomain, getConditionObjectId } from "./condition";
 import type { DeviceCondition, DeviceTrigger } from "./device_automation";
 import {
   localizeDeviceAutomationCondition,
@@ -896,6 +903,39 @@ const tryDescribeCondition = (
     }
   }
 
+  const description = describeLegacyCondition(
+    condition as LegacyCondition,
+    hass,
+    entityRegistry
+  );
+
+  if (description) {
+    return description;
+  }
+
+  const conditionType = condition.condition;
+
+  const domain = getConditionDomain(condition.condition);
+  const type = getConditionObjectId(condition.condition);
+
+  return (
+    hass.localize(
+      `component.${domain}.conditions.${type}.description_configured`
+    ) ||
+    hass.localize(
+      `ui.panel.config.automation.editor.conditions.type.${conditionType as LegacyCondition["condition"]}.label`
+    ) ||
+    hass.localize(
+      `ui.panel.config.automation.editor.conditions.unknown_condition`
+    )
+  );
+};
+
+const describeLegacyCondition = (
+  condition: LegacyCondition,
+  hass: HomeAssistant,
+  entityRegistry: EntityRegistryEntry[]
+) => {
   if (condition.condition === "or") {
     const conditions = ensureArray(condition.conditions);
 
@@ -1287,12 +1327,5 @@ const tryDescribeCondition = (
     );
   }
 
-  return (
-    hass.localize(
-      `ui.panel.config.automation.editor.conditions.type.${condition.condition}.label`
-    ) ||
-    hass.localize(
-      `ui.panel.config.automation.editor.conditions.unknown_condition`
-    )
-  );
+  return undefined;
 };

src/data/condition.ts

@@ -1,38 +1,15 @@
-import {
-  mdiAmpersand,
-  mdiClockOutline,
-  mdiCodeBraces,
-  mdiDevices,
-  mdiGateOr,
-  mdiIdentifier,
-  mdiMapClock,
-  mdiMapMarkerRadius,
-  mdiNotEqualVariant,
-  mdiNumeric,
-  mdiShape,
-  mdiStateMachine,
-  mdiWeatherSunny,
-} from "@mdi/js";
+import { mdiMapClock, mdiShape } from "@mdi/js";
+import { computeDomain } from "../common/entity/compute_domain";
+import { computeObjectId } from "../common/entity/compute_object_id";
+import type { HomeAssistant } from "../types";
 import type { AutomationElementGroupCollection } from "./automation";
-
-export const CONDITION_ICONS = {
-  device: mdiDevices,
-  and: mdiAmpersand,
-  or: mdiGateOr,
-  not: mdiNotEqualVariant,
-  state: mdiStateMachine,
-  numeric_state: mdiNumeric,
-  sun: mdiWeatherSunny,
-  template: mdiCodeBraces,
-  time: mdiClockOutline,
-  trigger: mdiIdentifier,
-  zone: mdiMapMarkerRadius,
-};
+import type { Selector, TargetSelector } from "./selector";
 
 export const CONDITION_COLLECTIONS: AutomationElementGroupCollection[] = [
   {
     groups: {
       device: {},
+      dynamicGroups: {},
       entity: { icon: mdiShape, members: { state: {}, numeric_state: {} } },
       time_location: {
         icon: mdiMapClock,
@@ -62,3 +39,33 @@ export const COLLAPSIBLE_CONDITION_ELEMENTS = [
   "ha-automation-condition-not",
   "ha-automation-condition-or",
 ];
+
+export interface ConditionDescription {
+  target?: TargetSelector["target"];
+  fields: Record<
+    string,
+    {
+      example?: string | boolean | number;
+      default?: unknown;
+      required?: boolean;
+      selector?: Selector;
+      context?: Record<string, string>;
+    }
+  >;
+}
+
+export type ConditionDescriptions = Record<string, ConditionDescription>;
+
+export const subscribeConditions = (
+  hass: HomeAssistant,
+  callback: (conditions: ConditionDescriptions) => void
+) =>
+  hass.connection.subscribeMessage<ConditionDescriptions>(callback, {
+    type: "condition_platforms/subscribe",
+  });
+
+export const getConditionDomain = (condition: string) =>
+  condition.includes(".") ? computeDomain(condition) : condition;
+
+export const getConditionObjectId = (condition: string) =>
+  condition.includes(".") ? computeObjectId(condition) : "_";

src/data/frontend.ts

@@ -3,7 +3,7 @@ import type { Connection } from "home-assistant-js-websocket";
 export interface CoreFrontendUserData {
   showAdvanced?: boolean;
   showEntityIdPicker?: boolean;
-  defaultPanel?: string;
+  default_panel?: string;
 }
 
 export interface SidebarFrontendUserData {
@@ -12,7 +12,7 @@ export interface SidebarFrontendUserData {
 }
 
 export interface CoreFrontendSystemData {
-  defaultPanel?: string;
+  default_panel?: string;
 }
 
 export interface HomeFrontendSystemData {

src/data/icons.ts

@@ -60,6 +60,7 @@ import type {
 
 import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
 import { getTriggerDomain, getTriggerObjectId } from "./trigger";
+import { getConditionDomain, getConditionObjectId } from "./condition";
 
 /** Icon to use when no icon specified for service. */
 export const DEFAULT_SERVICE_ICON = mdiRoomService;
@@ -138,15 +139,25 @@ const resources: {
     all?: Promise<Record<string, TriggerIcons>>;
     domains: Record<string, TriggerIcons | Promise<TriggerIcons>>;
   };
+  conditions: {
+    all?: Promise<Record<string, ConditionIcons>>;
+    domains: Record<string, ConditionIcons | Promise<ConditionIcons>>;
+  };
 } = {
   entity: {},
   entity_component: {},
   services: { domains: {} },
   triggers: { domains: {} },
+  conditions: { domains: {} },
 };
 
 interface IconResources<
-  T extends ComponentIcons | PlatformIcons | ServiceIcons | TriggerIcons,
+  T extends
+    | ComponentIcons
+    | PlatformIcons
+    | ServiceIcons
+    | TriggerIcons
+    | ConditionIcons,
 > {
   resources: Record<string, T>;
 }
@@ -195,17 +206,24 @@ type TriggerIcons = Record<
   { trigger: string; sections?: Record<string, string> }
 >;
 
+type ConditionIcons = Record<
+  string,
+  { condition: string; sections?: Record<string, string> }
+>;
+
 export type IconCategory =
   | "entity"
   | "entity_component"
   | "services"
-  | "triggers";
+  | "triggers"
+  | "conditions";
 
 interface CategoryType {
   entity: PlatformIcons;
   entity_component: ComponentIcons;
   services: ServiceIcons;
   triggers: TriggerIcons;
+  conditions: ConditionIcons;
 }
 
 export const getHassIcons = async <T extends IconCategory>(
@@ -327,6 +345,13 @@ export const getTriggerIcons = async (
 ): Promise<TriggerIcons | Record<string, TriggerIcons> | undefined> =>
   getCategoryIcons(hass, "triggers", domain, force);
 
+export const getConditionIcons = async (
+  hass: HomeAssistant,
+  domain?: string,
+  force = false
+): Promise<ConditionIcons | Record<string, ConditionIcons> | undefined> =>
+  getCategoryIcons(hass, "conditions", domain, force);
+
 // Cache for sorted range keys
 const sortedRangeCache = new WeakMap<Record<string, string>, number[]>();
 
@@ -526,6 +551,25 @@ export const triggerIcon = async (
   return icon;
 };
 
+export const conditionIcon = async (
+  hass: HomeAssistant,
+  condition: string
+): Promise<string | undefined> => {
+  let icon: string | undefined;
+
+  const domain = getConditionDomain(condition);
+  const conditionIcons = await getConditionIcons(hass, domain);
+  if (conditionIcons) {
+    const conditionName = getConditionObjectId(condition);
+    const condIcon = conditionIcons[conditionName] as ConditionIcons[string];
+    icon = condIcon?.condition;
+  }
+  if (!icon) {
+    icon = await domainIcon(hass, domain);
+  }
+  return icon;
+};
+
 export const serviceIcon = async (
   hass: HomeAssistant,
   service: string

src/data/panel.ts

@@ -9,8 +9,8 @@ export const getLegacyDefaultPanelUrlPath = (): string | null => {
 };
 
 export const getDefaultPanelUrlPath = (hass: HomeAssistant): string =>
-  hass.userData?.defaultPanel ||
-  hass.systemData?.defaultPanel ||
+  hass.userData?.default_panel ||
+  hass.systemData?.default_panel ||
   getLegacyDefaultPanelUrlPath() ||
   DEFAULT_PANEL;
 

src/data/translation.ts

@@ -75,7 +75,8 @@ export type TranslationCategory =
   | "preview_features"
   | "selector"
   | "services"
-  | "triggers";
+  | "triggers"
+  | "conditions";
 
 export const subscribeTranslationPreferences = (
   hass: HomeAssistant,

src/panels/config/automation/action/types/ha-automation-action-condition.ts

@@ -1,19 +1,29 @@
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import { stringCompare } from "../../../../../common/string/compare";
 import { stopPropagation } from "../../../../../common/dom/stop_propagation";
+import { stringCompare } from "../../../../../common/string/compare";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
+import { CONDITION_ICONS } from "../../../../../components/ha-condition-icon";
 import "../../../../../components/ha-list-item";
 import "../../../../../components/ha-select";
 import type { HaSelect } from "../../../../../components/ha-select";
-import type { Condition } from "../../../../../data/automation";
+import {
+  DYNAMIC_PREFIX,
+  getValueFromDynamic,
+  isDynamic,
+  type Condition,
+} from "../../../../../data/automation";
+import type { ConditionDescriptions } from "../../../../../data/condition";
 import {
   CONDITION_BUILDING_BLOCKS,
-  CONDITION_ICONS,
+  getConditionDomain,
+  getConditionObjectId,
+  subscribeConditions,
 } from "../../../../../data/condition";
-import type { Entries, HomeAssistant } from "../../../../../types";
+import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
+import type { HomeAssistant } from "../../../../../types";
 import "../../condition/ha-automation-condition-editor";
 import type HaAutomationConditionEditor from "../../condition/ha-automation-condition-editor";
 import "../../condition/types/ha-automation-condition-and";
@@ -30,7 +40,10 @@ import "../../condition/types/ha-automation-condition-zone";
 import type { ActionElement } from "../ha-automation-action-row";
 
 @customElement("ha-automation-action-condition")
-export class HaConditionAction extends LitElement implements ActionElement {
+export class HaConditionAction
+  extends SubscribeMixin(LitElement)
+  implements ActionElement
+{
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public disabled = false;
@@ -43,6 +56,8 @@ export class HaConditionAction extends LitElement implements ActionElement {
 
   @property({ type: Boolean, attribute: "indent" }) public indent = false;
 
+  @state() private _conditionDescriptions: ConditionDescriptions = {};
+
   @query("ha-automation-condition-editor")
   private _conditionEditor?: HaAutomationConditionEditor;
 
@@ -50,6 +65,21 @@ export class HaConditionAction extends LitElement implements ActionElement {
     return { condition: "state" };
   }
 
+  protected hassSubscribe() {
+    return [
+      subscribeConditions(this.hass, (conditions) =>
+        this._addConditions(conditions)
+      ),
+    ];
+  }
+
+  private _addConditions(conditions: ConditionDescriptions) {
+    this._conditionDescriptions = {
+      ...this._conditionDescriptions,
+      ...conditions,
+    };
+  }
+
   protected render() {
     const buildingBlock = CONDITION_BUILDING_BLOCKS.includes(
       this.action.condition
@@ -64,19 +94,25 @@ export class HaConditionAction extends LitElement implements ActionElement {
                 "ui.panel.config.automation.editor.conditions.type_select"
               )}
               .disabled=${this.disabled}
-              .value=${this.action.condition}
+              .value=${this.action.condition in this._conditionDescriptions
+                ? `${DYNAMIC_PREFIX}${this.action.condition}`
+                : this.action.condition}
               naturalMenuWidth
               @selected=${this._typeChanged}
               @closed=${stopPropagation}
             >
-              ${this._processedTypes(this.hass.localize).map(
-                ([opt, label, icon]) => html`
+              ${this._processedTypes(
+                this._conditionDescriptions,
+                this.hass.localize
+              ).map(
+                ([opt, label, condition]) => html`
                   <ha-list-item .value=${opt} graphic="icon">
-                    ${label}<ha-svg-icon
+                    ${label}
+                    <ha-condition-icon
                       slot="graphic"
-                      .path=${icon}
-                    ></ha-svg-icon
-                  ></ha-list-item>
+                      .condition=${condition}
+                    ></ha-condition-icon>
+                  </ha-list-item>
                 `
               )}
             </ha-select>
@@ -88,11 +124,14 @@ export class HaConditionAction extends LitElement implements ActionElement {
         ? html`
             <ha-automation-condition-editor
               .condition=${this.action}
+              .description=${this._conditionDescriptions[this.action.condition]}
               .disabled=${this.disabled}
               .hass=${this.hass}
               @value-changed=${this._conditionChanged}
               .narrow=${this.narrow}
-              .uiSupported=${this._uiSupported(this.action.condition)}
+              .uiSupported=${this._uiSupported(
+                this._getType(this.action, this._conditionDescriptions)
+              )}
               .indent=${this.indent}
               action
             ></ha-automation-condition-editor>
@@ -102,19 +141,46 @@ export class HaConditionAction extends LitElement implements ActionElement {
   }
 
   private _processedTypes = memoizeOne(
-    (localize: LocalizeFunc): [string, string, string][] =>
-      (Object.entries(CONDITION_ICONS) as Entries<typeof CONDITION_ICONS>)
-        .map(
-          ([condition, icon]) =>
-            [
-              condition,
-              localize(
-                `ui.panel.config.automation.editor.conditions.type.${condition}.label`
-              ),
-              icon,
-            ] as [string, string, string]
-        )
-        .sort((a, b) => stringCompare(a[1], b[1], this.hass.locale.language))
+    (
+      conditionDescriptions: ConditionDescriptions,
+      localize: LocalizeFunc
+    ): [string, string, string][] => {
+      const legacy = (
+        Object.keys(CONDITION_ICONS) as (keyof typeof CONDITION_ICONS)[]
+      ).map(
+        (condition) =>
+          [
+            condition,
+            localize(
+              `ui.panel.config.automation.editor.conditions.type.${condition}.label`
+            ),
+            condition,
+          ] as [string, string, string]
+      );
+      const platform = Object.keys(conditionDescriptions).map((condition) => {
+        const domain = getConditionDomain(condition);
+        const conditionObjId = getConditionObjectId(condition);
+        return [
+          `${DYNAMIC_PREFIX}${condition}`,
+          localize(`component.${domain}.conditions.${conditionObjId}.name`) ||
+            condition,
+          condition,
+        ] as [string, string, string];
+      });
+      return [...legacy, ...platform].sort((a, b) =>
+        stringCompare(a[1], b[1], this.hass.locale.language)
+      );
+    }
+  );
+
+  private _getType = memoizeOne(
+    (condition: Condition, conditionDescriptions: ConditionDescriptions) => {
+      if (condition.condition in conditionDescriptions) {
+        return "platform";
+      }
+
+      return condition.condition;
+    }
   );
 
   private _conditionChanged(ev: CustomEvent) {
@@ -132,6 +198,18 @@ export class HaConditionAction extends LitElement implements ActionElement {
       return;
     }
 
+    if (isDynamic(type)) {
+      const value = getValueFromDynamic(type);
+      if (value !== this.action.condition) {
+        fireEvent(this, "value-changed", {
+          value: {
+            condition: value,
+          },
+        });
+      }
+      return;
+    }
+
     const elClass = customElements.get(
       `ha-automation-condition-${type}`
     ) as CustomElementConstructor & {

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

@@ -56,12 +56,19 @@ import {
   type AutomationElementGroup,
   type AutomationElementGroupCollection,
 } from "../../../data/automation";
+import type { ConditionDescriptions } from "../../../data/condition";
 import {
   CONDITION_BUILDING_BLOCKS_GROUP,
   CONDITION_COLLECTIONS,
-  CONDITION_ICONS,
+  getConditionDomain,
+  getConditionObjectId,
+  subscribeConditions,
 } from "../../../data/condition";
-import { getServiceIcons, getTriggerIcons } from "../../../data/icons";
+import {
+  getConditionIcons,
+  getServiceIcons,
+  getTriggerIcons,
+} from "../../../data/icons";
 import type { IntegrationManifest } from "../../../data/integration";
 import {
   domainToName,
@@ -82,6 +89,7 @@ import { isMac } from "../../../util/is_mac";
 import { showToast } from "../../../util/toast";
 import type { AddAutomationElementDialogParams } from "./show-add-automation-element-dialog";
 import { PASTE_VALUE } from "./show-add-automation-element-dialog";
+import { CONDITION_ICONS } from "../../../components/ha-condition-icon";
 
 const TYPES = {
   trigger: { collections: TRIGGER_COLLECTIONS, icons: TRIGGER_ICONS },
@@ -119,7 +127,7 @@ const ENTITY_DOMAINS_OTHER = new Set([
 
 const ENTITY_DOMAINS_MAIN = new Set(["notify"]);
 
-const ACTION_SERVICE_KEYWORDS = ["dynamicGroups", "helpers", "other"];
+const DYNAMIC_KEYWORDS = ["dynamicGroups", "helpers", "other"];
 
 @customElement("add-automation-element-dialog")
 class DialogAddAutomationElement
@@ -152,6 +160,8 @@ class DialogAddAutomationElement
 
   @state() private _triggerDescriptions: TriggerDescriptions = {};
 
+  @state() private _conditionDescriptions: ConditionDescriptions = {};
+
   @query(".items ha-md-list ha-md-list-item")
   private _itemsListFirstElement?: HaMdList;
 
@@ -169,15 +179,15 @@ class DialogAddAutomationElement
 
     this.addKeyboardShortcuts();
 
+    this._unsubscribe();
+    this._fetchManifests();
+
     if (this._params?.type === "action") {
       this.hass.loadBackendTranslation("services");
-      this._fetchManifests();
       this._calculateUsedDomains();
       getServiceIcons(this.hass);
-    }
-    if (this._params?.type === "trigger") {
+    } else if (this._params?.type === "trigger") {
       this.hass.loadBackendTranslation("triggers");
-      this._fetchManifests();
       getTriggerIcons(this.hass);
       this._unsub = subscribeTriggers(this.hass, (triggers) => {
         this._triggerDescriptions = {
@@ -185,7 +195,17 @@ class DialogAddAutomationElement
           ...triggers,
         };
       });
+    } else if (this._params?.type === "condition") {
+      this.hass.loadBackendTranslation("conditions");
+      getConditionIcons(this.hass);
+      this._unsub = subscribeConditions(this.hass, (conditions) => {
+        this._conditionDescriptions = {
+          ...this._conditionDescriptions,
+          ...conditions,
+        };
+      });
     }
+
     this._fullScreen = matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
     ).matches;
@@ -199,10 +219,7 @@ class DialogAddAutomationElement
 
   public closeDialog() {
     this.removeKeyboardShortcuts();
-    if (this._unsub) {
-      this._unsub.then((unsub) => unsub());
-      this._unsub = undefined;
-    }
+    this._unsubscribe();
     if (this._params) {
       fireEvent(this, "dialog-closed", { dialog: this.localName });
     }
@@ -219,6 +236,13 @@ class DialogAddAutomationElement
     return true;
   }
 
+  private _unsubscribe() {
+    if (this._unsub) {
+      this._unsub.then((unsub) => unsub());
+      this._unsub = undefined;
+    }
+  }
+
   private _getGroups = (
     type: AddAutomationElementDialogParams["type"],
     group?: string,
@@ -348,8 +372,11 @@ class DialogAddAutomationElement
         items.push(
           ...this._triggers(localize, this._triggerDescriptions, manifests)
         );
-      }
-      if (type === "action") {
+      } else if (type === "condition") {
+        items.push(
+          ...this._conditions(localize, this._conditionDescriptions, manifests)
+        );
+      } else if (type === "action") {
         items.push(...this._services(localize, services, manifests));
       }
       return items;
@@ -372,6 +399,7 @@ class DialogAddAutomationElement
       localize: LocalizeFunc,
       services: HomeAssistant["services"],
       triggerDescriptions: TriggerDescriptions,
+      conditionDescriptions: ConditionDescriptions,
       manifests?: DomainManifestLookup
     ): {
       titleKey?: LocalizeKeys;
@@ -383,35 +411,10 @@ class DialogAddAutomationElement
         let collectionGroups = Object.entries(collection.groups);
         const groups: ListItem[] = [];
 
-        if (
-          type === "action" &&
-          Object.keys(collection.groups).some((item) =>
-            ACTION_SERVICE_KEYWORDS.includes(item)
-          )
-        ) {
-          groups.push(
-            ...this._serviceGroups(
-              localize,
-              services,
-              manifests,
-              domains,
-              collection.groups.dynamicGroups
-                ? undefined
-                : collection.groups.helpers
-                  ? "helper"
-                  : "other"
-            )
-          );
-
-          collectionGroups = collectionGroups.filter(
-            ([key]) => !ACTION_SERVICE_KEYWORDS.includes(key)
-          );
-        }
-
         if (
           type === "trigger" &&
           Object.keys(collection.groups).some((item) =>
-            ACTION_SERVICE_KEYWORDS.includes(item)
+            DYNAMIC_KEYWORDS.includes(item)
           )
         ) {
           groups.push(
@@ -429,7 +432,53 @@ class DialogAddAutomationElement
           );
 
           collectionGroups = collectionGroups.filter(
-            ([key]) => !ACTION_SERVICE_KEYWORDS.includes(key)
+            ([key]) => !DYNAMIC_KEYWORDS.includes(key)
+          );
+        } else if (
+          type === "condition" &&
+          Object.keys(collection.groups).some((item) =>
+            DYNAMIC_KEYWORDS.includes(item)
+          )
+        ) {
+          groups.push(
+            ...this._conditionGroups(
+              localize,
+              conditionDescriptions,
+              manifests,
+              domains,
+              collection.groups.dynamicGroups
+                ? undefined
+                : collection.groups.helpers
+                  ? "helper"
+                  : "other"
+            )
+          );
+
+          collectionGroups = collectionGroups.filter(
+            ([key]) => !DYNAMIC_KEYWORDS.includes(key)
+          );
+        } else if (
+          type === "action" &&
+          Object.keys(collection.groups).some((item) =>
+            DYNAMIC_KEYWORDS.includes(item)
+          )
+        ) {
+          groups.push(
+            ...this._serviceGroups(
+              localize,
+              services,
+              manifests,
+              domains,
+              collection.groups.dynamicGroups
+                ? undefined
+                : collection.groups.helpers
+                  ? "helper"
+                  : "other"
+            )
+          );
+
+          collectionGroups = collectionGroups.filter(
+            ([key]) => !DYNAMIC_KEYWORDS.includes(key)
           );
         }
 
@@ -487,10 +536,6 @@ class DialogAddAutomationElement
       services: HomeAssistant["services"],
       manifests?: DomainManifestLookup
     ): ListItem[] => {
-      if (type === "action" && isDynamic(group)) {
-        return this._services(localize, services, manifests, group);
-      }
-
       if (type === "trigger" && isDynamic(group)) {
         return this._triggers(
           localize,
@@ -499,6 +544,17 @@ class DialogAddAutomationElement
           group
         );
       }
+      if (type === "condition" && isDynamic(group)) {
+        return this._conditions(
+          localize,
+          this._conditionDescriptions,
+          manifests,
+          group
+        );
+      }
+      if (type === "action" && isDynamic(group)) {
+        return this._services(localize, services, manifests, group);
+      }
 
       const groups = this._getGroups(type, group, collectionIndex);
 
@@ -688,6 +744,102 @@ class DialogAddAutomationElement
     }
   );
 
+  private _conditionGroups = (
+    localize: LocalizeFunc,
+    conditions: ConditionDescriptions,
+    manifests: DomainManifestLookup | undefined,
+    domains: Set<string> | undefined,
+    type: "helper" | "other" | undefined
+  ): ListItem[] => {
+    if (!conditions || !manifests) {
+      return [];
+    }
+    const result: ListItem[] = [];
+    const addedDomains = new Set<string>();
+    Object.keys(conditions).forEach((condition) => {
+      const domain = getConditionDomain(condition);
+
+      if (addedDomains.has(domain)) {
+        return;
+      }
+      addedDomains.add(domain);
+
+      const manifest = manifests[domain];
+      const domainUsed = !domains ? true : domains.has(domain);
+
+      if (
+        (type === undefined &&
+          (ENTITY_DOMAINS_MAIN.has(domain) ||
+            (manifest?.integration_type === "entity" &&
+              domainUsed &&
+              !ENTITY_DOMAINS_OTHER.has(domain)))) ||
+        (type === "helper" && manifest?.integration_type === "helper") ||
+        (type === "other" &&
+          !ENTITY_DOMAINS_MAIN.has(domain) &&
+          (ENTITY_DOMAINS_OTHER.has(domain) ||
+            (!domainUsed && manifest?.integration_type === "entity") ||
+            !["helper", "entity"].includes(manifest?.integration_type || "")))
+      ) {
+        result.push({
+          icon: html`
+            <ha-domain-icon
+              .hass=${this.hass}
+              .domain=${domain}
+              brand-fallback
+            ></ha-domain-icon>
+          `,
+          key: `${DYNAMIC_PREFIX}${domain}`,
+          name: domainToName(localize, domain, manifest),
+          description: "",
+        });
+      }
+    });
+    return result.sort((a, b) =>
+      stringCompare(a.name, b.name, this.hass.locale.language)
+    );
+  };
+
+  private _conditions = memoizeOne(
+    (
+      localize: LocalizeFunc,
+      conditions: ConditionDescriptions,
+      _manifests: DomainManifestLookup | undefined,
+      group?: string
+    ): ListItem[] => {
+      if (!conditions) {
+        return [];
+      }
+      const result: ListItem[] = [];
+
+      for (const condition of Object.keys(conditions)) {
+        const domain = getConditionDomain(condition);
+        const conditionName = getConditionObjectId(condition);
+
+        if (group && group !== `${DYNAMIC_PREFIX}${domain}`) {
+          continue;
+        }
+
+        result.push({
+          icon: html`
+            <ha-condition-icon
+              .hass=${this.hass}
+              .condition=${condition}
+            ></ha-condition-icon>
+          `,
+          key: `${DYNAMIC_PREFIX}${condition}`,
+          name:
+            localize(`component.${domain}.conditions.${conditionName}.name`) ||
+            condition,
+          description:
+            localize(
+              `component.${domain}.conditions.${conditionName}.description`
+            ) || condition,
+        });
+      }
+      return result;
+    }
+  );
+
   private _services = memoizeOne(
     (
       localize: LocalizeFunc,
@@ -832,6 +984,7 @@ class DialogAddAutomationElement
       this.hass.localize,
       this.hass.services,
       this._triggerDescriptions,
+      this._conditionDescriptions,
       this._manifests
     );
 
@@ -1136,6 +1289,7 @@ class DialogAddAutomationElement
     super.disconnectedCallback();
     window.removeEventListener("resize", this._updateNarrow);
     this._removeSearchKeybindings();
+    this._unsubscribe();
   }
 
   private _updateNarrow = () => {

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -8,11 +8,13 @@ import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import type { Condition } from "../../../../data/automation";
 import { expandConditionWithShorthand } from "../../../../data/automation";
+import type { ConditionDescription } from "../../../../data/condition";
 import { COLLAPSIBLE_CONDITION_ELEMENTS } from "../../../../data/condition";
 import type { HomeAssistant } from "../../../../types";
 import "../ha-automation-editor-warning";
 import { editorStyles, indentStyle } from "../styles";
 import type { ConditionElement } from "./ha-automation-condition-row";
+import "./types/ha-automation-condition-platform";
 
 @customElement("ha-automation-condition-editor")
 export default class HaAutomationConditionEditor extends LitElement {
@@ -35,6 +37,8 @@ export default class HaAutomationConditionEditor extends LitElement {
   @property({ type: Boolean, attribute: "supported" }) public uiSupported =
     false;
 
+  @property({ attribute: false }) public description?: ConditionDescription;
+
   @query("ha-yaml-editor") public yamlEditor?: HaYamlEditor;
 
   @query(COLLAPSIBLE_CONDITION_ELEMENTS.join(", "))
@@ -83,16 +87,23 @@ export default class HaAutomationConditionEditor extends LitElement {
             `
           : html`
               <div @value-changed=${this._onUiChanged}>
-                ${dynamicElement(
-                  `ha-automation-condition-${condition.condition}`,
-                  {
-                    hass: this.hass,
-                    condition: condition,
-                    disabled: this.disabled,
-                    optionsInSidebar: this.indent,
-                    narrow: this.narrow,
-                  }
-                )}
+                ${this.description
+                  ? html`<ha-automation-condition-platform
+                      .hass=${this.hass}
+                      .condition=${this.condition}
+                      .description=${this.description}
+                      .disabled=${this.disabled}
+                    ></ha-automation-condition-platform>`
+                  : dynamicElement(
+                      `ha-automation-condition-${condition.condition}`,
+                      {
+                        hass: this.hass,
+                        condition: condition,
+                        disabled: this.disabled,
+                        optionsInSidebar: this.indent,
+                        narrow: this.narrow,
+                      }
+                    )}
               </div>
             `}
       </div>

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -32,6 +32,7 @@ import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 import "../../../../components/ha-automation-row";
 import type { HaAutomationRow } from "../../../../components/ha-automation-row";
 import "../../../../components/ha-card";
+import "../../../../components/ha-condition-icon";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-md-button-menu";
@@ -44,10 +45,8 @@ import type {
 } from "../../../../data/automation";
 import { isCondition, testCondition } from "../../../../data/automation";
 import { describeCondition } from "../../../../data/automation_i18n";
-import {
-  CONDITION_BUILDING_BLOCKS,
-  CONDITION_ICONS,
-} from "../../../../data/condition";
+import type { ConditionDescriptions } from "../../../../data/condition";
+import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
 import { validateConfig } from "../../../../data/config";
 import { fullEntitiesContext } from "../../../../data/context";
 import type { EntityRegistryEntry } from "../../../../data/entity_registry";
@@ -130,6 +129,9 @@ export default class HaAutomationConditionRow extends LitElement {
 
   @state() private _warnings?: string[];
 
+  @property({ attribute: false })
+  public conditionDescriptions: ConditionDescriptions = {};
+
   @property({ type: Boolean, attribute: "sidebar" })
   public optionsInSidebar = false;
 
@@ -179,11 +181,11 @@ export default class HaAutomationConditionRow extends LitElement {
 
   private _renderRow() {
     return html`
-      <ha-svg-icon
+      <ha-condition-icon
         slot="leading-icon"
-        class="condition-icon"
-        .path=${CONDITION_ICONS[this.condition.condition]}
-      ></ha-svg-icon>
+        .hass=${this.hass}
+        .condition=${this.condition.condition}
+      ></ha-condition-icon>
       <h3 slot="header">
         ${capitalizeFirstLetter(
           describeCondition(this.condition, this.hass, this._entityReg)
@@ -395,9 +397,14 @@ export default class HaAutomationConditionRow extends LitElement {
             <ha-automation-condition-editor
               .hass=${this.hass}
               .condition=${this.condition}
+              .description=${this.conditionDescriptions[
+                this.condition.condition
+              ]}
               .disabled=${this.disabled}
               .yamlMode=${this._yamlMode}
-              .uiSupported=${this._uiSupported(this.condition.condition)}
+              .uiSupported=${this._uiSupported(
+                this._getType(this.condition, this.conditionDescriptions)
+              )}
               .narrow=${this.narrow}
               @ui-mode-not-available=${this._handleUiModeNotAvailable}
             ></ha-automation-condition-editor>`
@@ -476,7 +483,9 @@ export default class HaAutomationConditionRow extends LitElement {
             .hass=${this.hass}
             .condition=${this.condition}
             .disabled=${this.disabled}
-            .uiSupported=${this._uiSupported(this.condition.condition)}
+            .uiSupported=${this._uiSupported(
+              this._getType(this.condition, this.conditionDescriptions)
+            )}
             indent
             .selected=${this._selected}
             .narrow=${this.narrow}
@@ -786,7 +795,10 @@ export default class HaAutomationConditionRow extends LitElement {
       cut: this._cutCondition,
       test: this._testCondition,
       config: sidebarCondition,
-      uiSupported: this._uiSupported(sidebarCondition.condition),
+      uiSupported: this._uiSupported(
+        this._getType(sidebarCondition, this.conditionDescriptions)
+      ),
+      description: this.conditionDescriptions[sidebarCondition.condition],
       yamlMode: this._yamlMode,
     } satisfies ConditionSidebarConfig);
     this._selected = true;
@@ -802,6 +814,16 @@ export default class HaAutomationConditionRow extends LitElement {
     }
   }
 
+  private _getType = memoizeOne(
+    (condition: Condition, conditionDescriptions: ConditionDescriptions) => {
+      if (condition.condition in conditionDescriptions) {
+        return "platform";
+      }
+
+      return condition.condition;
+    }
+  );
+
   private _uiSupported = memoizeOne(
     (type: string) =>
       customElements.get(`ha-automation-condition-${type}`) !== undefined

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

@@ -4,6 +4,7 @@ import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, queryAll, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
+import { ensureArray } from "../../../../common/array/ensure-array";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
@@ -12,11 +13,18 @@ import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
-import type {
-  AutomationClipboard,
-  Condition,
+import {
+  getValueFromDynamic,
+  isDynamic,
+  type AutomationClipboard,
+  type Condition,
 } from "../../../../data/automation";
-import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
+import type { ConditionDescriptions } from "../../../../data/condition";
+import {
+  CONDITION_BUILDING_BLOCKS,
+  subscribeConditions,
+} from "../../../../data/condition";
+import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../../types";
 import {
   PASTE_VALUE,
@@ -25,10 +33,9 @@ import {
 import { automationRowsStyles } from "../styles";
 import "./ha-automation-condition-row";
 import type HaAutomationConditionRow from "./ha-automation-condition-row";
-import { ensureArray } from "../../../../common/array/ensure-array";
 
 @customElement("ha-automation-condition")
-export default class HaAutomationCondition extends LitElement {
+export default class HaAutomationCondition extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public conditions!: Condition[];
@@ -46,6 +53,8 @@ export default class HaAutomationCondition extends LitElement {
 
   @state() private _rowSortSelected?: number;
 
+  @state() private _conditionDescriptions: ConditionDescriptions = {};
+
   @state()
   @storage({
     key: "automationClipboard",
@@ -64,6 +73,26 @@ export default class HaAutomationCondition extends LitElement {
 
   private _conditionKeys = new WeakMap<Condition, string>();
 
+  protected hassSubscribe() {
+    return [
+      subscribeConditions(this.hass, (conditions) =>
+        this._addConditions(conditions)
+      ),
+    ];
+  }
+
+  private _addConditions(conditions: ConditionDescriptions) {
+    this._conditionDescriptions = {
+      ...this._conditionDescriptions,
+      ...conditions,
+    };
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this.hass.loadBackendTranslation("conditions");
+  }
+
   protected updated(changedProperties: PropertyValues) {
     if (!changedProperties.has("conditions")) {
       return;
@@ -168,6 +197,7 @@ export default class HaAutomationCondition extends LitElement {
                 .last=${idx === this.conditions.length - 1}
                 .totalConditions=${this.conditions.length}
                 .condition=${cond}
+                .conditionDescriptions=${this._conditionDescriptions}
                 .disabled=${this.disabled}
                 .narrow=${this.narrow}
                 @duplicate=${this._duplicateCondition}
@@ -237,6 +267,10 @@ export default class HaAutomationCondition extends LitElement {
       conditions = this.conditions.concat(
         deepClone(this._clipboard!.condition)
       );
+    } else if (isDynamic(value)) {
+      conditions = this.conditions.concat({
+        condition: getValueFromDynamic(value),
+      });
     } else {
       const condition = value as Condition["condition"];
       const elClass = customElements.get(

src/panels/config/automation/condition/types/ha-automation-condition-platform.ts

@@ -0,0 +1,416 @@
+import { mdiHelpCircle } from "@mdi/js";
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import { computeDomain } from "../../../../../common/entity/compute_domain";
+import "../../../../../components/ha-checkbox";
+import "../../../../../components/ha-selector/ha-selector";
+import "../../../../../components/ha-settings-row";
+import type { PlatformCondition } from "../../../../../data/automation";
+import {
+  getConditionDomain,
+  getConditionObjectId,
+  type ConditionDescription,
+} from "../../../../../data/condition";
+import type { IntegrationManifest } from "../../../../../data/integration";
+import { fetchIntegrationManifest } from "../../../../../data/integration";
+import type { TargetSelector } from "../../../../../data/selector";
+import type { HomeAssistant } from "../../../../../types";
+import { documentationUrl } from "../../../../../util/documentation-url";
+
+const showOptionalToggle = (field: ConditionDescription["fields"][string]) =>
+  field.selector &&
+  !field.required &&
+  !("boolean" in field.selector && field.default);
+
+@customElement("ha-automation-condition-platform")
+export class HaPlatformCondition extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public condition!: PlatformCondition;
+
+  @property({ attribute: false }) public description?: ConditionDescription;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @state() private _checkedKeys = new Set();
+
+  @state() private _manifest?: IntegrationManifest;
+
+  public static get defaultConfig(): PlatformCondition {
+    return { condition: "" };
+  }
+
+  protected willUpdate(changedProperties: PropertyValues<this>) {
+    super.willUpdate(changedProperties);
+    if (!this.hasUpdated) {
+      this.hass.loadBackendTranslation("conditions");
+      this.hass.loadBackendTranslation("selector");
+    }
+    if (!changedProperties.has("condition")) {
+      return;
+    }
+    const oldValue = changedProperties.get("condition") as
+      | undefined
+      | this["condition"];
+
+    // Fetch the manifest if we have a condition selected and the condition domain changed.
+    // If no condition is selected, clear the manifest.
+    if (this.condition?.condition) {
+      const domain = getConditionDomain(this.condition.condition);
+
+      const oldDomain = getConditionDomain(oldValue?.condition || "");
+
+      if (domain !== oldDomain) {
+        this._fetchManifest(domain);
+      }
+    } else {
+      this._manifest = undefined;
+    }
+  }
+
+  protected render() {
+    const domain = getConditionDomain(this.condition.condition);
+    const conditionName = getConditionObjectId(this.condition.condition);
+
+    const description = this.hass.localize(
+      `component.${domain}.conditions.${conditionName}.description`
+    );
+
+    const conditionDesc = this.description;
+
+    const shouldRenderDataYaml = !conditionDesc?.fields;
+
+    const hasOptional = Boolean(
+      conditionDesc?.fields &&
+        Object.values(conditionDesc.fields).some((field) =>
+          showOptionalToggle(field)
+        )
+    );
+
+    return html`
+      <div class="description">
+        ${description ? html`<p>${description}</p>` : nothing}
+        ${this._manifest
+          ? html`<a
+              href=${this._manifest.is_built_in
+                ? documentationUrl(
+                    this.hass,
+                    `/integrations/${this._manifest.domain}`
+                  )
+                : this._manifest.documentation}
+              title=${this.hass.localize(
+                "ui.components.service-control.integration_doc"
+              )}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <ha-icon-button
+                .path=${mdiHelpCircle}
+                class="help-icon"
+              ></ha-icon-button>
+            </a>`
+          : nothing}
+      </div>
+      ${conditionDesc && "target" in conditionDesc
+        ? html`<ha-settings-row narrow>
+            ${hasOptional
+              ? html`<div slot="prefix" class="checkbox-spacer"></div>`
+              : nothing}
+            <span slot="heading"
+              >${this.hass.localize(
+                "ui.components.service-control.target"
+              )}</span
+            >
+            <span slot="description"
+              >${this.hass.localize(
+                "ui.components.service-control.target_secondary"
+              )}</span
+            ><ha-selector
+              .hass=${this.hass}
+              .selector=${this._targetSelector(conditionDesc.target)}
+              .disabled=${this.disabled}
+              @value-changed=${this._targetChanged}
+              .value=${this.condition?.target}
+            ></ha-selector
+          ></ha-settings-row>`
+        : nothing}
+      ${shouldRenderDataYaml
+        ? html`<ha-yaml-editor
+            .hass=${this.hass}
+            .label=${this.hass.localize(
+              "ui.components.service-control.action_data"
+            )}
+            .name=${"data"}
+            .readOnly=${this.disabled}
+            .defaultValue=${this.condition?.options}
+            @value-changed=${this._dataChanged}
+          ></ha-yaml-editor>`
+        : Object.entries(conditionDesc.fields).map(([fieldName, dataField]) =>
+            this._renderField(
+              fieldName,
+              dataField,
+              hasOptional,
+              domain,
+              conditionName
+            )
+          )}
+    `;
+  }
+
+  private _targetSelector = memoizeOne(
+    (targetSelector: TargetSelector["target"] | null | undefined) =>
+      targetSelector ? { target: { ...targetSelector } } : { target: {} }
+  );
+
+  private _renderField = (
+    fieldName: string,
+    dataField: ConditionDescription["fields"][string],
+    hasOptional: boolean,
+    domain: string | undefined,
+    conditionName: string | undefined
+  ) => {
+    const selector = dataField?.selector ?? { text: null };
+
+    const showOptional = showOptionalToggle(dataField);
+
+    return dataField.selector
+      ? html`<ha-settings-row narrow>
+          ${!showOptional
+            ? hasOptional
+              ? html`<div slot="prefix" class="checkbox-spacer"></div>`
+              : nothing
+            : html`<ha-checkbox
+                .key=${fieldName}
+                .checked=${this._checkedKeys.has(fieldName) ||
+                (this.condition?.options &&
+                  this.condition.options[fieldName] !== undefined)}
+                .disabled=${this.disabled}
+                @change=${this._checkboxChanged}
+                slot="prefix"
+              ></ha-checkbox>`}
+          <span slot="heading"
+            >${this.hass.localize(
+              `component.${domain}.conditions.${conditionName}.fields.${fieldName}.name`
+            ) || conditionName}</span
+          >
+          <span slot="description"
+            >${this.hass.localize(
+              `component.${domain}.conditions.${conditionName}.fields.${fieldName}.description`
+            )}</span
+          >
+          <ha-selector
+            .disabled=${this.disabled ||
+            (showOptional &&
+              !this._checkedKeys.has(fieldName) &&
+              (!this.condition?.options ||
+                this.condition.options[fieldName] === undefined))}
+            .hass=${this.hass}
+            .selector=${selector}
+            .context=${this._generateContext(dataField)}
+            .key=${fieldName}
+            @value-changed=${this._dataChanged}
+            .value=${this.condition?.options
+              ? this.condition.options[fieldName]
+              : undefined}
+            .placeholder=${dataField.default}
+            .localizeValue=${this._localizeValueCallback}
+          ></ha-selector>
+        </ha-settings-row>`
+      : nothing;
+  };
+
+  private _generateContext(
+    field: ConditionDescription["fields"][string]
+  ): Record<string, any> | undefined {
+    if (!field.context) {
+      return undefined;
+    }
+
+    const context = {};
+    for (const [context_key, data_key] of Object.entries(field.context)) {
+      context[context_key] =
+        data_key === "target"
+          ? this.condition.target
+          : this.condition.options?.[data_key];
+    }
+    return context;
+  }
+
+  private _dataChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    if (ev.detail.isValid === false) {
+      // Don't clear an object selector that returns invalid YAML
+      return;
+    }
+    const key = (ev.currentTarget as any).key;
+    const value = ev.detail.value;
+    if (
+      this.condition?.options?.[key] === value ||
+      ((!this.condition?.options || !(key in this.condition.options)) &&
+        (value === "" || value === undefined))
+    ) {
+      return;
+    }
+
+    const options = { ...this.condition?.options, [key]: value };
+
+    if (
+      value === "" ||
+      value === undefined ||
+      (typeof value === "object" && !Object.keys(value).length)
+    ) {
+      delete options[key];
+    }
+
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.condition,
+        options,
+      },
+    });
+  }
+
+  private _targetChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.condition,
+        target: ev.detail.value,
+      },
+    });
+  }
+
+  private _checkboxChanged(ev) {
+    const checked = ev.currentTarget.checked;
+    const key = ev.currentTarget.key;
+    let options;
+
+    if (checked) {
+      this._checkedKeys.add(key);
+      const field =
+        this.description &&
+        Object.entries(this.description).find(([k, _value]) => k === key)?.[1];
+      let defaultValue = field?.default;
+
+      if (
+        defaultValue == null &&
+        field?.selector &&
+        "constant" in field.selector
+      ) {
+        defaultValue = field.selector.constant?.value;
+      }
+
+      if (
+        defaultValue == null &&
+        field?.selector &&
+        "boolean" in field.selector
+      ) {
+        defaultValue = false;
+      }
+
+      if (defaultValue != null) {
+        options = {
+          ...this.condition?.options,
+          [key]: defaultValue,
+        };
+      }
+    } else {
+      this._checkedKeys.delete(key);
+      options = { ...this.condition?.options };
+      delete options[key];
+    }
+    if (options) {
+      fireEvent(this, "value-changed", {
+        value: {
+          ...this.condition,
+          options,
+        },
+      });
+    }
+    this.requestUpdate("_checkedKeys");
+  }
+
+  private _localizeValueCallback = (key: string) => {
+    if (!this.condition?.condition) {
+      return "";
+    }
+    return this.hass.localize(
+      `component.${computeDomain(this.condition.condition)}.selector.${key}`
+    );
+  };
+
+  private async _fetchManifest(integration: string) {
+    this._manifest = undefined;
+    try {
+      this._manifest = await fetchIntegrationManifest(this.hass, integration);
+    } catch (_err: any) {
+      // eslint-disable-next-line no-console
+      console.log(`Unable to fetch integration manifest for ${integration}`);
+      // Ignore if loading manifest fails. Probably bad JSON in manifest
+    }
+  }
+
+  static styles = css`
+    ha-settings-row {
+      padding: 0 var(--ha-space-4);
+    }
+    ha-settings-row[narrow] {
+      padding-bottom: var(--ha-space-2);
+    }
+    ha-settings-row {
+      --settings-row-content-width: 100%;
+      --settings-row-prefix-display: contents;
+      border-top: var(
+        --service-control-items-border-top,
+        1px solid var(--divider-color)
+      );
+    }
+    ha-service-picker,
+    ha-entity-picker,
+    ha-yaml-editor {
+      display: block;
+      margin: 0 var(--ha-space-4);
+    }
+    ha-yaml-editor {
+      padding: var(--ha-space-4) 0;
+    }
+    p {
+      margin: 0 var(--ha-space-4);
+      padding: var(--ha-space-4) 0;
+    }
+    :host([hide-picker]) p {
+      padding-top: 0;
+    }
+    .checkbox-spacer {
+      width: 32px;
+    }
+    ha-checkbox {
+      margin-left: calc(var(--ha-space-4) * -1);
+      margin-inline-start: calc(var(--ha-space-4) * -1);
+      margin-inline-end: initial;
+    }
+    .help-icon {
+      color: var(--secondary-text-color);
+    }
+    .description {
+      justify-content: space-between;
+      display: flex;
+      align-items: center;
+      padding-right: 2px;
+      padding-inline-end: 2px;
+      padding-inline-start: initial;
+    }
+    .description p {
+      direction: ltr;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-condition-platform": HaPlatformCondition;
+  }
+}

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

@@ -16,11 +16,16 @@ import { classMap } from "lit/directives/class-map";
 import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
-import {
-  testCondition,
-  type ConditionSidebarConfig,
+import type {
+  LegacyCondition,
+  ConditionSidebarConfig,
 } from "../../../../data/automation";
-import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
+import { testCondition } from "../../../../data/automation";
+import {
+  CONDITION_BUILDING_BLOCKS,
+  getConditionDomain,
+  getConditionObjectId,
+} from "../../../../data/condition";
 import { validateConfig } from "../../../../data/config";
 import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
@@ -84,14 +89,25 @@ export default class HaAutomationSidebarCondition extends LitElement {
       "ui.panel.config.automation.editor.conditions.condition"
     );
 
+    const domain =
+      "condition" in this.config.config &&
+      getConditionDomain(this.config.config.condition);
+    const conditionName =
+      "condition" in this.config.config &&
+      getConditionObjectId(this.config.config.condition);
+
     const title =
       this.hass.localize(
-        `ui.panel.config.automation.editor.conditions.type.${type}.label`
-      ) || type;
+        `ui.panel.config.automation.editor.conditions.type.${type as LegacyCondition["condition"]}.label`
+      ) ||
+      this.hass.localize(
+        `component.${domain}.conditions.${conditionName}.name`
+      ) ||
+      type;
 
     const description = isBuildingBlock
       ? this.hass.localize(
-          `ui.panel.config.automation.editor.conditions.type.${type}.description.picker`
+          `ui.panel.config.automation.editor.conditions.type.${type as LegacyCondition["condition"]}.description.picker`
         )
       : "";
 
@@ -282,6 +298,7 @@ export default class HaAutomationSidebarCondition extends LitElement {
               class="sidebar-editor"
               .hass=${this.hass}
               .condition=${this.config.config}
+              .description=${this.config.description}
               .yamlMode=${this.yamlMode}
               .uiSupported=${this.config.uiSupported}
               @value-changed=${this._valueChangedSidebar}

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

@@ -5,6 +5,7 @@ import {
   mdiCancel,
   mdiChevronRight,
   mdiCog,
+  mdiDelete,
   mdiDotsVertical,
   mdiMenuDown,
   mdiPencilOff,
@@ -109,10 +110,11 @@ import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
 import { renderConfigEntryError } from "../integrations/ha-config-integration-page";
 import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
-import { isHelperDomain } from "./const";
+import { isHelperDomain, type HelperDomain } from "./const";
 import { showHelperDetailDialog } from "./show-dialog-helper-detail";
 import { slugify } from "../../../common/string/slugify";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { HELPERS_CRUD } from "../../../data/helpers_crud";
 import {
   fetchDiagnosticHandlers,
   getConfigEntryDiagnosticsDownloadUrl,
@@ -451,6 +453,19 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
                     },
                   ]
                 : []),
+              ...(helper.editable && helper.entity
+                ? [
+                    {
+                      divider: true,
+                    },
+                    {
+                      path: mdiDelete,
+                      label: this.hass.localize("ui.common.delete"),
+                      warning: true,
+                      action: () => this._deleteHelper(helper),
+                    },
+                  ]
+                : []),
             ]}
           >
           </ha-icon-overflow-menu>
@@ -1280,6 +1295,62 @@ ${rejected
     }
   }
 
+  private async _deleteHelper(helper: HelperItem) {
+    if (!helper.entity_id) {
+      return;
+    }
+
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.helpers.picker.delete_confirm_title"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.helpers.picker.delete_confirm_text",
+        { name: helper.name }
+      ),
+      confirmText: this.hass.localize("ui.common.delete"),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      destructive: true,
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      // For old-style helpers (input_boolean, etc.), use HELPERS_CRUD
+      if (isHelperDomain(helper.type)) {
+        const entityReg = this._entityReg.find(
+          (e) => e.entity_id === helper.entity_id
+        );
+        if (
+          !entityReg?.unique_id ||
+          !isComponentLoaded(this.hass, helper.type)
+        ) {
+          throw new Error(
+            this.hass.localize("ui.panel.config.helpers.picker.delete_failed")
+          );
+        }
+        await HELPERS_CRUD[helper.type as HelperDomain].delete(
+          this.hass,
+          entityReg.unique_id
+        );
+        return;
+      }
+
+      // For config entry-based helpers, delete the config entry
+      if (helper.configEntry) {
+        await deleteConfigEntry(this.hass, helper.configEntry.entry_id);
+      }
+    } catch (err: any) {
+      showAlertDialog(this, {
+        text:
+          err.message ||
+          this.hass.localize("ui.panel.config.helpers.picker.delete_failed"),
+      });
+    }
+  }
+
   private _createHelper() {
     showHelperDetailDialog(this, {});
   }

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -295,7 +295,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
                 color:
                   route.route_status === "Active"
                     ? primaryColor
-                    : style.getPropertyValue("--disabled-color"),
+                    : style.getPropertyValue("--dark-primary-color"),
                 type: ["Child", "Parent"].includes(neighbor.relationship)
                   ? "solid"
                   : "dotted",
@@ -335,7 +335,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
             symbolSize: 5,
             lineStyle: {
               width: 1,
-              color: style.getPropertyValue("--disabled-color"),
+              color: style.getPropertyValue("--dark-primary-color"),
               type: "dotted",
             },
             ignoreForceLayout: true,

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -62,7 +62,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
       return nothing;
     }
     const defaultPanelUrlPath =
-      this.hass.systemData?.defaultPanel || DEFAULT_PANEL;
+      this.hass.systemData?.default_panel || DEFAULT_PANEL;
     const titleInvalid = !this._data.title || !this._data.title.trim();
 
     return html`
@@ -260,7 +260,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
       return;
     }
 
-    const defaultPanel = this.hass.systemData?.defaultPanel || DEFAULT_PANEL;
+    const defaultPanel = this.hass.systemData?.default_panel || DEFAULT_PANEL;
     // Add warning dialog to saying that this will change the default dashboard for all users
     const confirm = await showConfirmationDialog(this, {
       title: this.hass.localize(
@@ -284,7 +284,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
 
     saveFrontendSystemData(this.hass.connection, "core", {
       ...this.hass.systemData,
-      defaultPanel: urlPath === defaultPanel ? undefined : urlPath,
+      default_panel: urlPath === defaultPanel ? undefined : urlPath,
     });
   }
 
@@ -309,7 +309,20 @@ export class DialogLovelaceDashboardDetail extends LitElement {
       }
       this.closeDialog();
     } catch (err: any) {
-      this._error = { base: err?.message || "Unknown error" };
+      let localizedErrorMessage: string | undefined;
+      if (err?.translation_domain && err?.translation_key) {
+        const localize = await this.hass.loadBackendTranslation(
+          "exceptions",
+          err.translation_domain
+        );
+        localizedErrorMessage = localize(
+          `component.${err.translation_domain}.exceptions.${err.translation_key}.message`,
+          err.translation_placeholders
+        );
+      }
+      this._error = {
+        base: localizedErrorMessage || err?.message || "Unknown error",
+      };
     } finally {
       this._submitting = false;
     }

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -404,7 +404,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
 
-    const defaultPanel = this.hass.systemData?.defaultPanel || DEFAULT_PANEL;
+    const defaultPanel = this.hass.systemData?.default_panel || DEFAULT_PANEL;
 
     return html`
       <hass-tabs-subpage-data-table

src/panels/profile/ha-pick-dashboard-row.ts

@@ -25,7 +25,7 @@ class HaPickDashboardRow extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const value = this.hass.userData?.defaultPanel || USE_SYSTEM_VALUE;
+    const value = this.hass.userData?.default_panel || USE_SYSTEM_VALUE;
     return html`
       <ha-settings-row .narrow=${this.narrow}>
         <span slot="heading">
@@ -84,12 +84,12 @@ class HaPickDashboardRow extends LitElement {
       return;
     }
     const urlPath = value === USE_SYSTEM_VALUE ? undefined : value;
-    if (urlPath === this.hass.userData?.defaultPanel) {
+    if (urlPath === this.hass.userData?.default_panel) {
       return;
     }
     saveFrontendUserData(this.hass.connection, "core", {
       ...this.hass.userData,
-      defaultPanel: urlPath,
+      default_panel: urlPath,
     });
   }
 }

src/translations/en.json

@@ -3265,7 +3265,10 @@
             "create_helper": "Create helper",
             "no_helpers": "Looks like you don't have any helpers yet!",
             "search": "Search {number} {number, plural,\n  one {helper}\n  other {helpers}\n}",
-            "error_information": "Error information"
+            "error_information": "Error information",
+            "delete_confirm_title": "Delete helper?",
+            "delete_confirm_text": "Are you sure you want to delete {name}?",
+            "delete_failed": "Failed to delete helper"
           },
           "dialog": {
             "create": "Create",