From 155dc2218e6c07d55f5c7e8d556fc05689a0da52 Mon Sep 17 00:00:00 2001
From: Andrei Miron <andrei.miron@mcro-e.com>
Date: Mon, 25 May 2026 13:07:51 +0300
Subject: [PATCH] fix(passage): change active focus style PIE-598

---
 packages/passage/src/stimulus-tabs.jsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/passage/src/stimulus-tabs.jsx b/packages/passage/src/stimulus-tabs.jsx
index 0248bfea10..72f8f3eaea 100644
--- a/packages/passage/src/stimulus-tabs.jsx
+++ b/packages/passage/src/stimulus-tabs.jsx
@@ -58,7 +58,7 @@ const TabStyled = styled(Tab)(({ theme }) => ({
   margin: `0 ${theme.spacing(1)}`,
   textTransform: 'none',
 
-  '& span': {
+  '.passage-label': {
     display: '-webkit-box',
     WebkitLineClamp: 2,
     WebkitBoxOrient: 'vertical',
@@ -71,7 +71,7 @@ const TabStyled = styled(Tab)(({ theme }) => ({
 
   '&.Mui-selected': {
     color: theme.palette.common.black,
-    span: {
+    '.passage-label': {
       opacity: 1,
     },
     '.passage-label-underline': {
@@ -84,6 +84,10 @@ const TabStyled = styled(Tab)(({ theme }) => ({
       backgroundColor: '#D0E2F0',
     },
   },
+
+  '& .MuiTouchRipple-root': {
+    opacity: 0.7,
+  },
 }));
 
 const Underline = styled('div')(({ theme }) => ({
@@ -292,7 +296,10 @@ class StimulusTabs extends React.Component {
                     label={
                       <>
                         <Purpose purpose="passage-label">
-                          <span dangerouslySetInnerHTML={{ __html: this.parsedText(tab.label) }}/>
+                          <span
+                            className="passage-label"
+                            dangerouslySetInnerHTML={{ __html: this.parsedText(tab.label) }}
+                          />
                         </Purpose>
                         <Underline className="passage-label-underline" />
                       </>