Fix boolean attributes (#23189)

gallery/src/components/demo-card.ts

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

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

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

hassio/src/backups/hassio-backups.ts

@@ -58,7 +58,7 @@ export class HassioBackups extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @state() private _selectedBackups: string[] = [];
 

hassio/src/components/hassio-card-content.ts

@@ -16,7 +16,7 @@ class HassioCardContent extends LitElement {
 
   @property({ type: Boolean }) public available = true;
 
-  @property({ attribute: false, type: Boolean }) public showTopbar = false;
+  @property({ attribute: false }) public showTopbar = false;
 
   @property({ attribute: false }) public topbarClass?: string;
 

hassio/src/components/supervisor-backup-content.ts

@@ -80,10 +80,9 @@ export class SupervisorBackupContent extends LitElement {
 
   @property({ attribute: false }) public addons?: AddonCheckboxItem[];
 
-  @property({ attribute: false, type: Boolean }) public homeAssistant = false;
+  @property({ attribute: false }) public homeAssistant = false;
 
-  @property({ attribute: false, type: Boolean }) public backupHasPassword =
+  @property({ attribute: false }) public backupHasPassword = false;
-    false;
 
   @property({ type: Boolean }) public onboarding = false;
 

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -34,7 +34,7 @@ class HassioIngressView extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ attribute: false, type: Boolean }) public ingressPanel = false;
+  @property({ attribute: false }) public ingressPanel = false;
 
   @property({ type: Boolean }) public narrow = false;
 

src/auth/ha-auth-flow.ts

@@ -40,7 +40,7 @@ export class HaAuthFlow extends LitElement {
 
   @property({ attribute: false }) public step?: DataEntryFlowStep;
 
-  @property({ attribute: false, type: Boolean }) public initStoreToken = false;
+  @property({ attribute: false }) public initStoreToken = false;
 
   @state() private _storeToken = false;
 

src/components/chart/ha-chart-base.ts

@@ -55,7 +55,8 @@ export class HaChartBase extends LitElement {
 
   @property({ attribute: false, type: Number }) public paddingYAxis = 0;
 
-  @property({ attribute: false, type: Boolean }) public externalHidden = false;
+  @property({ attribute: "external-hidden", type: Boolean })
+  public externalHidden = false;
 
   @state() private _chartHeight?: number;
 

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

@@ -32,9 +32,11 @@ export class StateHistoryChartLine extends LitElement {
 
   @property() public identifier?: string;
 
-  @property({ attribute: false, type: Boolean }) public showNames = true;
+  @property({ attribute: "show-names", type: Boolean })
+  public showNames = true;
 
-  @property({ attribute: false, type: Boolean }) public clickForMoreInfo = true;
+  @property({ attribute: "click-for-more-info", type: Boolean })
+  public clickForMoreInfo = true;
 
   @property({ attribute: false }) public startTime!: Date;
 
@@ -44,14 +46,14 @@ export class StateHistoryChartLine extends LitElement {
 
   @property({ attribute: false, type: Number }) public chartIndex?;
 
-  @property({ attribute: false, type: Boolean }) public logarithmicScale =
+  @property({ attribute: "logarithmic-scale", type: Boolean })
-    false;
+  public logarithmicScale = false;
 
   @property({ attribute: false, type: Number }) public minYAxis?: number;
 
   @property({ attribute: false, type: Number }) public maxYAxis?: number;
 
-  @property({ attribute: false, type: Boolean }) public fitYData = false;
+  @property({ attribute: "fit-y-data", type: Boolean }) public fitYData = false;
 
   @state() private _chartData?: ChartData<"line">;
 

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

@@ -30,9 +30,10 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property() public identifier?: string;
 
-  @property({ attribute: false, type: Boolean }) public showNames = true;
+  @property({ attribute: "show-names", type: Boolean }) public showNames = true;
 
-  @property({ attribute: false, type: Boolean }) public clickForMoreInfo = true;
+  @property({ attribute: "click-for-more-info", type: Boolean })
+  public clickForMoreInfo = true;
 
   @property({ type: Boolean }) public chunked = false;
 

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

@@ -61,20 +61,22 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ attribute: false, type: Number }) public hoursToShow?: number;
 
-  @property({ attribute: false, type: Boolean }) public showNames = true;
+  @property({ attribute: "show-names", type: Boolean }) public showNames = true;
 
-  @property({ attribute: false, type: Boolean }) public clickForMoreInfo = true;
+  @property({ attribute: "click-for-more-info", type: Boolean })
+  public clickForMoreInfo = true;
 
-  @property({ attribute: false, type: Boolean }) public isLoadingData = false;
+  @property({ attribute: "is-loading-data", type: Boolean })
+  public isLoadingData = false;
 
-  @property({ attribute: false, type: Boolean }) public logarithmicScale =
+  @property({ attribute: "logarithmic-scale", type: Boolean })
-    false;
+  public logarithmicScale = false;
 
   @property({ attribute: false, type: Number }) public minYAxis?: number;
 
   @property({ attribute: false, type: Number }) public maxYAxis?: number;
 
-  @property({ attribute: false, type: Boolean }) public fitYData = false;
+  @property({ attribute: "fit-y-data", type: Boolean }) public fitYData = false;
 
   private _computedStartTime!: Date;
 

src/components/chart/statistics-chart.ts

@@ -72,17 +72,19 @@ export class StatisticsChart extends LitElement {
 
   @property({ attribute: false, type: Number }) public maxYAxis?: number;
 
-  @property({ attribute: false, type: Boolean }) public fitYData = false;
+  @property({ attribute: "fit-y-data", type: Boolean }) public fitYData = false;
 
   @property({ attribute: "hide-legend", type: Boolean }) public hideLegend =
     false;
 
-  @property({ attribute: false, type: Boolean }) public logarithmicScale =
+  @property({ attribute: "logarithmic-scale", type: Boolean })
-    false;
+  public logarithmicScale = false;
 
-  @property({ attribute: false, type: Boolean }) public isLoadingData = false;
+  @property({ attribute: "is-loading-data", type: Boolean })
+  public isLoadingData = false;
 
-  @property({ attribute: false, type: Boolean }) public clickForMoreInfo = true;
+  @property({ attribute: "click-for-more-info", type: Boolean })
+  public clickForMoreInfo = true;
 
   @property() public period?: string;
 
@@ -165,7 +167,7 @@ export class StatisticsChart extends LitElement {
 
     return html`
       <ha-chart-base
-        externalHidden
+        external-hidden
         .hass=${this.hass}
         .data=${this._chartData}
         .extraData=${this._chartDatasetExtra}

src/components/data-table/ha-data-table.ts

@@ -116,7 +116,7 @@ export class HaDataTable extends LitElement {
 
   @property({ type: Boolean }) public clickable = false;
 
-  @property({ attribute: false, type: Boolean }) public hasFab = false;
+  @property({ attribute: "has-fab", type: Boolean }) public hasFab = false;
 
   /**
    * Add an extra row at the bottom of the data table

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

@@ -103,7 +103,8 @@ export class HaEntityPicker extends LitElement {
   @property({ attribute: false })
   public entityFilter?: HaEntityPickerEntityFilterFunc;
 
-  @property({ attribute: false, type: Boolean }) public hideClearIcon = false;
+  @property({ attribute: "hide-clear-icon", type: Boolean })
+  public hideClearIcon = false;
 
   @property({ attribute: "item-label-path" }) public itemLabelPath =
     "friendly_name";

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

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

src/components/entity/state-info.ts

@@ -14,7 +14,7 @@ class StateInfo extends LitElement {
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  @property({ attribute: false, type: Boolean }) public inDialog = false;
+  @property({ attribute: "in-dialog", type: Boolean }) public inDialog = false;
 
   @property() public color?: string;
 
@@ -32,7 +32,7 @@ class StateInfo extends LitElement {
         .color=${this.color}
       ></state-badge>
       <div class="info">
-        <div class="name" .title=${name} .inDialog=${this.inDialog}>
+        <div class="name ${this.inDialog ? "in-dialog" : ""}" .title=${name}>
           ${name}
         </div>
         ${this.inDialog
@@ -108,7 +108,7 @@ class StateInfo extends LitElement {
         text-overflow: ellipsis;
       }
 
-      .name[inDialog],
+      .name.in-dialog,
       :host([secondary-line]) .name {
         line-height: 20px;
       }

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

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

src/components/ha-base-time-input.ts

@@ -36,7 +36,7 @@ export class HaBaseTimeInput extends LitElement {
   /**
    * auto validate time inputs
    */
-  @property({ attribute: false, type: Boolean }) autoValidate = false;
+  @property({ attribute: "auto-validate", type: Boolean }) autoValidate = false;
 
   /**
    * determines if inputs are required
@@ -106,22 +106,26 @@ export class HaBaseTimeInput extends LitElement {
   /**
    * show the sec field
    */
-  @property({ attribute: false, type: Boolean }) enableSecond = false;
+  @property({ attribute: "enable-second", type: Boolean })
+  public enableSecond = false;
 
   /**
    * show the milli sec field
    */
-  @property({ attribute: false, type: Boolean }) enableMillisecond = false;
+  @property({ attribute: "enable-millisecond", type: Boolean })
+  public enableMillisecond = false;
 
   /**
    * show the day field
    */
-  @property({ attribute: false, type: Boolean }) enableDay = false;
+  @property({ attribute: "enable-day", type: Boolean })
+  public enableDay = false;
 
   /**
    * limit hours input
    */
-  @property({ attribute: false, type: Boolean }) noHoursLimit = false;
+  @property({ attribute: "no-hours-limit", type: Boolean })
+  public noHoursLimit = false;
 
   /**
    * AM or PM

src/components/ha-button-toggle-group.ts

@@ -14,7 +14,8 @@ export class HaButtonToggleGroup extends LitElement {
 
   @property() public active?: string;
 
-  @property({ attribute: false, type: Boolean }) public fullWidth = false;
+  @property({ attribute: "full-width", type: Boolean })
+  public fullWidth = false;
 
   @property({ type: Boolean }) public dense = false;
 

src/components/ha-clickable-list-item.ts

@@ -7,9 +7,10 @@ import { HaListItem } from "./ha-list-item";
 export class HaClickableListItem extends HaListItem {
   @property() public href?: string;
 
-  @property({ attribute: false, type: Boolean }) public disableHref = false;
+  @property({ attribute: "disable-href", type: Boolean })
+  public disableHref = false;
 
-  @property({ attribute: false, type: Boolean, reflect: true })
+  @property({ attribute: "open-new-tab", type: Boolean, reflect: true })
   public openNewTab = false;
 
   @query("a") private _anchor!: HTMLAnchorElement;

src/components/ha-country-picker.ts

@@ -277,7 +277,7 @@ export class HaCountryPicker extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
-  @property({ attribute: false, type: Boolean }) public noSort = false;
+  @property({ attribute: "no-sort", type: Boolean }) public noSort = false;
 
   private _getOptions = memoizeOne(
     (language?: string, countries?: string[]) => {

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

@@ -53,17 +53,20 @@ export class HaDateRangePicker extends LitElement {
 
   @state() private _ranges?: DateRangePickerRanges;
 
-  @property({ attribute: false, type: Boolean }) public autoApply = false;
+  @property({ attribute: "auto-apply", type: Boolean })
+  public autoApply = false;
 
-  @property({ attribute: false, type: Boolean }) public timePicker = true;
+  @property({ attribute: "time-picker", type: Boolean })
+  public timePicker = true;
 
-  @property({ attribute: false, type: Boolean }) public disabled = false;
+  @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public minimal = false;
 
   @state() private _hour24format = false;
 
-  @property({ attribute: false, type: Boolean }) public extendedPresets = false;
+  @property({ attribute: "extended-presets", type: Boolean })
+  public extendedPresets = false;
 
   @property({ attribute: false }) public openingDirection?:
     | "right"

src/components/ha-domain-icon.ts

@@ -18,7 +18,8 @@ export class HaDomainIcon extends LitElement {
 
   @property() public icon?: string;
 
-  @property({ attribute: false, type: Boolean }) public brandFallback?: boolean;
+  @property({ attribute: "brand-fallback", type: Boolean })
+  public brandFallback?: boolean;
 
   protected render() {
     if (this.icon) {

src/components/ha-duration-input.ts

@@ -23,10 +23,11 @@ class HaDurationInput extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
-  @property({ attribute: false, type: Boolean }) public enableMillisecond =
+  @property({ attribute: "enable-millisecond", type: Boolean })
-    false;
+  public enableMillisecond = false;
 
-  @property({ attribute: false, type: Boolean }) public enableDay = false;
+  @property({ attribute: "enable-day", type: Boolean })
+  public enableDay = false;
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -48,7 +49,7 @@ class HaDurationInput extends LitElement {
         .autoValidate=${this.required}
         .disabled=${this.disabled}
         errorMessage="Required"
-        enableSecond
+        enable-second
         .enableMillisecond=${this.enableMillisecond}
         .enableDay=${this.enableDay}
         format="24"
@@ -58,7 +59,7 @@ class HaDurationInput extends LitElement {
         .seconds=${this._seconds}
         .milliseconds=${this._milliseconds}
         @value-changed=${this._durationChanged}
-        noHoursLimit
+        no-hours-limit
         dayLabel="dd"
         hourLabel="hh"
         minLabel="mm"

src/components/ha-filter-domains.ts

@@ -75,7 +75,7 @@ export class HaFilterDomains extends LitElement {
                         slot="graphic"
                         .hass=${this.hass}
                         .domain=${domain}
-                        brandFallback
+                        brand-fallback
                       ></ha-domain-icon>
                       ${domainToName(this.hass.localize, domain)}
                     </ha-check-list-item>`

src/components/ha-filter-integrations.ts

@@ -77,7 +77,7 @@ export class HaFilterIntegrations extends LitElement {
                         slot="graphic"
                         .hass=${this.hass}
                         .domain=${integration.domain}
-                        brandFallback
+                        brand-fallback
                       ></ha-domain-icon>
                       ${integration.name || integration.domain}
                     </ha-check-list-item>`

src/components/ha-markdown-element.ts

@@ -19,7 +19,7 @@ const _gitHubMarkdownAlerts = {
 class HaMarkdownElement extends ReactiveElement {
   @property() public content?;
 
-  @property({ attribute: false, type: Boolean }) public allowSvg = false;
+  @property({ attribute: "allow-svg", type: Boolean }) public allowSvg = false;
 
   @property({ type: Boolean }) public breaks = false;
 

src/components/ha-markdown.ts

@@ -7,7 +7,7 @@ import "./ha-markdown-element";
 export class HaMarkdown extends LitElement {
   @property() public content?;
 
-  @property({ attribute: false, type: Boolean }) public allowSvg = false;
+  @property({ attribute: "allow-svg", type: Boolean }) public allowSvg = false;
 
   @property({ type: Boolean }) public breaks = false;
 

src/components/ha-password-field.ts

@@ -23,7 +23,8 @@ export class HaPasswordField extends LitElement {
 
   @property({ type: Boolean }) public icon = false;
 
-  @property({ attribute: false, type: Boolean }) public iconTrailing = false;
+  // eslint-disable-next-line lit/attribute-names
+  @property({ type: Boolean }) public iconTrailing = false;
 
   @property() public autocomplete?: string;
 
@@ -42,32 +43,38 @@ export class HaPasswordField extends LitElement {
 
   @property({ type: Boolean }) required = false;
 
-  @property({ attribute: false, type: Number }) minLength = -1;
+  // eslint-disable-next-line lit/attribute-names
+  @property({ type: Number }) minLength = -1;
 
-  @property({ attribute: false, type: Number }) maxLength = -1;
+  // eslint-disable-next-line lit/attribute-names
+  @property({ type: Number }) maxLength = -1;
 
   @property({ type: Boolean, reflect: true }) outlined = false;
 
   @property({ type: String }) helper = "";
 
-  @property({ attribute: false, type: Boolean }) validateOnInitialRender =
+  // eslint-disable-next-line lit/attribute-names
-    false;
+  @property({ type: Boolean }) validateOnInitialRender = false;
 
-  @property({ attribute: false, type: String }) validationMessage = "";
+  // eslint-disable-next-line lit/attribute-names
+  @property({ type: String }) validationMessage = "";
 
-  @property({ attribute: false, type: Boolean }) autoValidate = false;
+  // eslint-disable-next-line lit/attribute-names
+  @property({ type: Boolean }) autoValidate = false;
 
   @property({ type: String }) pattern = "";
 
   @property({ type: Number }) size: number | null = null;
 
-  @property({ attribute: false, type: Boolean }) helperPersistent = false;
+  // eslint-disable-next-line lit/attribute-names
+  @property({ type: Boolean }) helperPersistent = false;
 
-  @property({ attribute: false, type: Boolean }) charCounter:
+  // eslint-disable-next-line lit/attribute-names
-    | boolean
+  @property({ type: Boolean }) charCounter: boolean | TextAreaCharCounter =
-    | TextAreaCharCounter = false;
+    false;
 
-  @property({ attribute: false, type: Boolean }) endAligned = false;
+  // eslint-disable-next-line lit/attribute-names
+  @property({ type: Boolean }) endAligned = false;
 
   @property({ type: String }) prefix = "";
 
@@ -78,7 +85,8 @@ export class HaPasswordField extends LitElement {
   @property({ type: String, attribute: "input-mode" })
   inputMode!: string;
 
-  @property({ attribute: false, type: Boolean }) readOnly = false;
+  // eslint-disable-next-line lit/attribute-names
+  @property({ type: Boolean }) readOnly = false;
 
   // eslint-disable-next-line lit/no-native-attributes
   @property({ attribute: false, type: String }) autocapitalize = "";

src/components/ha-selector/ha-selector-duration.ts

@@ -29,8 +29,8 @@ export class HaTimeDuration extends LitElement {
         .data=${this.value}
         .disabled=${this.disabled}
         .required=${this.required}
-        ?enableDay=${this.selector.duration?.enable_day}
+        .enableDay=${this.selector.duration?.enable_day}
-        ?enableMillisecond=${this.selector.duration?.enable_millisecond}
+        .enableMillisecond=${this.selector.duration?.enable_millisecond}
       ></ha-duration-input>
     `;
   }

src/components/ha-service-control.ts

@@ -92,7 +92,8 @@ export class HaServiceControl extends LitElement {
   @property({ attribute: false, type: Boolean, reflect: true })
   public hidePicker = false;
 
-  @property({ attribute: false, type: Boolean }) public hideDescription = false;
+  @property({ attribute: "hide-description", type: Boolean })
+  public hideDescription = false;
 
   @state() private _value!: this["value"];
 

src/components/ha-sidebar.ts

@@ -184,9 +184,11 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ attribute: false, type: Boolean }) public alwaysExpand = false;
+  @property({ attribute: "always-expand", type: Boolean })
+  public alwaysExpand = false;
 
-  @property({ attribute: false, type: Boolean }) public editMode = false;
+  @property({ attribute: "edit-mode", type: Boolean })
+  public editMode = false;
 
   @state() private _notifications?: PersistentNotification[];
 

src/components/ha-target-picker.ts

@@ -84,7 +84,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
-  @property({ attribute: false, type: Boolean }) public addOnTop = false;
+  @property({ attribute: "add-on-top", type: Boolean }) public addOnTop = false;
 
   @state() private _addMode?:
     | "area_id"

src/components/ha-theme-picker.ts

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

src/components/ha-two-pane-top-app-bar-fixed.ts

@@ -32,7 +32,7 @@ export class TopAppBarBaseBase extends BaseElement {
 
   protected _scrollTarget!: HTMLElement | Window;
 
-  @property({ attribute: false, type: Boolean }) centerTitle = false;
+  @property({ attribute: "center-title", type: Boolean }) centerTitle = false;
 
   @property({ type: Boolean, reflect: true }) prominent = false;
 

src/components/map/ha-locations-editor.ts

@@ -51,7 +51,7 @@ export class HaLocationsEditor extends LitElement {
 
   @property() public helper?: string;
 
-  @property({ attribute: false, type: Boolean }) public autoFit = false;
+  @property({ attribute: "auto-fit", type: Boolean }) public autoFit = false;
 
   @property({ type: Number }) public zoom = 16;
 

src/components/map/ha-map.ts

@@ -77,7 +77,7 @@ export class HaMap extends ReactiveElement {
   @property({ attribute: "interactive-zones", type: Boolean })
   public interactiveZones = false;
 
-  @property({ attribute: false, type: Boolean }) public fitZones = false;
+  @property({ attribute: "fit-zones", type: Boolean }) public fitZones = false;
 
   @property({ attribute: "theme-mode", type: String })
   public themeMode: ThemeMode = "auto";

src/components/trace/ha-timeline.ts

@@ -14,7 +14,7 @@ export class HaTimeline extends LitElement {
   @property({ attribute: false, reflect: true, type: Boolean }) notEnabled =
     false;
 
-  @property({ attribute: false, type: Boolean }) public lastItem = false;
+  @property({ attribute: "last-item", type: Boolean }) public lastItem = false;
 
   @property({ type: String }) public icon?: string;
 

src/components/trace/hat-trace-timeline.ts

@@ -839,7 +839,7 @@ export class HaAutomationTracer extends LitElement {
 
     entries.push(html`
       <ha-timeline
-        lastItem
+        last-item
         .icon=${entry.icon}
         class=${ifDefined(entry.className)}
       >

src/dialogs/more-info/controls/more-info-script.ts

@@ -99,8 +99,7 @@ class MoreInfoScript extends LitElement {
                 ${this.hass.localize("ui.card.script.run_script")}
               </div>
               <ha-service-control
-                hidePicker
+                hide-description
-                hideDescription
                 .hass=${this.hass}
                 .value=${this._scriptData}
                 .showAdvanced=${this.hass.userData?.showAdvanced}

src/layouts/hass-tabs-subpage-data-table.ts

@@ -46,7 +46,7 @@ export class HaTabsSubpageDataTable extends LitElement {
 
   @property({ attribute: false }) public localizeFunc?: LocalizeFunc;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
@@ -156,10 +156,11 @@ export class HaTabsSubpageDataTable extends LitElement {
    * Show the filter menu.
    * @type {Boolean}
    */
-  @property({ attribute: "has-filters", type: Boolean }) public hasFilters =
+  @property({ attribute: "has-filters", type: Boolean })
-    false;
+  public hasFilters = false;
 
-  @property({ attribute: false, type: Boolean }) public showFilters = false;
+  @property({ attribute: "show-filters", type: Boolean })
+  public showFilters = false;
 
   @property({ attribute: false }) public initialSorting?: {
     column: string;

src/onboarding/integration-badge.ts

@@ -11,8 +11,8 @@ class IntegrationBadge extends LitElement {
   // eslint-disable-next-line lit/no-native-attributes
   @property({ attribute: false }) public title!: string;
 
-  @property({ attribute: false, type: Boolean }) public darkOptimizedIcon =
+  @property({ attribute: "dark-optimized-icon", type: Boolean })
-    false;
+  public darkOptimizedIcon = false;
 
   @property({ attribute: false, type: Boolean, reflect: true })
   public clickable = false;

src/onboarding/onboarding-welcome-links.ts

@@ -15,7 +15,8 @@ class OnboardingWelcomeLinks extends LitElement {
 
   @property({ attribute: false }) public localize!: LocalizeFunc<any>;
 
-  @property({ attribute: false, type: Boolean }) public mobileApp = false;
+  @property({ attribute: "mobile-app", type: Boolean })
+  public mobileApp = false;
 
   protected render(): TemplateResult {
     return html`<a

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

@@ -44,7 +44,7 @@ export class RecurrenceRuleEditor extends LitElement {
 
   @property({ attribute: false }) public dtstart?: Date;
 
-  @property({ attribute: false, type: Boolean }) public allDay = false;
+  @property({ attribute: "all-day", type: Boolean }) public allDay = false;
 
   @property({ attribute: false }) public locale!: HomeAssistant["locale"];
 

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

@@ -37,7 +37,7 @@ export class HaConfigApplicationCredentials extends LitElement {
 
   @state() public _applicationCredentials: ApplicationCredential[] = [];
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -66,9 +66,9 @@ class HaConfigAreaPage extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false, type: Boolean }) public showAdvanced = false;
+  @property({ attribute: false }) public showAdvanced = false;
 
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })

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

@@ -58,7 +58,7 @@ const SORT_OPTIONS = { sort: false, delay: 500, delayOnTouchOnly: true };
 export class HaConfigAreasDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -11,9 +11,9 @@ class HaConfigAreas extends HassRouterPage {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false, type: Boolean }) public showAdvanced = false;
+  @property({ attribute: false }) public showAdvanced = false;
 
   protected routerOptions: RouterOptions = {
     defaultPage: "dashboard",

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

@@ -318,7 +318,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
             <ha-domain-icon
               .hass=${this.hass}
               .domain=${domain}
-              brandFallback
+              brand-fallback
             ></ha-domain-icon>
           `,
           key: `${SERVICE_PREFIX}${domain}`,

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

@@ -28,7 +28,7 @@ export default class HaAutomationConditionEditor extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ attribute: false, type: Boolean }) public yamlMode = false;
+  @property({ attribute: false }) public yamlMode = false;
 
   private _processedCondition = memoizeOne((condition) =>
     expandConditionWithShorthand(condition)

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

@@ -91,7 +91,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
   @property({ attribute: false }) public automations!: AutomationEntity[];
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -128,7 +128,7 @@ type AutomationItem = AutomationEntity & {
 class HaAutomationPicker extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -53,7 +53,7 @@ export class HaAutomationTrace extends LitElement {
 
   @property({ attribute: false }) public automations!: AutomationEntity[];
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 

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

@@ -24,9 +24,9 @@ class HaConfigAutomation extends HassRouterPage {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false, type: Boolean }) public showAdvanced = false;
+  @property({ attribute: false }) public showAdvanced = false;
 
   @property({ attribute: false }) public automations: AutomationEntity[] = [];
 

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

@@ -34,7 +34,7 @@ import { constructUrlCurrentPath } from "../../../common/url/construct-url";
 export class HaManualAutomationEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -33,7 +33,7 @@ import { fileDownload } from "../../../util/file_download";
 class HaConfigBackup extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -24,7 +24,7 @@ import type { HomeAssistant } from "../../../types";
 export abstract class HaBlueprintGenericEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public disabled = false;
 

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

@@ -81,7 +81,7 @@ const createNewFunctions = {
 class HaBlueprintOverview extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -20,9 +20,9 @@ class HaConfigBlueprint extends HassRouterPage {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false, type: Boolean }) public showAdvanced = false;
+  @property({ attribute: false }) public showAdvanced = false;
 
   @property({ attribute: false })
   public blueprints: Record<string, Blueprints> = {};

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

@@ -37,7 +37,7 @@ import "./cloud-webhooks";
 export class CloudAccount extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -14,7 +14,7 @@ const NOT_LOGGED_IN_URLS = ["login", "register", "forgot-password"];
 class HaConfigCloud extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -31,7 +31,7 @@ import "../../ha-config-section";
 export class CloudLogin extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -18,7 +18,7 @@ import "../../../../components/ha-password-field";
 export class CloudRegister extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

src/panels/config/core/ha-config-system-navigation.ts

@@ -38,11 +38,11 @@ class HaConfigSystemNavigation extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ attribute: false }) public cloudStatus?: CloudStatus;
 
-  @property({ attribute: false, type: Boolean }) public showAdvanced = false;
+  @property({ attribute: false }) public showAdvanced = false;
 
   @state() private _latestBackupDate?: string;
 

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

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

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

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

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

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

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

@@ -15,10 +15,11 @@ class MQTTMessages extends LitElement {
 
   @property() public direction!: string;
 
-  @property({ attribute: false, type: Boolean }) public showAsYaml = false;
+  @property({ attribute: "show-as-yaml", type: Boolean })
+  public showAsYaml = false;
 
-  @property({ attribute: false, type: Boolean }) public showDeserialized =
+  @property({ attribute: "show-deserialized", type: Boolean })
-    false;
+  public showDeserialized = false;
 
   @property({ attribute: false }) public subscribedTopic!: string;
 

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

@@ -117,9 +117,9 @@ export class HaConfigDevicePage extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false, type: Boolean }) public showAdvanced = false;
+  @property({ attribute: false }) public showAdvanced = false;
 
   @state() private _related?: RelatedResult;
 

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

@@ -104,7 +104,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ attribute: false }) public entries!: ConfigEntry[];
 

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

@@ -15,9 +15,9 @@ class HaConfigDevices extends HassRouterPage {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false, type: Boolean }) public showAdvanced = false;
+  @property({ attribute: false }) public showAdvanced = false;
 
   protected routerOptions: RouterOptions = {
     defaultPage: "dashboard",

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

@@ -38,9 +38,9 @@ class HaConfigEnergy extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false, type: Boolean }) public showAdvanced = false;
+  @property({ attribute: false }) public showAdvanced = false;
 
   @property({ attribute: false }) public route!: Route;
 

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

@@ -136,7 +136,7 @@ export interface EntityRow extends StateEntity {
 export class HaConfigEntities extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public vertical = false;
 

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

@@ -301,7 +301,7 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
                         <mwc-list>
                           <ha-clickable-list-item
                             .href=${documentationURL}
-                            openNewTab
+                            open-new-tab
                             twoline
                             hasMeta
                           >

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

@@ -148,7 +148,7 @@ const getConfigEntry = (
 export class HaConfigHelpers extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -83,9 +83,9 @@ class HaConfigInfo extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false, type: Boolean }) public showAdvanced = false;
+  @property({ attribute: false }) public showAdvanced = false;
 
   @property({ attribute: false }) public route!: Route;
 
@@ -172,7 +172,7 @@ class HaConfigInfo extends LitElement {
                 (page) => html`
                   <ha-clickable-list-item
                     graphic="avatar"
-                    openNewTab
+                    open-new-tab
                     href=${documentationUrl(this.hass, page.path)}
                   >
                     <div

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

@@ -147,9 +147,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false, type: Boolean }) public showAdvanced = false;
+  @property({ attribute: false }) public showAdvanced = false;
 
   @property({ attribute: false }) public configEntries?: ConfigEntry[];
 

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

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

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

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

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

@@ -38,7 +38,7 @@ export class HaIntegrationCard extends LitElement {
   @property({ attribute: false })
   public entityRegistryEntries!: EntityRegistryEntry[];
 
-  @property({ attribute: false, type: Boolean })
+  @property({ attribute: "supports-diagnostics", type: Boolean })
   public supportsDiagnostics = false;
 
   @property({ attribute: false }) public logInfo?: IntegrationLogInfo;

src/panels/config/integrations/ha-integration-list-item.ts

@@ -21,7 +21,8 @@ export class HaIntegrationListItem extends ListItemBase {
 
   @property({ type: String, reflect: true }) graphic: GraphicType = "medium";
 
-  @property({ attribute: false, type: Boolean }) hasMeta = true;
+  // eslint-disable-next-line lit/attribute-names
+  @property({ type: Boolean }) hasMeta = true;
 
   @property({ type: Boolean }) brand = false;
 

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

@@ -22,7 +22,7 @@ export const configTabs: PageNavigation[] = [
 class MatterConfigRouter extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts

@@ -19,7 +19,7 @@ class ZHAAddDevicesPage extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ attribute: false }) public route?: Route;
 

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

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

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

@@ -8,7 +8,7 @@ import type { HomeAssistant } from "../../../../../types";
 class ZHAConfigDashboardRouter extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -67,7 +67,7 @@ class ZHAConfigDashboard extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ attribute: false }) public configEntryId?: string;
 

src/panels/config/integrations/integration-panels/zha/zha-group-page.ts

@@ -37,7 +37,7 @@ export class ZHAGroupPage extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ attribute: false, type: Array })
   public deviceEndpoints: ZHADeviceEndpoint[] = [];

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

@@ -34,7 +34,7 @@ export class ZHAGroupsDashboard extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @state() private _groups: ZHAGroup[] = [];
 

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

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

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

@@ -31,7 +31,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ attribute: false })
   public zoomedDeviceIdFromURL?: string;

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

@@ -57,7 +57,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ attribute: false }) public configEntryId!: string;
 

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

@@ -24,7 +24,7 @@ export const configTabs: PageNavigation[] = [
 class ZWaveJSConfigRouter extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -60,7 +60,7 @@ class ZWaveJSNodeConfig extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ attribute: false }) public configEntryId?: string;
 

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts

@@ -40,7 +40,7 @@ class ZWaveJSNodeInstaller extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ attribute: false }) public configEntryId?: string;
 

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

@@ -47,7 +47,7 @@ import { showLabelDetailDialog } from "./show-dialog-label-detail";
 export class HaConfigLabels extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -51,7 +51,7 @@ export class HaConfigLogs extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ attribute: false }) public route!: Route;
 

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

@@ -65,7 +65,7 @@ type DataTableItem = Pick<
 export class HaConfigLovelaceDashboards extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
 

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

@@ -26,7 +26,7 @@ class HaConfigLovelace extends HassRouterPage {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   protected routerOptions: RouterOptions = {
     defaultPage: "dashboards",

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

@@ -38,7 +38,7 @@ import { storage } from "../../../../common/decorators/storage";
 export class HaConfigLovelaceRescources extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false, type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;