UNavigationMenu Accordion hydration mismatch

Environment

Not applicable.

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

4.2

Reproduction

https://github.com/nuxt-ui-templates/dashboard

Description

There is a hydration mismatch related to UNavigationMenu. You can clearly see it on the official dashboard template, so I didn't supply my own reproduction. It concerns these lines related to Accordion items in the menu:

<div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-1" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width:var(--reka-collapsible-content-width);--reka-accordion-content-height:var(--reka-collapsible-content-height);--reka-collapsible-content-height:0px;--reka-collapsible-content-width:0px;" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-0-0-2" hidden="">

versus

<div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-1" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-0-0-2" hidden="">

It's inconspicious at first, but the difference is in the extra whitespace in the second vs first render within the style attribute.

--reka-accordion-content-width:var(--reka-collapsible-content-width);--reka-accordion-content-height:var(--reka-collapsible-content-height);

vs

--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height);

There's extra whitespace around the colon and semicolons, causing the hydration mismatch.

Additional context

No response

Logs

Reproduce the mismatch in the official dashboard template at github.com/nuxt-ui-templates/dashboard and inspect the UNavigationMenu Accordion markup shown in the report. Compare the server and client rendering of the style attribute; done means the renders use consistent spacing and no hydration mismatch is reported.