UCalendar - styling adjacent month days

[bask-digital]

Description

Nuxt version: 3.16
Nuxt UI version: 3

It seems the new UCalendar loses the styling of the out-of-month days (or adjacent month days, leading and trailing days, etc).

Notice how Reka UI's Calendar component the adjacent month days are grayed out:

Versus Nuxt UI's Calendar component:

Without the grayed out adjacent month days, the UX seems a bit confusing. Grayed out adjacent month days is a common pattern in UI design systems.

Is there any way to update the styling of the adjacent month days?

Additional context

No response

[bask-digital]

For anyone wondering, this is how I solved it:

// main.css
@layer base {
	div[data-reka-popper-content-wrapper] div[data-outside-view] {
		@apply text-black/30 dark:text-white/30;
	}
}

Would be nice to have some official support for this though!

[ac-shadow]

Hey, another workaround for this is to use the ui prop (or app config) to add a class to the cellTrigger slot like this:

<UCalendar :ui="{ cellTrigger: 'data-[outside-view]:text-(--ui-text-dimmed)' }" />