Fix property visibility mismatches (2 of 2) (#19448)

gallery/src/components/demo-more-infos.ts

@@ -1,11 +1,11 @@
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
-import "./demo-more-info";
-import "../ha-demo-options";
 import { HomeAssistant } from "../../../src/types";
+import "../ha-demo-options";
+import "./demo-more-info";
 
 @customElement("demo-more-infos")
 class DemoMoreInfos extends LitElement {
@@ -13,7 +13,7 @@ class DemoMoreInfos extends LitElement {
 
   @property() public entities!: [];
 
-  @property({ attribute: false }) _showConfig: boolean = false;
+  @state() private _showConfig = false;
 
   render() {
     return html`

hassio/src/dialogs/backup/dialog-hassio-backup-location.ts

@@ -27,8 +27,7 @@ const SCHEMA = memoizeOne(
 class HassioBackupLocationDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false })
-  public _dialogParams?: HassioBackupLocationDialogParams;
+  @state() private _dialogParams?: HassioBackupLocationDialogParams;
 
   @state() private _data?: { default_backup_mount: string | null };
 

src/components/entity/ha-entity-attribute-picker.ts

@@ -1,8 +1,8 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { LitElement, PropertyValues, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
-import { ValueChangedEvent, HomeAssistant } from "../../types";
+import { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
 
@@ -37,7 +37,7 @@ class HaEntityAttributePicker extends LitElement {
 
   @property() public helper?: string;
 
-  @property({ type: Boolean }) private _opened = false;
+  @state() private _opened = false;
 
   @query("ha-combo-box", true) private _comboBox!: HaComboBox;
 
@@ -47,15 +47,17 @@ class HaEntityAttributePicker extends LitElement {
 
   protected updated(changedProps: PropertyValues) {
     if (changedProps.has("_opened") && this._opened) {
-      const state = this.entityId ? this.hass.states[this.entityId] : undefined;
-      (this._comboBox as any).items = state
-        ? Object.keys(state.attributes)
+      const entityState = this.entityId
+        ? this.hass.states[this.entityId]
+        : undefined;
+      (this._comboBox as any).items = entityState
+        ? Object.keys(entityState.attributes)
             .filter((key) => !this.hideAttributes?.includes(key))
             .map((key) => ({
               value: key,
               label: computeAttributeNameDisplay(
                 this.hass.localize,
-                state,
+                entityState,
                 this.hass.entities,
                 key
               ),

src/components/entity/ha-entity-state-picker.ts

@@ -1,6 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { LitElement, PropertyValues, html, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { getStates } from "../../common/entity/get_states";
 import { HomeAssistant, ValueChangedEvent } from "../../types";
@@ -17,7 +17,7 @@ class HaEntityStatePicker extends LitElement {
 
   @property() public attribute?: string;
 
-  @property() public extraOptions?: any[];
+  @property({ attribute: false }) public extraOptions?: any[];
 
   @property({ type: Boolean }) public autofocus = false;
 
@@ -34,7 +34,7 @@ class HaEntityStatePicker extends LitElement {
 
   @property() public helper?: string;
 
-  @property({ type: Boolean }) private _opened = false;
+  @state() private _opened = false;
 
   @query("ha-combo-box", true) private _comboBox!: HaComboBox;
 
@@ -49,16 +49,18 @@ class HaEntityStatePicker extends LitElement {
       changedProps.has("attribute") ||
       changedProps.has("extraOptions")
     ) {
-      const state = this.entityId ? this.hass.states[this.entityId] : undefined;
+      const stateObj = this.entityId
+        ? this.hass.states[this.entityId]
+        : undefined;
       (this._comboBox as any).items = [
         ...(this.extraOptions ?? []),
-        ...(this.entityId && state
-          ? getStates(state, this.attribute).map((key) => ({
+        ...(this.entityId && stateObj
+          ? getStates(stateObj, this.attribute).map((key) => ({
               value: key,
               label: !this.attribute
-                ? this.hass.formatEntityState(state, key)
+                ? this.hass.formatEntityState(stateObj, key)
                 : this.hass.formatEntityAttributeValue(
-                    state,
+                    stateObj,
                     this.attribute,
                     key
                   ),

src/components/entity/state-badge.ts

@@ -36,8 +36,8 @@ export class StateBadge extends LitElement {
 
   @property() public color?: string;
 
-  @property({ type: Boolean, reflect: true, attribute: "icon" })
-  private _showIcon = true;
+  // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
+  @property({ type: Boolean, reflect: true }) public icon = true;
 
   @state() private _iconStyle: { [name: string]: string | undefined } = {};
 
@@ -83,7 +83,7 @@ export class StateBadge extends LitElement {
       </div>`;
     }
 
-    if (!this._showIcon) {
+    if (!this.icon) {
       return nothing;
     }
 
@@ -98,7 +98,7 @@ export class StateBadge extends LitElement {
     ></ha-state-icon>`;
   }
 
-  public willUpdate(changedProps: PropertyValues) {
+  public willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
     if (
       !changedProps.has("stateObj") &&
@@ -114,7 +114,7 @@ export class StateBadge extends LitElement {
     const iconStyle: { [name: string]: string } = {};
     let backgroundImage = "";
 
-    this._showIcon = true;
+    this.icon = true;
 
     if (stateObj && this.overrideImage === undefined) {
       // hide icon if we have entity picture
@@ -134,7 +134,7 @@ export class StateBadge extends LitElement {
           imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
         }
         backgroundImage = `url(${imageUrl})`;
-        this._showIcon = false;
+        this.icon = false;
         if (domain === "update") {
           this.style.borderRadius = "0";
         } else if (domain === "media_player") {
@@ -180,7 +180,7 @@ export class StateBadge extends LitElement {
         imageUrl = this.hass.hassUrl(imageUrl);
       }
       backgroundImage = `url(${imageUrl})`;
-      this._showIcon = false;
+      this.icon = false;
     }
 
     this._iconStyle = iconStyle;

src/components/ha-date-range-picker.ts

@@ -61,11 +61,11 @@ export class HaDateRangePicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) private _hour24format = false;
+  @property({ type: Boolean }) public minimal = false;
 
-  @property({ type: String }) private _rtlDirection = "ltr";
+  @state() private _hour24format = false;
 
-  @property({ type: Boolean }) private minimal = false;
+  @state() private _rtlDirection = "ltr";
 
   @property({ type: Boolean }) public extendedPresets = false;
 

src/components/media-player/ha-media-player-browse.ts

@@ -92,14 +92,13 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @property({ type: Boolean }) public dialog = false;
 
-  @property() public navigateIds!: MediaPlayerItemId[];
+  @property({ attribute: false }) public navigateIds: MediaPlayerItemId[] = [];
 
-  @property({ type: Boolean, attribute: "narrow", reflect: true })
-  // @ts-ignore
-  private _narrow = false;
+  // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
+  @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @property({ type: Boolean, attribute: "scroll", reflect: true })
-  private _scrolled = false;
+  // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
+  @property({ type: Boolean, reflect: true }) public scrolled = false;
 
   @state() private _error?: { message: string; code: string };
 
@@ -178,7 +177,7 @@ export class HaMediaPlayerBrowse extends LitElement {
 
     // We're navigating. Reset the shizzle.
     this._content?.scrollTo(0, 0);
-    this._scrolled = false;
+    this.scrolled = false;
     const oldCurrentItem = this._currentItem;
     const oldParentItem = this._parentItem;
     this._currentItem = undefined;
@@ -373,7 +372,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                                     ""
                                   )}"
                                 >
-                                  ${this._narrow && currentItem?.can_play
+                                  ${this.narrow && currentItem?.can_play
                                     ? html`
                                         <ha-fab
                                           mini
@@ -406,7 +405,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                                 : ""}
                             </div>
                             ${currentItem.can_play &&
-                            (!currentItem.thumbnail || !this._narrow)
+                            (!currentItem.thumbnail || !this.narrow)
                               ? html`
                                   <mwc-button
                                     raised
@@ -769,7 +768,7 @@ export class HaMediaPlayerBrowse extends LitElement {
   }
 
   private _measureCard(): void {
-    this._narrow = (this.dialog ? window.innerWidth : this.offsetWidth) < 450;
+    this.narrow = (this.dialog ? window.innerWidth : this.offsetWidth) < 450;
   }
 
   private async _attachResizeObserver(): Promise<void> {
@@ -868,10 +867,10 @@ export class HaMediaPlayerBrowse extends LitElement {
   @eventOptions({ passive: true })
   private _scroll(ev: Event): void {
     const content = ev.currentTarget as HTMLDivElement;
-    if (!this._scrolled && content.scrollTop > this._headerOffsetHeight) {
-      this._scrolled = true;
-    } else if (this._scrolled && content.scrollTop < this._headerOffsetHeight) {
-      this._scrolled = false;
+    if (!this.scrolled && content.scrollTop > this._headerOffsetHeight) {
+      this.scrolled = true;
+    } else if (this.scrolled && content.scrollTop < this._headerOffsetHeight) {
+      this.scrolled = false;
     }
   }
 
@@ -1266,58 +1265,58 @@ export class HaMediaPlayerBrowse extends LitElement {
         }
 
         /* ============= Scroll ============= */
-        :host([scroll]) .breadcrumb .subtitle {
+        :host([scrolled]) .breadcrumb .subtitle {
           height: 0;
           margin: 0;
         }
-        :host([scroll]) .breadcrumb .title {
+        :host([scrolled]) .breadcrumb .title {
           -webkit-line-clamp: 1;
         }
-        :host(:not([narrow])[scroll]) .header:not(.no-img) ha-icon-button {
+        :host(:not([narrow])[scrolled]) .header:not(.no-img) ha-icon-button {
           align-self: center;
         }
-        :host([scroll]) .header-info mwc-button,
+        :host([scrolled]) .header-info mwc-button,
         .no-img .header-info mwc-button {
           padding-right: 4px;
         }
-        :host([scroll][narrow]) .no-img .header-info mwc-button {
+        :host([scrolled][narrow]) .no-img .header-info mwc-button {
           padding-right: 16px;
         }
-        :host([scroll]) .header-info {
+        :host([scrolled]) .header-info {
           flex-direction: row;
         }
-        :host([scroll]) .header-info mwc-button {
+        :host([scrolled]) .header-info mwc-button {
           align-self: center;
           margin-top: 0;
           margin-bottom: 0;
           padding-bottom: 0;
         }
-        :host([scroll][narrow]) .no-img .header-info {
+        :host([scrolled][narrow]) .no-img .header-info {
           flex-direction: row-reverse;
         }
-        :host([scroll][narrow]) .header-info {
+        :host([scrolled][narrow]) .header-info {
           padding: 20px 24px 10px 24px;
           align-items: center;
         }
-        :host([scroll]) .header-content {
+        :host([scrolled]) .header-content {
           align-items: flex-end;
           flex-direction: row;
         }
-        :host([scroll]) .header-content .img {
+        :host([scrolled]) .header-content .img {
           height: 75px;
           width: 75px;
         }
-        :host([scroll]) .breadcrumb {
+        :host([scrolled]) .breadcrumb {
           padding-top: 0;
           align-self: center;
         }
-        :host([scroll][narrow]) .header-content .img {
+        :host([scrolled][narrow]) .header-content .img {
           height: 100px;
           width: 100px;
           padding-bottom: initial;
           margin-bottom: 0;
         }
-        :host([scroll]) ha-fab {
+        :host([scrolled]) ha-fab {
           bottom: 0px;
           right: -24px;
           --mdc-fab-box-shadow: none;

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

@@ -81,7 +81,7 @@ class HaAutomationPicker extends LitElement {
 
   @property() public automations!: AutomationEntity[];
 
-  @property() private _activeFilters?: string[];
+  @state() private _activeFilters?: string[];
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 

src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, state } from "lit/decorators";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../../components/ha-dialog";
@@ -12,8 +12,7 @@ import type { CloudCertificateParams as CloudCertificateDialogParams } from "./s
 class DialogCloudCertificate extends LitElement {
   public hass!: HomeAssistant;
 
-  @property()
-  private _params?: CloudCertificateDialogParams;
+  @state() private _params?: CloudCertificateDialogParams;
 
   public showDialog(params: CloudCertificateDialogParams) {
     this._params = params;

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

@@ -13,7 +13,14 @@ import {
   mdiUndo,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import {
+  CSSResultGroup,
+  LitElement,
+  PropertyValues,
+  css,
+  html,
+  nothing,
+} from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
@@ -91,7 +98,7 @@ export class HaConfigEntities extends LitElement {
 
   @state() private _stateEntities: StateEntity[] = [];
 
-  @property() public _entries?: ConfigEntry[];
+  @state() private _entries?: ConfigEntry[];
 
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
@@ -681,7 +688,7 @@ export class HaConfigEntities extends LitElement {
     `;
   }
 
-  public willUpdate(changedProps): void {
+  public willUpdate(changedProps: PropertyValues<this>): void {
     super.willUpdate(changedProps);
     const oldHass = changedProps.get("hass");
     let changed = false;

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

@@ -72,8 +72,7 @@ class HaConfigIntegrations extends SubscribeMixin(HassRouterPage) {
 
   @state() private _configEntries?: ConfigEntryExtended[];
 
-  @property()
-  private _configEntriesInProgress?: DataEntryFlowProgressExtended[];
+  @state() private _configEntriesInProgress?: DataEntryFlowProgressExtended[];
 
   private _loadTranslationsPromise?: Promise<LocalizeFunc>;
 

src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts

@@ -8,7 +8,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { HASSDomEvent } from "../../../../../common/dom/fire_event";
 import { navigate } from "../../../../../common/navigate";
@@ -40,7 +40,7 @@ export class ZHAGroupsDashboard extends LitElement {
 
   @property({ type: Boolean }) public isWide = false;
 
-  @property() public _groups: ZHAGroup[] = [];
+  @state() private _groups: ZHAGroup[] = [];
 
   private _firstUpdatedCalled = false;
 

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

@@ -72,7 +72,7 @@ class HaSceneDashboard extends LitElement {
 
   @property() public scenes!: SceneEntity[];
 
-  @property() private _activeFilters?: string[];
+  @state() private _activeFilters?: string[];
 
   @state() private _filteredScenes?: string[] | null;
 

src/panels/lovelace/badges/hui-state-label-badge.ts

@@ -1,20 +1,20 @@
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import "../../../components/entity/ha-state-label-badge";
+import { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
 import { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
 import { LovelaceBadge } from "../types";
 import { StateLabelBadgeConfig } from "./types";
-import { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
 
 @customElement("hui-state-label-badge")
 export class HuiStateLabelBadge extends LitElement implements LovelaceBadge {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() protected _config?: StateLabelBadgeConfig;
+  @state() protected _config?: StateLabelBadgeConfig;
 
   public setConfig(config: StateLabelBadgeConfig): void {
     this._config = config;

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

@@ -59,7 +59,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ attribute: false }) public _events: CalendarEvent[] = [];
+  @state() private _events: CalendarEvent[] = [];
 
   @state() private _config?: CalendarCardConfig;
 

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

@@ -6,7 +6,7 @@ import {
   nothing,
   PropertyValues,
 } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
@@ -38,7 +38,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() protected _config?: PictureCardConfig;
+  @state() private _config?: PictureCardConfig;
 
   public getCardSize(): number {
     return 5;

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

@@ -30,7 +30,7 @@ export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
 
   @property({ type: Boolean }) public editMode = false;
 
-  @property() protected _cards?: LovelaceCard[];
+  @state() protected _cards?: LovelaceCard[];
 
   @state() protected _config?: T;
 

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -75,8 +75,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
   @state() private _subscribed?: Promise<() => void>;
 
-  @property({ type: Boolean, reflect: true, attribute: "veryverynarrow" })
-  private _veryVeryNarrow = false;
+  // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
+  @property({ type: Boolean, reflect: true }) public veryVeryNarrow = false;
 
   private _resizeObserver?: ResizeObserver;
 
@@ -227,7 +227,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     );
     const forecast =
       this._config?.show_forecast !== false && forecastData?.forecast?.length
-        ? forecastData.forecast.slice(0, this._veryVeryNarrow ? 3 : 5)
+        ? forecastData.forecast.slice(0, this.veryVeryNarrow ? 3 : 5)
         : undefined;
     const weather = !forecast || this._config?.show_current !== false;
 
@@ -452,7 +452,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     } else {
       this.removeAttribute("verynarrow");
     }
-    this._veryVeryNarrow = card.offsetWidth < 245;
+    this.veryVeryNarrow = card.offsetWidth < 245;
   }
 
   private _showValue(item?: any): boolean {

src/panels/lovelace/components/hui-conditional-base.ts

@@ -1,5 +1,5 @@
 import { PropertyValues, ReactiveElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { listenMediaQuery } from "../../../common/dom/media_query";
 import { deepEqual } from "../../../common/util/deep-equal";
 import { HomeAssistant } from "../../../types";
@@ -33,10 +33,10 @@ export class HuiConditionalBase extends ReactiveElement {
 
   @property({ type: Boolean }) public editMode = false;
 
-  @property() protected _config?: ConditionalCardConfig | ConditionalRowConfig;
-
   @property({ type: Boolean, reflect: true }) public hidden = false;
 
+  @state() protected _config?: ConditionalCardConfig | ConditionalRowConfig;
+
   protected _element?: LovelaceCard | LovelaceRow;
 
   private _mediaQueriesListeners: Array<() => void> = [];

src/panels/lovelace/components/hui-marquee.ts

@@ -14,8 +14,8 @@ class HuiMarquee extends LitElement {
 
   @property({ type: Boolean }) public active = false;
 
-  @property({ reflect: true, type: Boolean, attribute: "animating" })
-  private _animating = false;
+  // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
+  @property({ reflect: true, type: Boolean }) public animating = false;
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
@@ -33,8 +33,8 @@ class HuiMarquee extends LitElement {
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
 
-    if (changedProperties.has("text") && this._animating) {
-      this._animating = false;
+    if (changedProperties.has("text") && this.animating) {
+      this.animating = false;
     }
 
     if (
@@ -42,7 +42,7 @@ class HuiMarquee extends LitElement {
       this.active &&
       this.offsetWidth < this.scrollWidth
     ) {
-      this._animating = true;
+      this.animating = true;
     }
   }
 
@@ -54,14 +54,14 @@ class HuiMarquee extends LitElement {
     return html`
       <div class="marquee-inner" @animationiteration=${this._onIteration}>
         <span>${this.text}</span>
-        ${this._animating ? html` <span>${this.text}</span> ` : ""}
+        ${this.animating ? html` <span>${this.text}</span> ` : ""}
       </div>
     `;
   }
 
   private _onIteration() {
     if (!this.active) {
-      this._animating = false;
+      this.animating = false;
     }
   }
 

src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts

@@ -38,7 +38,7 @@ export class HuiViewVisibilityEditor extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public _config!: LovelaceViewConfig;
+  @state() private _config!: LovelaceViewConfig;
 
   @state() private _users!: User[];
 

src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts

@@ -6,7 +6,7 @@ import {
   html,
   nothing,
 } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-humidifier-state";
 import { HumidifierEntity } from "../../../data/humidifier";
@@ -20,7 +20,7 @@ import { EntityConfig, LovelaceRow } from "./types";
 class HuiHumidifierEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() private _config?: EntityConfig;
+  @state() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
     if (!config || !config.entity) {

src/panels/lovelace/ha-panel-lovelace.ts

@@ -60,8 +60,7 @@ export class LovelacePanel extends LitElement {
 
   @property({ attribute: false }) public route?: Route;
 
-  @property()
-  private _panelState?: "loading" | "loaded" | "error" | "yaml-editor" =
+  @state() private _panelState: "loading" | "loaded" | "error" | "yaml-editor" =
     "loading";
 
   @state() private _errorMsg?: string;
@@ -114,7 +113,7 @@ export class LovelacePanel extends LitElement {
   }
 
   protected render(): TemplateResult | void {
-    const panelState = this._panelState!;
+    const panelState = this._panelState;
 
     if (panelState === "loaded") {
       return html`

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

@@ -1,10 +1,10 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -62,7 +62,7 @@ export class HuiGraphHeaderFooter
 
   @property() public type!: "header" | "footer";
 
-  @property() protected _config?: GraphHeaderFooterConfig;
+  @state() protected _config?: GraphHeaderFooterConfig;
 
   @state() private _coordinates?: number[][];
 

src/panels/lovelace/header-footer/hui-picture-header-footer.ts

@@ -6,7 +6,7 @@ import {
   html,
   nothing,
 } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import "../../../components/ha-card";
@@ -36,7 +36,7 @@ export class HuiPictureHeaderFooter
 
   @property() public type!: "header" | "footer";
 
-  @property() protected _config?: PictureHeaderFooterConfig;
+  @state() protected _config?: PictureHeaderFooterConfig;
 
   public getCardSize(): number {
     return 3;

src/panels/media-browser/hui-dialog-web-browser-play-media.ts

@@ -1,5 +1,5 @@
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-hls-player";
@@ -11,8 +11,7 @@ import { WebBrowserPlayMediaDialogParams } from "./show-media-player-dialog";
 export class HuiDialogWebBrowserPlayMedia extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false })
-  private _params?: WebBrowserPlayMediaDialogParams;
+  @state() private _params?: WebBrowserPlayMediaDialogParams;
 
   public showDialog(params: WebBrowserPlayMediaDialogParams): void {
     this._params = params;

tsconfig.json

@@ -41,7 +41,7 @@
           "no-incompatible-type-binding": "warning",
           // LitElement
           "no-incompatible-property-type": "warning",
-          "no-property-visibility-mismatch": "warning",
+          "no-property-visibility-mismatch": "error",
           // CSS
           "no-invalid-css": "off" // warning does not work
         },