From 9a999fb298f481d7d94dd430434678021acb007c Mon Sep 17 00:00:00 2001
From: tshimber <110041439+tshimber@users.noreply.github.com>
Date: Thu, 7 Nov 2024 10:59:18 +0100
Subject: [PATCH] fix(nav-item): makes nav-itemcomponent respect the
 active=false  (#2364)

---
 .../telekom-nav-item/telekom-nav-item.css      | 18 +++++++++---------
 .../components/src/html/telekom-header.html    |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
index 86a00b32ea..bda5046c0d 100644
--- a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
+++ b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
@@ -168,14 +168,14 @@
 }
 
 .scale-telekom-nav-list[variant='main-nav']
-  > .scale-telekom-nav-item[active]
+  > .scale-telekom-nav-item[active]:not([active='false'])
   > :where(a, button),
 .scale-telekom-nav-list[variant='main-nav']
   > scale-menu-flyout
-  > .scale-telekom-nav-item[active]
+  > .scale-telekom-nav-item[active]:not([active='false'])
   > :where(a, button),
 .scale-telekom-nav-list[variant='main-nav']
-  > .scale-telekom-nav-item[active]
+  > .scale-telekom-nav-item[active]:not([active='false'])
   > :where(a, button) {
   color: var(--telekom-color-text-and-icon-primary-standard);
 }
@@ -255,14 +255,14 @@
 }
 
 .scale-telekom-nav-list[variant='main-nav']
-  > .scale-telekom-nav-item[active]
+  > .scale-telekom-nav-item[active]:not([active='false'])
   > :where(a, button):after,
 .scale-telekom-nav-list[variant='functions']
-  > .scale-telekom-nav-item[active]
+  > .scale-telekom-nav-item[active]:not([active='false'])
   > :where(a, button):after,
 .scale-telekom-nav-list[variant='main-nav']
   > scale-menu-flyout
-  > .scale-telekom-nav-item[active]
+  > .scale-telekom-nav-item[active]:not([active='false'])
   > :where(a, button):after {
   content: '';
   height: var(--telekom-spacing-composition-space-03);
@@ -277,14 +277,14 @@
 
 @media screen and (forced-colors: active), (-ms-high-contrast: active) {
   .scale-telekom-nav-list[variant='main-nav']
-    > .scale-telekom-nav-item[active]
+    > .scale-telekom-nav-item[active]:not([active='false'])
     > :where(a, button),
   .scale-telekom-nav-list[variant='functions']
-    > .scale-telekom-nav-item[active]
+    > .scale-telekom-nav-item[active]:not([active='false'])
     > :where(a, button),
   .scale-telekom-nav-list[variant='main-nav']
     > scale-menu-flyout
-    > .scale-telekom-nav-item[active]
+    > .scale-telekom-nav-item[active]:not([active='false'])
     > :where(a, button) {
     border-bottom: 2px solid hsl(0, 0%, 100%);
   }
diff --git a/packages/components/src/html/telekom-header.html b/packages/components/src/html/telekom-header.html
index 62b69d1447..25549b4622 100644
--- a/packages/components/src/html/telekom-header.html
+++ b/packages/components/src/html/telekom-header.html
@@ -163,7 +163,7 @@
             </scale-telekom-mega-menu>
           </scale-telekom-nav-flyout>
         </scale-telekom-nav-item>
-        <scale-telekom-nav-item>
+        <scale-telekom-nav-item active="false">
           <a href="#">Topic Three</a>
         </scale-telekom-nav-item>
         <scale-telekom-nav-item>