Fix localize key types related to form schemas (Group 1) (#13258)

src/components/ha-form/ha-form.ts

@@ -35,7 +35,7 @@ export class HaForm extends LitElement implements HaFormElement {
 
   @property({ attribute: false }) public data!: HaFormDataContainer;
 
-  @property({ attribute: false }) public schema!: HaFormSchema[];
+  @property({ attribute: false }) public schema!: readonly HaFormSchema[];
 
   @property() public error?: Record<string, string>;
 
@@ -44,7 +44,7 @@ export class HaForm extends LitElement implements HaFormElement {
   @property() public computeError?: (schema: HaFormSchema, error) => string;
 
   @property() public computeLabel?: (
-    schema: HaFormSchema,
+    schema: any,
     data?: HaFormDataContainer
   ) => string;
 
@@ -168,7 +168,7 @@ export class HaForm extends LitElement implements HaFormElement {
     return this.computeHelper ? this.computeHelper(schema) : "";
   }
 
-  private _computeError(error, schema: HaFormSchema | HaFormSchema[]) {
+  private _computeError(error, schema: HaFormSchema | readonly HaFormSchema[]) {
     return this.computeError ? this.computeError(error, schema) : error;
   }
 

src/components/ha-form/types.ts

@@ -31,7 +31,7 @@ export interface HaFormGridSchema extends HaFormBaseSchema {
   type: "grid";
   name: "";
   column_min_width?: string;
-  schema: HaFormSchema[];
+  schema: readonly HaFormSchema[];
 }
 
 export interface HaFormSelector extends HaFormBaseSchema {
@@ -53,12 +53,15 @@ export interface HaFormIntegerSchema extends HaFormBaseSchema {
 
 export interface HaFormSelectSchema extends HaFormBaseSchema {
   type: "select";
-  options: Array<[string, string]>;
+  options: ReadonlyArray<readonly [string, string]>;
 }
 
 export interface HaFormMultiSelectSchema extends HaFormBaseSchema {
   type: "multi_select";
-  options: Record<string, string> | string[] | Array<[string, string]>;
+  options:
+    | Record<string, string>
+    | readonly string[]
+    | ReadonlyArray<readonly [string, string]>;
 }
 
 export interface HaFormFloatSchema extends HaFormBaseSchema {
@@ -78,6 +81,12 @@ export interface HaFormTimeSchema extends HaFormBaseSchema {
   type: "positive_time_period_dict";
 }
 
+// Type utility to unionize a schema array by flattening any grid schemas
+export type SchemaUnion<
+  SchemaArray extends readonly HaFormSchema[],
+  Schema = SchemaArray[number]
+> = Schema extends HaFormGridSchema ? SchemaUnion<Schema["schema"]> : Schema;
+
 export interface HaFormDataContainer {
   [key: string]: HaFormData;
 }
@@ -100,7 +109,7 @@ export type HaFormMultiSelectData = string[];
 export type HaFormTimeData = HaDurationData;
 
 export interface HaFormElement extends LitElement {
-  schema: HaFormSchema | HaFormSchema[];
+  schema: HaFormSchema | readonly HaFormSchema[];
   data?: HaFormDataContainer | HaFormData;
   label?: string;
 }

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

@@ -15,7 +15,7 @@ import "../ha-automation-action";
 import "../../../../../components/ha-textfield";
 import type { ActionElement } from "../ha-automation-action-row";
 
-const OPTIONS = ["count", "while", "until"];
+const OPTIONS = ["count", "while", "until"] as const;
 
 const getType = (action) => OPTIONS.find((option) => option in action);
 

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

@@ -1,12 +1,12 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import type { WaitAction } from "../../../../../data/script";
 import type { HomeAssistant } from "../../../../../types";
 import type { ActionElement } from "../ha-automation-action-row";
 import "../../../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 
-const SCHEMA: HaFormSchema[] = [
+const SCHEMA = [
   {
     name: "wait_template",
     selector: {
@@ -24,7 +24,7 @@ const SCHEMA: HaFormSchema[] = [
     name: "continue_on_timeout",
     selector: { boolean: {} },
   },
-];
+] as const;
 
 @customElement("ha-automation-action-wait_template")
 export class HaWaitAction extends LitElement implements ActionElement {
@@ -47,7 +47,9 @@ export class HaWaitAction extends LitElement implements ActionElement {
     `;
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
+  private _computeLabelCallback = (
+    schema: SchemaUnion<typeof SCHEMA>
+  ): string =>
     this.hass.localize(
       `ui.panel.config.automation.editor.actions.type.wait_template.${
         schema.name === "continue_on_timeout" ? "continue_timeout" : schema.name

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

@@ -36,15 +36,15 @@ const OPTIONS = [
   "time",
   "trigger",
   "zone",
-];
+] as const;
 
 @customElement("ha-automation-condition-editor")
 export default class HaAutomationConditionEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() condition!: Condition;
+  @property({ attribute: false }) condition!: Condition;
 
-  @property() public yamlMode = false;
+  @property({ type: Boolean }) public yamlMode = false;
 
   private _processedCondition = memoizeOne((condition) =>
     expandConditionWithShorthand(condition)

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

@@ -3,9 +3,9 @@ import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import { NumericStateCondition } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 
 @customElement("ha-automation-condition-numeric_state")
 export default class HaNumericStateCondition extends LitElement {
@@ -19,7 +19,9 @@ export default class HaNumericStateCondition extends LitElement {
     };
   }
 
-  private _schema = memoizeOne((entityId): HaFormSchema[] => [
+  private _schema = memoizeOne(
+    (entityId) =>
+      [
         { name: "entity_id", required: true, selector: { entity: {} } },
         {
           name: "attribute",
@@ -31,7 +33,8 @@ export default class HaNumericStateCondition extends LitElement {
           name: "value_template",
           selector: { text: { multiline: true } },
         },
-  ]);
+      ] as const
+  );
 
   public render() {
     const schema = this._schema(this.condition.entity_id);
@@ -53,7 +56,9 @@ export default class HaNumericStateCondition extends LitElement {
     fireEvent(this, "value-changed", { value: newTrigger });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ): string => {
     switch (schema.name) {
       case "entity_id":
         return this.hass.localize("ui.components.entity.entity-picker.entity");

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

@@ -4,12 +4,12 @@ import memoizeOne from "memoize-one";
 import { assert, literal, object, optional, string, union } from "superstruct";
 import { createDurationData } from "../../../../../common/datetime/create_duration_data";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import type { StateCondition } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import { forDictStruct } from "../../structs";
 import type { ConditionElement } from "../ha-automation-condition-row";
 import "../../../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 
 const stateConditionStruct = object({
   condition: literal("state"),
@@ -29,7 +29,9 @@ export class HaStateCondition extends LitElement implements ConditionElement {
     return { entity_id: "", state: "" };
   }
 
-  private _schema = memoizeOne((entityId) => [
+  private _schema = memoizeOne(
+    (entityId) =>
+      [
         { name: "entity_id", required: true, selector: { entity: {} } },
         {
           name: "attribute",
@@ -37,7 +39,8 @@ export class HaStateCondition extends LitElement implements ConditionElement {
         },
         { name: "state", selector: { text: {} } },
         { name: "for", selector: { duration: {} } },
-  ]);
+      ] as const
+  );
 
   public shouldUpdate(changedProperties: PropertyValues) {
     if (changedProperties.has("condition")) {
@@ -80,7 +83,9 @@ export class HaStateCondition extends LitElement implements ConditionElement {
     fireEvent(this, "value-changed", { value: newTrigger });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ): string => {
     switch (schema.name) {
       case "entity_id":
         return this.hass.localize("ui.components.entity.entity-picker.entity");

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

@@ -6,8 +6,8 @@ import type { SunCondition } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import type { ConditionElement } from "../ha-automation-condition-row";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import "../../../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 
 @customElement("ha-automation-condition-sun")
 export class HaSunCondition extends LitElement implements ConditionElement {
@@ -19,7 +19,9 @@ export class HaSunCondition extends LitElement implements ConditionElement {
     return {};
   }
 
-  private _schema = memoizeOne((localize: LocalizeFunc) => [
+  private _schema = memoizeOne(
+    (localize: LocalizeFunc) =>
+      [
         {
           name: "before",
           type: "select",
@@ -60,7 +62,8 @@ export class HaSunCondition extends LitElement implements ConditionElement {
           ],
         },
         { name: "after_offset", selector: { text: {} } },
-  ]);
+      ] as const
+  );
 
   protected render() {
     const schema = this._schema(this.hass.localize);
@@ -81,7 +84,9 @@ export class HaSunCondition extends LitElement implements ConditionElement {
     fireEvent(this, "value-changed", { value: newTrigger });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ): string =>
     this.hass.localize(
       `ui.panel.config.automation.editor.conditions.type.sun.${schema.name}`
     );

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

@@ -6,18 +6,10 @@ import type { TimeCondition } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import type { ConditionElement } from "../ha-automation-condition-row";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import "../../../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 
-const DAYS = {
-  mon: 1,
-  tue: 2,
-  wed: 3,
-  thu: 4,
-  fri: 5,
-  sat: 6,
-  sun: 7,
-};
+const DAYS = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"] as const;
 
 @customElement("ha-automation-condition-time")
 export class HaTimeCondition extends LitElement implements ConditionElement {
@@ -38,16 +30,8 @@ export class HaTimeCondition extends LitElement implements ConditionElement {
       localize: LocalizeFunc,
       inputModeAfter?: boolean,
       inputModeBefore?: boolean
-    ): HaFormSchema[] => {
-      const modeAfterSchema = inputModeAfter
-        ? { name: "after", selector: { entity: { domain: "input_datetime" } } }
-        : { name: "after", selector: { time: {} } };
-
-      const modeBeforeSchema = inputModeBefore
-        ? { name: "before", selector: { entity: { domain: "input_datetime" } } }
-        : { name: "before", selector: { time: {} } };
-
-      return [
+    ) =>
+      [
         {
           name: "mode_after",
           type: "select",
@@ -67,7 +51,12 @@ export class HaTimeCondition extends LitElement implements ConditionElement {
             ],
           ],
         },
-        modeAfterSchema,
+        {
+          name: "after",
+          selector: inputModeAfter
+            ? { entity: { domain: "input_datetime" } }
+            : { time: {} },
+        },
         {
           name: "mode_before",
           type: "select",
@@ -87,19 +76,26 @@ export class HaTimeCondition extends LitElement implements ConditionElement {
             ],
           ],
         },
-        modeBeforeSchema,
+        {
+          name: "before",
+          selector: inputModeBefore
+            ? { entity: { domain: "input_datetime" } }
+            : { time: {} },
+        },
         {
           type: "multi_select",
           name: "weekday",
-          options: Object.keys(DAYS).map((day) => [
+          options: DAYS.map(
+            (day) =>
+              [
                 day,
                 localize(
                   `ui.panel.config.automation.editor.conditions.type.time.weekdays.${day}`
                 ),
-          ]),
+              ] as const
+          ),
         },
-      ];
-    }
+      ] as const
   );
 
   protected render() {
@@ -110,7 +106,7 @@ export class HaTimeCondition extends LitElement implements ConditionElement {
       this._inputModeAfter ??
       this.condition.after?.startsWith("input_datetime.");
 
-    const schema: HaFormSchema[] = this._schema(
+    const schema = this._schema(
       this.hass.localize,
       inputModeAfter,
       inputModeBefore
@@ -152,7 +148,9 @@ export class HaTimeCondition extends LitElement implements ConditionElement {
     fireEvent(this, "value-changed", { value: newValue });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ): string =>
     this.hass.localize(
       `ui.panel.config.automation.editor.conditions.type.time.${schema.name}`
     );

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

@@ -18,7 +18,7 @@ const includeDomains = ["zone"];
 export class HaZoneCondition extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public condition!: ZoneCondition;
+  @property({ attribute: false }) public condition!: ZoneCondition;
 
   public static get defaultConfig() {
     return {

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

@@ -60,7 +60,7 @@ const OPTIONS = [
   "time_pattern",
   "webhook",
   "zone",
-];
+] as const;
 
 export interface TriggerElement extends LitElement {
   trigger: Trigger;
@@ -92,7 +92,7 @@ export const handleChangeEvent = (element: TriggerElement, ev: CustomEvent) => {
 export default class HaAutomationTriggerRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public trigger!: Trigger;
+  @property({ attribute: false }) public trigger!: Trigger;
 
   @state() private _warnings?: string[];
 

src/panels/config/automation/trigger/types/ha-automation-trigger-calendar.ts

@@ -6,9 +6,10 @@ import type { CalendarTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import type { TriggerElement } from "../ha-automation-trigger-row";
 import type { HaDurationData } from "../../../../../components/ha-duration-input";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import "../../../../../components/ha-form/ha-form";
 import { createDurationData } from "../../../../../common/datetime/create_duration_data";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 
 @customElement("ha-automation-trigger-calendar")
 export class HaCalendarTrigger extends LitElement implements TriggerElement {
@@ -16,7 +17,9 @@ export class HaCalendarTrigger extends LitElement implements TriggerElement {
 
   @property({ attribute: false }) public trigger!: CalendarTrigger;
 
-  private _schema = memoizeOne((localize: LocalizeFunc) => [
+  private _schema = memoizeOne(
+    (localize: LocalizeFunc) =>
+      [
         {
           name: "entity_id",
           required: true,
@@ -61,7 +64,8 @@ export class HaCalendarTrigger extends LitElement implements TriggerElement {
             ],
           ],
         },
-  ]);
+      ] as const
+  );
 
   public static get defaultConfig() {
     return {
@@ -114,7 +118,9 @@ export class HaCalendarTrigger extends LitElement implements TriggerElement {
     fireEvent(this, "value-changed", { value: newTrigger });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ): string =>
     this.hass.localize(
       `ui.panel.config.automation.editor.triggers.type.calendar.${schema.name}`
     );

src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts

@@ -3,10 +3,10 @@ import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import { HaFormSchema } from "../../../../../components/ha-form/types";
 import type { GeoLocationTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 
 @customElement("ha-automation-trigger-geo_location")
 export class HaGeolocationTrigger extends LitElement {
@@ -14,7 +14,9 @@ export class HaGeolocationTrigger extends LitElement {
 
   @property({ attribute: false }) public trigger!: GeoLocationTrigger;
 
-  private _schema = memoizeOne((localize: LocalizeFunc) => [
+  private _schema = memoizeOne(
+    (localize: LocalizeFunc) =>
+      [
         { name: "source", selector: { text: {} } },
         { name: "zone", selector: { entity: { domain: "zone" } } },
         {
@@ -36,7 +38,8 @@ export class HaGeolocationTrigger extends LitElement {
             ],
           ],
         },
-  ]);
+      ] as const
+  );
 
   public static get defaultConfig() {
     return {
@@ -64,7 +67,9 @@ export class HaGeolocationTrigger extends LitElement {
     fireEvent(this, "value-changed", { value: newTrigger });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ): string =>
     this.hass.localize(
       `ui.panel.config.automation.editor.triggers.type.geo_location.${schema.name}`
     );

src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts

@@ -5,8 +5,8 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import type { HassTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 
 @customElement("ha-automation-trigger-homeassistant")
 export class HaHassTrigger extends LitElement {
@@ -14,7 +14,9 @@ export class HaHassTrigger extends LitElement {
 
   @property({ attribute: false }) public trigger!: HassTrigger;
 
-  private _schema = memoizeOne((localize: LocalizeFunc) => [
+  private _schema = memoizeOne(
+    (localize: LocalizeFunc) =>
+      [
         {
           name: "event",
           type: "select",
@@ -34,7 +36,8 @@ export class HaHassTrigger extends LitElement {
             ],
           ],
         },
-  ]);
+      ] as const
+  );
 
   public static get defaultConfig() {
     return {
@@ -60,9 +63,11 @@ export class HaHassTrigger extends LitElement {
     fireEvent(this, "value-changed", { value: newTrigger });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ): string =>
     this.hass.localize(
-      `ui.panel.config.automation.editor.triggers.type.geo_location.${schema.name}`
+      `ui.panel.config.automation.editor.triggers.type.homeassistant.${schema.name}`
     );
 
   static styles = css`

src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts

@@ -1,21 +1,22 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import "../../../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 import { MqttTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
 import type { TriggerElement } from "../ha-automation-trigger-row";
 
-const SCHEMA: HaFormSchema[] = [
+const SCHEMA = [
   { name: "topic", required: true, selector: { text: {} } },
   { name: "payload", selector: { text: {} } },
-];
+] as const;
 
 @customElement("ha-automation-trigger-mqtt")
 export class HaMQTTTrigger extends LitElement implements TriggerElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public trigger!: MqttTrigger;
+  @property({ attribute: false }) public trigger!: MqttTrigger;
 
   public static get defaultConfig() {
     return { topic: "" };
@@ -39,7 +40,9 @@ export class HaMQTTTrigger extends LitElement implements TriggerElement {
     fireEvent(this, "value-changed", { value: newTrigger });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
+  private _computeLabelCallback = (
+    schema: SchemaUnion<typeof SCHEMA>
+  ): string =>
     this.hass.localize(
       `ui.panel.config.automation.editor.triggers.type.mqtt.${schema.name}`
     );

src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts

@@ -2,20 +2,22 @@ import "../../../../../components/ha-form/ha-form";
 import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import { createDurationData } from "../../../../../common/datetime/create_duration_data";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { hasTemplate } from "../../../../../common/string/has-template";
 import type { NumericStateTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 
 @customElement("ha-automation-trigger-numeric_state")
 export class HaNumericStateTrigger extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public trigger!: NumericStateTrigger;
+  @property({ attribute: false }) public trigger!: NumericStateTrigger;
 
-  private _schema = memoizeOne((entityId): HaFormSchema[] => [
+  private _schema = memoizeOne(
+    (entityId) =>
+      [
         { name: "entity_id", required: true, selector: { entity: {} } },
         {
           name: "attribute",
@@ -28,7 +30,8 @@ export class HaNumericStateTrigger extends LitElement {
           selector: { text: { multiline: true } },
         },
         { name: "for", selector: { duration: {} } },
-  ]);
+      ] as const
+  );
 
   public willUpdate(changedProperties: PropertyValues) {
     if (!changedProperties.has("trigger")) {
@@ -73,7 +76,9 @@ export class HaNumericStateTrigger extends LitElement {
     fireEvent(this, "value-changed", { value: newTrigger });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ): string => {
     switch (schema.name) {
       case "entity_id":
         return this.hass.localize("ui.components.entity.entity-picker.entity");

src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts

@@ -20,7 +20,7 @@ import { baseTriggerStruct, forDictStruct } from "../../structs";
 import { TriggerElement } from "../ha-automation-trigger-row";
 import "../../../../../components/ha-form/ha-form";
 import { createDurationData } from "../../../../../common/datetime/create_duration_data";
-import { HaFormSchema } from "../../../../../components/ha-form/types";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 
 const stateTriggerStruct = assign(
   baseTriggerStruct,
@@ -38,13 +38,15 @@ const stateTriggerStruct = assign(
 export class HaStateTrigger extends LitElement implements TriggerElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public trigger!: StateTrigger;
+  @property({ attribute: false }) public trigger!: StateTrigger;
 
   public static get defaultConfig() {
     return { entity_id: [] };
   }
 
-  private _schema = memoizeOne((entityId) => [
+  private _schema = memoizeOne(
+    (entityId) =>
+      [
         {
           name: "entity_id",
           required: true,
@@ -57,7 +59,8 @@ export class HaStateTrigger extends LitElement implements TriggerElement {
         { name: "from", selector: { text: {} } },
         { name: "to", selector: { text: {} } },
         { name: "for", selector: { duration: {} } },
-  ]);
+      ] as const
+  );
 
   public shouldUpdate(changedProperties: PropertyValues) {
     if (!changedProperties.has("trigger")) {
@@ -122,7 +125,9 @@ export class HaStateTrigger extends LitElement implements TriggerElement {
     fireEvent(this, "value-changed", { value: newTrigger });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ): string =>
     this.hass.localize(
       schema.name === "entity_id"
         ? "ui.components.entity.entity-picker.entity"

src/panels/config/automation/trigger/types/ha-automation-trigger-sun.ts

@@ -5,8 +5,9 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import type { SunTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import type { TriggerElement } from "../ha-automation-trigger-row";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import "../../../../../components/ha-form/ha-form";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 
 @customElement("ha-automation-trigger-sun")
 export class HaSunTrigger extends LitElement implements TriggerElement {
@@ -14,7 +15,9 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
 
   @property({ attribute: false }) public trigger!: SunTrigger;
 
-  private _schema = memoizeOne((localize: LocalizeFunc) => [
+  private _schema = memoizeOne(
+    (localize: LocalizeFunc) =>
+      [
         {
           name: "event",
           type: "select",
@@ -35,7 +38,8 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
           ],
         },
         { name: "offset", selector: { text: {} } },
-  ]);
+      ] as const
+  );
 
   public static get defaultConfig() {
     return {
@@ -63,7 +67,9 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
     fireEvent(this, "value-changed", { value: newTrigger });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ): string =>
     this.hass.localize(
       `ui.panel.config.automation.editor.triggers.type.sun.${schema.name}`
     );

src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts

@@ -5,9 +5,9 @@ import type { TimeTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import type { TriggerElement } from "../ha-automation-trigger-row";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 
 @customElement("ha-automation-trigger-time")
 export class HaTimeTrigger extends LitElement implements TriggerElement {
@@ -22,7 +22,7 @@ export class HaTimeTrigger extends LitElement implements TriggerElement {
   }
 
   private _schema = memoizeOne(
-    (localize: LocalizeFunc, inputMode?: boolean): HaFormSchema[] => {
+    (localize: LocalizeFunc, inputMode?: boolean) => {
       const atSelector = inputMode
         ? { entity: { domain: "input_datetime" } }
         : { time: {} };
@@ -48,7 +48,7 @@ export class HaTimeTrigger extends LitElement implements TriggerElement {
           ],
         },
         { name: "at", selector: atSelector },
-      ];
+      ] as const;
     }
   );
 
@@ -77,7 +77,7 @@ export class HaTimeTrigger extends LitElement implements TriggerElement {
       this._inputMode ??
       (at?.startsWith("input_datetime.") || at?.startsWith("sensor."));
 
-    const schema: HaFormSchema[] = this._schema(this.hass.localize, inputMode);
+    const schema = this._schema(this.hass.localize, inputMode);
 
     const data = {
       mode: inputMode ? "input" : "value",
@@ -111,7 +111,9 @@ export class HaTimeTrigger extends LitElement implements TriggerElement {
     fireEvent(this, "value-changed", { value: newValue });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ): string =>
     this.hass.localize(
       `ui.panel.config.automation.editor.triggers.type.time.${schema.name}`
     );

src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern.ts

@@ -1,22 +1,23 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import "../../../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 import type { TimePatternTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import type { TriggerElement } from "../ha-automation-trigger-row";
 
-const SCHEMA: HaFormSchema[] = [
+const SCHEMA = [
   { name: "hours", selector: { text: {} } },
   { name: "minutes", selector: { text: {} } },
   { name: "seconds", selector: { text: {} } },
-];
+] as const;
 
 @customElement("ha-automation-trigger-time_pattern")
 export class HaTimePatternTrigger extends LitElement implements TriggerElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public trigger!: TimePatternTrigger;
+  @property({ attribute: false }) public trigger!: TimePatternTrigger;
 
   public static get defaultConfig() {
     return {};
@@ -40,7 +41,9 @@ export class HaTimePatternTrigger extends LitElement implements TriggerElement {
     fireEvent(this, "value-changed", { value: newTrigger });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
+  private _computeLabelCallback = (
+    schema: SchemaUnion<typeof SCHEMA>
+  ): string =>
     this.hass.localize(
       `ui.panel.config.automation.editor.triggers.type.time_pattern.${schema.name}`
     );

src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts

@@ -8,7 +8,7 @@ import type { HomeAssistant } from "../../../../types";
 import type { AlarmPanelCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import type { HaFormSchema } from "../../../../components/ha-form/types";
+import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 
 const cardConfigStruct = assign(
@@ -27,7 +27,7 @@ const states = [
   "arm_night",
   "arm_vacation",
   "arm_custom_bypass",
-];
+] as const;
 
 @customElement("hui-alarm-panel-card-editor")
 export class HuiAlarmPanelCardEditor
@@ -43,7 +43,9 @@ export class HuiAlarmPanelCardEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne((localize: LocalizeFunc): HaFormSchema[] => [
+  private _schema = memoizeOne(
+    (localize: LocalizeFunc) =>
+      [
         {
           name: "entity",
           required: true,
@@ -57,7 +59,6 @@ export class HuiAlarmPanelCardEditor
             { name: "theme", selector: { theme: {} } },
           ],
         },
-
         {
           type: "multi_select",
           name: "states",
@@ -66,7 +67,8 @@ export class HuiAlarmPanelCardEditor
             localize(`ui.card.alarm_control_panel.${s}`),
           ]) as [string, string][],
         },
-  ]);
+      ] as const
+  );
 
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
@@ -88,30 +90,30 @@ export class HuiAlarmPanelCardEditor
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema) => {
-    if (schema.name === "entity") {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
+    switch (schema.name) {
+      case "entity":
         return this.hass!.localize(
           "ui.panel.lovelace.editor.card.generic.entity"
         );
-    }
-
-    if (schema.name === "name") {
-      return this.hass!.localize(`ui.panel.lovelace.editor.card.generic.name`);
-    }
-
-    if (schema.name === "theme") {
+      case "name":
+        return this.hass!.localize(
+          "ui.panel.lovelace.editor.card.generic.name"
+        );
+      case "theme":
         return `${this.hass!.localize(
           "ui.panel.lovelace.editor.card.generic.theme"
         )} (${this.hass!.localize(
           "ui.panel.lovelace.editor.card.config.optional"
         )})`;
-    }
-
+      default:
+        // "states"
         return this.hass!.localize(
-      `ui.panel.lovelace.editor.card.alarm-panel.${
-        schema.name === "states" ? "available_states" : schema.name
-      }`
+          "ui.panel.lovelace.editor.card.alarm-panel.available_states"
         );
+    }
   };
 }
 

src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts

@@ -3,7 +3,7 @@ import { customElement, property, state } from "lit/decorators";
 import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-form/ha-form";
-import type { HaFormSchema } from "../../../../components/ha-form/types";
+import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import type { AreaCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
@@ -19,7 +19,7 @@ const cardConfigStruct = assign(
   })
 );
 
-const SCHEMA: HaFormSchema[] = [
+const SCHEMA = [
   { name: "area", selector: { area: {} } },
   { name: "show_camera", required: false, selector: { boolean: {} } },
   {
@@ -30,7 +30,7 @@ const SCHEMA: HaFormSchema[] = [
       { name: "theme", required: false, selector: { theme: {} } },
     ],
   },
-];
+] as const;
 
 @customElement("hui-area-card-editor")
 export class HuiAreaCardEditor
@@ -67,7 +67,7 @@ export class HuiAreaCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema) => {
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
     switch (schema.name) {
       case "theme":
         return `${this.hass!.localize(

src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts

@@ -7,7 +7,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
 import { domainIcon } from "../../../../common/entity/domain_icon";
 import "../../../../components/ha-form/ha-form";
-import type { HaFormSchema } from "../../../../components/ha-form/types";
+import type { SchemaUnion } from "../../../../components/ha-form/types";
 import { ActionConfig } from "../../../../data/lovelace";
 import type { HomeAssistant } from "../../../../types";
 import type { ButtonCardConfig } from "../../cards/types";
@@ -58,11 +58,8 @@ export class HuiButtonCardEditor
   }
 
   private _schema = memoizeOne(
-    (
-      entity?: string,
-      icon?: string,
-      entityState?: HassEntity
-    ): HaFormSchema[] => [
+    (entity?: string, icon?: string, entityState?: HassEntity) =>
+      [
         { name: "entity", selector: { entity: {} } },
         {
           name: "",
@@ -104,7 +101,7 @@ export class HuiButtonCardEditor
             { name: "theme", selector: { theme: {} } },
           ],
         },
-    ]
+      ] as const
   );
 
   get _tap_action(): ActionConfig | undefined {
@@ -193,7 +190,9 @@ export class HuiButtonCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema) => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
     if (schema.name === "entity") {
       return `${this.hass!.localize(
         "ui.panel.lovelace.editor.card.generic.entity"

src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts

@@ -15,7 +15,7 @@ import {
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { LocalizeFunc } from "../../../../common/translations/localize";
-import type { HaFormSchema } from "../../../../components/ha-form/types";
+import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import type { CalendarCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
@@ -31,7 +31,7 @@ const cardConfigStruct = assign(
   })
 );
 
-const views = ["dayGridMonth", "dayGridDay", "listWeek"];
+const views = ["dayGridMonth", "dayGridDay", "listWeek"] as const;
 
 @customElement("hui-calendar-card-editor")
 export class HuiCalendarCardEditor
@@ -47,7 +47,9 @@ export class HuiCalendarCardEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne((localize: LocalizeFunc) => [
+  private _schema = memoizeOne(
+    (localize: LocalizeFunc) =>
+      [
         {
           name: "",
           type: "grid",
@@ -58,19 +60,20 @@ export class HuiCalendarCardEditor
               required: false,
               selector: {
                 select: {
-              options: views.map((view) => [
-                view,
-                localize(
+                  options: views.map((view) => ({
+                    value: view,
+                    label: localize(
                       `ui.panel.lovelace.editor.card.calendar.views.${view}`
                     ),
-              ]),
+                  })),
                 },
               },
             },
           ],
         },
         { name: "theme", required: false, selector: { theme: {} } },
-  ]);
+      ] as const
+  );
 
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
@@ -116,7 +119,9 @@ export class HuiCalendarCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema) => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
     if (schema.name === "title") {
       return this.hass!.localize("ui.panel.lovelace.editor.card.generic.title");
     }

src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts

@@ -7,7 +7,7 @@ import type { HassEntity } from "home-assistant-js-websocket/dist/types";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
 import { domainIcon } from "../../../../common/entity/domain_icon";
-import type { HaFormSchema } from "../../../../components/ha-form/types";
+import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import type { EntityCardConfig } from "../../cards/types";
 import { headerFooterConfigStructs } from "../../header-footer/structs";
@@ -43,7 +43,8 @@ export class HuiEntityCardEditor
   }
 
   private _schema = memoizeOne(
-    (entity: string, icon: string, entityState: HassEntity): HaFormSchema[] => [
+    (entity: string, icon: string, entityState: HassEntity) =>
+      [
         { name: "entity", required: true, selector: { entity: {} } },
         {
           type: "grid",
@@ -72,7 +73,7 @@ export class HuiEntityCardEditor
             { name: "state_color", selector: { boolean: {} } },
           ],
         },
-    ]
+      ] as const
   );
 
   protected render(): TemplateResult {
@@ -105,7 +106,9 @@ export class HuiEntityCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema) => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
     if (schema.name === "entity") {
       return this.hass!.localize(
         "ui.panel.lovelace.editor.card.generic.entity"