From ff1d1142d72a5bf79c6138a59c6c66c7d0e1d75d Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 17 Oct 2024 17:16:37 +0200
Subject: [PATCH] Tabs: fix animation timings (#66198)

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 .../src/components/inserter/category-tabs/index.js            | 1 -
 packages/components/CHANGELOG.md                              | 1 +
 packages/components/src/tabs/styles.ts                        | 4 ++--
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js
index 6d8f5fcbca1334..2641e2a20c40f6 100644
--- a/packages/block-editor/src/components/inserter/category-tabs/index.js
+++ b/packages/block-editor/src/components/inserter/category-tabs/index.js
@@ -33,7 +33,6 @@ function CategoryTabs( {
 
 	return (
 		<Tabs
-			className="block-editor-inserter__category-tabs"
 			selectOnMove={ false }
 			selectedTabId={ selectedCategory ? selectedCategory.name : null }
 			orientation="vertical"
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index d71f6ba7ce142f..2064aa9e9e9621 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Bug Fixes
 
+-   `Tabs`: fix indicator animation ([#66198](https://github.com/WordPress/gutenberg/pull/66198)).
 -   `ColorPalette`: prevent overflow of custom color button background ([#66152](https://github.com/WordPress/gutenberg/pull/66152)).
 
 ### Enhancements
diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 926abc3e34b102..da7368c6e19114 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -195,7 +195,7 @@ export const Tab = styled( Ariakit.Tab )`
 			opacity: 0;
 
 			@media not ( prefers-reduced-motion ) {
-				transition: opacity 0.15s 0.15s linear;
+				transition: opacity 0.1s linear;
 			}
 		}
 
@@ -253,7 +253,7 @@ export const TabChevron = styled( Icon )`
 		[data-select-on-move='true']
 			[role='tab']:is( [aria-selected='true'],  )
 			& {
-			transition: opacity 0.3s ease-in;
+			transition: opacity 0.15s 0.15s linear;
 		}
 	}
 	&:dir( rtl ) {