Sidebar Headless Component Styling Issue in PrimeReact 10.9.3 with React 19

[bharattekade]

I have created a new React project and installed PrimeReact (version 10.9.3). However, when using the Sidebar Headless component, it does not work as expected based on the PrimeReact documentation.

Observed Issues:
Font size appears larger than expected.
Hover effect is not working.
Extra white space appears on the right-hand side.

Environment:
React Version: 19
PrimeReact Version: 10.9.3
CSS Differences Noticed:

On the PrimeReact site, the hover CSS is as follows:

.active\:surface-100:active, .focus\:surface-100:focus, .hover\:surface-100:hover {
    background-color: var(--surface-100) !important;
}

However, in my application, I see this instead:

.hover\:surface-100:hover {
    background-color: light-dark(var(--p-surface-100), var(--p-surface-700)) !important;
}

This difference seems to affect the hover styling behavior.

Screenshot:
Here is how the Sidebar Headless component appears in my application:

Expected Behavior:
The component should match the styling as seen on the PrimeReact documentation, with proper hover effects and no unwanted white space.

Steps to Reproduce:
Create a new React 19 project.
Install PrimeReact 10.9.3.
Implement the Sidebar Headless component as per the documentation.
Observe the styling differences mentioned above.

Additional Context:
Please let me know if there is any workaround or if a fix is required for this issue.