fix a lot of attributes

gallery/src/pages/automation/trace.ts

@@ -35,7 +35,7 @@ export class DemoAutomationTrace extends LitElement {
                 .sampleIdx=${idx}
               ></hat-script-graph>
               <hat-trace-timeline
-                allowPick
+                allow-pick
                 .hass=${this.hass}
                 .trace=${trace.trace}
                 .logbookEntries=${trace.logbookEntries}

hassio/src/backups/hassio-backups.ts

@@ -198,7 +198,7 @@ export class HassioBackups extends LitElement {
         @selection-changed=${this._handleSelectionChanged}
         clickable
         selectable
-        hasFab
+        has-fab
         .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
         back-path=${atLeastVersion(this.hass.config.version, 2022, 5)
           ? "/config/system"

hassio/src/dashboard/hassio-dashboard.ts

@@ -76,7 +76,7 @@ class HassioDashboard extends LitElement {
         .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
         back-path="/config"
         supervisor
-        hasFab
+        has-fab
       >
         <span slot="header">
           ${this.supervisor.localize(

landing-page/src/ha-landing-page.ts

@@ -64,9 +64,9 @@ class HaLandingPage extends LandingPageBaseElement {
         <ha-language-picker
           .value=${this.language}
           .label=${""}
-          nativeName
+          native-name
           @value-changed=${this._languageChanged}
-          inlineArrow
+          inline-arrow
         ></ha-language-picker>
         <a
           href="https://www.home-assistant.io/getting-started/onboarding/"

src/auth/ha-authorize.ts

@@ -202,9 +202,9 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
         <ha-language-picker
           .value=${this.language}
           .label=${""}
-          nativeName
+          native-name
           @value-changed=${this._languageChanged}
-          inlineArrow
+          inline-arrow
         ></ha-language-picker>
         <a
           href="https://www.home-assistant.io/docs/authentication/"

src/components/ha-code-editor.ts

@@ -47,7 +47,7 @@ export class HaCodeEditor extends ReactiveElement {
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: Boolean }) public autofocus = false;
 
-  @property({ attribute: false, type: Boolean }) public readOnly = false;
+  @property({ attribute: "read-only", type: Boolean }) public readOnly = false;
 
   @property({ type: Boolean }) public linewrap = false;
 

src/components/ha-date-input.ts

@@ -51,7 +51,7 @@ export class HaDateInput extends LitElement {
 
   @property() public helper?: string;
 
-  @property({ attribute: false, type: Boolean }) public canClear = false;
+  @property({ attribute: "can-clear", type: Boolean }) public canClear = false;
 
   render() {
     return html`<ha-textfield

src/components/ha-icon-button.ts

@@ -21,7 +21,7 @@ export class HaIconButton extends LitElement {
   @property({ type: String, attribute: "aria-haspopup" })
   override ariaHasPopup!: IconButton["ariaHasPopup"];
 
-  @property({ attribute: false, type: Boolean }) hideTitle = false;
+  @property({ attribute: "hide-title", type: Boolean }) hideTitle = false;
 
   @query("mwc-icon-button", true) private _button?: IconButton;
 

src/components/ha-language-picker.ts

@@ -27,11 +27,13 @@ export class HaLanguagePicker extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
-  @property({ attribute: false, type: Boolean }) public nativeName = false;
+  @property({ attribute: "native-name", type: Boolean })
+  public nativeName = false;
 
-  @property({ attribute: false, type: Boolean }) public noSort = false;
+  @property({ attribute: "no-sort", type: Boolean }) public noSort = false;
 
-  @property({ attribute: false, type: Boolean }) public inlineArrow = false;
+  @property({ attribute: "inline-arrow", type: Boolean })
+  public inlineArrow = false;
 
   @state() _defaultLanguages: string[] = [];
 

src/components/ha-select.ts

@@ -14,7 +14,8 @@ export class HaSelect extends SelectBase {
 
   @property({ type: Boolean, reflect: true }) public clearable = false;
 
-  @property({ attribute: false, type: Boolean }) public inlineArrow = false;
+  @property({ attribute: "inline-arrow", type: Boolean })
+  public inlineArrow = false;
 
   protected override render() {
     return html`

src/components/ha-service-control.ts

@@ -86,7 +86,8 @@ export class HaServiceControl extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @property({ attribute: false, type: Boolean }) public showAdvanced = false;
+  @property({ attribute: "show-advanced", type: Boolean }) public showAdvanced =
+    false;
 
   @property({ attribute: false, type: Boolean, reflect: true })
   public hidePicker = false;

src/components/ha-target-picker.ts

@@ -345,7 +345,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                   "ui.components.target-picker.expand"
                 )}
                 .path=${mdiUnfoldMoreVertical}
-                hideTitle
+                hide-title
                 .id=${id}
                 .type=${type}
                 @click=${this._handleExpand}
@@ -361,7 +361,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
             class="mdc-chip__icon mdc-chip__icon--trailing"
             .label=${this.hass.localize("ui.components.target-picker.remove")}
             .path=${mdiClose}
-            hideTitle
+            hide-title
             .id=${id}
             .type=${type}
             @click=${this._handleRemove}

src/components/ha-textfield.ts

@@ -15,7 +15,8 @@ export class HaTextField extends TextFieldBase {
   @property({ type: Boolean }) public icon = false;
 
   // @ts-ignore
-  @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;
 

src/components/ha-yaml-editor.ts

@@ -34,19 +34,22 @@ export class HaYamlEditor extends LitElement {
 
   @property({ attribute: false }) public defaultValue?: any;
 
-  @property({ attribute: false, type: Boolean }) public isValid = true;
+  @property({ attribute: "is-valid", type: Boolean }) public isValid = true;
 
   @property() public label?: string;
 
-  @property({ attribute: false, type: Boolean }) public autoUpdate = false;
+  @property({ attribute: "auto-update", type: Boolean }) public autoUpdate =
+    false;
 
-  @property({ attribute: false, type: Boolean }) public readOnly = false;
+  @property({ attribute: "read-only", type: Boolean }) public readOnly = false;
 
   @property({ type: Boolean }) public required = false;
 
-  @property({ attribute: false, type: Boolean }) public copyClipboard = false;
+  @property({ attribute: "copy-clipboard", type: Boolean })
+  public copyClipboard = false;
 
-  @property({ attribute: false, type: Boolean }) public hasExtraActions = false;
+  @property({ attribute: "has-extra-actions", type: Boolean })
+  public hasExtraActions = false;
 
   @state() private _yaml = "";
 

src/components/map/ha-map.ts

@@ -69,12 +69,13 @@ export class HaMap extends ReactiveElement {
 
   @property({ type: Boolean }) public clickable = false;
 
-  @property({ attribute: false, type: Boolean }) public autoFit = false;
+  @property({ attribute: "auto-fit", type: Boolean }) public autoFit = false;
 
-  @property({ attribute: false, type: Boolean }) public renderPassive = false;
+  @property({ attribute: "render-passive", type: Boolean })
+  public renderPassive = false;
 
-  @property({ attribute: false, type: Boolean }) public interactiveZones =
-    false;
+  @property({ attribute: "interactive-zones", type: Boolean })
+  public interactiveZones = false;
 
   @property({ attribute: false, type: Boolean }) public fitZones = false;
 

src/components/trace/ha-trace-blueprint-config.ts

@@ -17,7 +17,7 @@ export class HaTraceBlueprintConfig extends LitElement {
     return html`
       <ha-code-editor
         .value=${dump(this.trace.blueprint_inputs || "").trimRight()}
-        readOnly
+        read-only
         dir="ltr"
       ></ha-code-editor>
     `;

src/components/trace/ha-trace-config.ts

@@ -17,7 +17,7 @@ export class HaTraceConfig extends LitElement {
     return html`
       <ha-code-editor
         .value=${dump(this.trace.config).trimRight()}
-        readOnly
+        read-only
         dir="ltr"
       ></ha-code-editor>
     `;

src/components/trace/ha-trace-path-details.ts

@@ -223,7 +223,7 @@ export class HaTracePathDetails extends LitElement {
     return config
       ? html`<ha-code-editor
           .value=${dump(config).trimEnd()}
-          readOnly
+          read-only
           dir="ltr"
         ></ha-code-editor>`
       : this.hass!.localize(

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

@@ -25,7 +25,7 @@ export class HaTraceTimeline extends LitElement {
         .trace=${this.trace}
         .logbookEntries=${this.logbookEntries}
         .selectedPath=${this.selected.path}
-        allowPick
+        allow-pick
       >
       </hat-trace-timeline>
       <hat-logbook-note

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

@@ -676,7 +676,8 @@ export class HaAutomationTracer extends LitElement {
 
   @property({ attribute: false }) public selectedPath?: string;
 
-  @property({ attribute: false, type: Boolean }) public allowPick = false;
+  @property({ attribute: "allow-pick", type: Boolean }) public allowPick =
+    false;
 
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })

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

@@ -29,7 +29,7 @@ class MoreInfoPerson extends LitElement {
             <ha-map
               .hass=${this.hass}
               .entities=${this._entityArray(this.stateObj.entity_id)}
-              autoFit
+              auto-fit
             ></ha-map>
           `
         : ""}

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

@@ -84,7 +84,7 @@ export class HaTabsSubpageDataTable extends LitElement {
    * Do we need to add padding for a fab.
    * @type {Boolean}
    */
-  @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
@@ -156,7 +156,8 @@ export class HaTabsSubpageDataTable extends LitElement {
    * Show the filter menu.
    * @type {Boolean}
    */
-  @property({ attribute: false, type: Boolean }) public hasFilters = false;
+  @property({ attribute: "has-filters", type: Boolean }) public hasFilters =
+    false;
 
   @property({ attribute: false, type: Boolean }) public showFilters = false;
 

src/onboarding/ha-onboarding.ts

@@ -141,9 +141,9 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
         <ha-language-picker
           .value=${this.language}
           .label=${""}
-          nativeName
+          native-name
           @value-changed=${this._languageChanged}
-          inlineArrow
+          inline-arrow
         ></ha-language-picker>
         <a
           href="https://www.home-assistant.io/getting-started/onboarding/"

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

@@ -159,7 +159,7 @@ export class HaConfigApplicationCredentials extends LitElement {
           this._applicationCredentials,
           this.hass.localize
         )}
-        hasFab
+        has-fab
         selectable
         .selected=${this._selected.length}
         @selection-changed=${this._handleSelectionChanged}

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

@@ -413,7 +413,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                       `
                     : ""}
                   <ha-yaml-editor
-                    copyClipboard
+                    copy-clipboard
                     .hass=${this.hass}
                     .defaultValue=${this._preprocessYaml()}
                     .readOnly=${this._readOnly}

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

@@ -522,7 +522,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         selectable
         .selected=${this._selected.length}
         @selection-changed=${this._handleSelectionChanged}
-        hasFilters
+        has-filters
         .filters=${
           Object.values(this._filters).filter((filter) =>
             Array.isArray(filter.value)
@@ -556,7 +556,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         @clear-filter=${this._clearFilter}
         .filter=${this._filter}
         @search-changed=${this._handleSearchChange}
-        hasFab
+        has-fab
         clickable
         class=${this.narrow ? "narrow" : ""}
       >

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

@@ -613,7 +613,7 @@ export default class HaAutomationTriggerRow extends LitElement {
       ),
       text: html`
         <ha-yaml-editor
-          readOnly
+          read-only
           .hass=${this.hass}
           .defaultValue=${this._triggered}
         ></ha-yaml-editor>

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

@@ -130,7 +130,7 @@ class HaConfigBackup extends LitElement {
 
     return html`
       <hass-tabs-subpage-data-table
-        hasFab
+        has-fab
         .tabs=${[
           {
             translationKey: "ui.panel.config.backup.caption",

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

@@ -290,7 +290,7 @@ class HaBlueprintOverview extends LitElement {
         .noDataText=${this.hass.localize(
           "ui.panel.config.blueprint.overview.no_blueprints"
         )}
-        hasFab
+        has-fab
         clickable
         @row-click=${this._handleRowClicked}
         .appendRow=${html`<div

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

@@ -229,7 +229,7 @@ class HaConfigSectionGeneral extends LitElement {
               ></ha-country-picker>
               <ha-language-picker
                 .hass=${this.hass}
-                nativeName
+                native-name
                 .label=${this.hass.localize(
                   "ui.panel.config.core.section.core.core_config.language"
                 )}

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

@@ -709,7 +709,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         .selected=${this._selected.length}
         @selection-changed=${this._handleSelectionChanged}
         .filter=${this._filter}
-        hasFilters
+        has-filters
         .filters=${Object.values(this._filters).filter((filter) =>
           Array.isArray(filter.value)
             ? filter.value.length
@@ -731,7 +731,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         @collapsed-changed=${this._handleCollapseChanged}
         @row-click=${this._handleRowClicked}
         clickable
-        hasFab
+        has-fab
         class=${this.narrow ? "narrow" : ""}
       >
         <ha-integration-overflow-menu

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

@@ -750,7 +750,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           "ui.panel.config.entities.picker.search",
           { number: filteredEntities.length }
         )}
-        hasFilters
+        has-filters
         .filters=${
           Object.values(this._filters).filter((filter) =>
             Array.isArray(filter)

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

@@ -616,7 +616,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         selectable
         .selected=${this._selected.length}
         @selection-changed=${this._handleSelectionChanged}
-        hasFilters
+        has-filters
         .filters=${Object.values(this._filters).filter((filter) =>
           Array.isArray(filter)
             ? filter.length
@@ -641,7 +641,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         @row-click=${this._openEditDialog}
         .filter=${this._filter}
         @search-changed=${this._handleSearchChange}
-        hasFab
+        has-fab
         clickable
         .noDataText=${this.hass.localize(
           "ui.panel.config.helpers.picker.no_helpers"