From 1fe9f0b9723573dfead1d20dc542db61b0a501b8 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Tue, 17 Sep 2024 08:08:45 +0200
Subject: [PATCH 01/53] Remove inserter pattern overrides

---
 .../inserter/category-tabs/index.js           |  1 -
 .../src/components/inserter/style.scss        | 68 -------------------
 2 files changed, 69 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 6a02cf1a170c4..4025a41d0b85b 100644
--- a/packages/block-editor/src/components/inserter/category-tabs/index.js
+++ b/packages/block-editor/src/components/inserter/category-tabs/index.js
@@ -55,7 +55,6 @@ function CategoryTabs( {
 					<Tabs.Tab
 						key={ category.name }
 						tabId={ category.name }
-						className="block-editor-inserter__category-tab"
 						aria-label={ category.label }
 						aria-current={
 							category === selectedCategory ? 'true' : undefined
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index e772a67a13138..ffb85da556e5d 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -222,75 +222,7 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__category-tablist {
-	display: flex;
-	flex-direction: column;
-	border: none;
 	margin-bottom: $grid-unit-10;
-	// Push the listitem wrapping the "explore" button to the bottom of the panel.
-	div[role="listitem"]:last-child {
-		margin-top: auto;
-	}
-
-	// Temporarily disable the component's indicator animation.
-	// TODO: remove in favor of using the native component's styles and behavior,
-	// see https://github.com/WordPress/gutenberg/pull/62879#issuecomment-2219720582
-	&[aria-orientation="vertical"]::after {
-		content: none;
-	}
-
-	.block-editor-inserter__category-tab {
-		// Account for the icon on the right so that it's visually balanced.
-		padding: $grid-unit-10 $grid-unit-05 $grid-unit-10 $grid-unit-15;
-		text-align: left;
-		font-weight: inherit;
-		display: block;
-		position: relative;
-		height: auto;
-
-		&[aria-selected="true"] {
-			color: var(--wp-admin-theme-color);
-
-			.components-flex-item {
-				filter: brightness(0.95);
-			}
-
-			svg {
-				fill: var(--wp-admin-theme-color);
-			}
-
-			&::after {
-				content: "";
-				display: block;
-				outline: none;
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				border-radius: $radius-small;
-				opacity: 0.04;
-				background: var(--wp-admin-theme-color);
-				height: 100%;
-			}
-		}
-
-		&:focus-visible,
-		&:focus:not(:disabled) {
-			border-radius: $radius-small;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			// Windows high contrast mode.
-			outline: 2px solid transparent;
-			outline-offset: 0;
-		}
-
-		&::before {
-			display: none;
-		}
-
-		&::after {
-			display: none;
-		}
-	}
 }
 
 .block-editor-inserter__category-panel {

From a3e54c5a5357f9f96ac664c34f9c679bbe58ffac Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 20 Sep 2024 01:59:17 +0200
Subject: [PATCH 02/53] Make font weights 400 (inactive) and 500 (active)

---
 packages/components/src/tabs/styles.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index c00943b180f63..c35066e155527 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -102,7 +102,7 @@ export const Tab = styled( Ariakit.Tab )`
 		line-height: 1.2; // Some languages characters e.g. Japanese may have a native higher line-height.
 		padding: ${ space( 4 ) };
 		margin-left: 0;
-		font-weight: 500;
+		font-weight: 400;
 		text-align: inherit;
 		hyphens: auto;
 		color: ${ COLORS.theme.foreground };
@@ -122,6 +122,10 @@ export const Tab = styled( Ariakit.Tab )`
 			outline: none;
 		}
 
+		&[data-active-item] {
+			font-weight: 500;
+		}
+
 		// Focus.
 		&::before {
 			content: '';

From 0b436e80ea3bf5e1784fab6b92312eab91d12c15 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 20 Sep 2024 02:25:29 +0200
Subject: [PATCH 03/53] Apply styles only when vertical.

---
 packages/components/src/tabs/styles.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index c35066e155527..64845204be25a 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -122,10 +122,6 @@ export const Tab = styled( Ariakit.Tab )`
 			outline: none;
 		}
 
-		&[data-active-item] {
-			font-weight: 500;
-		}
-
 		// Focus.
 		&::before {
 			content: '';
@@ -159,6 +155,12 @@ export const Tab = styled( Ariakit.Tab )`
 		min-height: ${ space(
 			10
 		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
+
+		&[data-active-item] {
+			font-weight: 500;
+			color: ${ COLORS.theme.accent };
+			fill: currentColor;
+		}
 	}
 `;
 

From 299d23c057170e5106b582059f733e378438e248 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 20 Sep 2024 02:26:18 +0200
Subject: [PATCH 04/53] Make vertical indicator theme accent color at 4%
 opacity.

---
 packages/components/src/tabs/styles.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 64845204be25a..365340165c898 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -81,7 +81,8 @@ export const TabListWrapper = styled.div`
 			scaleY(
 				calc( var( --indicator-height ) / var( --antialiasing-factor ) )
 			);
-		background-color: ${ COLORS.theme.gray[ 100 ] };
+		background-color: ${ COLORS.theme.accent };
+		opacity: 0.04;
 	}
 `;
 

From 30cda5840ac7816788eb511bdaf102eaf8da7876 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Tue, 24 Sep 2024 18:02:25 +0200
Subject: [PATCH 05/53] Make height 48px.

---
 packages/components/src/tabs/styles.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 365340165c898..d427c10ae611b 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -92,10 +92,6 @@ export const Tab = styled( Ariakit.Tab )`
 		align-items: center;
 		position: relative;
 		border-radius: 0;
-		min-height: ${ space(
-			12
-		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
-		height: auto;
 		background: transparent;
 		border: none;
 		box-shadow: none;
@@ -152,11 +148,15 @@ export const Tab = styled( Ariakit.Tab )`
 		}
 	}
 
-	[aria-orientation='vertical'] & {
+	[aria-orientation='horizontal'] & {
 		min-height: ${ space(
-			10
+			12
 		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
+		height: auto;
+	}
 
+	[aria-orientation='vertical'] & {
+		height: ${ space( 10 ) };
 		&[data-active-item] {
 			font-weight: 500;
 			color: ${ COLORS.theme.accent };

From 4749518bb844e513aebc95f3b23b667802825b8c Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Tue, 24 Sep 2024 18:05:59 +0200
Subject: [PATCH 06/53] Add radius.

---
 packages/components/src/tabs/styles.ts | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index d427c10ae611b..e1f90be6baef0 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -24,7 +24,7 @@ export const TabListWrapper = styled.div`
 
 	@media not ( prefers-reduced-motion ) {
 		&.is-animation-enabled::after {
-			transition-property: transform;
+			transition-property: transform, top;
 			transition-duration: 0.2s;
 			transition-timing-function: ease-out;
 		}
@@ -73,14 +73,11 @@ export const TabListWrapper = styled.div`
 	}
 	&[aria-orientation='vertical']::after {
 		z-index: -1;
-		top: 0;
+		border-radius: ${ CONFIG.radiusSmall };
+		top: calc( var( --indicator-top ) * 1px );
 		left: 0;
 		width: 100%;
-		height: calc( var( --antialiasing-factor ) * 1px );
-		transform: translateY( calc( var( --indicator-top ) * 1px ) )
-			scaleY(
-				calc( var( --indicator-height ) / var( --antialiasing-factor ) )
-			);
+		height: calc( var( --indicator-height ) * 1px );
 		background-color: ${ COLORS.theme.accent };
 		opacity: 0.04;
 	}

From 4ba287fa0306e1b11d70191d0ce570caf6c43a50 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Tue, 24 Sep 2024 18:12:41 +0200
Subject: [PATCH 07/53] Also use hover styles in focus-visible.

---
 packages/components/src/tabs/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index e1f90be6baef0..1e12ef827bbbe 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -106,7 +106,7 @@ export const Tab = styled( Ariakit.Tab )`
 			color: ${ COLORS.ui.textDisabled };
 		}
 
-		&:not( [aria-disabled='true'] ):hover {
+		&:not( [aria-disabled='true'] ):is( :hover, [data-focus-visible] ) {
 			color: ${ COLORS.theme.accent };
 		}
 

From 7847ed6fa44d357a508e9ccb5504664cc49c3424 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 27 Sep 2024 03:49:24 +0200
Subject: [PATCH 08/53] Fix indicator not visible in inserter > patterns/media.

---
 packages/components/src/tabs/styles.ts   | 13 ++++++-------
 packages/components/src/tabs/tablist.tsx |  2 +-
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 1e12ef827bbbe..f57ae9be82cef 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -23,7 +23,7 @@ export const TabListWrapper = styled.div`
 	}
 
 	@media not ( prefers-reduced-motion ) {
-		&.is-animation-enabled::after {
+		&.is-animation-enabled::before {
 			transition-property: transform, top;
 			transition-duration: 0.2s;
 			transition-timing-function: ease-out;
@@ -37,7 +37,7 @@ export const TabListWrapper = styled.div`
 		--direction-origin-x: right;
 		--indicator-start: var( --indicator-right );
 	}
-	&::after {
+	&::before {
 		content: '';
 		position: absolute;
 		pointer-events: none;
@@ -52,7 +52,7 @@ export const TabListWrapper = styled.div`
 			when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
 	--antialiasing-factor: 100;
 	&:not( [aria-orientation='vertical'] ) {
-		&::after {
+		&::before {
 			bottom: 0;
 			height: 0;
 			width: calc( var( --antialiasing-factor ) * 1px );
@@ -71,8 +71,7 @@ export const TabListWrapper = styled.div`
 				${ COLORS.theme.accent };
 		}
 	}
-	&[aria-orientation='vertical']::after {
-		z-index: -1;
+	&[aria-orientation='vertical']::before {
 		border-radius: ${ CONFIG.radiusSmall };
 		top: calc( var( --indicator-top ) * 1px );
 		left: 0;
@@ -117,7 +116,7 @@ export const Tab = styled( Ariakit.Tab )`
 		}
 
 		// Focus.
-		&::before {
+		&::after {
 			content: '';
 			position: absolute;
 			top: ${ space( 3 ) };
@@ -140,7 +139,7 @@ export const Tab = styled( Ariakit.Tab )`
 			}
 		}
 
-		&:focus-visible::before {
+		&:focus-visible::after {
 			opacity: 1;
 		}
 	}
diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx
index 2977d6a628370..887eeda4378f5 100644
--- a/packages/components/src/tabs/tablist.tsx
+++ b/packages/components/src/tabs/tablist.tsx
@@ -69,7 +69,7 @@ export const TabList = forwardRef<
 			render={
 				<TabListWrapper
 					onTransitionEnd={ ( event ) => {
-						if ( event.pseudoElement === '::after' ) {
+						if ( event.pseudoElement === '::before' ) {
 							setAnimationEnabled( false );
 						}
 					} }

From c9e80200684205b905bc292940fab0da849c9761 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 27 Sep 2024 03:59:29 +0200
Subject: [PATCH 09/53] Adjust padding.

---
 packages/components/src/tabs/styles.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index f57ae9be82cef..f017e3ce3a98b 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -152,6 +152,8 @@ export const Tab = styled( Ariakit.Tab )`
 	}
 
 	[aria-orientation='vertical'] & {
+		padding-left: ${ space( 3 ) };
+		padding-right: ${ space( 3 ) };
 		height: ${ space( 10 ) };
 		&[data-active-item] {
 			font-weight: 500;

From 04997182ad0a81c925e876ccafd2e1222673eb0f Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 27 Sep 2024 04:05:30 +0200
Subject: [PATCH 10/53] Tweak focus ring.

---
 packages/components/src/tabs/styles.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index f017e3ce3a98b..d1207919c40e4 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -119,10 +119,6 @@ export const Tab = styled( Ariakit.Tab )`
 		&::after {
 			content: '';
 			position: absolute;
-			top: ${ space( 3 ) };
-			right: ${ space( 3 ) };
-			bottom: ${ space( 3 ) };
-			left: ${ space( 3 ) };
 			pointer-events: none;
 
 			// Draw the indicator.
@@ -149,6 +145,10 @@ export const Tab = styled( Ariakit.Tab )`
 			12
 		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
 		height: auto;
+
+		&::after {
+			inset: ${ space( 3 ) };
+		}
 	}
 
 	[aria-orientation='vertical'] & {
@@ -160,6 +160,10 @@ export const Tab = styled( Ariakit.Tab )`
 			color: ${ COLORS.theme.accent };
 			fill: currentColor;
 		}
+
+		&::after {
+			inset: 0;
+		}
 	}
 `;
 

From 77ce7026f742e4eca42a2e6d3adb062245911bd3 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 27 Sep 2024 04:07:15 +0200
Subject: [PATCH 11/53] Wrap long labels.

---
 packages/components/src/tabs/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index d1207919c40e4..a16c7a93395e5 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -154,7 +154,7 @@ export const Tab = styled( Ariakit.Tab )`
 	[aria-orientation='vertical'] & {
 		padding-left: ${ space( 3 ) };
 		padding-right: ${ space( 3 ) };
-		height: ${ space( 10 ) };
+		min-height: ${ space( 10 ) };
 		&[data-active-item] {
 			font-weight: 500;
 			color: ${ COLORS.theme.accent };

From 23f5438be98aa8ee86c0674930e3322bc96e9ee6 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Sun, 29 Sep 2024 03:15:33 +0200
Subject: [PATCH 12/53] Add chevron and fix a few minor details.

---
 .../inserter/category-tabs/index.js           | 11 +-------
 packages/components/src/tabs/styles.ts        | 26 ++++++++++++++++---
 packages/components/src/tabs/tab.tsx          | 10 +++++--
 3 files changed, 32 insertions(+), 15 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 4025a41d0b85b..6d8f5fcbca133 100644
--- a/packages/block-editor/src/components/inserter/category-tabs/index.js
+++ b/packages/block-editor/src/components/inserter/category-tabs/index.js
@@ -2,14 +2,10 @@
  * WordPress dependencies
  */
 import { usePrevious, useReducedMotion } from '@wordpress/compose';
-import { isRTL } from '@wordpress/i18n';
 import {
-	__experimentalHStack as HStack,
-	FlexBlock,
 	privateApis as componentsPrivateApis,
 	__unstableMotion as motion,
 } from '@wordpress/components';
-import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -60,12 +56,7 @@ function CategoryTabs( {
 							category === selectedCategory ? 'true' : undefined
 						}
 					>
-						<HStack>
-							<FlexBlock>{ category.label }</FlexBlock>
-							<Icon
-								icon={ isRTL() ? chevronLeft : chevronRight }
-							/>
-						</HStack>
+						{ category.label }
 					</Tabs.Tab>
 				) ) }
 			</Tabs.TabList>
diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index a16c7a93395e5..b03da3f55124b 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -9,6 +9,7 @@ import * as Ariakit from '@ariakit/react';
  */
 import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
+import Icon from '../icon';
 
 export const TabListWrapper = styled.div`
 	position: relative;
@@ -93,7 +94,6 @@ export const Tab = styled( Ariakit.Tab )`
 		box-shadow: none;
 		cursor: pointer;
 		line-height: 1.2; // Some languages characters e.g. Japanese may have a native higher line-height.
-		padding: ${ space( 4 ) };
 		margin-left: 0;
 		font-weight: 400;
 		text-align: inherit;
@@ -141,6 +141,7 @@ export const Tab = styled( Ariakit.Tab )`
 	}
 
 	[aria-orientation='horizontal'] & {
+		padding: ${ space( 4 ) };
 		min-height: ${ space(
 			12
 		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
@@ -152,11 +153,11 @@ export const Tab = styled( Ariakit.Tab )`
 	}
 
 	[aria-orientation='vertical'] & {
+		padding: ${ space( 2 ) } ${ space( 3 ) };
 		padding-left: ${ space( 3 ) };
 		padding-right: ${ space( 3 ) };
 		min-height: ${ space( 10 ) };
-		&[data-active-item] {
-			font-weight: 500;
+		&[aria-selected='true'] {
 			color: ${ COLORS.theme.accent };
 			fill: currentColor;
 		}
@@ -167,6 +168,25 @@ export const Tab = styled( Ariakit.Tab )`
 	}
 `;
 
+export const TabChildren = styled.span`
+	flex-grow: 1;
+`;
+
+export const TabChevron = styled( Icon )`
+	flex-shrink: 0;
+	margin-inline-end: ${ space( -1 ) };
+	[aria-orientation='horizontal'] & {
+		display: none;
+	}
+	opacity: 0;
+	[role='tab']:is( [aria-selected='true'], [data-active-item], :hover ) & {
+		opacity: 1;
+	}
+	&:dir( rtl ) {
+		rotate: 180deg;
+	}
+`;
+
 export const TabPanel = styled( Ariakit.TabPanel )`
 	&:focus {
 		box-shadow: none;
diff --git a/packages/components/src/tabs/tab.tsx b/packages/components/src/tabs/tab.tsx
index e1aa85c636cdd..29f6111adc839 100644
--- a/packages/components/src/tabs/tab.tsx
+++ b/packages/components/src/tabs/tab.tsx
@@ -10,8 +10,13 @@ import { forwardRef } from '@wordpress/element';
 import type { TabProps } from './types';
 import warning from '@wordpress/warning';
 import { useTabsContext } from './context';
-import { Tab as StyledTab } from './styles';
+import {
+	Tab as StyledTab,
+	TabChildren as StyledTabChildren,
+	TabChevron as StyledTabChevron,
+} from './styles';
 import type { WordPressComponentProps } from '../context';
+import { chevronRight } from '@wordpress/icons';
 
 export const Tab = forwardRef<
 	HTMLButtonElement,
@@ -33,7 +38,8 @@ export const Tab = forwardRef<
 			render={ render }
 			{ ...otherProps }
 		>
-			{ children }
+			<StyledTabChildren>{ children }</StyledTabChildren>
+			<StyledTabChevron icon={ chevronRight } />
 		</StyledTab>
 	);
 } );

From fa2da0a2535d916f01490d79dab7e7683e563f48 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Mon, 30 Sep 2024 21:36:48 +0200
Subject: [PATCH 13/53] Fix merge issues.

---
 packages/components/src/tabs/styles.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index f027058869ed6..fcb8e82012101 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -46,14 +46,6 @@ export const TabListWrapper = styled.div`
 			transition-timing-function: ease-out;
 		}
 	}
-	--direction-factor: 1;
-	--direction-origin-x: left;
-	--indicator-start: var( --indicator-left );
-	&:dir( rtl ) {
-		--direction-factor: -1;
-		--direction-origin-x: right;
-		--indicator-start: var( --indicator-right );
-	}
 	&::before {
 		content: '';
 		position: absolute;
@@ -132,7 +124,6 @@ export const Tab = styled( Ariakit.Tab )`
 		align-items: center;
 		position: relative;
 		border-radius: 0;
-		height: ${ space( 12 ) };
 		background: transparent;
 		border: none;
 		box-shadow: none;

From af857d33761b776e7b5083ad116740d51f4b23f7 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Mon, 30 Sep 2024 22:14:10 +0200
Subject: [PATCH 14/53] Fix focus indicator (gets cropped with the new overflow
 auto setting)

---
 packages/components/src/tabs/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index fcb8e82012101..69620709cfbc7 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -197,7 +197,7 @@ export const Tab = styled( Ariakit.Tab )`
 		}
 
 		&::after {
-			inset: 0;
+			inset: 2px;
 		}
 	}
 `;

From 98670895fc07e5ebefbdddcebc4bbe07327a570a Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Tue, 1 Oct 2024 03:54:45 +0200
Subject: [PATCH 15/53] Fix unwanted chevron.

---
 packages/components/src/tabs/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 69620709cfbc7..dcd14cff1f100 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -213,7 +213,7 @@ export const TabChevron = styled( Icon )`
 		display: none;
 	}
 	opacity: 0;
-	[role='tab']:is( [aria-selected='true'], [data-active-item], :hover ) & {
+	[role='tab']:is( [aria-selected='true'], [data-focus-visible], :hover ) & {
 		opacity: 1;
 	}
 	&:dir( rtl ) {

From 56989aff8e6983fed89767eed8e7eecf303f5d4d Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Wed, 2 Oct 2024 23:32:38 +0200
Subject: [PATCH 16/53] Fix unwanted nested scrollbar in inserter >
 patterns/media vertical tabs.

---
 packages/block-editor/CHANGELOG.md                       | 4 ++++
 packages/block-editor/src/components/inserter/style.scss | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index db61ff05e3c1a..2a236778a76c1 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## Bug Fixes
+
+-   Fixed a regression that caused the vertical tabs in the inserter (inside the patterns and media sections) to have a nested scrollbar ([#65387](https://github.com/WordPress/gutenberg/pull/65387)).
+
 ## 14.3.0 (2024-09-19)
 
 ## 14.2.0 (2024-09-05)
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index ee7058f3aea5c..bfe67226a9ea0 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -214,8 +214,9 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
+	flex-shrink: 0;
 	padding: $grid-unit-20;
-	height: 100%;
+	min-height: 100%;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;

From 517950eeeb480ccce514511b23c694c096b2ff6d Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Wed, 2 Oct 2024 23:44:42 +0200
Subject: [PATCH 17/53] Switch to transform for performance.

---
 packages/components/src/tabs/styles.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index dcd14cff1f100..7658634074bb6 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -41,7 +41,7 @@ export const TabListWrapper = styled.div`
 
 	@media not ( prefers-reduced-motion ) {
 		&.is-animation-enabled::before {
-			transition-property: transform, top;
+			transition-property: transform, border-radius;
 			transition-duration: 0.2s;
 			transition-timing-function: ease-out;
 		}
@@ -106,10 +106,14 @@ export const TabListWrapper = styled.div`
 	}
 	&[aria-orientation='vertical']::before {
 		border-radius: ${ CONFIG.radiusSmall };
-		top: calc( var( --indicator-top ) * 1px );
+		top: 0
 		left: 0;
 		width: 100%;
-		height: calc( var( --indicator-height ) * 1px );
+		height: calc( var( --antialiasing-factor ) * 1px );
+		transform: translateY( calc( var( --indicator-top ) * 1px ) )
+			scaleY(
+				calc( var( --indicator-height ) / var( --antialiasing-factor ) )
+			);
 		background-color: ${ COLORS.theme.accent };
 		opacity: 0.04;
 	}

From a708e6b65984d8548e6577daeed5204c7637b5ef Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Wed, 2 Oct 2024 23:46:37 +0200
Subject: [PATCH 18/53] Adjust border-radius based on scaling factor.

---
 packages/components/src/tabs/styles.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 7658634074bb6..efffd3368ddf2 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -105,7 +105,14 @@ export const TabListWrapper = styled.div`
 		}
 	}
 	&[aria-orientation='vertical']::before {
-		border-radius: ${ CONFIG.radiusSmall };
+		/* Adjusting the border radius to match the scaling in the y axis. */
+		border-radius: ${ CONFIG.radiusSmall } / calc(
+				${ CONFIG.radiusSmall } /
+					(
+						var( --indicator-height, 0 ) /
+							var( --antialiasing-factor )
+					)
+			);
 		top: 0
 		left: 0;
 		width: 100%;

From 4aa21c840cd109729a4e6f5f39c24aee1906b3ea Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Thu, 3 Oct 2024 00:04:28 +0200
Subject: [PATCH 19/53] Apply feedback.

---
 packages/block-editor/CHANGELOG.md                       | 4 ----
 packages/block-editor/src/components/inserter/style.scss | 3 +--
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 2a236778a76c1..db61ff05e3c1a 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,10 +2,6 @@
 
 ## Unreleased
 
-## Bug Fixes
-
--   Fixed a regression that caused the vertical tabs in the inserter (inside the patterns and media sections) to have a nested scrollbar ([#65387](https://github.com/WordPress/gutenberg/pull/65387)).
-
 ## 14.3.0 (2024-09-19)
 
 ## 14.2.0 (2024-09-05)
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index bfe67226a9ea0..9e727b1379524 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -214,9 +214,8 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
-	flex-shrink: 0;
+	flex-grow: 1;
 	padding: $grid-unit-20;
-	min-height: 100%;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;

From dcbd6f5ec29234fe0350552fe6ab2394ff3aef1c Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Thu, 3 Oct 2024 02:43:58 +0200
Subject: [PATCH 20/53] Add changelog entry.

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4c00ea32bae2c..7a4ce8d6dacd8 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -18,6 +18,7 @@
 
 ### Enhancements
 
+-   `Tabs`: revamped vertical orientation styles ([#65387](https://github.com/WordPress/gutenberg/pull/65387)).
 -   `Tabs`: handle horizontal overflow and large tab lists gracefully ([#64371](https://github.com/WordPress/gutenberg/pull/64371)).
 -   `BorderControl`: promote to stable ([#65475](https://github.com/WordPress/gutenberg/pull/65475)).
 -   `BorderBoxControl`: promote to stable ([#65586](https://github.com/WordPress/gutenberg/pull/65586)).

From f0902e8633dbbb206ef0c99c9395d9d9bae54771 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Thu, 3 Oct 2024 14:17:39 +0200
Subject: [PATCH 21/53] Switch to `padding-inline`.

---
 packages/components/src/tabs/styles.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index efffd3368ddf2..9637e0149a86d 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -199,8 +199,7 @@ export const Tab = styled( Ariakit.Tab )`
 
 	[aria-orientation='vertical'] & {
 		padding: ${ space( 2 ) } ${ space( 3 ) };
-		padding-left: ${ space( 3 ) };
-		padding-right: ${ space( 3 ) };
+		padding-inline: ${ space( 3 ) };
 		min-height: ${ space( 10 ) };
 		&[aria-selected='true'] {
 			color: ${ COLORS.theme.accent };

From 535463cc98b100719f760c581914a5ec594045f0 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 12:55:48 +0200
Subject: [PATCH 22/53] Remove unnecessary styles.

---
 packages/components/src/tabs/styles.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 9637e0149a86d..da5538e1476ba 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -229,10 +229,6 @@ export const TabChevron = styled( Icon )`
 	&:dir( rtl ) {
 		rotate: 180deg;
 	}
-
-	[aria-orientation='horizontal'] & {
-		justify-content: center;
-	}
 `;
 
 export const TabPanel = styled( Ariakit.TabPanel )`

From 3c43be85a7a9b1226fd8cae495cb20d2a110e238 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 12:56:15 +0200
Subject: [PATCH 23/53] Fix horizontal tabs height.

---
 packages/components/src/tabs/styles.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index da5538e1476ba..022a3d4524c55 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -187,10 +187,7 @@ export const Tab = styled( Ariakit.Tab )`
 
 	[aria-orientation='horizontal'] & {
 		padding: ${ space( 4 ) };
-		min-height: ${ space(
-			12
-		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
-		height: auto;
+		height: ${ space( 12 ) };
 
 		&::after {
 			inset: ${ space( 3 ) };

From 2d4bc9187ea0cea0b5a5bb4f889b44b0ae733f38 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 12:56:35 +0200
Subject: [PATCH 24/53] Remove more unnecessary styles (padding).

---
 packages/components/src/tabs/styles.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 022a3d4524c55..1e54d060eff76 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -196,7 +196,6 @@ export const Tab = styled( Ariakit.Tab )`
 
 	[aria-orientation='vertical'] & {
 		padding: ${ space( 2 ) } ${ space( 3 ) };
-		padding-inline: ${ space( 3 ) };
 		min-height: ${ space( 10 ) };
 		&[aria-selected='true'] {
 			color: ${ COLORS.theme.accent };

From 7f1e764e46354709cc11d8db5bc03d6825a9836c Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:03:59 +0200
Subject: [PATCH 25/53] Make horizontal padding specific to inline.

---
 packages/components/src/tabs/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 1e54d060eff76..4e29b32927213 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -186,7 +186,7 @@ export const Tab = styled( Ariakit.Tab )`
 	}
 
 	[aria-orientation='horizontal'] & {
-		padding: ${ space( 4 ) };
+		padding-inline: ${ space( 4 ) };
 		height: ${ space( 12 ) };
 
 		&::after {

From 34cece91d6b04ac40570cc38621387edf917c184 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:05:46 +0200
Subject: [PATCH 26/53] Make flex/whitespace styles more explicit.

---
 packages/components/src/tabs/styles.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 4e29b32927213..cf45c7c93b4d1 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -129,8 +129,8 @@ export const TabListWrapper = styled.div`
 export const Tab = styled( Ariakit.Tab )`
 	& {
 		scroll-margin: 24px;
-		flex-grow: 1;
-		flex-shrink: 0;
+		flex: 1 0 auto;
+		white-space: nowrap;
 		display: inline-flex;
 		align-items: center;
 		position: relative;

From 3b82ba042f31c56574df79c60926e0da5a79d894 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:06:08 +0200
Subject: [PATCH 27/53] Make scroll margin specific to vertical tabs.

---
 packages/components/src/tabs/styles.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index cf45c7c93b4d1..c4ef5f68c0193 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -128,7 +128,6 @@ export const TabListWrapper = styled.div`
 
 export const Tab = styled( Ariakit.Tab )`
 	& {
-		scroll-margin: 24px;
 		flex: 1 0 auto;
 		white-space: nowrap;
 		display: inline-flex;
@@ -197,6 +196,8 @@ export const Tab = styled( Ariakit.Tab )`
 	[aria-orientation='vertical'] & {
 		padding: ${ space( 2 ) } ${ space( 3 ) };
 		min-height: ${ space( 10 ) };
+		scroll-margin: 24px;
+
 		&[aria-selected='true'] {
 			color: ${ COLORS.theme.accent };
 			fill: currentColor;

From 789545f32ea06930d871cf6f719d179024668a7a Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:07:13 +0200
Subject: [PATCH 28/53] The "inline" in inline-flex is unnecessary and
 confusing, removed it.

---
 packages/components/src/tabs/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index c4ef5f68c0193..3ee7b9df1a40b 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -130,7 +130,7 @@ export const Tab = styled( Ariakit.Tab )`
 	& {
 		flex: 1 0 auto;
 		white-space: nowrap;
-		display: inline-flex;
+		display: flex;
 		align-items: center;
 		position: relative;
 		border-radius: 0;

From 094786c495f865f105c5ee89896f881b8e4dcd6a Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:08:14 +0200
Subject: [PATCH 29/53] Remove unnecessary position: relative

---
 packages/components/src/tabs/styles.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 3ee7b9df1a40b..5fc1062c32ddb 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -132,7 +132,6 @@ export const Tab = styled( Ariakit.Tab )`
 		white-space: nowrap;
 		display: flex;
 		align-items: center;
-		position: relative;
 		border-radius: 0;
 		background: transparent;
 		border: none;

From 87ce75639ac0956090714e21995451883cd7d5ca Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:09:37 +0200
Subject: [PATCH 30/53] Make resets more explicit

---
 packages/components/src/tabs/styles.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 5fc1062c32ddb..374d9a7fbdf55 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -128,14 +128,16 @@ export const TabListWrapper = styled.div`
 
 export const Tab = styled( Ariakit.Tab )`
 	& {
-		flex: 1 0 auto;
-		white-space: nowrap;
-		display: flex;
-		align-items: center;
+		/* Resets */
 		border-radius: 0;
 		background: transparent;
 		border: none;
 		box-shadow: none;
+
+		flex: 1 0 auto;
+		white-space: nowrap;
+		display: flex;
+		align-items: center;
 		cursor: pointer;
 		line-height: 1.2; // Some languages characters e.g. Japanese may have a native higher line-height.
 		margin-left: 0;

From 9808c75acfd605c81f33bc939105c14e3f53d78b Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:10:07 +0200
Subject: [PATCH 31/53] Remove unnecessary text-align.

---
 packages/components/src/tabs/styles.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 374d9a7fbdf55..31b2ee1622a73 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -142,7 +142,6 @@ export const Tab = styled( Ariakit.Tab )`
 		line-height: 1.2; // Some languages characters e.g. Japanese may have a native higher line-height.
 		margin-left: 0;
 		font-weight: 400;
-		text-align: inherit;
 		color: ${ COLORS.theme.foreground };
 
 		&[aria-disabled='true'] {

From 74851f8ef3910148001ea27c1495f1efabea3a44 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:10:46 +0200
Subject: [PATCH 32/53] Improve comment

---
 packages/components/src/tabs/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 31b2ee1622a73..8d1ee0c8f64e4 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -139,7 +139,7 @@ export const Tab = styled( Ariakit.Tab )`
 		display: flex;
 		align-items: center;
 		cursor: pointer;
-		line-height: 1.2; // Some languages characters e.g. Japanese may have a native higher line-height.
+		line-height: 1.2; // Characters in some languages (e.g. Japanese) may have a native higher line-height.
 		margin-left: 0;
 		font-weight: 400;
 		color: ${ COLORS.theme.foreground };

From cba3d80bfac2d3dc89179a522d01b18d9605fb09 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:13:49 +0200
Subject: [PATCH 33/53] Remove unnecessary margin-left

---
 packages/components/src/tabs/styles.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 8d1ee0c8f64e4..148d4295283a9 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -140,7 +140,6 @@ export const Tab = styled( Ariakit.Tab )`
 		align-items: center;
 		cursor: pointer;
 		line-height: 1.2; // Characters in some languages (e.g. Japanese) may have a native higher line-height.
-		margin-left: 0;
 		font-weight: 400;
 		color: ${ COLORS.theme.foreground };
 

From e6b902faa2e64027ddbc07e362ca378c1feb62bf Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:16:07 +0200
Subject: [PATCH 34/53] Clean up TabList styles.

---
 packages/components/src/tabs/styles.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 148d4295283a9..a30520523925a 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -12,16 +12,13 @@ import { space } from '../utils/space';
 import Icon from '../icon';
 
 export const TabListWrapper = styled.div`
-	position: relative;
+  position: relative;
 	display: flex;
 	align-items: stretch;
-	flex-direction: row;
-	text-align: center;
 	overflow-x: auto;
 
 	&[aria-orientation='vertical'] {
 		flex-direction: column;
-		text-align: start;
 	}
 
 	:where( [aria-orientation='horizontal'] ) {

From 41dc764ae43020ff0a15718885e24a72203af52c Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:18:41 +0200
Subject: [PATCH 35/53] Adjust text-align.

---
 packages/components/src/tabs/styles.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index a30520523925a..d3de90387b81e 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -183,6 +183,7 @@ export const Tab = styled( Ariakit.Tab )`
 	[aria-orientation='horizontal'] & {
 		padding-inline: ${ space( 4 ) };
 		height: ${ space( 12 ) };
+		text-align: center;
 
 		&::after {
 			inset: ${ space( 3 ) };
@@ -192,6 +193,7 @@ export const Tab = styled( Ariakit.Tab )`
 	[aria-orientation='vertical'] & {
 		padding: ${ space( 2 ) } ${ space( 3 ) };
 		min-height: ${ space( 10 ) };
+		text-align: start;
 		scroll-margin: 24px;
 
 		&[aria-selected='true'] {

From cfc7928440f26e749f34423eed980bb8fbae51b6 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:21:05 +0200
Subject: [PATCH 36/53] Clean up selector

---
 packages/components/src/tabs/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index d3de90387b81e..e10d740b02e7f 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -57,7 +57,7 @@ export const TabListWrapper = styled.div`
 	/* Using a large value to avoid antialiasing rounding issues
 			when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
 	--antialiasing-factor: 100;
-	&:not( [aria-orientation='vertical'] ) {
+	&[aria-orientation='horizontal'] {
 		--fade-width: 4rem;
 		--fade-gradient-base: transparent 0%, black var( --fade-width );
 		--fade-gradient-composed: var( --fade-gradient-base ), black 60%,

From d345ebdbda3c2305196646336e1bffc0a06f3ff8 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:25:52 +0200
Subject: [PATCH 37/53] Fix focus indicator

---
 packages/components/src/tabs/styles.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index e10d740b02e7f..9683f63569ad5 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -155,7 +155,8 @@ export const Tab = styled( Ariakit.Tab )`
 			outline: none;
 		}
 
-		// Focus.
+		// Focus indicator.
+		position: relative;
 		&::after {
 			content: '';
 			position: absolute;

From 9c28772e5aa4bd78417cbd4961042503e694a2cd Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:33:58 +0200
Subject: [PATCH 38/53] Clean up position: relative.

---
 packages/components/src/tabs/styles.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 9683f63569ad5..bc341dd144f04 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -12,7 +12,6 @@ import { space } from '../utils/space';
 import Icon from '../icon';
 
 export const TabListWrapper = styled.div`
-  position: relative;
 	display: flex;
 	align-items: stretch;
 	overflow-x: auto;
@@ -150,7 +149,6 @@ export const Tab = styled( Ariakit.Tab )`
 		}
 
 		&:focus:not( :disabled ) {
-			position: relative;
 			box-shadow: none;
 			outline: none;
 		}

From f83107821af56753bd2006c2c804ecd18b01341b Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:34:42 +0200
Subject: [PATCH 39/53] Fix typo.

---
 packages/components/src/tabs/styles.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index bc341dd144f04..a43e1862e0c92 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -102,14 +102,15 @@ export const TabListWrapper = styled.div`
 	}
 	&[aria-orientation='vertical']::before {
 		/* Adjusting the border radius to match the scaling in the y axis. */
-		border-radius: ${ CONFIG.radiusSmall } / calc(
+		border-radius: ${ CONFIG.radiusSmall } /
+			calc(
 				${ CONFIG.radiusSmall } /
 					(
 						var( --indicator-height, 0 ) /
 							var( --antialiasing-factor )
 					)
 			);
-		top: 0
+		top: 0;
 		left: 0;
 		width: 100%;
 		height: calc( var( --antialiasing-factor ) * 1px );

From b4f5c219cb60b4837f097655c9564e647436433b Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 13:35:12 +0200
Subject: [PATCH 40/53] Add position: relative back.

---
 packages/components/src/tabs/styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index a43e1862e0c92..6c8bdd88f1c18 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -42,6 +42,7 @@ export const TabListWrapper = styled.div`
 			transition-timing-function: ease-out;
 		}
 	}
+	position: relative;
 	&::before {
 		content: '';
 		position: absolute;

From a9b15783b887541c4566a28f69e64ac359d9e108 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 14:10:33 +0200
Subject: [PATCH 41/53] Improve focus indicator when selectOnMove is enabled.

---
 packages/components/src/tabs/styles.ts   | 60 ++++++++++++++++--------
 packages/components/src/tabs/tablist.tsx |  1 +
 2 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 6c8bdd88f1c18..2edb9b76777d7 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -101,26 +101,46 @@ export const TabListWrapper = styled.div`
 				${ COLORS.theme.accent };
 		}
 	}
-	&[aria-orientation='vertical']::before {
-		/* Adjusting the border radius to match the scaling in the y axis. */
-		border-radius: ${ CONFIG.radiusSmall } /
-			calc(
-				${ CONFIG.radiusSmall } /
+	&[aria-orientation='vertical'] {
+		&::before {
+			/* Adjusting the border radius to match the scaling in the y axis. */
+			border-radius: ${ CONFIG.radiusSmall } /
+				calc(
+					${ CONFIG.radiusSmall } /
+						(
+							var( --indicator-height, 0 ) /
+								var( --antialiasing-factor )
+						)
+				);
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: calc( var( --antialiasing-factor ) * 1px );
+			transform: translateY( calc( var( --indicator-top ) * 1px ) )
+				scaleY(
+					calc(
+						var( --indicator-height ) / var( --antialiasing-factor )
+					)
+				);
+			background-color: color-mix(
+				in srgb,
+				${ COLORS.theme.accent },
+				transparent 96%
+			);
+		}
+		&[data-select-on-move='true']:has( :focus-visible )::before {
+			box-sizing: border-box;
+			border: var( --wp-admin-border-width-focus ) solid
+				${ COLORS.theme.accent };
+			/* Adjusting the border width to match the scaling in the y axis. */
+			border-block-width: calc(
+				var( --wp-admin-border-width-focus, 1px ) /
 					(
 						var( --indicator-height, 0 ) /
 							var( --antialiasing-factor )
 					)
 			);
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: calc( var( --antialiasing-factor ) * 1px );
-		transform: translateY( calc( var( --indicator-top ) * 1px ) )
-			scaleY(
-				calc( var( --indicator-height ) / var( --antialiasing-factor ) )
-			);
-		background-color: ${ COLORS.theme.accent };
-		opacity: 0.04;
+		}
 	}
 `;
 
@@ -158,7 +178,6 @@ export const Tab = styled( Ariakit.Tab )`
 		// Focus indicator.
 		position: relative;
 		&::after {
-			content: '';
 			position: absolute;
 			pointer-events: none;
 
@@ -187,6 +206,7 @@ export const Tab = styled( Ariakit.Tab )`
 		text-align: center;
 
 		&::after {
+			content: '';
 			inset: ${ space( 3 ) };
 		}
 	}
@@ -201,10 +221,10 @@ export const Tab = styled( Ariakit.Tab )`
 			color: ${ COLORS.theme.accent };
 			fill: currentColor;
 		}
-
-		&::after {
-			inset: 2px;
-		}
+	}
+	[aria-orientation='vertical'][data-select-on-move='false'] &::after {
+		content: '';
+		inset: 2px;
 	}
 `;
 
diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx
index ae8daf60fc237..ac8a0a494cfa9 100644
--- a/packages/components/src/tabs/tablist.tsx
+++ b/packages/components/src/tabs/tablist.tsx
@@ -108,6 +108,7 @@ export const TabList = forwardRef<
 			}
 			onBlur={ onBlur }
 			tabIndex={ -1 }
+			data-select-on-move={ selectOnMove ? 'true' : 'false' }
 			{ ...otherProps }
 			style={ {
 				'--indicator-top': selectedTabPosition.top,

From f4dbf4f438708581765939ad1d6c489a1f79b231 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 17:53:41 +0200
Subject: [PATCH 42/53] Add fade in effect to chevron when selectOnMove is
 enabled.

---
 packages/components/src/tabs/styles.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 04990fd5b4a20..2bfff390dcd88 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -244,6 +244,17 @@ export const TabChevron = styled( Icon )`
 	[role='tab']:is( [aria-selected='true'], [data-focus-visible], :hover ) & {
 		opacity: 1;
 	}
+	@media not ( prefers-reduced-motion ) {
+		[data-select-on-move='true']
+			[role='tab']:is(
+				[aria-selected='true'],
+				[data-focus-visible],
+				:hover
+			)
+			& {
+			transition: opacity 0.3s ease-in;
+		}
+	}
 	&:dir( rtl ) {
 		rotate: 180deg;
 	}

From 94f788be15634083581701b5445e0ba63b615444 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 18:01:49 +0200
Subject: [PATCH 43/53] Use [data-focus-visible] consistently.

---
 packages/components/src/tabs/styles.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 2bfff390dcd88..4106012870bb7 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -130,7 +130,7 @@ export const TabListWrapper = styled.div`
 				transparent 96%
 			);
 		}
-		&[data-select-on-move='true']:has( :focus-visible )::before {
+		&[data-select-on-move='true']:has( [data-focus-visible] )::before {
 			box-sizing: border-box;
 			border: var( --wp-admin-border-width-focus ) solid
 				${ COLORS.theme.accent };
@@ -197,7 +197,7 @@ export const Tab = styled( Ariakit.Tab )`
 			}
 		}
 
-		&:focus-visible::after {
+		&[data-focus-visible]::after {
 			opacity: 1;
 		}
 	}
@@ -266,7 +266,7 @@ export const TabPanel = styled( Ariakit.TabPanel )`
 		outline: none;
 	}
 
-	&:focus-visible {
+	&[data-focus-visible] {
 		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
 			${ COLORS.theme.accent };
 		// Windows high contrast mode.

From 01f31da52cace7b2e393191ba7f90c39631c0a08 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 18:23:26 +0200
Subject: [PATCH 44/53] Styles clean up.

---
 packages/components/src/tabs/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 4106012870bb7..716e04401ace7 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -130,8 +130,8 @@ export const TabListWrapper = styled.div`
 				transparent 96%
 			);
 		}
+		box-sizing: border-box;
 		&[data-select-on-move='true']:has( [data-focus-visible] )::before {
-			box-sizing: border-box;
 			border: var( --wp-admin-border-width-focus ) solid
 				${ COLORS.theme.accent };
 			/* Adjusting the border width to match the scaling in the y axis. */

From 4337d49ade14349230af8b90488269e9cdd37c2b Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 18:34:35 +0200
Subject: [PATCH 45/53] Add comment for clarity.

---
 packages/components/src/tabs/styles.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 716e04401ace7..f322fadcab314 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -244,6 +244,9 @@ export const TabChevron = styled( Icon )`
 	[role='tab']:is( [aria-selected='true'], [data-focus-visible], :hover ) & {
 		opacity: 1;
 	}
+	// The chevron is transitioned into existence when selectOnMove is enabled,
+	// because otherwise it looks jarring, as it shows up outside of the focus
+	// indicator that's being animated at the same time.
 	@media not ( prefers-reduced-motion ) {
 		[data-select-on-move='true']
 			[role='tab']:is(

From 01cefc921945e669e2893729b6c95bb1ca3b1f9a Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 18:35:59 +0200
Subject: [PATCH 46/53] Move scroll-margin to the right place.

---
 packages/components/src/tabs/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index f322fadcab314..91f387adcdf02 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -206,6 +206,7 @@ export const Tab = styled( Ariakit.Tab )`
 		padding-inline: ${ space( 4 ) };
 		height: ${ space( 12 ) };
 		text-align: center;
+		scroll-margin: 24px;
 
 		&::after {
 			content: '';
@@ -217,7 +218,6 @@ export const Tab = styled( Ariakit.Tab )`
 		padding: ${ space( 2 ) } ${ space( 3 ) };
 		min-height: ${ space( 10 ) };
 		text-align: start;
-		scroll-margin: 24px;
 
 		&[aria-selected='true'] {
 			color: ${ COLORS.theme.accent };

From bb6b4e1b1cb5814f4d196713cad84469f667ada9 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 18:43:11 +0200
Subject: [PATCH 47/53] Use CSS variable for accuracy.

---
 packages/components/src/tabs/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 91f387adcdf02..ed6473c14225b 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -226,7 +226,7 @@ export const Tab = styled( Ariakit.Tab )`
 	}
 	[aria-orientation='vertical'][data-select-on-move='false'] &::after {
 		content: '';
-		inset: 2px;
+		inset: var( --wp-admin-border-width-focus );
 	}
 `;
 

From b6710f2be9c9468fa7a75c6ede8b285ada532416 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 18:46:36 +0200
Subject: [PATCH 48/53] Fix overflow.

---
 packages/components/src/tabs/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index ed6473c14225b..e0b3247bbbe05 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -130,8 +130,8 @@ export const TabListWrapper = styled.div`
 				transparent 96%
 			);
 		}
-		box-sizing: border-box;
 		&[data-select-on-move='true']:has( [data-focus-visible] )::before {
+			box-sizing: border-box;
 			border: var( --wp-admin-border-width-focus ) solid
 				${ COLORS.theme.accent };
 			/* Adjusting the border width to match the scaling in the y axis. */

From 822715b2f3e232805cc51de2e282498081ffb7d0 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 18:53:23 +0200
Subject: [PATCH 49/53] Skip failing test for Safari :(

---
 test/e2e/specs/editor/various/a11y.spec.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/test/e2e/specs/editor/various/a11y.spec.js b/test/e2e/specs/editor/various/a11y.spec.js
index 3ec7318ab89e7..8f63b57fda657 100644
--- a/test/e2e/specs/editor/various/a11y.spec.js
+++ b/test/e2e/specs/editor/various/a11y.spec.js
@@ -123,7 +123,14 @@ test.describe( 'a11y (@firefox, @webkit)', () => {
 	test( 'should make the modal content focusable when it is scrollable', async ( {
 		page,
 		pageUtils,
+		browserName,
 	} ) => {
+		// eslint-disable-next-line playwright/no-skipped-test
+		test.skip(
+			browserName === 'webkit',
+			'Known bug with focus order in Safari.'
+		);
+
 		// Note: this test depends on a particular viewport height to determine whether or not
 		// the modal content is scrollable. If this tests fails and needs to be debugged locally,
 		// double-check the viewport height when running locally versus in CI. Additionally,

From ece5efc1d24d209f57f0b235a372b1ef586361cc Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 19:03:36 +0200
Subject: [PATCH 50/53] Fix flashing issue.

---
 packages/components/src/tabs/styles.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index e0b3247bbbe05..435d4b82add26 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -130,7 +130,9 @@ export const TabListWrapper = styled.div`
 				transparent 96%
 			);
 		}
-		&[data-select-on-move='true']:has( [data-focus-visible] )::before {
+		&[data-select-on-move='true']:has(
+				:is( :focus-visible, [data-focus-visible] )
+			)::before {
 			box-sizing: border-box;
 			border: var( --wp-admin-border-width-focus ) solid
 				${ COLORS.theme.accent };

From 07069c8d77dbfb618caec2194f9d52eb0540011e Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Fri, 4 Oct 2024 19:04:47 +0200
Subject: [PATCH 51/53] Transition chevron only on selected and not on hover or
 focus-visible.

---
 packages/components/src/tabs/styles.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 435d4b82add26..a0fe4ad582ad9 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -251,11 +251,7 @@ export const TabChevron = styled( Icon )`
 	// indicator that's being animated at the same time.
 	@media not ( prefers-reduced-motion ) {
 		[data-select-on-move='true']
-			[role='tab']:is(
-				[aria-selected='true'],
-				[data-focus-visible],
-				:hover
-			)
+			[role='tab']:is( [aria-selected='true'],  )
 			& {
 			transition: opacity 0.3s ease-in;
 		}

From b008f3a8f56564889914a841272cd3d2cfb07958 Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Mon, 7 Oct 2024 20:08:36 +0200
Subject: [PATCH 52/53] Improve chevron opacity transition with suggested
 value.

---
 packages/components/src/tabs/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index a0fe4ad582ad9..926abc3e34b10 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.1s linear;
+				transition: opacity 0.15s 0.15s linear;
 			}
 		}
 

From ee8783fa59a5c5b98e180ce16591bfb44bdf7cca Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Mon, 7 Oct 2024 20:09:15 +0200
Subject: [PATCH 53/53] fix changelog

---
 packages/components/CHANGELOG.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 193870196219c..a82b208008451 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -7,6 +7,10 @@
 -   `PaletteEdit`: dedupe palette element slugs ([#65772](https://github.com/WordPress/gutenberg/pull/65772)).
 -   `Tabs`: fix skipping indication animation glitch ([#65878](https://github.com/WordPress/gutenberg/pull/65878)).
 
+### Enhancements
+
+-   `Tabs`: revamped vertical orientation styles ([#65387](https://github.com/WordPress/gutenberg/pull/65387)).
+
 ## 28.9.0 (2024-10-03)
 
 ### Bug Fixes
@@ -26,7 +30,6 @@
 
 ### Enhancements
 
--   `Tabs`: revamped vertical orientation styles ([#65387](https://github.com/WordPress/gutenberg/pull/65387)).
 -   `Tabs`: handle horizontal overflow and large tab lists gracefully ([#64371](https://github.com/WordPress/gutenberg/pull/64371)).
 -   `BorderControl`: promote to stable ([#65475](https://github.com/WordPress/gutenberg/pull/65475)).
 -   `BorderBoxControl`: promote to stable ([#65586](https://github.com/WordPress/gutenberg/pull/65586)).