Fix incompatible boolean property types (#19337)

gallery/src/components/demo-black-white-row.ts

@@ -11,7 +11,7 @@ class DemoBlackWhiteRow extends LitElement {
 
   @property() value!: any;
 
-  @property() disabled = false;
+  @property({ type: Boolean }) public disabled = false;
 
   protected render(): TemplateResult {
     return html`

gallery/src/components/demo-card.ts

@@ -15,7 +15,7 @@ class DemoCard extends LitElement {
 
   @property() public config!: DemoCardConfig;
 
-  @property() public showConfig = false;
+  @property({ type: Boolean }) public showConfig = false;
 
   @state() private _size?: number;
 

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

@@ -12,7 +12,7 @@ class DemoMoreInfo extends LitElement {
 
   @property() public entityId!: string;
 
-  @property() public showConfig!: boolean;
+  @property({ type: Boolean }) public showConfig = false;
 
   render() {
     const state = this._getState(this.entityId, this.hass.states);

src/components/chart/state-history-chart-timeline.ts

@@ -23,7 +23,7 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ attribute: false }) public data: TimelineEntity[] = [];
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public names?: Record<string, string>;
 

src/components/chart/state-history-charts.ts

@@ -52,7 +52,7 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ attribute: false }) public historyData!: HistoryResult;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public names?: Record<string, string>;
 

src/components/entity/ha-state-label-badge.ts

@@ -61,7 +61,7 @@ export class HaStateLabelBadge extends LitElement {
 
   @property() public image?: string;
 
-  @property() public showName?: boolean;
+  @property({ type: Boolean }) public showName = false;
 
   @state() private _timerTimeRemaining?: number;
 

src/components/ha-assist-pipeline-picker.ts

@@ -31,7 +31,7 @@ export class HaAssistPipelinePicker extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
-  @property() public includeLastUsed = false;
+  @property({ type: Boolean }) public includeLastUsed = false;
 
   @state() _pipelines?: AssistPipeline[];
 

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

@@ -54,9 +54,9 @@ export class HaDateRangePicker extends LitElement {
 
   @state() private _ranges?: DateRangePickerRanges;
 
-  @property() public autoApply = false;
+  @property({ type: Boolean }) public autoApply = false;
 
-  @property() public timePicker = true;
+  @property({ type: Boolean }) public timePicker = true;
 
   @property({ type: Boolean }) public disabled = false;
 

src/components/ha-labeled-slider.ts

@@ -6,7 +6,7 @@ import { fireEvent } from "../common/dom/fire_event";
 
 @customElement("ha-labeled-slider")
 class HaLabeledSlider extends LitElement {
-  @property() public labeled? = false;
+  @property({ type: Boolean }) public labeled = false;
 
   @property() public caption?: string;
 
@@ -22,7 +22,7 @@ class HaLabeledSlider extends LitElement {
 
   @property() public helper?: string;
 
-  @property() public extra = false;
+  @property({ type: Boolean }) public extra = false;
 
   @property() public icon?: string;
 
@@ -38,7 +38,7 @@ class HaLabeledSlider extends LitElement {
           .min=${this.min}
           .max=${this.max}
           .step=${this.step}
-          labeled=${this.labeled}
+          .labeled=${this.labeled}
           .disabled=${this.disabled}
           .value=${this.value}
           @change=${this._inputChanged}

src/components/ha-menu-button.ts

@@ -11,7 +11,7 @@ import "./ha-icon-button";
 class HaMenuButton extends LitElement {
   @property({ type: Boolean }) public hassio = false;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 

src/components/ha-theme-picker.ts

@@ -21,7 +21,7 @@ export class HaThemePicker extends LitElement {
 
   @property() public label?: string;
 
-  @property() includeDefault?: boolean = false;
+  @property({ type: Boolean }) includeDefault = false;
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 

src/panels/calendar/ha-recurrence-rule-editor.ts

@@ -35,13 +35,13 @@ import {
 export class RecurrenceRuleEditor extends LitElement {
   @property() public hass!: HomeAssistant;
 
-  @property() public disabled = false;
+  @property({ type: Boolean }) public disabled = false;
 
   @property() public value = "";
 
   @property() public dtstart?: Date;
 
-  @property() public allDay?: boolean;
+  @property({ type: Boolean }) public allDay = false;
 
   @property({ attribute: false }) public locale!: HomeAssistant["locale"];
 

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -41,9 +41,9 @@ export class HaConfigApplicationCredentials extends LitElement {
 
   @state() public _applicationCredentials: ApplicationCredential[] = [];
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route!: Route;
 

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

@@ -36,9 +36,9 @@ import {
 export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide?: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route!: Route;
 

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

@@ -11,11 +11,11 @@ import "./ha-config-areas-dashboard";
 class HaConfigAreas extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced = false;
 
   protected routerOptions: RouterOptions = {
     defaultPage: "dashboard",

src/panels/config/automation/blueprint-automation-editor.ts

@@ -24,7 +24,7 @@ import "../ha-config-section";
 export class HaBlueprintAutomationEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public disabled = false;
 

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

@@ -89,9 +89,9 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
   @property() public automations!: AutomationEntity[];
 
-  @property() public isWide?: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route!: Route;
 

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

@@ -24,11 +24,11 @@ const equal = (a: AutomationEntity[], b: AutomationEntity[]): boolean => {
 class HaConfigAutomation extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced = false;
 
   @property() public automations: AutomationEntity[] = [];
 

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

@@ -19,11 +19,11 @@ declare global {
 class HaConfigBlueprint extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced = false;
 
   @property() public blueprints: Record<string, Blueprints> = {};
 

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

@@ -16,9 +16,9 @@ const NOT_LOGGED_IN_URLS = ["login", "register", "forgot-password"];
 class HaConfigCloud extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route!: Route;
 

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

@@ -117,11 +117,11 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
   @property({ type: Boolean, reflect: true })
   public narrow!: boolean;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
   @property() public cloudStatus?: CloudStatus;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced = false;
 
   @state() private _tip?: string;
 

src/panels/config/devices/device-detail/ha-device-entities-card.ts

@@ -40,7 +40,7 @@ export class HaDeviceEntitiesCard extends LitElement {
 
   @property() public entities!: EntityRegistryStateEntry[];
 
-  @property() public showHidden = false;
+  @property({ type: Boolean }) public showHidden = false;
 
   @state() private _extDisabledEntityEntries?: Record<
     string,

src/panels/config/devices/device-detail/ha-device-info-card.ts

@@ -15,7 +15,7 @@ export class HaDeviceCard extends LitElement {
 
   @property() public device!: DeviceRegistryEntry;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected render(): TemplateResult {
     return html`

src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts

@@ -7,7 +7,7 @@ import { classMap } from "lit/directives/class-map";
 class MQTTDiscoveryPayload extends LitElement {
   @property() public payload!: Record<string, unknown>;
 
-  @property() public showAsYaml = false;
+  @property({ type: Boolean }) public showAsYaml = false;
 
   @property() public summary!: string;
 

src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts

@@ -14,9 +14,9 @@ class MQTTMessages extends LitElement {
 
   @property() public direction!: string;
 
-  @property() public showAsYaml = false;
+  @property({ type: Boolean }) public showAsYaml = false;
 
-  @property() public showDeserialized = false;
+  @property({ type: Boolean }) public showDeserialized = false;
 
   @property() public subscribedTopic!: string;
 

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

@@ -62,9 +62,9 @@ interface DeviceRowData extends DeviceRegistryEntry {
 export class HaConfigDeviceDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow = false;
+  @property({ type: Boolean }) public narrow = false;
 
-  @property() public isWide = false;
+  @property({ type: Boolean }) public isWide = false;
 
   @property() public entries!: ConfigEntry[];
 

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

@@ -16,11 +16,11 @@ import "./ha-config-devices-dashboard";
 class HaConfigDevices extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced = false;
 
   protected routerOptions: RouterOptions = {
     defaultPage: "dashboard",

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

@@ -4,7 +4,7 @@ import { classMap } from "lit/directives/class-map";
 
 @customElement("ha-config-section")
 export class HaConfigSection extends LitElement {
-  @property() public isWide = false;
+  @property({ type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public vertical = false;
 

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

@@ -360,7 +360,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
 class HaPanelConfig extends SubscribeMixin(HassRouterPage) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route!: Route;
 

src/panels/config/helpers/forms/ha-counter-form.ts

@@ -13,7 +13,7 @@ import { HomeAssistant } from "../../../../types";
 class HaCounterForm extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public new?: boolean;
+  @property({ type: Boolean }) public new = false;
 
   private _item?: Partial<Counter>;
 

src/panels/config/helpers/forms/ha-input_boolean-form.ts

@@ -11,7 +11,7 @@ import { HomeAssistant } from "../../../../types";
 class HaInputBooleanForm extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public new?: boolean;
+  @property({ type: Boolean }) public new = false;
 
   private _item?: InputBoolean;
 

src/panels/config/helpers/forms/ha-input_button-form.ts

@@ -11,7 +11,7 @@ import { HomeAssistant } from "../../../../types";
 class HaInputButtonForm extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public new?: boolean;
+  @property({ type: Boolean }) public new = false;
 
   @state() private _name!: string;
 

src/panels/config/helpers/forms/ha-input_datetime-form.ts

@@ -14,7 +14,7 @@ import { HomeAssistant } from "../../../../types";
 class HaInputDateTimeForm extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public new?: boolean;
+  @property({ type: Boolean }) public new = false;
 
   private _item?: InputDateTime;
 

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -14,7 +14,7 @@ import { HomeAssistant } from "../../../../types";
 class HaInputNumberForm extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public new?: boolean;
+  @property({ type: Boolean }) public new = false;
 
   private _item?: Partial<InputNumber>;
 

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -20,7 +20,7 @@ import type { HomeAssistant } from "../../../../types";
 class HaInputSelectForm extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public new?: boolean;
+  @property({ type: Boolean }) public new = false;
 
   private _item?: InputSelect;
 

src/panels/config/helpers/forms/ha-input_text-form.ts

@@ -15,7 +15,7 @@ import { HomeAssistant } from "../../../../types";
 class HaInputTextForm extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public new?: boolean;
+  @property({ type: Boolean }) public new = false;
 
   private _item?: InputText;
 

src/panels/config/helpers/forms/ha-schedule-form.ts

@@ -44,7 +44,7 @@ const defaultFullCalendarConfig: CalendarOptions = {
 class HaScheduleForm extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public new?: boolean;
+  @property({ type: Boolean }) public new = false;
 
   @state() private _name!: string;
 

src/panels/config/helpers/forms/ha-timer-form.ts

@@ -11,7 +11,7 @@ import { HomeAssistant } from "../../../../types";
 class HaTimerForm extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public new?: boolean;
+  @property({ type: Boolean }) public new = false;
 
   private _item?: Timer;
 

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

@@ -81,9 +81,9 @@ const getConfigEntry = (
 export class HaConfigHelpers extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route!: Route;
 

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

@@ -94,9 +94,9 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public narrow!: boolean;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced = false;
 
   @property() public route!: Route;
 

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

@@ -53,9 +53,9 @@ class HaConfigIntegrations extends SubscribeMixin(HassRouterPage) {
 
   @property({ type: Boolean, reflect: true }) public narrow!: boolean;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced = false;
 
   protected routerOptions: RouterOptions = {
     defaultPage: "dashboard",

src/panels/config/integrations/integration-panels/matter/matter-config-panel.ts

@@ -24,9 +24,9 @@ export const configTabs: PageNavigation[] = [
 class MatterConfigRouter extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected routerOptions: RouterOptions = {
     defaultPage: "dashboard",

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -28,7 +28,7 @@ import { IssueCommandServiceData } from "./types";
 export class ZHAClusterCommands extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() public isWide?: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
   @property() public device?: ZHADevice;
 

src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts

@@ -20,7 +20,7 @@ export interface ClusterRowData extends Cluster {
 export class ZHAClustersDataTable extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow = false;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public clusters: Cluster[] = [];
 

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

@@ -10,9 +10,9 @@ import { HomeAssistant } from "../../../../../types";
 class ZHAConfigDashboardRouter extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   private _configEntry = new URLSearchParams(window.location.search).get(
     "config_entry"

src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts

@@ -40,7 +40,7 @@ const tabs = ["attributes", "commands"] as const;
 export class ZHAManageClusters extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide?: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
   @property() public device?: ZHADevice;
 

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-router.ts

@@ -26,9 +26,9 @@ export const configTabs: PageNavigation[] = [
 class ZWaveJSConfigRouter extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   private _configEntry = new URLSearchParams(window.location.search).get(
     "config_entry"

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

@@ -56,9 +56,9 @@ type DataTableItem = Pick<
 export class HaConfigLovelaceDashboards extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route!: Route;
 

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

@@ -19,9 +19,9 @@ export const lovelaceTabs = [
 class HaConfigLovelace extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
   protected routerOptions: RouterOptions = {
     defaultPage: "dashboards",

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

@@ -41,9 +41,9 @@ import { showResourceDetailDialog } from "./show-dialog-lovelace-resource-detail
 export class HaConfigLovelaceRescources extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route!: Route;
 

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

@@ -35,9 +35,9 @@ import {
 export class HaConfigPerson extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() public isWide?: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow?: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route!: Route;
 

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

@@ -24,11 +24,11 @@ const equal = (a: SceneEntity[], b: SceneEntity[]): boolean => {
 class HaConfigScene extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced = false;
 
   @property() public scenes: SceneEntity[] = [];
 

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

@@ -64,9 +64,9 @@ type SceneItem = SceneEntity & {
 class HaSceneDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
   @property() public route!: Route;
 

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

@@ -87,9 +87,9 @@ export class HaSceneEditor extends SubscribeMixin(
 ) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
   @property() public route!: Route;
 
@@ -97,7 +97,7 @@ export class HaSceneEditor extends SubscribeMixin(
 
   @property() public scenes!: SceneEntity[];
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced = false;
 
   @state() private _dirty = false;
 

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

@@ -27,11 +27,11 @@ const equal = (a: ScriptEntity[], b: ScriptEntity[]): boolean => {
 class HaConfigScript extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced = false;
 
   @property() public scripts: ScriptEntity[] = [];
 

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

@@ -70,9 +70,9 @@ class HaScriptPicker extends LitElement {
 
   @property() public scripts!: ScriptEntity[];
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route!: Route;
 

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

@@ -44,9 +44,9 @@ export interface TagRowData extends Tag {
 export class HaConfigTags extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route!: Route;
 

src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts

@@ -27,9 +27,9 @@ export class HaConfigVoiceAssistantsAssistants extends LitElement {
     ExposeEntitySettings
   >;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route!: Route;
 

src/panels/config/voice-assistants/ha-config-voice-assistants.ts

@@ -33,9 +33,9 @@ class HaConfigVoiceAssistants extends HassRouterPage {
 
   @property({ attribute: false }) public cloudStatus!: CloudStatus;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
   @state()
   @consume({ context: entitiesContext, subscribe: true })

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

@@ -52,9 +52,9 @@ import { showZoneDetailDialog } from "./show-dialog-zone-detail";
 export class HaConfigZone extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide?: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property() public narrow?: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route!: Route;
 

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

@@ -23,7 +23,7 @@ declare global {
 export class HaPanelCustom extends ReactiveElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route!: Route;
 

src/panels/developer-tools/debug/ha-debug-connection-row.ts

@@ -10,7 +10,7 @@ import { storeState } from "../../../util/ha-pref-storage";
 class HaDebugConnectionRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected render(): TemplateResult {
     return html`

src/panels/developer-tools/developer-tools-router.ts

@@ -6,7 +6,7 @@ import { HomeAssistant } from "../../types";
 class DeveloperToolsRouter extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected routerOptions: RouterOptions = {
     // defaultPage: "info",

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -19,7 +19,7 @@ class PanelDeveloperTools extends LitElement {
 
   @property() public route!: Route;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);

src/panels/developer-tools/template/developer-tools-template.ts

@@ -41,7 +41,7 @@ For loop example getting entity values in the weather domain:
 class HaPanelDevTemplate extends LitElement {
   @property() public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @state() private _error?: string;
 

src/panels/lovelace/cards/hui-entity-filter-card.ts

@@ -42,9 +42,9 @@ export class HuiEntityFilterCard
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() public isPanel = false;
+  @property({ type: Boolean }) public isPanel = false;
 
-  @property() public editMode = false;
+  @property({ type: Boolean }) public editMode = false;
 
   @state() private _config?: EntityFilterCardConfig;
 

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

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

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

@@ -31,7 +31,7 @@ function extractMediaQueries(
 export class HuiConditionalBase extends ReactiveElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() public editMode?: boolean;
+  @property({ type: Boolean }) public editMode = false;
 
   @property() protected _config?: ConditionalCardConfig | ConditionalRowConfig;
 

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

@@ -56,7 +56,7 @@ export class LovelacePanel extends LitElement {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() public narrow?: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public route?: Route;
 

src/panels/profile/ha-advanced-mode-row.ts

@@ -13,7 +13,7 @@ import { HomeAssistant } from "../../types";
 class AdvancedModeRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @property() public coreUserData?: CoreFrontendUserData;
 

src/panels/profile/ha-enable-shortcuts-row.ts

@@ -10,7 +10,7 @@ import type { HomeAssistant } from "../../types";
 class HaEnableShortcutsRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected render(): TemplateResult {
     return html`

src/panels/profile/ha-force-narrow-row.ts

@@ -10,7 +10,7 @@ import type { HomeAssistant } from "../../types";
 class HaForcedNarrowRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected render(): TemplateResult {
     return html`

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

@@ -14,7 +14,7 @@ import { HomeAssistant } from "../../types";
 class HaPickDashboardRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @state() private _dashboards?: LovelaceDashboard[];
 

src/panels/profile/ha-pick-date-format-row.ts

@@ -13,7 +13,7 @@ import { HomeAssistant } from "../../types";
 class DateFormatRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected render(): TemplateResult {
     const date = new Date();

src/panels/profile/ha-pick-first-weekday-row.ts

@@ -12,7 +12,7 @@ import { HomeAssistant } from "../../types";
 class FirstWeekdayRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected render(): TemplateResult {
     return html`

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

@@ -9,7 +9,7 @@ import { HomeAssistant } from "../../types";
 export class HaPickLanguageRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected render() {
     return html`

src/panels/profile/ha-pick-number-format-row.ts

@@ -13,7 +13,7 @@ import { HomeAssistant } from "../../types";
 class NumberFormatRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected render(): TemplateResult {
     return html`

src/panels/profile/ha-pick-time-format-row.ts

@@ -13,7 +13,7 @@ import { HomeAssistant } from "../../types";
 class TimeFormatRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected render(): TemplateResult {
     const date = new Date();

src/panels/profile/ha-pick-time-zone-row.ts

@@ -13,7 +13,7 @@ import { HomeAssistant } from "../../types";
 class TimeZoneRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected render(): TemplateResult {
     const date = new Date();

src/panels/profile/ha-push-notifications-row.ts

@@ -10,7 +10,7 @@ import { HomeAssistant } from "../../types";
 class HaPushNotificationsRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected render(): TemplateResult {
     const platformLoaded = isComponentLoaded(this.hass, "notify.html5");

src/panels/profile/ha-set-suspend-row.ts

@@ -23,7 +23,7 @@ declare global {
 class HaSetSuspendRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected render(): TemplateResult {
     return html`

src/panels/profile/ha-set-vibrate-row.ts

@@ -11,7 +11,7 @@ import type { HomeAssistant } from "../../types";
 class HaSetVibrateRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   protected render(): TemplateResult {
     return html`