From 18190e7001582512ec029aaa339a2ad58eef5caa Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@gmail.com>
Date: Fri, 3 Jul 2026 09:05:31 +0300
Subject: [PATCH] various CSS outline fixes

---
 .../themes/components/blazor/_listbox.scss    |  4 ++
 .../themes/components/blazor/_pager.scss      | 18 ++++-----
 .../components/blazor/_profile-menu.scss      |  4 ++
 .../components/blazor/_splitbutton.scss       | 13 ++-----
 .../themes/components/blazor/_tabs.scss       | 38 +++++++++----------
 5 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/Radzen.Blazor/themes/components/blazor/_listbox.scss b/Radzen.Blazor/themes/components/blazor/_listbox.scss
index 4e3766b5d..36a9e82b6 100644
--- a/Radzen.Blazor/themes/components/blazor/_listbox.scss
+++ b/Radzen.Blazor/themes/components/blazor/_listbox.scss
@@ -53,6 +53,10 @@ $listbox-header-icon-margin: 0 !default;
 .rz-listbox-list {
   margin: 0;
   padding: 0;
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .rz-listbox-item {
diff --git a/Radzen.Blazor/themes/components/blazor/_pager.scss b/Radzen.Blazor/themes/components/blazor/_pager.scss
index 3c6f9d4f0..c18402fd2 100644
--- a/Radzen.Blazor/themes/components/blazor/_pager.scss
+++ b/Radzen.Blazor/themes/components/blazor/_pager.scss
@@ -35,17 +35,15 @@ $pager-button-size: "%button-md" !default;
   gap: var(--rz-pager-gap);
   flex-wrap: wrap;
 
-  &:focus {
-    outline: var(--rz-outline-normal);
-  }
+  .rz-pager-element,
+  .rz-pager-page {
+    &:focus {
+      outline: var(--rz-outline-normal);
+    }
 
-  &:focus-visible {
-    .rz-pager-element,
-    .rz-pager-page {
-      &.rz-state-focused {
-        outline: var(--rz-outline-focus);
-        outline-offset: var(--rz-outline-offset);
-      }
+    &:focus-visible {
+      outline: var(--rz-outline-focus);
+      outline-offset: var(--rz-outline-offset);
     }
   }
 
diff --git a/Radzen.Blazor/themes/components/blazor/_profile-menu.scss b/Radzen.Blazor/themes/components/blazor/_profile-menu.scss
index 9bba758bd..7ffbc768a 100644
--- a/Radzen.Blazor/themes/components/blazor/_profile-menu.scss
+++ b/Radzen.Blazor/themes/components/blazor/_profile-menu.scss
@@ -48,6 +48,10 @@ ul.rz-profile-menu {
     }
   }
 
+  .rz-navigation-menu:focus {
+    outline: none;
+  }
+
   .rz-navigation-item-icon-children {
     color: var(--rz-profile-menu-toggle-button-color);
 
diff --git a/Radzen.Blazor/themes/components/blazor/_splitbutton.scss b/Radzen.Blazor/themes/components/blazor/_splitbutton.scss
index b224f15fa..d060f7916 100644
--- a/Radzen.Blazor/themes/components/blazor/_splitbutton.scss
+++ b/Radzen.Blazor/themes/components/blazor/_splitbutton.scss
@@ -9,15 +9,6 @@ $splitbutton-sizes: xs, sm, md, lg;
   display: inline-flex;
   border-radius: var(--rz-button-border-radius);
 
-  &:focus {
-    outline: var(--rz-outline-normal);
-  }
-
-  &:focus-visible {
-    outline: var(--rz-button-focus-outline);
-    outline-offset: var(--rz-button-focus-outline-offset);
-  }
-
   .rz-button-icon-only {
     .rz-button-text {
       display: none;
@@ -50,6 +41,10 @@ $splitbutton-sizes: xs, sm, md, lg;
   list-style: none;
   padding: 0;
   margin: 0;
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .rz-menuitem {
diff --git a/Radzen.Blazor/themes/components/blazor/_tabs.scss b/Radzen.Blazor/themes/components/blazor/_tabs.scss
index 37c57be1f..c54e92a4e 100644
--- a/Radzen.Blazor/themes/components/blazor/_tabs.scss
+++ b/Radzen.Blazor/themes/components/blazor/_tabs.scss
@@ -32,26 +32,6 @@ $tabs-transition: var(--rz-transition-all) !default;
   box-sizing: border-box;
   display: flex;
 
-  &:focus {
-    outline: var(--rz-outline-normal);
-  }
-
-  &:focus-visible {
-    outline: var(--rz-outline-focus);
-    outline-offset: var(--rz-outline-offset);
-
-    .rz-tabview-nav {
-      .rz-state-focused {
-        &:not(.rz-tabview-selected) {
-          &:not(.rz-state-disabled) {
-            outline: var(--rz-tabs-tab-focus-outline);
-            outline-offset: var(--rz-tabs-tab-focus-outline-offset);
-          }
-        }
-      }
-    }
-  }
-
   &.rz-tabview-top {
     flex-direction: column;
   }
@@ -83,6 +63,24 @@ $tabs-transition: var(--rz-transition-all) !default;
   padding: 0;
   margin: 0;
 
+  &:focus {
+    outline: var(--rz-outline-normal);
+  }
+
+  &:focus-visible {
+    outline: var(--rz-outline-focus);
+    outline-offset: var(--rz-outline-offset);
+
+    .rz-state-focused {
+      &:not(.rz-tabview-selected) {
+        &:not(.rz-state-disabled) {
+          outline: var(--rz-tabs-tab-focus-outline);
+          outline-offset: var(--rz-tabs-tab-focus-outline-offset);
+        }
+      }
+    }
+  }
+
   li {
     border: var(--rz-tabs-border);
     background-color: var(--rz-tabs-tab-background-color);