From 0ffa0c2bede194fe4f9c260d526b69025f8e1b02 Mon Sep 17 00:00:00 2001
From: Petar Petrov <MindFreeze@users.noreply.github.com>
Date: Fri, 6 Dec 2024 14:24:41 +0200
Subject: [PATCH 1/3] Fix chart legend visibility

---
 src/components/chart/statistics-chart.ts      | 3 ++-
 src/dialogs/more-info/ha-more-info-history.ts | 3 +--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts
index 9153cf99dd91..d1e2ac5e7610 100644
--- a/src/components/chart/statistics-chart.ts
+++ b/src/components/chart/statistics-chart.ts
@@ -74,7 +74,8 @@ export class StatisticsChart extends LitElement {
 
   @property({ attribute: false, type: Boolean }) public fitYData = false;
 
-  @property({ attribute: false, type: Boolean }) public hideLegend = false;
+  @property({ attribute: "hide-legend", type: Boolean }) public hideLegend =
+    false;
 
   @property({ attribute: false, type: Boolean }) public logarithmicScale =
     false;
diff --git a/src/dialogs/more-info/ha-more-info-history.ts b/src/dialogs/more-info/ha-more-info-history.ts
index 33d3cbd8cc8a..6f7792f86620 100644
--- a/src/dialogs/more-info/ha-more-info-history.ts
+++ b/src/dialogs/more-info/ha-more-info-history.ts
@@ -93,8 +93,7 @@ export class MoreInfoHistory extends LitElement {
                   .metadata=${this._metadata}
                   .statTypes=${statTypes}
                   .names=${this._statNames}
-                  hideLegend
-                  .showNames=${false}
+                  hide-legend
                   .clickForMoreInfo=${false}
                 ></statistics-chart>`
               : html`<state-history-charts

From ea07c79305069fe497acda0160df6218d82e018d Mon Sep 17 00:00:00 2001
From: Petar Petrov <MindFreeze@users.noreply.github.com>
Date: Fri, 6 Dec 2024 14:40:40 +0200
Subject: [PATCH 2/3] fix inDialog

---
 gallery/src/components/demo-more-info.ts            | 2 +-
 src/dialogs/more-info/ha-more-info-info.ts          | 2 +-
 src/panels/calendar/dialog-calendar-event-detail.ts | 2 +-
 src/state-summary/state-card-content.ts             | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/gallery/src/components/demo-more-info.ts b/gallery/src/components/demo-more-info.ts
index fb0ab5ff5e63..5e39ab9eac6f 100644
--- a/gallery/src/components/demo-more-info.ts
+++ b/gallery/src/components/demo-more-info.ts
@@ -23,7 +23,7 @@ class DemoMoreInfo extends LitElement {
             <state-card-content
               .stateObj=${state}
               .hass=${this.hass}
-              inDialog
+              in-dialog
             ></state-card-content>
 
             <more-info-content
diff --git a/src/dialogs/more-info/ha-more-info-info.ts b/src/dialogs/more-info/ha-more-info-info.ts
index c4f220f2ff01..efee44afbdc8 100644
--- a/src/dialogs/more-info/ha-more-info-info.ts
+++ b/src/dialogs/more-info/ha-more-info-info.ts
@@ -72,7 +72,7 @@ export class MoreInfoInfo extends LitElement {
             ? ""
             : html`
                 <state-card-content
-                  inDialog
+                  in-dialog
                   .stateObj=${stateObj}
                   .hass=${this.hass}
                 ></state-card-content>
diff --git a/src/panels/calendar/dialog-calendar-event-detail.ts b/src/panels/calendar/dialog-calendar-event-detail.ts
index b3031df02cde..45863e5e443c 100644
--- a/src/panels/calendar/dialog-calendar-event-detail.ts
+++ b/src/panels/calendar/dialog-calendar-event-detail.ts
@@ -93,7 +93,7 @@ class DialogCalendarEventDetail extends LitElement {
               .hass=${this.hass}
               .stateObj=${stateObj}
               .color=${this._params.color}
-              inDialog
+              in-dialog
             ></state-info>
           </div>
         </div>
diff --git a/src/state-summary/state-card-content.ts b/src/state-summary/state-card-content.ts
index f2c72f72828e..b2c87e8749bc 100644
--- a/src/state-summary/state-card-content.ts
+++ b/src/state-summary/state-card-content.ts
@@ -36,7 +36,7 @@ class StateCardContent 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;
 
   protected render() {
     let stateCard: string;

From 8dedf54d55c319965ebbfc97e6024b89c7a94e74 Mon Sep 17 00:00:00 2001
From: Petar Petrov <MindFreeze@users.noreply.github.com>
Date: Fri, 6 Dec 2024 15:07:31 +0200
Subject: [PATCH 3/3] fix a lot of attributes

---
 gallery/src/pages/automation/trace.ts               |  2 +-
 hassio/src/backups/hassio-backups.ts                |  2 +-
 hassio/src/dashboard/hassio-dashboard.ts            |  2 +-
 landing-page/src/ha-landing-page.ts                 |  4 ++--
 src/auth/ha-authorize.ts                            |  4 ++--
 src/components/ha-code-editor.ts                    |  2 +-
 src/components/ha-date-input.ts                     |  2 +-
 src/components/ha-icon-button.ts                    |  2 +-
 src/components/ha-language-picker.ts                |  8 +++++---
 src/components/ha-select.ts                         |  3 ++-
 src/components/ha-service-control.ts                |  3 ++-
 src/components/ha-target-picker.ts                  |  4 ++--
 src/components/ha-textfield.ts                      |  3 ++-
 src/components/ha-yaml-editor.ts                    | 13 ++++++++-----
 src/components/map/ha-map.ts                        |  9 +++++----
 src/components/trace/ha-trace-blueprint-config.ts   |  2 +-
 src/components/trace/ha-trace-config.ts             |  2 +-
 src/components/trace/ha-trace-path-details.ts       |  2 +-
 src/components/trace/ha-trace-timeline.ts           |  2 +-
 src/components/trace/hat-trace-timeline.ts          |  3 ++-
 src/dialogs/more-info/controls/more-info-person.ts  |  2 +-
 src/layouts/hass-tabs-subpage-data-table.ts         |  5 +++--
 src/onboarding/ha-onboarding.ts                     |  4 ++--
 .../ha-config-application-credentials.ts            |  2 +-
 .../config/automation/ha-automation-editor.ts       |  2 +-
 .../config/automation/ha-automation-picker.ts       |  4 ++--
 .../automation/trigger/ha-automation-trigger-row.ts |  2 +-
 src/panels/config/backup/ha-config-backup.ts        |  2 +-
 .../config/blueprint/ha-blueprint-overview.ts       |  2 +-
 src/panels/config/core/ha-config-section-general.ts |  2 +-
 .../config/devices/ha-config-devices-dashboard.ts   |  4 ++--
 src/panels/config/entities/ha-config-entities.ts    |  2 +-
 src/panels/config/helpers/ha-config-helpers.ts      |  4 ++--
 .../integration-panels/zha/zha-groups-dashboard.ts  |  2 +-
 src/panels/config/labels/ha-config-labels.ts        |  2 +-
 .../dashboards/ha-config-lovelace-dashboards.ts     |  2 +-
 src/panels/config/scene/ha-scene-dashboard.ts       |  4 ++--
 src/panels/config/script/ha-script-editor.ts        |  2 +-
 src/panels/config/script/ha-script-picker.ts        |  4 ++--
 src/panels/config/tags/ha-config-tags.ts            |  2 +-
 src/panels/config/users/ha-config-users.ts          |  2 +-
 .../debug/assist-render-pipeline-run.ts             |  4 ++--
 .../ha-config-voice-assistants-expose.ts            |  2 +-
 .../action/developer-tools-action.ts                | 10 +++++-----
 .../developer-tools/event/event-subscribe-card.ts   |  2 +-
 src/panels/lovelace/cards/hui-map-card.ts           |  4 ++--
 .../lovelace/components/hui-generic-entity-row.ts   |  2 +-
 .../lovelace/entity-rows/hui-datetime-entity-row.ts |  2 +-
 .../entity-rows/hui-input-select-entity-row.ts      |  2 +-
 .../entity-rows/hui-input-text-entity-row.ts        |  2 +-
 .../lovelace/entity-rows/hui-select-entity-row.ts   |  2 +-
 .../lovelace/entity-rows/hui-text-entity-row.ts     |  2 +-
 src/panels/map/ha-panel-map.ts                      |  4 ++--
 src/panels/profile/ha-pick-language-row.ts          |  2 +-
 src/panels/todo/dialog-todo-item-editor.ts          |  2 +-
 55 files changed, 92 insertions(+), 81 deletions(-)

diff --git a/gallery/src/pages/automation/trace.ts b/gallery/src/pages/automation/trace.ts
index 86fac502a903..2b6549c07fc3 100644
--- a/gallery/src/pages/automation/trace.ts
+++ b/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}
diff --git a/hassio/src/backups/hassio-backups.ts b/hassio/src/backups/hassio-backups.ts
index ca0321ecffcf..1250e62f886f 100644
--- a/hassio/src/backups/hassio-backups.ts
+++ b/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"
diff --git a/hassio/src/dashboard/hassio-dashboard.ts b/hassio/src/dashboard/hassio-dashboard.ts
index 9eaa76a9a4e6..531f17154114 100644
--- a/hassio/src/dashboard/hassio-dashboard.ts
+++ b/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(
diff --git a/landing-page/src/ha-landing-page.ts b/landing-page/src/ha-landing-page.ts
index 7c5f058b1599..338fdbeafb27 100644
--- a/landing-page/src/ha-landing-page.ts
+++ b/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/"
diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts
index 7208a25109f2..6cfb67b696f4 100644
--- a/src/auth/ha-authorize.ts
+++ b/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/"
diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts
index dcd774a54d48..c43fc4ff9a37 100644
--- a/src/components/ha-code-editor.ts
+++ b/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;
 
diff --git a/src/components/ha-date-input.ts b/src/components/ha-date-input.ts
index 7d3524851e28..80b86b7559c9 100644
--- a/src/components/ha-date-input.ts
+++ b/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
diff --git a/src/components/ha-icon-button.ts b/src/components/ha-icon-button.ts
index 5f067a2835b7..50490440fdd7 100644
--- a/src/components/ha-icon-button.ts
+++ b/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;
 
diff --git a/src/components/ha-language-picker.ts b/src/components/ha-language-picker.ts
index 650f5223158e..f25f7d481491 100644
--- a/src/components/ha-language-picker.ts
+++ b/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[] = [];
 
diff --git a/src/components/ha-select.ts b/src/components/ha-select.ts
index 7fce69b9ccc7..f856f0edd1d7 100644
--- a/src/components/ha-select.ts
+++ b/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`
diff --git a/src/components/ha-service-control.ts b/src/components/ha-service-control.ts
index 3bba2598351a..dfc26ed559c1 100644
--- a/src/components/ha-service-control.ts
+++ b/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;
diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts
index 67cbc98957be..f93148c0c31d 100644
--- a/src/components/ha-target-picker.ts
+++ b/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}
diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts
index df03a5d55068..57304e171c6c 100644
--- a/src/components/ha-textfield.ts
+++ b/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;
 
diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts
index 7e74759d7608..561feb0f3f80 100644
--- a/src/components/ha-yaml-editor.ts
+++ b/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 = "";
 
diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts
index e4a72802e717..1b984590a77d 100644
--- a/src/components/map/ha-map.ts
+++ b/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;
 
diff --git a/src/components/trace/ha-trace-blueprint-config.ts b/src/components/trace/ha-trace-blueprint-config.ts
index 5d449504cb4a..f9818e1c741a 100644
--- a/src/components/trace/ha-trace-blueprint-config.ts
+++ b/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>
     `;
diff --git a/src/components/trace/ha-trace-config.ts b/src/components/trace/ha-trace-config.ts
index e29aca47c676..efc7e0f0c93d 100644
--- a/src/components/trace/ha-trace-config.ts
+++ b/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>
     `;
diff --git a/src/components/trace/ha-trace-path-details.ts b/src/components/trace/ha-trace-path-details.ts
index 75b4946f71ee..19c8590af454 100644
--- a/src/components/trace/ha-trace-path-details.ts
+++ b/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(
diff --git a/src/components/trace/ha-trace-timeline.ts b/src/components/trace/ha-trace-timeline.ts
index 07e7fc360026..024e257f68a1 100644
--- a/src/components/trace/ha-trace-timeline.ts
+++ b/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
diff --git a/src/components/trace/hat-trace-timeline.ts b/src/components/trace/hat-trace-timeline.ts
index 0dbdd4abb5c9..6a12ceb1c80c 100644
--- a/src/components/trace/hat-trace-timeline.ts
+++ b/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 })
diff --git a/src/dialogs/more-info/controls/more-info-person.ts b/src/dialogs/more-info/controls/more-info-person.ts
index 76aa1b7e3bf3..d70101ad468a 100644
--- a/src/dialogs/more-info/controls/more-info-person.ts
+++ b/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>
           `
         : ""}
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 2be1b35d0fa6..af90aff98264 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/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;
 
diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts
index 466f6f070e84..4716165ebefc 100644
--- a/src/onboarding/ha-onboarding.ts
+++ b/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/"
diff --git a/src/panels/config/application_credentials/ha-config-application-credentials.ts b/src/panels/config/application_credentials/ha-config-application-credentials.ts
index 08968bbeced1..5d188627404e 100644
--- a/src/panels/config/application_credentials/ha-config-application-credentials.ts
+++ b/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}
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
index 9e81a67e0dec..6f1b4c662ef6 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/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}
diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts
index 45c8b630a705..cbcc207630e0 100644
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/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" : ""}
       >
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
index fb7a6301917b..532e6c91999e 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/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>
diff --git a/src/panels/config/backup/ha-config-backup.ts b/src/panels/config/backup/ha-config-backup.ts
index cb0c164afd2c..eb9a81322a27 100644
--- a/src/panels/config/backup/ha-config-backup.ts
+++ b/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",
diff --git a/src/panels/config/blueprint/ha-blueprint-overview.ts b/src/panels/config/blueprint/ha-blueprint-overview.ts
index 78454bbfec2c..294edb981401 100644
--- a/src/panels/config/blueprint/ha-blueprint-overview.ts
+++ b/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
diff --git a/src/panels/config/core/ha-config-section-general.ts b/src/panels/config/core/ha-config-section-general.ts
index 22eb751cea28..693937b1d067 100644
--- a/src/panels/config/core/ha-config-section-general.ts
+++ b/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"
                 )}
diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts
index 8e794f07f696..f775364070d9 100644
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/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
diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts
index ab11698976f3..b6cab5ce8689 100644
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/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)
diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts
index 3d27a66775b7..f8328902761c 100644
--- a/src/panels/config/helpers/ha-config-helpers.ts
+++ b/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"
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
index 034b530c0fc8..5f6352d932f5 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
@@ -109,7 +109,7 @@ export class ZHAGroupsDashboard extends LitElement {
         .data=${this._formattedGroups(this._groups)}
         @row-click=${this._handleRowClicked}
         clickable
-        hasFab
+        has-fab
       >
         <a href="/config/zha/group-add" slot="fab">
           <ha-fab
diff --git a/src/panels/config/labels/ha-config-labels.ts b/src/panels/config/labels/ha-config-labels.ts
index 0ee2e373ec5c..48cb1307563a 100644
--- a/src/panels/config/labels/ha-config-labels.ts
+++ b/src/panels/config/labels/ha-config-labels.ts
@@ -229,7 +229,7 @@ export class HaConfigLabels extends LitElement {
         .columns=${this._columns(this.hass.localize, this.narrow)}
         .data=${this._data(this._labels)}
         .noDataText=${this.hass.localize("ui.panel.config.labels.no_labels")}
-        hasFab
+        has-fab
         .initialSorting=${this._activeSorting}
         .columnOrder=${this._activeColumnOrder}
         .hiddenColumns=${this._activeHiddenColumns}
diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
index 0d28fb3e340c..5023dd41e8ff 100644
--- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
+++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
@@ -322,7 +322,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
         @search-changed=${this._handleSearchChange}
         @row-click=${this._editDashboard}
         id="url_path"
-        hasFab
+        has-fab
         clickable
       >
         <ha-button-menu slot="toolbar-icon" activatable>
diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts
index 484838305853..473a1d9dd64d 100644
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/src/panels/config/scene/ha-scene-dashboard.ts
@@ -541,7 +541,7 @@ class HaSceneDashboard 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)
             ? filter.value.length
@@ -570,7 +570,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         @clear-filter=${this._clearFilter}
         .filter=${this._filter}
         @search-changed=${this._handleSearchChange}
-        hasFab
+        has-fab
         clickable
         @row-click=${this._handleRowClicked}
       >
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index 8a03fa13d3f0..418607183518 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -366,7 +366,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
               `
             : this._mode === "yaml"
               ? html`<ha-yaml-editor
-                  copyClipboard
+                  copy-clipboard
                   .hass=${this.hass}
                   .defaultValue=${this._preprocessYaml()}
                   .readOnly=${this._readOnly}
diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts
index 1dd1cdc9720d..342b3fa88b89 100644
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@@ -526,7 +526,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           "ui.panel.config.script.picker.search",
           { number: scripts.length }
         )}
-        hasFilters
+        has-filters
         .initialGroupColumn=${this._activeGrouping || "category"}
         .initialCollapsedGroups=${this._activeCollapsed}
         .initialSorting=${this._activeSorting}
@@ -558,7 +558,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         @clear-filter=${this._clearFilter}
         .filter=${this._filter}
         @search-changed=${this._handleSearchChange}
-        hasFab
+        has-fab
         clickable
         class=${this.narrow ? "narrow" : ""}
         @row-click=${this._handleRowClicked}
diff --git a/src/panels/config/tags/ha-config-tags.ts b/src/panels/config/tags/ha-config-tags.ts
index a81dfd41cad1..cdd8188acc5d 100644
--- a/src/panels/config/tags/ha-config-tags.ts
+++ b/src/panels/config/tags/ha-config-tags.ts
@@ -192,7 +192,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         .noDataText=${this.hass.localize("ui.panel.config.tag.no_tags")}
         .filter=${this._filter}
         @search-changed=${this._handleSearchChange}
-        hasFab
+        has-fab
         clickable
         @row-click=${this._editTag}
         id="id"
diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts
index 07c1342f1d53..ea5ae6e3ca17 100644
--- a/src/panels/config/users/ha-config-users.ts
+++ b/src/panels/config/users/ha-config-users.ts
@@ -195,7 +195,7 @@ export class HaConfigUsers extends LitElement {
         .filter=${this._filter}
         @search-changed=${this._handleSearchChange}
         @row-click=${this._editUser}
-        hasFab
+        has-fab
         clickable
       >
         <ha-fab
diff --git a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
index 9d3bbf81eac5..26c4a88ac474 100644
--- a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
+++ b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
@@ -365,8 +365,8 @@ export class AssistPipelineDebug extends LitElement {
         <ha-expansion-panel>
           <span slot="header">Raw</span>
           <ha-yaml-editor
-            readOnly
-            autoUpdate
+            read-only
+            auto-update
             .value=${this.pipelineRun}
           ></ha-yaml-editor>
         </ha-expansion-panel>
diff --git a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
index 4abfb5933dc9..d9fe8ca7758e 100644
--- a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
+++ b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
@@ -576,7 +576,7 @@ export class VoiceAssistantsExpose extends LitElement {
         @search-changed=${this._handleSearchChange}
         @row-click=${this._openEditEntry}
         id="entity_id"
-        hasFab
+        has-fab
       >
         ${this._selectedEntities.length
           ? html`
diff --git a/src/panels/developer-tools/action/developer-tools-action.ts b/src/panels/developer-tools/action/developer-tools-action.ts
index cfeedd267b7d..5098dfc716cc 100644
--- a/src/panels/developer-tools/action/developer-tools-action.ts
+++ b/src/panels/developer-tools/action/developer-tools-action.ts
@@ -153,7 +153,7 @@ class HaPanelDevAction extends LitElement {
                   .hass=${this.hass}
                   .value=${this._serviceData}
                   .narrow=${this.narrow}
-                  showAdvanced
+                  show-advanced
                   @value-changed=${this._serviceDataChanged}
                   class="card-content"
                 ></ha-service-control>
@@ -203,10 +203,10 @@ class HaPanelDevAction extends LitElement {
               <div class="card-content">
                 <ha-yaml-editor
                   .hass=${this.hass}
-                  copyClipboard
-                  readOnly
-                  autoUpdate
-                  hasExtraActions
+                  copy-clipboard
+                  read-only
+                  auto-update
+                  has-extra-actions
                   .value=${this._response}
                 >
                   <ha-button slot="extra-actions" @click=${this._copyTemplate}
diff --git a/src/panels/developer-tools/event/event-subscribe-card.ts b/src/panels/developer-tools/event/event-subscribe-card.ts
index 13b0b931414f..bc6a19a12d4a 100644
--- a/src/panels/developer-tools/event/event-subscribe-card.ts
+++ b/src/panels/developer-tools/event/event-subscribe-card.ts
@@ -104,7 +104,7 @@ class EventSubscribeCard extends LitElement {
                   )}:
                   <ha-yaml-editor
                     .defaultValue=${event.event}
-                    readOnly
+                    read-only
                   ></ha-yaml-editor>
                 </div>
               `
diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index f1234225722c..970c1af462c5 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -169,8 +169,8 @@ class HuiMapCard extends LitElement implements LovelaceCard {
             .autoFit=${this._config.auto_fit || false}
             .fitZones=${this._config.fit_zones}
             .themeMode=${themeMode}
-            interactiveZones
-            renderPassive
+            interactive-zones
+            render-passive
           ></ha-map>
           <ha-icon-button
             .label=${this.hass!.localize(
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts
index 71d8acebaf16..449c3bd6e602 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.ts
+++ b/src/panels/lovelace/components/hui-generic-entity-row.ts
@@ -25,7 +25,7 @@ export class HuiGenericEntityRow extends LitElement {
 
   @property({ attribute: false }) public secondaryText?: string;
 
-  @property({ attribute: false, type: Boolean }) public hideName = false;
+  @property({ attribute: "hide-name", type: Boolean }) public hideName = false;
 
   // Allows to control if this row should capture the user interaction, e.g. with its
   // toggle switch, button or input field. Some domains dynamically decide what to show
diff --git a/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts b/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts
index 583f49d4f47c..8c63d4cfa257 100644
--- a/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts
@@ -57,7 +57,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
       <hui-generic-entity-row
         .hass=${this.hass}
         .config=${this._config}
-        hideName
+        hide-name
       >
         <div>
           <ha-date-input
diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
index 8b5c903de9ac..9a256e6e48cb 100644
--- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
@@ -80,7 +80,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
       <hui-generic-entity-row
         .hass=${this.hass}
         .config=${this._config}
-        hideName
+        hide-name
       >
         <ha-select
           .label=${this._config.name || computeStateName(stateObj)}
diff --git a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts
index 3b17cb0cd777..73f00a7a115c 100644
--- a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts
@@ -47,7 +47,7 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
       <hui-generic-entity-row
         .hass=${this.hass}
         .config=${this._config}
-        hideName
+        hide-name
       >
         <ha-textfield
           .label=${this._config.name || computeStateName(stateObj)}
diff --git a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
index cf6cfb73e8ed..05fad8e7ebec 100644
--- a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
@@ -56,7 +56,7 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
       <hui-generic-entity-row
         .hass=${this.hass}
         .config=${this._config}
-        hideName
+        hide-name
       >
         <ha-select
           .label=${this._config.name || computeStateName(stateObj)}
diff --git a/src/panels/lovelace/entity-rows/hui-text-entity-row.ts b/src/panels/lovelace/entity-rows/hui-text-entity-row.ts
index 0424895769d6..d593225ad3f1 100644
--- a/src/panels/lovelace/entity-rows/hui-text-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-text-entity-row.ts
@@ -50,7 +50,7 @@ class HuiTextEntityRow extends LitElement implements LovelaceRow {
       <hui-generic-entity-row
         .hass=${this.hass}
         .config=${this._config}
-        hideName
+        hide-name
       >
         <ha-textfield
           .label=${this._config.name || computeStateName(stateObj)}
diff --git a/src/panels/map/ha-panel-map.ts b/src/panels/map/ha-panel-map.ts
index fdd0d8d07d2a..811a047c4551 100644
--- a/src/panels/map/ha-panel-map.ts
+++ b/src/panels/map/ha-panel-map.ts
@@ -39,8 +39,8 @@ class HaPanelMap extends LitElement {
         <ha-map
           .hass=${this.hass}
           .entities=${this._entities}
-          autoFit
-          interactiveZones
+          auto-fit
+          interactive-zones
         ></ha-map>
       </ha-top-app-bar-fixed>
     `;
diff --git a/src/panels/profile/ha-pick-language-row.ts b/src/panels/profile/ha-pick-language-row.ts
index eb5fa06d6178..09ccbb9a6faf 100644
--- a/src/panels/profile/ha-pick-language-row.ts
+++ b/src/panels/profile/ha-pick-language-row.ts
@@ -27,7 +27,7 @@ export class HaPickLanguageRow extends LitElement {
         </span>
         <ha-language-picker
           .hass=${this.hass}
-          nativeName
+          native-name
           .label=${this.hass.localize(
             "ui.panel.profile.language.dropdown_label"
           )}
diff --git a/src/panels/todo/dialog-todo-item-editor.ts b/src/panels/todo/dialog-todo-item-editor.ts
index 93e2fab805e6..880f74cafa3b 100644
--- a/src/panels/todo/dialog-todo-item-editor.ts
+++ b/src/panels/todo/dialog-todo-item-editor.ts
@@ -168,7 +168,7 @@ class DialogTodoItemEditor extends LitElement {
                     .locale=${this.hass.locale}
                     .disabled=${!canUpdate}
                     @value-changed=${this._dueDateChanged}
-                    canClear
+                    can-clear
                   ></ha-date-input>
                   ${this._todoListSupportsFeature(
                     TodoListEntityFeature.SET_DUE_DATETIME_ON_ITEM