Theming for Navigation Menu and Carousel not working (in specific parts)

Is this bug related to Nuxt or Vue?

Vue

Package

v4.x

Version

v4.5.1

Description

I'm currently trying to customize the Navigation Menu active child link theme since my application background is gray, making the active background not appearing.

Following the documentation ui theming object for that doesnt work. For other parts of the component it works as expected, but that part in specific not. I'm not able, while inspecting, to see the classes that I put in the config file for that specific part.

Navigation Menu

Component example:

Inside ui({})

ui: {
navigationMenu: {
	variants: {
		active: {
			true: {
				childLink: 'before:bg-primary/20 text-highlighted',
				childLinkIcon: 'text-default'
			}
		}
	}
}
}

Component

<UNavigationMenu
	:items="[{ label: 'Home', to: '/',  active: true, icon: 'i-solar-home-angle-2-bold-duotone' }]"
	orientation="vertical"
/>

Carousel

In another project I have also faced a similar issue but with carousel. I could not customize the position of arrow buttons in the config file (although I managed to customize it with the inline ui prop... For the navigation menu I could not find a way).

Inside ui({})

ui: {
carousel: {
	variants: {
		orientation: {
			horizontal: {
				prev: 'start-4 top-1/2 -translate-y-1/2', // This is not working
				next: 'end-4 top-1/2 -translate-y-1/2' // This is not working
			}
		}
	}
}
}

Component

<UCarousel v-slot="{ item }" :items="[]" arrows dots>
</UCarousel>

Start by reproducing the Navigation Menu and Carousel examples against the v4.5.1 theme configuration, comparing global ui settings with the inline ui prop. Trace how the navigationMenu childLink and carousel prev/next variants are resolved; done means both configured class sets apply through ui({}) as well as the inline configuration where supported.