Rename tile features to card features (#18732)

src/data/lovelace_custom_cards.ts

@@ -8,7 +8,7 @@ export interface CustomCardEntry {
   documentationURL?: string;
 }
 
-export interface CustomTileFeatureEntry {
+export interface CustomCardFeatureEntry {
   type: string;
   name?: string;
   supported?: (stateObj: HassEntity) => boolean;
@@ -17,7 +17,11 @@ export interface CustomTileFeatureEntry {
 
 export interface CustomCardsWindow {
   customCards?: CustomCardEntry[];
-  customTileFeatures?: CustomTileFeatureEntry[];
+  customCardFeatures?: CustomCardFeatureEntry[];
+  /**
+   * @deprecated Use customCardFeatures
+   */
+  customTileFeatures?: CustomCardFeatureEntry[];
 }
 
 export const CUSTOM_TYPE_PREFIX = "custom:";
@@ -27,12 +31,18 @@ const customCardsWindow = window as CustomCardsWindow;
 if (!("customCards" in customCardsWindow)) {
   customCardsWindow.customCards = [];
 }
+if (!("customCardFeatures" in customCardsWindow)) {
+  customCardsWindow.customCardFeatures = [];
+}
 if (!("customTileFeatures" in customCardsWindow)) {
   customCardsWindow.customTileFeatures = [];
 }
 
 export const customCards = customCardsWindow.customCards!;
-export const customTileFeatures = customCardsWindow.customTileFeatures!;
+export const getCustomCardFeatures = () => [
+  ...customCardsWindow.customCardFeatures!,
+  ...customCardsWindow.customTileFeatures!,
+];
 
 export const getCustomCardEntry = (type: string) =>
   customCards.find((card) => card.type === type);

src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts

@@ -19,29 +19,29 @@ import {
 } from "../../../data/alarm_control_panel";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature, LovelaceTileFeatureEditor } from "../types";
+import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { AlarmModesTileFeatureConfig } from "./types";
+import { AlarmModesCardFeatureConfig } from "./types";
 import { showEnterCodeDialogDialog } from "../../../dialogs/enter-code/show-enter-code-dialog";
 
-export const supportsAlarmModesTileFeature = (stateObj: HassEntity) => {
+export const supportsAlarmModesCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return domain === "alarm_control_panel";
 };
 
-@customElement("hui-alarm-modes-tile-feature")
+@customElement("hui-alarm-modes-card-feature")
-class HuiAlarmModeTileFeature
+class HuiAlarmModeCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: AlarmControlPanelEntity;
 
-  @state() private _config?: AlarmModesTileFeatureConfig;
+  @state() private _config?: AlarmModesCardFeatureConfig;
 
   @state() _currentMode?: AlarmMode;
 
-  static getStubConfig(_, stateObj?: HassEntity): AlarmModesTileFeatureConfig {
+  static getStubConfig(_, stateObj?: HassEntity): AlarmModesCardFeatureConfig {
     return {
       type: "alarm-modes",
       modes: stateObj
@@ -53,14 +53,14 @@ class HuiAlarmModeTileFeature
     };
   }
 
-  public static async getConfigElement(): Promise<LovelaceTileFeatureEditor> {
+  public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
     await import(
-      "../editor/config-elements/hui-alarm-modes-tile-feature-editor"
+      "../editor/config-elements/hui-alarm-modes-card-feature-editor"
     );
-    return document.createElement("hui-alarm-modes-tile-feature-editor");
+    return document.createElement("hui-alarm-modes-card-feature-editor");
   }
 
-  public setConfig(config: AlarmModesTileFeatureConfig): void {
+  public setConfig(config: AlarmModesCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -161,7 +161,7 @@ class HuiAlarmModeTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsAlarmModesTileFeature(this.stateObj)
+      !supportsAlarmModesCardFeature(this.stateObj)
     ) {
       return null;
     }
@@ -216,7 +216,7 @@ class HuiAlarmModeTileFeature
   static get styles() {
     return css`
       ha-control-select {
-        --control-select-color: var(--tile-color);
+        --control-select-color: var(--feature-color);
         --control-select-padding: 0;
         --control-select-thickness: 40px;
         --control-select-border-radius: 10px;
@@ -236,6 +236,6 @@ class HuiAlarmModeTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-alarm-modes-tile-feature": HuiAlarmModeTileFeature;
+    "hui-alarm-modes-card-feature": HuiAlarmModeCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-card-features.ts

@@ -10,28 +10,28 @@ import {
 import { customElement, property } from "lit/decorators";
 import { HomeAssistant } from "../../../types";
 import type { HuiErrorCard } from "../cards/hui-error-card";
-import { createTileFeatureElement } from "../create-element/create-tile-feature-element";
+import { createCardFeatureElement } from "../create-element/create-card-feature-element";
-import type { LovelaceTileFeature } from "../types";
+import type { LovelaceCardFeature } from "../types";
-import type { LovelaceTileFeatureConfig } from "./types";
+import type { LovelaceCardFeatureConfig } from "./types";
 
-@customElement("hui-tile-features")
+@customElement("hui-card-features")
-export class HuiTileFeatures extends LitElement {
+export class HuiCardFeatures extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public stateObj!: HassEntity;
 
-  @property({ attribute: false }) public features?: LovelaceTileFeatureConfig[];
+  @property({ attribute: false }) public features?: LovelaceCardFeatureConfig[];
 
   @property({ attribute: false }) public color?: string;
 
   private _featuresElements = new WeakMap<
-    LovelaceTileFeatureConfig,
+    LovelaceCardFeatureConfig,
-    LovelaceTileFeature | HuiErrorCard
+    LovelaceCardFeature | HuiErrorCard
   >();
 
-  private _getFeatureElement(feature: LovelaceTileFeatureConfig) {
+  private _getFeatureElement(feature: LovelaceCardFeatureConfig) {
     if (!this._featuresElements.has(feature)) {
-      const element = createTileFeatureElement(feature);
+      const element = createCardFeatureElement(feature);
       this._featuresElements.set(feature, element);
       return element;
     }
@@ -40,15 +40,15 @@ export class HuiTileFeatures extends LitElement {
   }
 
   private renderFeature(
-    featureConf: LovelaceTileFeatureConfig,
+    featureConf: LovelaceCardFeatureConfig,
     stateObj: HassEntity
   ): TemplateResult {
     const element = this._getFeatureElement(featureConf);
 
     if (this.hass) {
       element.hass = this.hass;
-      (element as LovelaceTileFeature).stateObj = stateObj;
+      (element as LovelaceCardFeature).stateObj = stateObj;
-      (element as LovelaceTileFeature).color = this.color;
+      (element as LovelaceCardFeature).color = this.color;
     }
 
     return html`${element}`;
@@ -77,6 +77,6 @@ export class HuiTileFeatures extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-tile-features": HuiTileFeatures;
+    "hui-card-features": HuiCardFeatures;
   }
 }

src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts

@@ -14,45 +14,45 @@ import {
 } from "../../../data/climate";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature, LovelaceTileFeatureEditor } from "../types";
+import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { ClimateHvacModesTileFeatureConfig } from "./types";
+import { ClimateHvacModesCardFeatureConfig } from "./types";
 
-export const supportsClimateHvacModesTileFeature = (stateObj: HassEntity) => {
+export const supportsClimateHvacModesCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return domain === "climate";
 };
 
-@customElement("hui-climate-hvac-modes-tile-feature")
+@customElement("hui-climate-hvac-modes-card-feature")
-class HuiClimateHvacModesTileFeature
+class HuiClimateHvacModesCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: ClimateEntity;
 
-  @state() private _config?: ClimateHvacModesTileFeatureConfig;
+  @state() private _config?: ClimateHvacModesCardFeatureConfig;
 
   @state() _currentHvacMode?: HvacMode;
 
   static getStubConfig(
     _,
     stateObj?: HassEntity
-  ): ClimateHvacModesTileFeatureConfig {
+  ): ClimateHvacModesCardFeatureConfig {
     return {
       type: "climate-hvac-modes",
       hvac_modes: stateObj?.attributes.hvac_modes || [],
     };
   }
 
-  public static async getConfigElement(): Promise<LovelaceTileFeatureEditor> {
+  public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
     await import(
-      "../editor/config-elements/hui-climate-hvac-modes-tile-feature-editor"
+      "../editor/config-elements/hui-climate-hvac-modes-card-feature-editor"
     );
-    return document.createElement("hui-climate-hvac-modes-tile-feature-editor");
+    return document.createElement("hui-climate-hvac-modes-card-feature-editor");
   }
 
-  public setConfig(config: ClimateHvacModesTileFeatureConfig): void {
+  public setConfig(config: ClimateHvacModesCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -93,7 +93,7 @@ class HuiClimateHvacModesTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsClimateHvacModesTileFeature(this.stateObj)
+      !supportsClimateHvacModesCardFeature(this.stateObj)
     ) {
       return null;
     }
@@ -132,7 +132,6 @@ class HuiClimateHvacModesTileFeature
   static get styles() {
     return css`
       ha-control-select {
-        --control-select-color: var(--tile-color);
         --control-select-padding: 0;
         --control-select-thickness: 40px;
         --control-select-border-radius: 10px;
@@ -148,6 +147,6 @@ class HuiClimateHvacModesTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-climate-modes-hvac-modes-feature": HuiClimateHvacModesTileFeature;
+    "hui-climate-hvac-modes-card-feature": HuiClimateHvacModesCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts

@@ -16,10 +16,10 @@ import {
 } from "../../../data/climate";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature, LovelaceTileFeatureEditor } from "../types";
+import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { ClimatePresetModesTileFeatureConfig } from "./types";
+import { ClimatePresetModesCardFeatureConfig } from "./types";
 
-export const supportsClimatePresetModesTileFeature = (stateObj: HassEntity) => {
+export const supportsClimatePresetModesCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return (
     domain === "climate" &&
@@ -27,16 +27,16 @@ export const supportsClimatePresetModesTileFeature = (stateObj: HassEntity) => {
   );
 };
 
-@customElement("hui-climate-preset-modes-tile-feature")
+@customElement("hui-climate-preset-modes-card-feature")
-class HuiClimatePresetModeTileFeature
+class HuiClimatePresetModesCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: ClimateEntity;
 
-  @state() private _config?: ClimatePresetModesTileFeatureConfig;
+  @state() private _config?: ClimatePresetModesCardFeatureConfig;
 
   @state() _currentPresetMode?: string;
 
@@ -46,7 +46,7 @@ class HuiClimatePresetModeTileFeature
   static getStubConfig(
     _,
     stateObj?: HassEntity
-  ): ClimatePresetModesTileFeatureConfig {
+  ): ClimatePresetModesCardFeatureConfig {
     return {
       type: "climate-preset-modes",
       style: "dropdown",
@@ -54,16 +54,16 @@ class HuiClimatePresetModeTileFeature
     };
   }
 
-  public static async getConfigElement(): Promise<LovelaceTileFeatureEditor> {
+  public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
     await import(
-      "../editor/config-elements/hui-climate-preset-modes-tile-feature-editor"
+      "../editor/config-elements/hui-climate-preset-modes-card-feature-editor"
     );
     return document.createElement(
-      "hui-climate-preset-modes-tile-feature-editor"
+      "hui-climate-preset-modes-card-feature-editor"
     );
   }
 
-  public setConfig(config: ClimatePresetModesTileFeatureConfig): void {
+  public setConfig(config: ClimatePresetModesCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -120,7 +120,7 @@ class HuiClimatePresetModeTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsClimatePresetModesTileFeature(this.stateObj)
+      !supportsClimatePresetModesCardFeature(this.stateObj)
     ) {
       return null;
     }
@@ -201,7 +201,7 @@ class HuiClimatePresetModeTileFeature
         width: 100%;
       }
       ha-control-select {
-        --control-select-color: var(--tile-color);
+        --control-select-color: var(--feature-color);
         --control-select-padding: 0;
         --control-select-thickness: 40px;
         --control-select-border-radius: 10px;
@@ -217,6 +217,6 @@ class HuiClimatePresetModeTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-climate-modes-preset-modes-feature": HuiClimatePresetModeTileFeature;
+    "hui-climate-preset-modes-card-feature": HuiClimatePresetModesCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-cover-open-close-card-feature.ts

@@ -17,10 +17,10 @@ import {
   CoverEntityFeature,
 } from "../../../data/cover";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature } from "../types";
+import { LovelaceCardFeature } from "../types";
-import { CoverOpenCloseTileFeatureConfig } from "./types";
+import { CoverOpenCloseCardFeatureConfig } from "./types";
 
-export const supportsCoverOpenCloseTileFeature = (stateObj: HassEntity) => {
+export const supportsCoverOpenCloseCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return (
     domain === "cover" &&
@@ -29,24 +29,24 @@ export const supportsCoverOpenCloseTileFeature = (stateObj: HassEntity) => {
   );
 };
 
-@customElement("hui-cover-open-close-tile-feature")
+@customElement("hui-cover-open-close-card-feature")
-class HuiCoverOpenCloseTileFeature
+class HuiCoverOpenCloseCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  @state() private _config?: CoverOpenCloseTileFeatureConfig;
+  @state() private _config?: CoverOpenCloseCardFeatureConfig;
 
-  static getStubConfig(): CoverOpenCloseTileFeatureConfig {
+  static getStubConfig(): CoverOpenCloseCardFeatureConfig {
     return {
       type: "cover-open-close",
     };
   }
 
-  public setConfig(config: CoverOpenCloseTileFeatureConfig): void {
+  public setConfig(config: CoverOpenCloseCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -79,7 +79,7 @@ class HuiCoverOpenCloseTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsCoverOpenCloseTileFeature(this.stateObj)
+      !supportsCoverOpenCloseCardFeature(this.stateObj)
     ) {
       return nothing;
     }
@@ -145,6 +145,6 @@ class HuiCoverOpenCloseTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-cover-open-close-tile-feature": HuiCoverOpenCloseTileFeature;
+    "hui-cover-open-close-card-feature": HuiCoverOpenCloseCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-cover-position-card-feature.ts

@@ -11,11 +11,11 @@ import { supportsFeature } from "../../../common/entity/supports-feature";
 import { CoverEntityFeature } from "../../../data/cover";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature } from "../types";
+import { LovelaceCardFeature } from "../types";
-import { CoverPositionTileFeatureConfig } from "./types";
+import { CoverPositionCardFeatureConfig } from "./types";
 import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
 
-export const supportsCoverPositionTileFeature = (stateObj: HassEntity) => {
+export const supportsCoverPositionCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return (
     domain === "cover" &&
@@ -23,10 +23,10 @@ export const supportsCoverPositionTileFeature = (stateObj: HassEntity) => {
   );
 };
 
-@customElement("hui-cover-position-tile-feature")
+@customElement("hui-cover-position-card-feature")
-class HuiCoverPositionTileFeature
+class HuiCoverPositionCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
@@ -34,15 +34,15 @@ class HuiCoverPositionTileFeature
 
   @property({ attribute: false }) public color?: string;
 
-  @state() private _config?: CoverPositionTileFeatureConfig;
+  @state() private _config?: CoverPositionCardFeatureConfig;
 
-  static getStubConfig(): CoverPositionTileFeatureConfig {
+  static getStubConfig(): CoverPositionCardFeatureConfig {
     return {
       type: "cover-position",
     };
   }
 
-  public setConfig(config: CoverPositionTileFeatureConfig): void {
+  public setConfig(config: CoverPositionCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -54,7 +54,7 @@ class HuiCoverPositionTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsCoverPositionTileFeature(this.stateObj)
+      !supportsCoverPositionCardFeature(this.stateObj)
     ) {
       return nothing;
     }
@@ -130,6 +130,6 @@ class HuiCoverPositionTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-cover-position-tile-feature": HuiCoverPositionTileFeature;
+    "hui-cover-position-card-feature": HuiCoverPositionCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-cover-tilt-card-feature.ts

@@ -13,10 +13,10 @@ import {
   CoverEntityFeature,
 } from "../../../data/cover";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature } from "../types";
+import { LovelaceCardFeature } from "../types";
-import { CoverTiltTileFeatureConfig } from "./types";
+import { CoverTiltCardFeatureConfig } from "./types";
 
-export const supportsCoverTiltTileFeature = (stateObj: HassEntity) => {
+export const supportsCoverTiltCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return (
     domain === "cover" &&
@@ -25,24 +25,24 @@ export const supportsCoverTiltTileFeature = (stateObj: HassEntity) => {
   );
 };
 
-@customElement("hui-cover-tilt-tile-feature")
+@customElement("hui-cover-tilt-card-feature")
-class HuiCoverTiltTileFeature
+class HuiCoverTiltCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  @state() private _config?: CoverTiltTileFeatureConfig;
+  @state() private _config?: CoverTiltCardFeatureConfig;
 
-  static getStubConfig(): CoverTiltTileFeatureConfig {
+  static getStubConfig(): CoverTiltCardFeatureConfig {
     return {
       type: "cover-tilt",
     };
   }
 
-  public setConfig(config: CoverTiltTileFeatureConfig): void {
+  public setConfig(config: CoverTiltCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -75,7 +75,7 @@ class HuiCoverTiltTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsCoverTiltTileFeature
+      !supportsCoverTiltCardFeature
     ) {
       return nothing;
     }
@@ -137,6 +137,6 @@ class HuiCoverTiltTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-cover-tilt-tile-feature": HuiCoverTiltTileFeature;
+    "hui-cover-tilt-card-feature": HuiCoverTiltCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts

@@ -11,13 +11,13 @@ import { CoverEntity, CoverEntityFeature } from "../../../data/cover";
 import { UNAVAILABLE } from "../../../data/entity";
 import { generateTiltSliderTrackBackgroundGradient } from "../../../dialogs/more-info/components/cover/ha-more-info-cover-tilt-position";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature } from "../types";
+import { LovelaceCardFeature } from "../types";
-import { CoverTiltPositionTileFeatureConfig } from "./types";
+import { CoverTiltPositionCardFeatureConfig } from "./types";
 import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
 
 const GRADIENT = generateTiltSliderTrackBackgroundGradient();
 
-export const supportsCoverTiltPositionTileFeature = (stateObj: HassEntity) => {
+export const supportsCoverTiltPositionCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return (
     domain === "cover" &&
@@ -25,10 +25,10 @@ export const supportsCoverTiltPositionTileFeature = (stateObj: HassEntity) => {
   );
 };
 
-@customElement("hui-cover-tilt-position-tile-feature")
+@customElement("hui-cover-tilt-position-card-feature")
-class HuiCoverTiltPositionTileFeature
+class HuiCoverTiltPositionCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
@@ -36,15 +36,15 @@ class HuiCoverTiltPositionTileFeature
 
   @property({ attribute: false }) public color?: string;
 
-  @state() private _config?: CoverTiltPositionTileFeatureConfig;
+  @state() private _config?: CoverTiltPositionCardFeatureConfig;
 
-  static getStubConfig(): CoverTiltPositionTileFeatureConfig {
+  static getStubConfig(): CoverTiltPositionCardFeatureConfig {
     return {
       type: "cover-tilt-position",
     };
   }
 
-  public setConfig(config: CoverTiltPositionTileFeatureConfig): void {
+  public setConfig(config: CoverTiltPositionCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -56,7 +56,7 @@ class HuiCoverTiltPositionTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsCoverTiltPositionTileFeature(this.stateObj)
+      !supportsCoverTiltPositionCardFeature(this.stateObj)
     ) {
       return nothing;
     }
@@ -136,6 +136,6 @@ class HuiCoverTiltPositionTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-cover-tilt-position-tile-feature": HuiCoverTiltPositionTileFeature;
+    "hui-cover-tilt-position-card-feature": HuiCoverTiltPositionCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-fan-speed-card-feature.ts

@@ -21,32 +21,32 @@ import {
   fanSpeedToPercentage,
 } from "../../../data/fan";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature } from "../types";
+import { LovelaceCardFeature } from "../types";
-import { FanSpeedTileFeatureConfig } from "./types";
+import { FanSpeedCardFeatureConfig } from "./types";
 import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
 
-export const supportsFanSpeedTileFeature = (stateObj: HassEntity) => {
+export const supportsFanSpeedCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return (
     domain === "fan" && supportsFeature(stateObj, FanEntityFeature.SET_SPEED)
   );
 };
 
-@customElement("hui-fan-speed-tile-feature")
+@customElement("hui-fan-speed-card-feature")
-class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
+class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: FanEntity;
 
-  @state() private _config?: FanSpeedTileFeatureConfig;
+  @state() private _config?: FanSpeedCardFeatureConfig;
 
-  static getStubConfig(): FanSpeedTileFeatureConfig {
+  static getStubConfig(): FanSpeedCardFeatureConfig {
     return {
       type: "fan-speed",
     };
   }
 
-  public setConfig(config: FanSpeedTileFeatureConfig): void {
+  public setConfig(config: FanSpeedCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -68,7 +68,7 @@ class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsFanSpeedTileFeature(this.stateObj)
+      !supportsFanSpeedCardFeature(this.stateObj)
     ) {
       return nothing;
     }
@@ -158,15 +158,15 @@ class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
   static get styles() {
     return css`
       ha-control-slider {
-        --control-slider-color: var(--tile-color);
+        --control-slider-color: var(--feature-color);
-        --control-slider-background: var(--tile-color);
+        --control-slider-background: var(--feature-color);
         --control-slider-background-opacity: 0.2;
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
       ha-control-select {
-        --control-select-color: var(--tile-color);
+        --control-select-color: var(--feature-color);
-        --control-select-background: var(--tile-color);
+        --control-select-background: var(--feature-color);
         --control-select-background-opacity: 0.2;
         --control-select-padding: 0;
         --control-select-thickness: 40px;
@@ -183,6 +183,6 @@ class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-fan-speed-tile-feature": HuiFanSpeedTileFeature;
+    "hui-fan-speed-card-feature": HuiFanSpeedCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts

@@ -10,34 +10,34 @@ import type { ControlSelectOption } from "../../../components/ha-control-select"
 import { UNAVAILABLE } from "../../../data/entity";
 import { HumidifierEntity, HumidifierState } from "../../../data/humidifier";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature } from "../types";
+import { LovelaceCardFeature } from "../types";
-import { HumidifierModesTileFeatureConfig } from "./types";
+import { HumidifierModesCardFeatureConfig } from "./types";
 
-export const supportsHumidifierModesTileFeature = (stateObj: HassEntity) => {
+export const supportsHumidifierModesCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return domain === "humidifier";
 };
 
-@customElement("hui-humidifier-modes-tile-feature")
+@customElement("hui-humidifier-modes-card-feature")
-class HuiHumidifierModeTileFeature
+class HuiHumidifierModeCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HumidifierEntity;
 
-  @state() private _config?: HumidifierModesTileFeatureConfig;
+  @state() private _config?: HumidifierModesCardFeatureConfig;
 
   @state() _currentState?: HumidifierState;
 
-  static getStubConfig(): HumidifierModesTileFeatureConfig {
+  static getStubConfig(): HumidifierModesCardFeatureConfig {
     return {
       type: "humidifier-modes",
     };
   }
 
-  public setConfig(config: HumidifierModesTileFeatureConfig): void {
+  public setConfig(config: HumidifierModesCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -81,7 +81,7 @@ class HuiHumidifierModeTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsHumidifierModesTileFeature(this.stateObj)
+      !supportsHumidifierModesCardFeature(this.stateObj)
     ) {
       return null;
     }
@@ -115,7 +115,7 @@ class HuiHumidifierModeTileFeature
   static get styles() {
     return css`
       ha-control-select {
-        --control-select-color: var(--tile-color);
+        --control-select-color: var(--feature-color);
         --control-select-padding: 0;
         --control-select-thickness: 40px;
         --control-select-border-radius: 10px;
@@ -131,6 +131,6 @@ class HuiHumidifierModeTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-humidifier-modes-tile-feature": HuiHumidifierModeTileFeature;
+    "hui-humidifier-modes-card-feature": HuiHumidifierModeCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts

@@ -13,11 +13,11 @@ import {
   canDock,
 } from "../../../data/lawn_mower";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature, LovelaceTileFeatureEditor } from "../types";
+import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
 import {
   LAWN_MOWER_COMMANDS,
   LawnMowerCommand,
-  LawnMowerCommandsTileFeatureConfig,
+  LawnMowerCommandsCardFeatureConfig,
 } from "./types";
 
 interface LawnMowerButton {
@@ -75,7 +75,7 @@ export const LAWN_MOWER_COMMANDS_BUTTONS: Record<
   }),
 };
 
-export const supportsLawnMowerCommandTileFeature = (stateObj: HassEntity) => {
+export const supportsLawnMowerCommandCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return (
     domain === "lawn_mower" &&
@@ -83,21 +83,21 @@ export const supportsLawnMowerCommandTileFeature = (stateObj: HassEntity) => {
   );
 };
 
-@customElement("hui-lawn-mower-commands-tile-feature")
+@customElement("hui-lawn-mower-commands-card-feature")
-class HuiLawnMowerCommandTileFeature
+class HuiLawnMowerCommandCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  @state() private _config?: LawnMowerCommandsTileFeatureConfig;
+  @state() private _config?: LawnMowerCommandsCardFeatureConfig;
 
   static getStubConfig(
     _,
     stateObj?: HassEntity
-  ): LawnMowerCommandsTileFeatureConfig {
+  ): LawnMowerCommandsCardFeatureConfig {
     return {
       type: "lawn-mower-commands",
       commands: stateObj
@@ -108,16 +108,16 @@ class HuiLawnMowerCommandTileFeature
     };
   }
 
-  public static async getConfigElement(): Promise<LovelaceTileFeatureEditor> {
+  public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
     await import(
-      "../editor/config-elements/hui-lawn-mower-commands-tile-feature-editor"
+      "../editor/config-elements/hui-lawn-mower-commands-card-feature-editor"
     );
     return document.createElement(
-      "hui-lawn-mower-commands-tile-feature-editor"
+      "hui-lawn-mower-commands-card-feature-editor"
     );
   }
 
-  public setConfig(config: LawnMowerCommandsTileFeatureConfig): void {
+  public setConfig(config: LawnMowerCommandsCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -137,7 +137,7 @@ class HuiLawnMowerCommandTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsLawnMowerCommandTileFeature(this.stateObj)
+      !supportsLawnMowerCommandCardFeature(this.stateObj)
     ) {
       return nothing;
     }
@@ -182,6 +182,6 @@ class HuiLawnMowerCommandTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-lawn-mower-commands-tile-feature": HuiLawnMowerCommandTileFeature;
+    "hui-lawn-mower-commands-card-feature": HuiLawnMowerCommandCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-light-brightness-card-feature.ts

@@ -7,32 +7,32 @@ import "../../../components/ha-control-slider";
 import { UNAVAILABLE } from "../../../data/entity";
 import { lightSupportsBrightness } from "../../../data/light";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature } from "../types";
+import { LovelaceCardFeature } from "../types";
-import { LightBrightnessTileFeatureConfig } from "./types";
+import { LightBrightnessCardFeatureConfig } from "./types";
 
-export const supportsLightBrightnessTileFeature = (stateObj: HassEntity) => {
+export const supportsLightBrightnessCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return domain === "light" && lightSupportsBrightness(stateObj);
 };
 
-@customElement("hui-light-brightness-tile-feature")
+@customElement("hui-light-brightness-card-feature")
-class HuiLightBrightnessTileFeature
+class HuiLightBrightnessCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  @state() private _config?: LightBrightnessTileFeatureConfig;
+  @state() private _config?: LightBrightnessCardFeatureConfig;
 
-  static getStubConfig(): LightBrightnessTileFeatureConfig {
+  static getStubConfig(): LightBrightnessCardFeatureConfig {
     return {
       type: "light-brightness",
     };
   }
 
-  public setConfig(config: LightBrightnessTileFeatureConfig): void {
+  public setConfig(config: LightBrightnessCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -44,7 +44,7 @@ class HuiLightBrightnessTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsLightBrightnessTileFeature(this.stateObj)
+      !supportsLightBrightnessCardFeature(this.stateObj)
     ) {
       return nothing;
     }
@@ -87,8 +87,8 @@ class HuiLightBrightnessTileFeature
   static get styles() {
     return css`
       ha-control-slider {
-        --control-slider-color: var(--tile-color);
+        --control-slider-color: var(--feature-color);
-        --control-slider-background: var(--tile-color);
+        --control-slider-background: var(--feature-color);
         --control-slider-background-opacity: 0.2;
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
@@ -103,6 +103,6 @@ class HuiLightBrightnessTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-light-brightness-tile-feature": HuiLightBrightnessTileFeature;
+    "hui-light-brightness-card-feature": HuiLightBrightnessCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-light-color-temp-card-feature.ts

@@ -15,10 +15,10 @@ import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
 import { LightColorMode, lightSupportsColorMode } from "../../../data/light";
 import { generateColorTemperatureGradient } from "../../../dialogs/more-info/components/lights/light-color-temp-picker";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature } from "../types";
+import { LovelaceCardFeature } from "../types";
-import { LightColorTempTileFeatureConfig } from "./types";
+import { LightColorTempCardFeatureConfig } from "./types";
 
-export const supportsLightColorTempTileFeature = (stateObj: HassEntity) => {
+export const supportsLightColorTempCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return (
     domain === "light" &&
@@ -26,24 +26,24 @@ export const supportsLightColorTempTileFeature = (stateObj: HassEntity) => {
   );
 };
 
-@customElement("hui-light-color-temp-tile-feature")
+@customElement("hui-light-color-temp-card-feature")
-class HuiLightColorTempTileFeature
+class HuiLightColorTempCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  @state() private _config?: LightColorTempTileFeatureConfig;
+  @state() private _config?: LightColorTempCardFeatureConfig;
 
-  static getStubConfig(): LightColorTempTileFeatureConfig {
+  static getStubConfig(): LightColorTempCardFeatureConfig {
     return {
       type: "light-color-temp",
     };
   }
 
-  public setConfig(config: LightColorTempTileFeatureConfig): void {
+  public setConfig(config: LightColorTempCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -55,7 +55,7 @@ class HuiLightColorTempTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsLightColorTempTileFeature(this.stateObj)
+      !supportsLightColorTempCardFeature(this.stateObj)
     ) {
       return nothing;
     }
@@ -110,7 +110,7 @@ class HuiLightColorTempTileFeature
   static get styles() {
     return css`
       ha-control-slider {
-        --control-slider-color: var(--tile-color);
+        --control-slider-color: var(--feature-color);
         --control-slider-background: -webkit-linear-gradient(
           left,
           var(--gradient)
@@ -129,6 +129,6 @@ class HuiLightColorTempTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-light-color-temp-tile-feature": HuiLightColorTempTileFeature;
+    "hui-light-color-temp-card-feature": HuiLightColorTempCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-number-card-feature.ts

@@ -4,42 +4,42 @@ import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { isUnavailableState } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature, LovelaceTileFeatureEditor } from "../types";
+import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { NumberTileFeatureConfig } from "./types";
+import { NumberCardFeatureConfig } from "./types";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import "../../../components/ha-control-number-buttons";
 import "../../../components/ha-control-slider";
 import "../../../components/ha-icon";
 
-export const supportsNumberTileFeature = (stateObj: HassEntity) => {
+export const supportsNumberCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return domain === "input_number" || domain === "number";
 };
 
-@customElement("hui-number-tile-feature")
+@customElement("hui-number-card-feature")
-class HuiNumberTileFeature extends LitElement implements LovelaceTileFeature {
+class HuiNumberCardFeature extends LitElement implements LovelaceCardFeature {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  @state() private _config?: NumberTileFeatureConfig;
+  @state() private _config?: NumberCardFeatureConfig;
 
   @state() _currentState?: string;
 
-  static getStubConfig(): NumberTileFeatureConfig {
+  static getStubConfig(): NumberCardFeatureConfig {
     return {
       type: "number",
       style: "buttons",
     };
   }
 
-  public static async getConfigElement(): Promise<LovelaceTileFeatureEditor> {
+  public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import("../editor/config-elements/hui-number-tile-feature-editor");
+    await import("../editor/config-elements/hui-number-card-feature-editor");
-    return document.createElement("hui-number-tile-feature-editor");
+    return document.createElement("hui-number-card-feature-editor");
   }
 
-  public setConfig(config: NumberTileFeatureConfig): void {
+  public setConfig(config: NumberCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -69,7 +69,7 @@ class HuiNumberTileFeature extends LitElement implements LovelaceTileFeature {
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsNumberTileFeature(this.stateObj)
+      !supportsNumberCardFeature(this.stateObj)
     ) {
       return nothing;
     }
@@ -109,7 +109,7 @@ class HuiNumberTileFeature extends LitElement implements LovelaceTileFeature {
         width: auto;
       }
       ha-control-slider {
-        --control-slider-color: var(--tile-color);
+        --control-slider-color: var(--feature-color);
       }
       .container {
         padding: 0 12px 12px 12px;
@@ -121,6 +121,6 @@ class HuiNumberTileFeature extends LitElement implements LovelaceTileFeature {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-number-tile-feature": HuiNumberTileFeature;
+    "hui-number-card-feature": HuiNumberCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-select-options-card-feature.ts

@@ -9,18 +9,18 @@ import { UNAVAILABLE } from "../../../data/entity";
 import { InputSelectEntity } from "../../../data/input_select";
 import { SelectEntity } from "../../../data/select";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature } from "../types";
+import { LovelaceCardFeature } from "../types";
-import { SelectOptionsTileFeatureConfig } from "./types";
+import { SelectOptionsCardFeatureConfig } from "./types";
 
-export const supportsSelectOptionTileFeature = (stateObj: HassEntity) => {
+export const supportsSelectOptionsCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return domain === "select" || domain === "input_select";
 };
 
-@customElement("hui-select-options-tile-feature")
+@customElement("hui-select-options-card-feature")
-class HuiSelectOptionsTileFeature
+class HuiSelectOptionsCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
@@ -28,20 +28,20 @@ class HuiSelectOptionsTileFeature
     | SelectEntity
     | InputSelectEntity;
 
-  @state() private _config?: SelectOptionsTileFeatureConfig;
+  @state() private _config?: SelectOptionsCardFeatureConfig;
 
   @state() _currentOption?: string;
 
   @query("ha-control-select-menu", true)
   private _haSelect!: HaControlSelectMenu;
 
-  static getStubConfig(): SelectOptionsTileFeatureConfig {
+  static getStubConfig(): SelectOptionsCardFeatureConfig {
     return {
       type: "select-options",
     };
   }
 
-  public setConfig(config: SelectOptionsTileFeatureConfig): void {
+  public setConfig(config: SelectOptionsCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -98,7 +98,7 @@ class HuiSelectOptionsTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsSelectOptionTileFeature(this.stateObj)
+      !supportsSelectOptionsCardFeature(this.stateObj)
     ) {
       return nothing;
     }
@@ -150,6 +150,6 @@ class HuiSelectOptionsTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-select-options-tile-feature": HuiSelectOptionsTileFeature;
+    "hui-select-options-card-feature": HuiSelectOptionsCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-target-temperature-card-feature.ts

@@ -17,12 +17,12 @@ import {
   WaterHeaterEntityFeature,
 } from "../../../data/water_heater";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature } from "../types";
+import { LovelaceCardFeature } from "../types";
-import { TargetTemperatureTileFeatureConfig } from "./types";
+import { TargetTemperatureCardFeatureConfig } from "./types";
 
 type Target = "value" | "low" | "high";
 
-export const supportsTargetTemperatureTileFeature = (stateObj: HassEntity) => {
+export const supportsTargetTemperatureCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return (
     (domain === "climate" &&
@@ -36,10 +36,10 @@ export const supportsTargetTemperatureTileFeature = (stateObj: HassEntity) => {
   );
 };
 
-@customElement("hui-target-temperature-tile-feature")
+@customElement("hui-target-temperature-card-feature")
-class HuiTargetTemperatureTileFeature
+class HuiTargetTemperatureCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
@@ -47,17 +47,17 @@ class HuiTargetTemperatureTileFeature
     | ClimateEntity
     | WaterHeaterEntity;
 
-  @state() private _config?: TargetTemperatureTileFeatureConfig;
+  @state() private _config?: TargetTemperatureCardFeatureConfig;
 
   @state() private _targetTemperature: Partial<Record<Target, number>> = {};
 
-  static getStubConfig(): TargetTemperatureTileFeatureConfig {
+  static getStubConfig(): TargetTemperatureCardFeatureConfig {
     return {
       type: "target-temperature",
     };
   }
 
-  public setConfig(config: TargetTemperatureTileFeatureConfig): void {
+  public setConfig(config: TargetTemperatureCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -161,7 +161,7 @@ class HuiTargetTemperatureTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsTargetTemperatureTileFeature(this.stateObj)
+      !supportsTargetTemperatureCardFeature(this.stateObj)
     ) {
       return nothing;
     }
@@ -294,6 +294,6 @@ class HuiTargetTemperatureTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-target-temperature-tile-feature": HuiTargetTemperatureTileFeature;
+    "hui-target-temperature-card-feature": HuiTargetTemperatureCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts

@@ -24,11 +24,11 @@ import {
   isCleaning,
 } from "../../../data/vacuum";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature, LovelaceTileFeatureEditor } from "../types";
+import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
 import {
   VACUUM_COMMANDS,
   VacuumCommand,
-  VacuumCommandsTileFeatureConfig,
+  VacuumCommandsCardFeatureConfig,
 } from "./types";
 
 interface VacuumButton {
@@ -116,7 +116,7 @@ export const VACUUM_COMMANDS_BUTTONS: Record<
   }),
 };
 
-export const supportsVacuumCommandTileFeature = (stateObj: HassEntity) => {
+export const supportsVacuumCommandsCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return (
     domain === "vacuum" &&
@@ -124,21 +124,21 @@ export const supportsVacuumCommandTileFeature = (stateObj: HassEntity) => {
   );
 };
 
-@customElement("hui-vacuum-commands-tile-feature")
+@customElement("hui-vacuum-commands-card-feature")
-class HuiVacuumCommandTileFeature
+class HuiVacuumCommandCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  @state() private _config?: VacuumCommandsTileFeatureConfig;
+  @state() private _config?: VacuumCommandsCardFeatureConfig;
 
   static getStubConfig(
     _,
     stateObj?: HassEntity
-  ): VacuumCommandsTileFeatureConfig {
+  ): VacuumCommandsCardFeatureConfig {
     return {
       type: "vacuum-commands",
       commands: stateObj
@@ -149,14 +149,14 @@ class HuiVacuumCommandTileFeature
     };
   }
 
-  public static async getConfigElement(): Promise<LovelaceTileFeatureEditor> {
+  public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
     await import(
-      "../editor/config-elements/hui-vacuum-commands-tile-feature-editor"
+      "../editor/config-elements/hui-vacuum-commands-card-feature-editor"
     );
-    return document.createElement("hui-vacuum-commands-tile-feature-editor");
+    return document.createElement("hui-vacuum-commands-card-feature-editor");
   }
 
-  public setConfig(config: VacuumCommandsTileFeatureConfig): void {
+  public setConfig(config: VacuumCommandsCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -176,7 +176,7 @@ class HuiVacuumCommandTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsVacuumCommandTileFeature(this.stateObj)
+      !supportsVacuumCommandsCardFeature(this.stateObj)
     ) {
       return nothing;
     }
@@ -221,6 +221,6 @@ class HuiVacuumCommandTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-vacuum-commands-tile-feature": HuiVacuumCommandTileFeature;
+    "hui-vacuum-commands-card-feature": HuiVacuumCommandCardFeature;
   }
 }

src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts

@@ -17,49 +17,49 @@ import {
   WaterHeaterEntity,
 } from "../../../data/water_heater";
 import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature, LovelaceTileFeatureEditor } from "../types";
+import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { WaterHeaterOperationModesTileFeatureConfig } from "./types";
+import { WaterHeaterOperationModesCardFeatureConfig } from "./types";
 
-export const supportsWaterHeaterOperationModesTileFeature = (
+export const supportsWaterHeaterOperationModesCardFeature = (
   stateObj: HassEntity
 ) => {
   const domain = computeDomain(stateObj.entity_id);
   return domain === "water_heater";
 };
 
-@customElement("hui-water-heater-operation-modes-tile-feature")
+@customElement("hui-water-heater-operation-modes-card-feature")
-class HuiWaterHeaterOperationModeTileFeature
+class HuiWaterHeaterOperationModeCardFeature
   extends LitElement
-  implements LovelaceTileFeature
+  implements LovelaceCardFeature
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: WaterHeaterEntity;
 
-  @state() private _config?: WaterHeaterOperationModesTileFeatureConfig;
+  @state() private _config?: WaterHeaterOperationModesCardFeatureConfig;
 
   @state() _currentOperationMode?: OperationMode;
 
   static getStubConfig(
     _,
     stateObj?: HassEntity
-  ): WaterHeaterOperationModesTileFeatureConfig {
+  ): WaterHeaterOperationModesCardFeatureConfig {
     return {
       type: "water-heater-operation-modes",
       operation_modes: stateObj?.attributes.operation_list || [],
     };
   }
 
-  public static async getConfigElement(): Promise<LovelaceTileFeatureEditor> {
+  public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
     await import(
-      "../editor/config-elements/hui-water-heater-operation-modes-tile-feature-editor"
+      "../editor/config-elements/hui-water-heater-operation-modes-card-feature-editor"
     );
     return document.createElement(
-      "hui-water-heater-operation-modes-tile-feature-editor"
+      "hui-water-heater-operation-modes-card-feature-editor"
     );
   }
 
-  public setConfig(config: WaterHeaterOperationModesTileFeatureConfig): void {
+  public setConfig(config: WaterHeaterOperationModesCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -100,7 +100,7 @@ class HuiWaterHeaterOperationModeTileFeature
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsWaterHeaterOperationModesTileFeature(this.stateObj)
+      !supportsWaterHeaterOperationModesCardFeature(this.stateObj)
     ) {
       return null;
     }
@@ -139,7 +139,7 @@ class HuiWaterHeaterOperationModeTileFeature
   static get styles() {
     return css`
       ha-control-select {
-        --control-select-color: var(--tile-color);
+        --control-select-color: var(--feature-color);
         --control-select-padding: 0;
         --control-select-thickness: 40px;
         --control-select-border-radius: 10px;
@@ -159,6 +159,6 @@ class HuiWaterHeaterOperationModeTileFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-water-heater-operation-modes-feature": HuiWaterHeaterOperationModeTileFeature;
+    "hui-water-heater-operation-modes-card-feature": HuiWaterHeaterOperationModeCardFeature;
   }
 }

src/panels/lovelace/card-features/types.ts

@@ -0,0 +1,116 @@
+import { AlarmMode } from "../../../data/alarm_control_panel";
+import { HvacMode } from "../../../data/climate";
+import { OperationMode } from "../../../data/water_heater";
+
+export interface CoverOpenCloseCardFeatureConfig {
+  type: "cover-open-close";
+}
+
+export interface CoverPositionCardFeatureConfig {
+  type: "cover-position";
+}
+
+export interface CoverTiltCardFeatureConfig {
+  type: "cover-tilt";
+}
+
+export interface CoverTiltPositionCardFeatureConfig {
+  type: "cover-tilt-position";
+}
+
+export interface LightBrightnessCardFeatureConfig {
+  type: "light-brightness";
+}
+
+export interface LightColorTempCardFeatureConfig {
+  type: "light-color-temp";
+}
+
+export interface FanSpeedCardFeatureConfig {
+  type: "fan-speed";
+}
+
+export interface AlarmModesCardFeatureConfig {
+  type: "alarm-modes";
+  modes?: AlarmMode[];
+}
+
+export interface ClimateHvacModesCardFeatureConfig {
+  type: "climate-hvac-modes";
+  hvac_modes?: HvacMode[];
+}
+
+export interface ClimatePresetModesCardFeatureConfig {
+  type: "climate-preset-modes";
+  style?: "dropdown" | "icons";
+  preset_modes?: string[];
+}
+
+export interface SelectOptionsCardFeatureConfig {
+  type: "select-options";
+}
+
+export interface NumberCardFeatureConfig {
+  type: "number";
+  style?: "buttons" | "slider";
+}
+
+export interface TargetTemperatureCardFeatureConfig {
+  type: "target-temperature";
+}
+
+export interface WaterHeaterOperationModesCardFeatureConfig {
+  type: "water-heater-operation-modes";
+  operation_modes?: OperationMode[];
+}
+
+export interface HumidifierModesCardFeatureConfig {
+  type: "humidifier-modes";
+}
+
+export const VACUUM_COMMANDS = [
+  "start_pause",
+  "stop",
+  "clean_spot",
+  "locate",
+  "return_home",
+] as const;
+
+export type VacuumCommand = (typeof VACUUM_COMMANDS)[number];
+
+export interface VacuumCommandsCardFeatureConfig {
+  type: "vacuum-commands";
+  commands?: VacuumCommand[];
+}
+
+export const LAWN_MOWER_COMMANDS = ["start_pause", "dock"] as const;
+
+export type LawnMowerCommand = (typeof LAWN_MOWER_COMMANDS)[number];
+
+export interface LawnMowerCommandsCardFeatureConfig {
+  type: "lawn-mower-commands";
+  commands?: LawnMowerCommand[];
+}
+
+export type LovelaceCardFeatureConfig =
+  | AlarmModesCardFeatureConfig
+  | ClimateHvacModesCardFeatureConfig
+  | ClimatePresetModesCardFeatureConfig
+  | CoverOpenCloseCardFeatureConfig
+  | CoverPositionCardFeatureConfig
+  | CoverTiltPositionCardFeatureConfig
+  | CoverTiltCardFeatureConfig
+  | FanSpeedCardFeatureConfig
+  | HumidifierModesCardFeatureConfig
+  | LawnMowerCommandsCardFeatureConfig
+  | LightBrightnessCardFeatureConfig
+  | LightColorTempCardFeatureConfig
+  | VacuumCommandsCardFeatureConfig
+  | TargetTemperatureCardFeatureConfig
+  | WaterHeaterOperationModesCardFeatureConfig
+  | SelectOptionsCardFeatureConfig
+  | NumberCardFeatureConfig;
+
+export type LovelaceCardFeatureContext = {
+  entity_id?: string;
+};

src/panels/lovelace/cards/hui-humidifier-card.ts

@@ -8,17 +8,19 @@ import {
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
+import { stateColorCss } from "../../../common/entity/state_color";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import { HumidifierEntity } from "../../../data/humidifier";
 import "../../../dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity";
 import { HomeAssistant } from "../../../types";
+import "../card-features/hui-card-features";
 import { findEntities } from "../common/find-entities";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
-import "../tile-features/hui-tile-features";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { HumidifierCardConfig } from "./types";
 
@@ -119,6 +121,8 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
 
     const name = this._config!.name || computeStateName(stateObj);
 
+    const color = stateColorCss(stateObj);
+
     return html`
       <ha-card>
         <p class="title">${name}</p>
@@ -136,12 +140,14 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
           @click=${this._handleMoreInfo}
           tabindex="0"
         ></ha-icon-button>
-        <hui-tile-features
+        <hui-card-features
+          style=${styleMap({
+            "--feature-color": color,
+          })}
           .hass=${this.hass}
           .stateObj=${stateObj}
-          .color=${this._config.color}
           .features=${this._config.features}
-        ></hui-tile-features>
+        ></hui-card-features>
       </ha-card>
     `;
   }
@@ -191,7 +197,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
         direction: var(--direction);
       }
 
-      hui-tile-features {
+      hui-card-features {
         width: 100%;
       }
     `;

src/panels/lovelace/cards/hui-thermostat-card.ts

@@ -20,7 +20,7 @@ import "../../../dialogs/more-info/components/climate/ha-more-info-climate-tempe
 import { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entities";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
-import "../tile-features/hui-tile-features";
+import "../card-features/hui-card-features";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { ThermostatCardConfig } from "./types";
 
@@ -132,15 +132,14 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
           @click=${this._handleMoreInfo}
           tabindex="0"
         ></ha-icon-button>
-        <hui-tile-features
+        <hui-card-features
           style=${styleMap({
-            "--tile-color": color,
+            "--feature-color": color,
           })}
           .hass=${this.hass}
           .stateObj=${stateObj}
-          .color=${this._config.color}
           .features=${this._config.features}
-        ></hui-tile-features>
+        ></hui-card-features>
       </ha-card>
     `;
   }
@@ -190,7 +189,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         direction: var(--direction);
       }
 
-      hui-tile-features {
+      hui-card-features {
         width: 100%;
       }
     `;

src/panels/lovelace/cards/hui-tile-card.ts

@@ -43,7 +43,7 @@ import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
 import "../components/hui-timestamp-display";
-import "../tile-features/hui-tile-features";
+import "../card-features/hui-card-features";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
 import { computeTileBadge } from "./tile/badges/tile-badge";
 import type { ThermostatCardConfig, TileCardConfig } from "./types";
@@ -423,12 +423,12 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
             ></ha-tile-info>
           </div>
         </div>
-        <hui-tile-features
+        <hui-card-features
           .hass=${this.hass}
           .stateObj=${stateObj}
           .color=${this._config.color}
           .features=${this._config.features}
-        ></hui-tile-features>
+        ></hui-card-features>
       </ha-card>
     `;
   }

src/panels/lovelace/cards/types.ts

@@ -13,7 +13,7 @@ import {
   LovelaceRowConfig,
 } from "../entity-rows/types";
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
-import { LovelaceTileFeatureConfig } from "../tile-features/types";
+import { LovelaceCardFeatureConfig } from "../card-features/types";
 
 export type AlarmPanelCardConfigState =
   | "arm_away"
@@ -262,7 +262,7 @@ export interface HumidifierCardConfig extends LovelaceCardConfig {
   entity: string;
   theme?: string;
   name?: string;
-  features?: LovelaceTileFeatureConfig[];
+  features?: LovelaceCardFeatureConfig[];
 }
 
 export interface IframeCardConfig extends LovelaceCardConfig {
@@ -453,7 +453,7 @@ export interface ThermostatCardConfig extends LovelaceCardConfig {
   entity: string;
   theme?: string;
   name?: string;
-  features?: LovelaceTileFeatureConfig[];
+  features?: LovelaceCardFeatureConfig[];
 }
 
 export interface WeatherForecastCardConfig extends LovelaceCardConfig {
@@ -535,5 +535,5 @@ export interface TileCardConfig extends LovelaceCardConfig {
   vertical?: boolean;
   tap_action?: ActionConfig;
   icon_tap_action?: ActionConfig;
-  features?: LovelaceTileFeatureConfig[];
+  features?: LovelaceCardFeatureConfig[];
 }

src/panels/lovelace/create-element/create-card-feature-element.ts

@@ -0,0 +1,48 @@
+import "../card-features/hui-alarm-modes-card-feature";
+import "../card-features/hui-climate-hvac-modes-card-feature";
+import "../card-features/hui-climate-preset-modes-card-feature";
+import "../card-features/hui-cover-open-close-card-feature";
+import "../card-features/hui-cover-position-card-feature";
+import "../card-features/hui-cover-tilt-position-card-feature";
+import "../card-features/hui-cover-tilt-card-feature";
+import "../card-features/hui-fan-speed-card-feature";
+import "../card-features/hui-humidifier-modes-card-feature";
+import "../card-features/hui-lawn-mower-commands-card-feature";
+import "../card-features/hui-light-brightness-card-feature";
+import "../card-features/hui-light-color-temp-card-feature";
+import "../card-features/hui-number-card-feature";
+import "../card-features/hui-select-options-card-feature";
+import "../card-features/hui-target-temperature-card-feature";
+import "../card-features/hui-vacuum-commands-card-feature";
+import "../card-features/hui-water-heater-operation-modes-card-feature";
+import { LovelaceCardFeatureConfig } from "../card-features/types";
+import {
+  createLovelaceElement,
+  getLovelaceElementClass,
+} from "./create-element-base";
+
+const TYPES: Set<LovelaceCardFeatureConfig["type"]> = new Set([
+  "alarm-modes",
+  "climate-hvac-modes",
+  "climate-preset-modes",
+  "cover-open-close",
+  "cover-position",
+  "cover-tilt-position",
+  "cover-tilt",
+  "fan-speed",
+  "humidifier-modes",
+  "lawn-mower-commands",
+  "light-brightness",
+  "light-color-temp",
+  "select-options",
+  "target-temperature",
+  "vacuum-commands",
+  "water-heater-operation-modes",
+  "number",
+]);
+
+export const createCardFeatureElement = (config: LovelaceCardFeatureConfig) =>
+  createLovelaceElement("card-feature", config, TYPES);
+
+export const getCardFeatureElementClass = (type: string) =>
+  getLovelaceElementClass(type, "card-feature", TYPES);

src/panels/lovelace/create-element/create-element-base.ts

@@ -12,7 +12,7 @@ import type { ErrorCardConfig } from "../cards/types";
 import { LovelaceElement, LovelaceElementConfig } from "../elements/types";
 import { LovelaceRow, LovelaceRowConfig } from "../entity-rows/types";
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
-import { LovelaceTileFeatureConfig } from "../tile-features/types";
+import { LovelaceCardFeatureConfig } from "../card-features/types";
 import {
   LovelaceBadge,
   LovelaceCard,
@@ -20,8 +20,8 @@ import {
   LovelaceHeaderFooter,
   LovelaceHeaderFooterConstructor,
   LovelaceRowConstructor,
-  LovelaceTileFeature,
+  LovelaceCardFeature,
-  LovelaceTileFeatureConstructor,
+  LovelaceCardFeatureConstructor,
 } from "../types";
 
 const TIMEOUT = 2000;
@@ -57,10 +57,10 @@ interface CreateElementConfigTypes {
     element: LovelaceViewElement;
     constructor: unknown;
   };
-  "tile-feature": {
+  "card-feature": {
-    config: LovelaceTileFeatureConfig;
+    config: LovelaceCardFeatureConfig;
-    element: LovelaceTileFeature;
+    element: LovelaceCardFeature;
-    constructor: LovelaceTileFeatureConstructor;
+    constructor: LovelaceCardFeatureConstructor;
   };
 }
 

src/panels/lovelace/create-element/create-tile-feature-element.ts

@@ -1,48 +0,0 @@
-import "../tile-features/hui-alarm-modes-tile-feature";
-import "../tile-features/hui-climate-hvac-modes-tile-feature";
-import "../tile-features/hui-climate-preset-modes-tile-feature";
-import "../tile-features/hui-cover-open-close-tile-feature";
-import "../tile-features/hui-cover-position-tile-feature";
-import "../tile-features/hui-cover-tilt-position-tile-feature";
-import "../tile-features/hui-cover-tilt-tile-feature";
-import "../tile-features/hui-fan-speed-tile-feature";
-import "../tile-features/hui-humidifier-modes-tile-feature";
-import "../tile-features/hui-lawn-mower-commands-tile-feature";
-import "../tile-features/hui-light-brightness-tile-feature";
-import "../tile-features/hui-light-color-temp-tile-feature";
-import "../tile-features/hui-number-tile-feature";
-import "../tile-features/hui-select-options-tile-feature";
-import "../tile-features/hui-target-temperature-tile-feature";
-import "../tile-features/hui-vacuum-commands-tile-feature";
-import "../tile-features/hui-water-heater-operation-modes-tile-feature";
-import { LovelaceTileFeatureConfig } from "../tile-features/types";
-import {
-  createLovelaceElement,
-  getLovelaceElementClass,
-} from "./create-element-base";
-
-const TYPES: Set<LovelaceTileFeatureConfig["type"]> = new Set([
-  "alarm-modes",
-  "climate-hvac-modes",
-  "climate-preset-modes",
-  "cover-open-close",
-  "cover-position",
-  "cover-tilt-position",
-  "cover-tilt",
-  "fan-speed",
-  "humidifier-modes",
-  "lawn-mower-commands",
-  "light-brightness",
-  "light-color-temp",
-  "select-options",
-  "target-temperature",
-  "vacuum-commands",
-  "water-heater-operation-modes",
-  "number",
-]);
-
-export const createTileFeatureElement = (config: LovelaceTileFeatureConfig) =>
-  createLovelaceElement("tile-feature", config, TYPES);
-
-export const getTileFeatureElementClass = (type: string) =>
-  getLovelaceElementClass(type, "tile-feature", TYPES);

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

@@ -9,24 +9,24 @@ import type { SchemaUnion } from "../../../../components/ha-form/types";
 import { AlarmMode, ALARM_MODES } from "../../../../data/alarm_control_panel";
 import type { HomeAssistant } from "../../../../types";
 import {
-  LovelaceTileFeatureContext,
+  LovelaceCardFeatureContext,
-  AlarmModesTileFeatureConfig,
+  AlarmModesCardFeatureConfig,
-} from "../../tile-features/types";
+} from "../../card-features/types";
-import type { LovelaceTileFeatureEditor } from "../../types";
+import type { LovelaceCardFeatureEditor } from "../../types";
 import "../../../../components/ha-form/ha-form";
 
-@customElement("hui-alarm-modes-tile-feature-editor")
+@customElement("hui-alarm-modes-card-feature-editor")
-export class HuiAlarmModesTileFeatureEditor
+export class HuiAlarmModesCardFeatureEditor
   extends LitElement
-  implements LovelaceTileFeatureEditor
+  implements LovelaceCardFeatureEditor
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ attribute: false }) public context?: LovelaceTileFeatureContext;
+  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
 
-  @state() private _config?: AlarmModesTileFeatureConfig;
+  @state() private _config?: AlarmModesCardFeatureConfig;
 
-  public setConfig(config: AlarmModesTileFeatureConfig): void {
+  public setConfig(config: AlarmModesCardFeatureConfig): void {
     this._config = config;
   }
 
@@ -49,7 +49,7 @@ export class HuiAlarmModesTileFeatureEditor
                 .map((mode) => ({
                   value: mode,
                   label: `${localize(
-                    `ui.panel.lovelace.editor.card.tile.features.types.alarm-modes.modes_list.${mode}`
+                    `ui.panel.lovelace.editor.features.types.alarm-modes.modes_list.${mode}`
                   )}`,
                 })),
             },
@@ -90,7 +90,7 @@ export class HuiAlarmModesTileFeatureEditor
     switch (schema.name) {
       case "modes":
         return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.tile.features.types.alarm-modes.${schema.name}`
+          `ui.panel.lovelace.editor.features.types.alarm-modes.${schema.name}`
         );
       default:
         return this.hass!.localize(
@@ -102,6 +102,6 @@ export class HuiAlarmModesTileFeatureEditor
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-alarm-modes-tile-feature-editor": HuiAlarmModesTileFeatureEditor;
+    "hui-alarm-modes-card-feature-editor": HuiAlarmModesCardFeatureEditor;
   }
 }

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

@@ -13,35 +13,35 @@ import "../../../../components/ha-list-item";
 import "../../../../components/ha-svg-icon";
 import {
   CUSTOM_TYPE_PREFIX,
-  CustomTileFeatureEntry,
+  CustomCardFeatureEntry,
-  customTileFeatures,
+  getCustomCardFeatures,
   isCustomType,
   stripCustomPrefix,
 } from "../../../../data/lovelace_custom_cards";
 import { sortableStyles } from "../../../../resources/ha-sortable-style";
 import type { SortableInstance } from "../../../../resources/sortable";
 import { HomeAssistant } from "../../../../types";
-import { getTileFeatureElementClass } from "../../create-element/create-tile-feature-element";
+import { supportsAlarmModesCardFeature } from "../../card-features/hui-alarm-modes-card-feature";
-import { supportsAlarmModesTileFeature } from "../../tile-features/hui-alarm-modes-tile-feature";
+import { supportsClimateHvacModesCardFeature } from "../../card-features/hui-climate-hvac-modes-card-feature";
-import { supportsClimateHvacModesTileFeature } from "../../tile-features/hui-climate-hvac-modes-tile-feature";
+import { supportsClimatePresetModesCardFeature } from "../../card-features/hui-climate-preset-modes-card-feature";
-import { supportsClimatePresetModesTileFeature } from "../../tile-features/hui-climate-preset-modes-tile-feature";
+import { supportsCoverOpenCloseCardFeature } from "../../card-features/hui-cover-open-close-card-feature";
-import { supportsCoverOpenCloseTileFeature } from "../../tile-features/hui-cover-open-close-tile-feature";
+import { supportsCoverPositionCardFeature } from "../../card-features/hui-cover-position-card-feature";
-import { supportsCoverPositionTileFeature } from "../../tile-features/hui-cover-position-tile-feature";
+import { supportsCoverTiltCardFeature } from "../../card-features/hui-cover-tilt-card-feature";
-import { supportsCoverTiltPositionTileFeature } from "../../tile-features/hui-cover-tilt-position-tile-feature";
+import { supportsCoverTiltPositionCardFeature } from "../../card-features/hui-cover-tilt-position-card-feature";
-import { supportsCoverTiltTileFeature } from "../../tile-features/hui-cover-tilt-tile-feature";
+import { supportsFanSpeedCardFeature } from "../../card-features/hui-fan-speed-card-feature";
-import { supportsFanSpeedTileFeature } from "../../tile-features/hui-fan-speed-tile-feature";
+import { supportsHumidifierModesCardFeature } from "../../card-features/hui-humidifier-modes-card-feature";
-import { supportsHumidifierModesTileFeature } from "../../tile-features/hui-humidifier-modes-tile-feature";
+import { supportsLawnMowerCommandCardFeature } from "../../card-features/hui-lawn-mower-commands-card-feature";
-import { supportsLawnMowerCommandTileFeature } from "../../tile-features/hui-lawn-mower-commands-tile-feature";
+import { supportsLightBrightnessCardFeature } from "../../card-features/hui-light-brightness-card-feature";
-import { supportsLightBrightnessTileFeature } from "../../tile-features/hui-light-brightness-tile-feature";
+import { supportsLightColorTempCardFeature } from "../../card-features/hui-light-color-temp-card-feature";
-import { supportsLightColorTempTileFeature } from "../../tile-features/hui-light-color-temp-tile-feature";
+import { supportsNumberCardFeature } from "../../card-features/hui-number-card-feature";
-import { supportsNumberTileFeature } from "../../tile-features/hui-number-tile-feature";
+import { supportsSelectOptionsCardFeature } from "../../card-features/hui-select-options-card-feature";
-import { supportsSelectOptionTileFeature } from "../../tile-features/hui-select-options-tile-feature";
+import { supportsTargetTemperatureCardFeature } from "../../card-features/hui-target-temperature-card-feature";
-import { supportsTargetTemperatureTileFeature } from "../../tile-features/hui-target-temperature-tile-feature";
+import { supportsVacuumCommandsCardFeature } from "../../card-features/hui-vacuum-commands-card-feature";
-import { supportsVacuumCommandTileFeature } from "../../tile-features/hui-vacuum-commands-tile-feature";
+import { supportsWaterHeaterOperationModesCardFeature } from "../../card-features/hui-water-heater-operation-modes-card-feature";
-import { supportsWaterHeaterOperationModesTileFeature } from "../../tile-features/hui-water-heater-operation-modes-tile-feature";
+import { LovelaceCardFeatureConfig } from "../../card-features/types";
-import { LovelaceTileFeatureConfig } from "../../tile-features/types";
+import { getCardFeatureElementClass } from "../../create-element/create-card-feature-element";
 
-export type FeatureType = LovelaceTileFeatureConfig["type"];
+export type FeatureType = LovelaceCardFeatureConfig["type"];
 type SupportsFeature = (stateObj: HassEntity) => boolean;
 
 const UI_FEATURE_TYPES = [
@@ -80,49 +80,51 @@ const SUPPORTS_FEATURE_TYPES: Record<
   UiFeatureTypes,
   SupportsFeature | undefined
 > = {
-  "alarm-modes": supportsAlarmModesTileFeature,
+  "alarm-modes": supportsAlarmModesCardFeature,
-  "climate-hvac-modes": supportsClimateHvacModesTileFeature,
+  "climate-hvac-modes": supportsClimateHvacModesCardFeature,
-  "climate-preset-modes": supportsClimatePresetModesTileFeature,
+  "climate-preset-modes": supportsClimatePresetModesCardFeature,
-  "cover-open-close": supportsCoverOpenCloseTileFeature,
+  "cover-open-close": supportsCoverOpenCloseCardFeature,
-  "cover-position": supportsCoverPositionTileFeature,
+  "cover-position": supportsCoverPositionCardFeature,
-  "cover-tilt-position": supportsCoverTiltPositionTileFeature,
+  "cover-tilt-position": supportsCoverTiltPositionCardFeature,
-  "cover-tilt": supportsCoverTiltTileFeature,
+  "cover-tilt": supportsCoverTiltCardFeature,
-  "fan-speed": supportsFanSpeedTileFeature,
+  "fan-speed": supportsFanSpeedCardFeature,
-  "humidifier-modes": supportsHumidifierModesTileFeature,
+  "humidifier-modes": supportsHumidifierModesCardFeature,
-  "lawn-mower-commands": supportsLawnMowerCommandTileFeature,
+  "lawn-mower-commands": supportsLawnMowerCommandCardFeature,
-  "light-brightness": supportsLightBrightnessTileFeature,
+  "light-brightness": supportsLightBrightnessCardFeature,
-  "light-color-temp": supportsLightColorTempTileFeature,
+  "light-color-temp": supportsLightColorTempCardFeature,
-  number: supportsNumberTileFeature,
+  number: supportsNumberCardFeature,
-  "target-temperature": supportsTargetTemperatureTileFeature,
+  "target-temperature": supportsTargetTemperatureCardFeature,
-  "vacuum-commands": supportsVacuumCommandTileFeature,
+  "vacuum-commands": supportsVacuumCommandsCardFeature,
-  "water-heater-operation-modes": supportsWaterHeaterOperationModesTileFeature,
+  "water-heater-operation-modes": supportsWaterHeaterOperationModesCardFeature,
-  "select-options": supportsSelectOptionTileFeature,
+  "select-options": supportsSelectOptionsCardFeature,
 };
 
+const customCardFeatures = getCustomCardFeatures();
+
 const CUSTOM_FEATURE_ENTRIES: Record<
   string,
-  CustomTileFeatureEntry | undefined
+  CustomCardFeatureEntry | undefined
 > = {};
-customTileFeatures.forEach((feature) => {
+customCardFeatures.forEach((feature) => {
   CUSTOM_FEATURE_ENTRIES[feature.type] = feature;
 });
 
 declare global {
   interface HASSDomEvents {
     "features-changed": {
-      features: LovelaceTileFeatureConfig[];
+      features: LovelaceCardFeatureConfig[];
     };
   }
 }
 
-@customElement("hui-tile-card-features-editor")
+@customElement("hui-card-features-editor")
-export class HuiTileCardFeaturesEditor extends LitElement {
+export class HuiCardFeaturesEditor extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
   @property({ attribute: false })
-  public features?: LovelaceTileFeatureConfig[];
+  public features?: LovelaceCardFeatureConfig[];
 
   @property({ attribute: false })
   public featuresTypes?: FeatureType[];
@@ -130,7 +132,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
   @property()
   public label?: string;
 
-  private _featuresKeys = new WeakMap<LovelaceTileFeatureConfig, string>();
+  private _featuresKeys = new WeakMap<LovelaceCardFeatureConfig, string>();
 
   private _sortable?: SortableInstance;
 
@@ -175,12 +177,12 @@ export class HuiTileCardFeaturesEditor extends LitElement {
     }
     return (
       this.hass!.localize(
-        `ui.panel.lovelace.editor.card.tile.features.types.${type}.label`
+        `ui.panel.lovelace.editor.features.types.${type}.label`
       ) || type
     );
   }
 
-  private _getKey(feature: LovelaceTileFeatureConfig) {
+  private _getKey(feature: LovelaceCardFeatureConfig) {
     if (!this._featuresKeys.has(feature)) {
       this._featuresKeys.set(feature, Math.random().toString());
     }
@@ -196,7 +198,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
     const featuresTypes = UI_FEATURE_TYPES.filter(
       (type) => !this.featuresTypes || this.featuresTypes.includes(type)
     ) as readonly string[];
-    const customFeaturesTypes = customTileFeatures.map(
+    const customFeaturesTypes = customCardFeatures.map(
       (feature) => `${CUSTOM_TYPE_PREFIX}${feature.type}`
     );
     return featuresTypes
@@ -220,16 +222,14 @@ export class HuiTileCardFeaturesEditor extends LitElement {
       <ha-expansion-panel outlined>
         <h3 slot="header">
           <ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
-          ${this.hass!.localize(
+          ${this.hass!.localize("ui.panel.lovelace.editor.features.name")}
-            "ui.panel.lovelace.editor.card.tile.features.name"
-          )}
         </h3>
         <div class="content">
           ${supportedFeaturesType.length === 0 && this.features.length === 0
             ? html`
                 <ha-alert type="info">
                   ${this.hass!.localize(
-                    "ui.panel.lovelace.editor.card.tile.features.no_compatible_available"
+                    "ui.panel.lovelace.editor.features.no_compatible_available"
                   )}
                 </ha-alert>
               `
@@ -254,7 +254,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                           ? html`
                               <span class="secondary">
                                 ${this.hass!.localize(
-                                  "ui.panel.lovelace.editor.card.tile.features.not_compatible"
+                                  "ui.panel.lovelace.editor.features.not_compatible"
                                 )}
                               </span>
                             `
@@ -265,7 +265,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                       ? html`
                           <ha-icon-button
                             .label=${this.hass!.localize(
-                              `ui.panel.lovelace.editor.card.tile.features.edit`
+                              `ui.panel.lovelace.editor.features.edit`
                             )}
                             .path=${mdiPencil}
                             class="edit-icon"
@@ -277,7 +277,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                       : nothing}
                     <ha-icon-button
                       .label=${this.hass!.localize(
-                        `ui.panel.lovelace.editor.card.tile.features.remove`
+                        `ui.panel.lovelace.editor.features.remove`
                       )}
                       .path=${mdiDelete}
                       class="remove-icon"
@@ -300,7 +300,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                     slot="trigger"
                     outlined
                     .label=${this.hass!.localize(
-                      `ui.panel.lovelace.editor.card.tile.features.add`
+                      `ui.panel.lovelace.editor.features.add`
                     )}
                   >
                     <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
@@ -368,13 +368,13 @@ export class HuiTileCardFeaturesEditor extends LitElement {
     const value = this._getSupportedFeaturesType()[index];
     if (!value) return;
 
-    const elClass = await getTileFeatureElementClass(value);
+    const elClass = await getCardFeatureElementClass(value);
 
-    let newFeature: LovelaceTileFeatureConfig;
+    let newFeature: LovelaceCardFeatureConfig;
     if (elClass && elClass.getStubConfig) {
       newFeature = await elClass.getStubConfig(this.hass!, this.stateObj);
     } else {
-      newFeature = { type: value } as LovelaceTileFeatureConfig;
+      newFeature = { type: value } as LovelaceCardFeatureConfig;
     }
     const newConfigFeature = this.features!.concat(newFeature);
     fireEvent(this, "features-changed", { features: newConfigFeature });
@@ -406,7 +406,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
     fireEvent(this, "edit-detail-element", {
       subElementConfig: {
         index,
-        type: "tile-feature",
+        type: "feature",
         elementConfig: this.features![index],
       },
     });
@@ -490,6 +490,6 @@ export class HuiTileCardFeaturesEditor extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-tile-card-features-editor": HuiTileCardFeaturesEditor;
+    "hui-card-features-editor": HuiCardFeaturesEditor;
   }
 }

src/panels/lovelace/editor/config-elements/hui-climate-hvac-modes-card-feature-editor.ts

@@ -9,23 +9,23 @@ import type { SchemaUnion } from "../../../../components/ha-form/types";
 import { HVAC_MODES } from "../../../../data/climate";
 import type { HomeAssistant } from "../../../../types";
 import {
-  ClimateHvacModesTileFeatureConfig,
+  ClimateHvacModesCardFeatureConfig,
-  LovelaceTileFeatureContext,
+  LovelaceCardFeatureContext,
-} from "../../tile-features/types";
+} from "../../card-features/types";
-import type { LovelaceTileFeatureEditor } from "../../types";
+import type { LovelaceCardFeatureEditor } from "../../types";
 
-@customElement("hui-climate-hvac-modes-tile-feature-editor")
+@customElement("hui-climate-hvac-modes-card-feature-editor")
-export class HuiClimateHvacModesTileFeatureEditor
+export class HuiClimateHvacModesCardFeatureEditor
   extends LitElement
-  implements LovelaceTileFeatureEditor
+  implements LovelaceCardFeatureEditor
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ attribute: false }) public context?: LovelaceTileFeatureContext;
+  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
 
-  @state() private _config?: ClimateHvacModesTileFeatureConfig;
+  @state() private _config?: ClimateHvacModesCardFeatureConfig;
 
-  public setConfig(config: ClimateHvacModesTileFeatureConfig): void {
+  public setConfig(config: ClimateHvacModesCardFeatureConfig): void {
     this._config = config;
   }
 
@@ -82,7 +82,7 @@ export class HuiClimateHvacModesTileFeatureEditor
     switch (schema.name) {
       case "hvac_modes":
         return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.tile.features.types.climate-hvac-modes.${schema.name}`
+          `ui.panel.lovelace.editor.features.types.climate-hvac-modes.${schema.name}`
         );
       default:
         return this.hass!.localize(
@@ -94,6 +94,6 @@ export class HuiClimateHvacModesTileFeatureEditor
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-climate-hvac-modes-tile-feature-editor": HuiClimateHvacModesTileFeatureEditor;
+    "hui-climate-hvac-modes-card-feature-editor": HuiClimateHvacModesCardFeatureEditor;
   }
 }

src/panels/lovelace/editor/config-elements/hui-climate-preset-modes-card-feature-editor.ts

@@ -12,23 +12,23 @@ import type {
 } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import {
-  ClimatePresetModesTileFeatureConfig,
+  ClimatePresetModesCardFeatureConfig,
-  LovelaceTileFeatureContext,
+  LovelaceCardFeatureContext,
-} from "../../tile-features/types";
+} from "../../card-features/types";
-import type { LovelaceTileFeatureEditor } from "../../types";
+import type { LovelaceCardFeatureEditor } from "../../types";
 
-@customElement("hui-climate-preset-modes-tile-feature-editor")
+@customElement("hui-climate-preset-modes-card-feature-editor")
-export class HuiClimatePresetModesTileFeatureEditor
+export class HuiClimatePresetModesCardFeatureEditor
   extends LitElement
-  implements LovelaceTileFeatureEditor
+  implements LovelaceCardFeatureEditor
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ attribute: false }) public context?: LovelaceTileFeatureContext;
+  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
 
-  @state() private _config?: ClimatePresetModesTileFeatureConfig;
+  @state() private _config?: ClimatePresetModesCardFeatureConfig;
 
-  public setConfig(config: ClimatePresetModesTileFeatureConfig): void {
+  public setConfig(config: ClimatePresetModesCardFeatureConfig): void {
     this._config = config;
   }
 
@@ -48,7 +48,7 @@ export class HuiClimatePresetModesTileFeatureEditor
               options: ["dropdown", "icons"].map((mode) => ({
                 value: mode,
                 label: localize(
-                  `ui.panel.lovelace.editor.card.tile.features.types.climate-preset-modes.style_list.${mode}`
+                  `ui.panel.lovelace.editor.features.types.climate-preset-modes.style_list.${mode}`
                 ),
               })),
             },
@@ -84,7 +84,7 @@ export class HuiClimatePresetModesTileFeatureEditor
       ? this.hass.states[this.context?.entity_id]
       : undefined;
 
-    const data: ClimatePresetModesTileFeatureConfig = {
+    const data: ClimatePresetModesCardFeatureConfig = {
       style: "dropdown",
       preset_modes: [],
       ...this._config,
@@ -118,7 +118,7 @@ export class HuiClimatePresetModesTileFeatureEditor
       case "style":
       case "preset_modes":
         return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.tile.features.types.climate-preset-modes.${schema.name}`
+          `ui.panel.lovelace.editor.features.types.climate-preset-modes.${schema.name}`
         );
       default:
         return "";
@@ -128,6 +128,6 @@ export class HuiClimatePresetModesTileFeatureEditor
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-climate-preset-modes-tile-feature-editor": HuiClimatePresetModesTileFeatureEditor;
+    "hui-climate-preset-modes-card-feature-editor": HuiClimatePresetModesCardFeatureEditor;
   }
 }

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

@@ -16,13 +16,13 @@ import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import type { HumidifierCardConfig } from "../../cards/types";
 import {
-  LovelaceTileFeatureConfig,
+  LovelaceCardFeatureConfig,
-  LovelaceTileFeatureContext,
+  LovelaceCardFeatureContext,
-} from "../../tile-features/types";
+} from "../../card-features/types";
 import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditSubElementEvent, SubElementEditorConfig } from "../types";
-import "./hui-tile-card-features-editor";
+import "./hui-card-features-editor";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -38,7 +38,7 @@ const SCHEMA = [
   {
     name: "entity",
     required: true,
-    selector: { entity: { domain: "humidifer" } },
+    selector: { entity: { domain: "humidifier" } },
   },
   {
     type: "grid",
@@ -67,7 +67,7 @@ export class HuiHumidifierCardEditor
   }
 
   private _context = memoizeOne(
-    (entity_id?: string): LovelaceTileFeatureContext => ({ entity_id })
+    (entity_id?: string): LovelaceCardFeatureContext => ({ entity_id })
   );
 
   protected render() {
@@ -100,13 +100,13 @@ export class HuiHumidifierCardEditor
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
-      <hui-tile-card-features-editor
+      <hui-card-features-editor
         .hass=${this.hass}
         .stateObj=${stateObj}
         .features=${this._config!.features ?? []}
         @features-changed=${this._featuresChanged}
         @edit-detail-element=${this._editDetailElement}
-      ></hui-tile-card-features-editor>
+      ></hui-card-features-editor>
     `;
   }
 
@@ -120,7 +120,7 @@ export class HuiHumidifierCardEditor
       return;
     }
 
-    const features = ev.detail.features as LovelaceTileFeatureConfig[];
+    const features = ev.detail.features as LovelaceCardFeatureConfig[];
     const config: HumidifierCardConfig = {
       ...this._config,
       features,

src/panels/lovelace/editor/config-elements/hui-lawn-mower-commands-card-feature-editor.ts

@@ -6,26 +6,26 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
-import { supportsLawnMowerCommand } from "../../tile-features/hui-lawn-mower-commands-tile-feature";
+import { supportsLawnMowerCommand } from "../../card-features/hui-lawn-mower-commands-card-feature";
 import {
   LAWN_MOWER_COMMANDS,
-  LawnMowerCommandsTileFeatureConfig,
+  LawnMowerCommandsCardFeatureConfig,
-  LovelaceTileFeatureContext,
+  LovelaceCardFeatureContext,
-} from "../../tile-features/types";
+} from "../../card-features/types";
-import type { LovelaceTileFeatureEditor } from "../../types";
+import type { LovelaceCardFeatureEditor } from "../../types";
 
-@customElement("hui-lawn-mower-commands-tile-feature-editor")
+@customElement("hui-lawn-mower-commands-card-feature-editor")
-export class HuiLawnMowerCommandsTileFeatureEditor
+export class HuiLawnMowerCommandsCardFeatureEditor
   extends LitElement
-  implements LovelaceTileFeatureEditor
+  implements LovelaceCardFeatureEditor
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ attribute: false }) public context?: LovelaceTileFeatureContext;
+  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
 
-  @state() private _config?: LawnMowerCommandsTileFeatureConfig;
+  @state() private _config?: LawnMowerCommandsCardFeatureConfig;
 
-  public setConfig(config: LawnMowerCommandsTileFeatureConfig): void {
+  public setConfig(config: LawnMowerCommandsCardFeatureConfig): void {
     this._config = config;
   }
 
@@ -44,7 +44,7 @@ export class HuiLawnMowerCommandsTileFeatureEditor
               ).map((command) => ({
                 value: command,
                 label: `${localize(
-                  `ui.panel.lovelace.editor.card.tile.features.types.lawn-mower-commands.commands_list.${command}`
+                  `ui.panel.lovelace.editor.features.types.lawn-mower-commands.commands_list.${command}`
                 )}`,
               })),
             },
@@ -85,7 +85,7 @@ export class HuiLawnMowerCommandsTileFeatureEditor
     switch (schema.name) {
       case "commands":
         return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.tile.features.types.lawn-mower-commands.${schema.name}`
+          `ui.panel.lovelace.editor.features.types.lawn-mower-commands.${schema.name}`
         );
       default:
         return this.hass!.localize(
@@ -97,6 +97,6 @@ export class HuiLawnMowerCommandsTileFeatureEditor
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-lawn-mower-commands-tile-feature-editor": HuiLawnMowerCommandsTileFeatureEditor;
+    "hui-lawn-mower-commands-card-feature-editor": HuiLawnMowerCommandsCardFeatureEditor;
   }
 }

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

@@ -6,24 +6,24 @@ import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import {
-  NumberTileFeatureConfig,
+  NumberCardFeatureConfig,
-  LovelaceTileFeatureContext,
+  LovelaceCardFeatureContext,
-} from "../../tile-features/types";
+} from "../../card-features/types";
-import type { LovelaceTileFeatureEditor } from "../../types";
+import type { LovelaceCardFeatureEditor } from "../../types";
 import { LocalizeFunc } from "../../../../common/translations/localize";
 
-@customElement("hui-number-tile-feature-editor")
+@customElement("hui-number-card-feature-editor")
-export class HuiNumberTileFeatureEditor
+export class HuiNumberCardFeatureEditor
   extends LitElement
-  implements LovelaceTileFeatureEditor
+  implements LovelaceCardFeatureEditor
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ attribute: false }) public context?: LovelaceTileFeatureContext;
+  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
 
-  @state() private _config?: NumberTileFeatureConfig;
+  @state() private _config?: NumberCardFeatureConfig;
 
-  public setConfig(config: NumberTileFeatureConfig): void {
+  public setConfig(config: NumberCardFeatureConfig): void {
     this._config = config;
   }
 
@@ -39,7 +39,7 @@ export class HuiNumberTileFeatureEditor
               options: ["slider", "buttons"].map((mode) => ({
                 value: mode,
                 label: localize(
-                  `ui.panel.lovelace.editor.card.tile.features.types.number.style_list.${mode}`
+                  `ui.panel.lovelace.editor.features.types.number.style_list.${mode}`
                 ),
               })),
             },
@@ -53,7 +53,7 @@ export class HuiNumberTileFeatureEditor
       return nothing;
     }
 
-    const data: NumberTileFeatureConfig = {
+    const data: NumberCardFeatureConfig = {
       style: "buttons",
       ...this._config,
     };
@@ -79,12 +79,12 @@ export class HuiNumberTileFeatureEditor
     schema: SchemaUnion<ReturnType<typeof this._schema>>
   ) =>
     this.hass!.localize(
-      `ui.panel.lovelace.editor.card.tile.features.types.number.${schema.name}`
+      `ui.panel.lovelace.editor.features.types.number.${schema.name}`
     );
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-number-tile-feature-editor": HuiNumberTileFeatureEditor;
+    "hui-number-card-feature-editor": HuiNumberCardFeatureEditor;
   }
 }

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

@@ -16,15 +16,15 @@ import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import type { ThermostatCardConfig } from "../../cards/types";
 import {
-  LovelaceTileFeatureConfig,
+  LovelaceCardFeatureConfig,
-  LovelaceTileFeatureContext,
+  LovelaceCardFeatureContext,
-} from "../../tile-features/types";
+} from "../../card-features/types";
 import type { LovelaceCardEditor } from "../../types";
 import "../hui-sub-element-editor";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditSubElementEvent, SubElementEditorConfig } from "../types";
-import "./hui-tile-card-features-editor";
+import "./hui-card-features-editor";
-import type { FeatureType } from "./hui-tile-card-features-editor";
+import type { FeatureType } from "./hui-card-features-editor";
 
 const COMPATIBLE_FEATURES_TYPES: FeatureType[] = [
   "climate-hvac-modes",
@@ -70,7 +70,7 @@ export class HuiThermostatCardEditor
   }
 
   private _context = memoizeOne(
-    (entity_id?: string): LovelaceTileFeatureContext => ({ entity_id })
+    (entity_id?: string): LovelaceCardFeatureContext => ({ entity_id })
   );
 
   protected render() {
@@ -103,14 +103,14 @@ export class HuiThermostatCardEditor
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
-      <hui-tile-card-features-editor
+      <hui-card-features-editor
         .hass=${this.hass}
         .stateObj=${stateObj}
         .featuresTypes=${COMPATIBLE_FEATURES_TYPES}
         .features=${this._config!.features ?? []}
         @features-changed=${this._featuresChanged}
         @edit-detail-element=${this._editDetailElement}
-      ></hui-tile-card-features-editor>
+      ></hui-card-features-editor>
     `;
   }
 
@@ -124,7 +124,7 @@ export class HuiThermostatCardEditor
       return;
     }
 
-    const features = ev.detail.features as LovelaceTileFeatureConfig[];
+    const features = ev.detail.features as LovelaceCardFeatureConfig[];
     const config: ThermostatCardConfig = {
       ...this._config,
       features,

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

@@ -24,19 +24,19 @@ import type {
   SchemaUnion,
 } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
-import type { TileCardConfig } from "../../cards/types";
 import {
-  LovelaceTileFeatureConfig,
+  LovelaceCardFeatureConfig,
-  LovelaceTileFeatureContext,
+  LovelaceCardFeatureContext,
-} from "../../tile-features/types";
+} from "../../card-features/types";
+import { getEntityDefaultTileIconAction } from "../../cards/hui-tile-card";
+import type { TileCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import "../hui-sub-element-editor";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditSubElementEvent, SubElementEditorConfig } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import "./hui-tile-card-features-editor";
+import "./hui-card-features-editor";
-import { getEntityDefaultTileIconAction } from "../../cards/hui-tile-card";
 
 const HIDDEN_ATTRIBUTES = [
   "access_token",
@@ -246,7 +246,7 @@ export class HuiTileCardEditor
   );
 
   private _context = memoizeOne(
-    (entity_id?: string): LovelaceTileFeatureContext => ({ entity_id })
+    (entity_id?: string): LovelaceCardFeatureContext => ({ entity_id })
   );
 
   protected render() {
@@ -292,13 +292,13 @@ export class HuiTileCardEditor
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
-      <hui-tile-card-features-editor
+      <hui-card-features-editor
         .hass=${this.hass}
         .stateObj=${stateObj}
         .features=${this._config!.features ?? []}
         @features-changed=${this._featuresChanged}
         @edit-detail-element=${this._editDetailElement}
-      ></hui-tile-card-features-editor>
+      ></hui-card-features-editor>
     `;
   }
 
@@ -336,7 +336,7 @@ export class HuiTileCardEditor
       return;
     }
 
-    const features = ev.detail.features as LovelaceTileFeatureConfig[];
+    const features = ev.detail.features as LovelaceCardFeatureConfig[];
     const config: TileCardConfig = {
       ...this._config,
       features,

src/panels/lovelace/editor/config-elements/hui-vacuum-commands-card-feature-editor.ts

@@ -6,26 +6,26 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
-import { supportsVacuumCommand } from "../../tile-features/hui-vacuum-commands-tile-feature";
+import { supportsVacuumCommand } from "../../card-features/hui-vacuum-commands-card-feature";
 import {
-  LovelaceTileFeatureContext,
+  LovelaceCardFeatureContext,
-  VacuumCommandsTileFeatureConfig,
+  VacuumCommandsCardFeatureConfig,
   VACUUM_COMMANDS,
-} from "../../tile-features/types";
+} from "../../card-features/types";
-import type { LovelaceTileFeatureEditor } from "../../types";
+import type { LovelaceCardFeatureEditor } from "../../types";
 
-@customElement("hui-vacuum-commands-tile-feature-editor")
+@customElement("hui-vacuum-commands-card-feature-editor")
-export class HuiVacuumCommandsTileFeatureEditor
+export class HuiVacuumCommandsCardFeatureEditor
   extends LitElement
-  implements LovelaceTileFeatureEditor
+  implements LovelaceCardFeatureEditor
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ attribute: false }) public context?: LovelaceTileFeatureContext;
+  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
 
-  @state() private _config?: VacuumCommandsTileFeatureConfig;
+  @state() private _config?: VacuumCommandsCardFeatureConfig;
 
-  public setConfig(config: VacuumCommandsTileFeatureConfig): void {
+  public setConfig(config: VacuumCommandsCardFeatureConfig): void {
     this._config = config;
   }
 
@@ -44,7 +44,7 @@ export class HuiVacuumCommandsTileFeatureEditor
               ).map((command) => ({
                 value: command,
                 label: `${localize(
-                  `ui.panel.lovelace.editor.card.tile.features.types.vacuum-commands.commands_list.${command}`
+                  `ui.panel.lovelace.editor.features.types.vacuum-commands.commands_list.${command}`
                 )}`,
               })),
             },
@@ -85,7 +85,7 @@ export class HuiVacuumCommandsTileFeatureEditor
     switch (schema.name) {
       case "commands":
         return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.tile.features.types.vacuum-commands.${schema.name}`
+          `ui.panel.lovelace.editor.features.types.vacuum-commands.${schema.name}`
         );
       default:
         return this.hass!.localize(
@@ -97,6 +97,6 @@ export class HuiVacuumCommandsTileFeatureEditor
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-vacuum-commands-tile-feature-editor": HuiVacuumCommandsTileFeatureEditor;
+    "hui-vacuum-commands-card-feature-editor": HuiVacuumCommandsCardFeatureEditor;
   }
 }

src/panels/lovelace/editor/config-elements/hui-water-heater-operation-modes-card-feature-editor.ts

@@ -8,24 +8,24 @@ import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import {
-  WaterHeaterOperationModesTileFeatureConfig,
+  WaterHeaterOperationModesCardFeatureConfig,
-  LovelaceTileFeatureContext,
+  LovelaceCardFeatureContext,
-} from "../../tile-features/types";
+} from "../../card-features/types";
-import type { LovelaceTileFeatureEditor } from "../../types";
+import type { LovelaceCardFeatureEditor } from "../../types";
 import { OPERATION_MODES } from "../../../../data/water_heater";
 
-@customElement("hui-water-heater-operation-modes-tile-feature-editor")
+@customElement("hui-water-heater-operation-modes-card-feature-editor")
-export class HuiWaterHeaterOperationModesTileFeatureEditor
+export class HuiWaterHeaterOperationModesCardFeatureEditor
   extends LitElement
-  implements LovelaceTileFeatureEditor
+  implements LovelaceCardFeatureEditor
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ attribute: false }) public context?: LovelaceTileFeatureContext;
+  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
 
-  @state() private _config?: WaterHeaterOperationModesTileFeatureConfig;
+  @state() private _config?: WaterHeaterOperationModesCardFeatureConfig;
 
-  public setConfig(config: WaterHeaterOperationModesTileFeatureConfig): void {
+  public setConfig(config: WaterHeaterOperationModesCardFeatureConfig): void {
     this._config = config;
   }
 
@@ -82,7 +82,7 @@ export class HuiWaterHeaterOperationModesTileFeatureEditor
     switch (schema.name) {
       case "operation_modes":
         return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.tile.features.types.water-heater-modes.${schema.name}`
+          `ui.panel.lovelace.editor.features.types.water-heater-modes.${schema.name}`
         );
       default:
         return this.hass!.localize(
@@ -94,6 +94,6 @@ export class HuiWaterHeaterOperationModesTileFeatureEditor
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-water-heater-operation-modes-tile-feature-editor": HuiWaterHeaterOperationModesTileFeatureEditor;
+    "hui-water-heater-operation-modes-card-feature-editor": HuiWaterHeaterOperationModesCardFeatureEditor;
   }
 }

src/panels/lovelace/editor/feature-editor/hui-card-feature-element-editor.ts

@@ -1,24 +1,24 @@
 import { customElement } from "lit/decorators";
-import { getTileFeatureElementClass } from "../../create-element/create-tile-feature-element";
+import { getCardFeatureElementClass } from "../../create-element/create-card-feature-element";
 import {
-  LovelaceTileFeatureConfig,
+  LovelaceCardFeatureConfig,
-  LovelaceTileFeatureContext,
+  LovelaceCardFeatureContext,
-} from "../../tile-features/types";
+} from "../../card-features/types";
 import type {
   LovelaceConfigForm,
-  LovelaceTileFeatureEditor,
+  LovelaceCardFeatureEditor,
 } from "../../types";
 import { HuiElementEditor } from "../hui-element-editor";
 
-@customElement("hui-tile-feature-element-editor")
+@customElement("hui-card-feature-element-editor")
-export class HuiTileFeatureElementEditor extends HuiElementEditor<
+export class HuiCardFeatureElementEditor extends HuiElementEditor<
-  LovelaceTileFeatureConfig,
+  LovelaceCardFeatureConfig,
-  LovelaceTileFeatureContext
+  LovelaceCardFeatureContext
 > {
   protected async getConfigElement(): Promise<
-    LovelaceTileFeatureEditor | undefined
+    LovelaceCardFeatureEditor | undefined
   > {
-    const elClass = await getTileFeatureElementClass(this.configElementType!);
+    const elClass = await getCardFeatureElementClass(this.configElementType!);
 
     // Check if a GUI editor exists
     if (elClass && elClass.getConfigElement) {
@@ -29,7 +29,7 @@ export class HuiTileFeatureElementEditor extends HuiElementEditor<
   }
 
   protected async getConfigForm(): Promise<LovelaceConfigForm | undefined> {
-    const elClass = await getTileFeatureElementClass(this.configElementType!);
+    const elClass = await getCardFeatureElementClass(this.configElementType!);
 
     // Check if a schema exists
     if (elClass && elClass.getConfigForm) {
@@ -42,6 +42,6 @@ export class HuiTileFeatureElementEditor extends HuiElementEditor<
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-tile-feature-element-editor": HuiTileFeatureElementEditor;
+    "hui-card-feature-element-editor": HuiCardFeatureElementEditor;
   }
 }

src/panels/lovelace/editor/hui-element-editor.ts

@@ -22,7 +22,7 @@ import { LovelaceConfig } from "../../../data/lovelace/config/types";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceRowConfig } from "../entity-rows/types";
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
-import { LovelaceTileFeatureConfig } from "../tile-features/types";
+import { LovelaceCardFeatureConfig } from "../card-features/types";
 import type {
   LovelaceConfigForm,
   LovelaceGenericElementEditor,
@@ -37,7 +37,7 @@ export interface ConfigChangedEvent {
     | LovelaceCardConfig
     | LovelaceRowConfig
     | LovelaceHeaderFooterConfig
-    | LovelaceTileFeatureConfig
+    | LovelaceCardFeatureConfig
     | LovelaceStrategyConfig;
   error?: string;
   guiModeAvailable?: boolean;
@@ -57,7 +57,7 @@ export interface UIConfigChangedEvent extends Event {
       | LovelaceCardConfig
       | LovelaceRowConfig
       | LovelaceHeaderFooterConfig
-      | LovelaceTileFeatureConfig;
+      | LovelaceCardFeatureConfig;
   };
 }
 

src/panels/lovelace/editor/hui-sub-element-editor.ts

@@ -10,7 +10,7 @@ import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
 import "./entity-row-editor/hui-row-element-editor";
 import "./header-footer-editor/hui-header-footer-element-editor";
 import type { HuiElementEditor } from "./hui-element-editor";
-import "./tile-feature-editor/hui-tile-feature-element-editor";
+import "./feature-editor/hui-card-feature-element-editor";
 import type { GUIModeChangedEvent, SubElementEditorConfig } from "./types";
 
 declare global {
@@ -84,16 +84,16 @@ export class HuiSubElementEditor extends LitElement {
                 @GUImode-changed=${this._handleGUIModeChanged}
               ></hui-headerfooter-element-editor>
             `
-          : this.config.type === "tile-feature"
+          : this.config.type === "feature"
             ? html`
-                <hui-tile-feature-element-editor
+                <hui-card-feature-element-editor
                   class="editor"
                   .hass=${this.hass}
                   .value=${this.config.elementConfig}
                   .context=${this.context}
                   @config-changed=${this._handleConfigChanged}
                   @GUImode-changed=${this._handleGUIModeChanged}
-                ></hui-tile-feature-element-editor>
+                ></hui-card-feature-element-editor>
               `
             : ""}
     `;

src/panels/lovelace/editor/types.ts

@@ -6,7 +6,7 @@ import {
 } from "../../../data/lovelace/config/view";
 import { EntityConfig, LovelaceRowConfig } from "../entity-rows/types";
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
-import { LovelaceTileFeatureConfig } from "../tile-features/types";
+import { LovelaceCardFeatureConfig } from "../card-features/types";
 
 export interface YamlChangedEvent extends Event {
   detail: {
@@ -78,8 +78,8 @@ export interface SubElementEditorConfig {
   elementConfig?:
     | LovelaceRowConfig
     | LovelaceHeaderFooterConfig
-    | LovelaceTileFeatureConfig;
+    | LovelaceCardFeatureConfig;
-  type: "header" | "footer" | "row" | "tile-feature";
+  type: "header" | "footer" | "row" | "feature";
 }
 
 export interface EditSubElementEvent {

src/panels/lovelace/tile-features/types.ts

@@ -1,116 +0,0 @@
-import { AlarmMode } from "../../../data/alarm_control_panel";
-import { HvacMode } from "../../../data/climate";
-import { OperationMode } from "../../../data/water_heater";
-
-export interface CoverOpenCloseTileFeatureConfig {
-  type: "cover-open-close";
-}
-
-export interface CoverPositionTileFeatureConfig {
-  type: "cover-position";
-}
-
-export interface CoverTiltTileFeatureConfig {
-  type: "cover-tilt";
-}
-
-export interface CoverTiltPositionTileFeatureConfig {
-  type: "cover-tilt-position";
-}
-
-export interface LightBrightnessTileFeatureConfig {
-  type: "light-brightness";
-}
-
-export interface LightColorTempTileFeatureConfig {
-  type: "light-color-temp";
-}
-
-export interface FanSpeedTileFeatureConfig {
-  type: "fan-speed";
-}
-
-export interface AlarmModesTileFeatureConfig {
-  type: "alarm-modes";
-  modes?: AlarmMode[];
-}
-
-export interface ClimateHvacModesTileFeatureConfig {
-  type: "climate-hvac-modes";
-  hvac_modes?: HvacMode[];
-}
-
-export interface ClimatePresetModesTileFeatureConfig {
-  type: "climate-preset-modes";
-  style?: "dropdown" | "icons";
-  preset_modes?: string[];
-}
-
-export interface SelectOptionsTileFeatureConfig {
-  type: "select-options";
-}
-
-export interface NumberTileFeatureConfig {
-  type: "number";
-  style?: "buttons" | "slider";
-}
-
-export interface TargetTemperatureTileFeatureConfig {
-  type: "target-temperature";
-}
-
-export interface WaterHeaterOperationModesTileFeatureConfig {
-  type: "water-heater-operation-modes";
-  operation_modes?: OperationMode[];
-}
-
-export interface HumidifierModesTileFeatureConfig {
-  type: "humidifier-modes";
-}
-
-export const VACUUM_COMMANDS = [
-  "start_pause",
-  "stop",
-  "clean_spot",
-  "locate",
-  "return_home",
-] as const;
-
-export type VacuumCommand = (typeof VACUUM_COMMANDS)[number];
-
-export interface VacuumCommandsTileFeatureConfig {
-  type: "vacuum-commands";
-  commands?: VacuumCommand[];
-}
-
-export const LAWN_MOWER_COMMANDS = ["start_pause", "dock"] as const;
-
-export type LawnMowerCommand = (typeof LAWN_MOWER_COMMANDS)[number];
-
-export interface LawnMowerCommandsTileFeatureConfig {
-  type: "lawn-mower-commands";
-  commands?: LawnMowerCommand[];
-}
-
-export type LovelaceTileFeatureConfig =
-  | AlarmModesTileFeatureConfig
-  | ClimateHvacModesTileFeatureConfig
-  | ClimatePresetModesTileFeatureConfig
-  | CoverOpenCloseTileFeatureConfig
-  | CoverPositionTileFeatureConfig
-  | CoverTiltPositionTileFeatureConfig
-  | CoverTiltTileFeatureConfig
-  | FanSpeedTileFeatureConfig
-  | HumidifierModesTileFeatureConfig
-  | LawnMowerCommandsTileFeatureConfig
-  | LightBrightnessTileFeatureConfig
-  | LightColorTempTileFeatureConfig
-  | VacuumCommandsTileFeatureConfig
-  | TargetTemperatureTileFeatureConfig
-  | WaterHeaterOperationModesTileFeatureConfig
-  | SelectOptionsTileFeatureConfig
-  | NumberTileFeatureConfig;
-
-export type LovelaceTileFeatureContext = {
-  entity_id?: string;
-};

src/panels/lovelace/types.ts

@@ -11,7 +11,7 @@ import { FrontendLocaleData } from "../../data/translation";
 import { Constructor, HomeAssistant } from "../../types";
 import { LovelaceRow, LovelaceRowConfig } from "./entity-rows/types";
 import { LovelaceHeaderFooterConfig } from "./header-footer/types";
-import { LovelaceTileFeatureConfig } from "./tile-features/types";
+import { LovelaceCardFeatureConfig } from "./card-features/types";
 
 declare global {
   // eslint-disable-next-line
@@ -112,20 +112,20 @@ export interface LovelaceGenericElementEditor<C = any> extends HTMLElement {
   focusYamlEditor?: () => void;
 }
 
-export interface LovelaceTileFeature extends HTMLElement {
+export interface LovelaceCardFeature extends HTMLElement {
   hass?: HomeAssistant;
   stateObj?: HassEntity;
-  setConfig(config: LovelaceTileFeatureConfig);
+  setConfig(config: LovelaceCardFeatureConfig);
   color?: string;
 }
 
-export interface LovelaceTileFeatureConstructor
+export interface LovelaceCardFeatureConstructor
-  extends Constructor<LovelaceTileFeature> {
+  extends Constructor<LovelaceCardFeature> {
   getStubConfig?: (
     hass: HomeAssistant,
     stateObj?: HassEntity
-  ) => LovelaceTileFeatureConfig;
+  ) => LovelaceCardFeatureConfig;
-  getConfigElement?: () => LovelaceTileFeatureEditor;
+  getConfigElement?: () => LovelaceCardFeatureEditor;
   getConfigForm?: () => {
     schema: HaFormSchema[];
     assertConfig?: (config: LovelaceCardConfig) => void;
@@ -133,7 +133,7 @@ export interface LovelaceTileFeatureConstructor
   isSupported?: (stateObj?: HassEntity) => boolean;
 }
 
-export interface LovelaceTileFeatureEditor
+export interface LovelaceCardFeatureEditor
   extends LovelaceGenericElementEditor {
-  setConfig(config: LovelaceTileFeatureConfig): void;
+  setConfig(config: LovelaceCardFeatureConfig): void;
 }

src/translations/en.json

@@ -5154,99 +5154,6 @@
               "state_content_options": {
                 "state": "State",
                 "last-changed": "Last changed"
-              },
-              "features": {
-                "name": "Features",
-                "not_compatible": "Not compatible",
-                "no_compatible_available": "No compatible features available for this entity",
-                "add": "Add feature",
-                "edit": "Edit feature",
-                "remove": "Remove feature",
-                "types": {
-                  "cover-open-close": {
-                    "label": "Cover open/close"
-                  },
-                  "cover-position": {
-                    "label": "Cover position"
-                  },
-                  "cover-tilt": {
-                    "label": "Cover tilt"
-                  },
-                  "cover-tilt-position": {
-                    "label": "Cover tilt position"
-                  },
-                  "fan-speed": {
-                    "label": "Fan speed"
-                  },
-                  "alarm-modes": {
-                    "label": "Alarm modes",
-                    "modes": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes_label%]",
-                    "modes_list": {
-                      "armed_away": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_away%]",
-                      "armed_home": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_home%]",
-                      "armed_night": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_night%]",
-                      "armed_vacation": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_vacation%]",
-                      "armed_custom_bypass": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_custom_bypass%]",
-                      "disarmed": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::disarmed%]"
-                    }
-                  },
-                  "light-brightness": {
-                    "label": "Light brightness"
-                  },
-                  "light-color-temp": {
-                    "label": "Light color temperature"
-                  },
-                  "vacuum-commands": {
-                    "label": "Vacuum commands",
-                    "commands": "Commands",
-                    "commands_list": {
-                      "start_pause": "[%key:ui::dialogs::more_info_control::vacuum::start_pause%]",
-                      "stop": "[%key:ui::dialogs::more_info_control::vacuum::stop%]",
-                      "clean_spot": "[%key:ui::dialogs::more_info_control::vacuum::clean_spot%]",
-                      "locate": "[%key:ui::dialogs::more_info_control::vacuum::locate%]",
-                      "return_home": "[%key:ui::dialogs::more_info_control::vacuum::return_home%]"
-                    }
-                  },
-                  "climate-hvac-modes": {
-                    "label": "Climate HVAC modes",
-                    "hvac_modes": "HVAC modes"
-                  },
-                  "climate-preset-modes": {
-                    "label": "Climate preset modes",
-                    "style": "Style",
-                    "style_list": {
-                      "dropdown": "Dropdown",
-                      "icons": "Icons"
-                    },
-                    "preset_modes": "Preset modes"
-                  },
-                  "select-options": {
-                    "label": "Select options"
-                  },
-                  "number": {
-                    "label": "Number",
-                    "style": "Style",
-                    "style_list": {
-                      "buttons": "Buttons",
-                      "slider": "Slider"
-                    }
-                  },
-                  "target-temperature": {
-                    "label": "Target temperature"
-                  },
-                  "water-heater-operation-modes": {
-                    "label": "Water heater operation modes",
-                    "operation_modes": "Operation modes"
-                  },
-                  "lawn-mower-commands": {
-                    "label": "Lawn mower commands",
-                    "commands": "Commands",
-                    "commands_list": {
-                      "start_pause": "Start Pause",
-                      "dock": "[%key:ui::dialogs::more_info_control::lawn_mower::dock%]"
-                    }
-                  }
-                }
               }
             },
             "vertical-stack": {
@@ -5267,6 +5174,102 @@
               "twice_daily": "Twice daily"
             }
           },
+          "features": {
+            "name": "Features",
+            "not_compatible": "Not compatible",
+            "no_compatible_available": "No compatible features available for this entity",
+            "add": "Add feature",
+            "edit": "Edit feature",
+            "remove": "Remove feature",
+            "types": {
+              "cover-open-close": {
+                "label": "Cover open/close"
+              },
+              "cover-position": {
+                "label": "Cover position"
+              },
+              "cover-tilt": {
+                "label": "Cover tilt"
+              },
+              "cover-tilt-position": {
+                "label": "Cover tilt position"
+              },
+              "fan-speed": {
+                "label": "Fan speed"
+              },
+              "alarm-modes": {
+                "label": "Alarm modes",
+                "modes": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes_label%]",
+                "modes_list": {
+                  "armed_away": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_away%]",
+                  "armed_home": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_home%]",
+                  "armed_night": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_night%]",
+                  "armed_vacation": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_vacation%]",
+                  "armed_custom_bypass": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_custom_bypass%]",
+                  "disarmed": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::disarmed%]"
+                }
+              },
+              "light-brightness": {
+                "label": "Light brightness"
+              },
+              "light-color-temp": {
+                "label": "Light color temperature"
+              },
+              "vacuum-commands": {
+                "label": "Vacuum commands",
+                "commands": "Commands",
+                "commands_list": {
+                  "start_pause": "[%key:ui::dialogs::more_info_control::vacuum::start_pause%]",
+                  "stop": "[%key:ui::dialogs::more_info_control::vacuum::stop%]",
+                  "clean_spot": "[%key:ui::dialogs::more_info_control::vacuum::clean_spot%]",
+                  "locate": "[%key:ui::dialogs::more_info_control::vacuum::locate%]",
+                  "return_home": "[%key:ui::dialogs::more_info_control::vacuum::return_home%]"
+                }
+              },
+              "climate-hvac-modes": {
+                "label": "Climate HVAC modes",
+                "hvac_modes": "HVAC modes"
+              },
+              "climate-preset-modes": {
+                "label": "Climate preset modes",
+                "style": "Style",
+                "style_list": {
+                  "dropdown": "Dropdown",
+                  "icons": "Icons"
+                },
+                "preset_modes": "Preset modes"
+              },
+              "humidifier-modes": {
+                "label": "Humidifier modes"
+              },
+              "select-options": {
+                "label": "Select options"
+              },
+              "number": {
+                "label": "Number",
+                "style": "Style",
+                "style_list": {
+                  "buttons": "Buttons",
+                  "slider": "Slider"
+                }
+              },
+              "target-temperature": {
+                "label": "Target temperature"
+              },
+              "water-heater-operation-modes": {
+                "label": "Water heater operation modes",
+                "operation_modes": "Operation modes"
+              },
+              "lawn-mower-commands": {
+                "label": "Lawn mower commands",
+                "commands": "Commands",
+                "commands_list": {
+                  "start_pause": "Start Pause",
+                  "dock": "[%key:ui::dialogs::more_info_control::lawn_mower::dock%]"
+                }
+              }
+            }
+          },
           "strategy": {
             "original-states": {
               "hidden_areas": "Hidden Areas",
@@ -5340,7 +5343,7 @@
               "header": "Header editor",
               "footer": "Footer editor",
               "row": "Entity row editor",
-              "tile-feature": "Tile feature editor"
+              "feature": "Feature editor"
             }
           }
         },