From d7660370abe5f86acd345f3dcc8c8651ec7ed810 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Sun, 4 May 2025 10:38:01 +0300
Subject: [PATCH] Fix display of disabled items in traces (#25293)

---
 src/components/trace/ha-timeline.ts    |  6 +++---
 src/components/trace/hat-graph-node.ts | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/trace/ha-timeline.ts b/src/components/trace/ha-timeline.ts
index b7ab5b2757..4ee033573c 100644
--- a/src/components/trace/ha-timeline.ts
+++ b/src/components/trace/ha-timeline.ts
@@ -11,8 +11,8 @@ export class HaTimeline extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public raised = false;
 
-  @property({ attribute: false, reflect: true, type: Boolean }) notEnabled =
-    false;
+  @property({ attribute: "not-enabled", reflect: true, type: Boolean })
+  notEnabled = false;
 
   @property({ attribute: "last-item", type: Boolean }) public lastItem = false;
 
@@ -82,7 +82,7 @@ export class HaTimeline extends LitElement {
           margin-inline-start: initial;
           width: 24px;
         }
-        :host([notEnabled]) ha-svg-icon {
+        :host([not-enabled]) ha-svg-icon {
           opacity: 0.5;
         }
         ha-svg-icon {
diff --git a/src/components/trace/hat-graph-node.ts b/src/components/trace/hat-graph-node.ts
index 330338b7cc..10ea69d58b 100644
--- a/src/components/trace/hat-graph-node.ts
+++ b/src/components/trace/hat-graph-node.ts
@@ -17,8 +17,8 @@ export class HatGraphNode extends LitElement {
 
   @property({ type: Boolean }) public error = false;
 
-  @property({ attribute: false, reflect: true, type: Boolean }) notEnabled =
-    false;
+  @property({ attribute: "not-enabled", reflect: true, type: Boolean })
+  notEnabled = false;
 
   @property({ attribute: "graph-start", reflect: true, type: Boolean })
   graphStart = false;
@@ -127,13 +127,13 @@ export class HatGraphNode extends LitElement {
       --stroke-clr: var(--hover-clr);
       --icon-clr: var(--default-icon-clr);
     }
-    :host([notEnabled]) circle {
+    :host([not-enabled]) circle {
       --stroke-clr: var(--disabled-clr);
     }
-    :host([notEnabled][active]) circle {
+    :host([not-enabled][active]) circle {
       --stroke-clr: var(--disabled-active-clr);
     }
-    :host([notEnabled]:hover) circle {
+    :host([not-enabled]:hover) circle {
       --stroke-clr: var(--disabled-hover-clr);
     }
     svg:not(.safari) {