fix(Carousel): V11 Fix CSS variable collision

[FrancMunoz]

There is a small issue introduced in the refactor of the Carousel in v11-alpha-9 that breaks the content inside of Carousel's items. In file useCarousel.ts some styles are set. One of them is the gap with the spacing prop, that is correct. The problem is that it uses the --spacing variable and overwrites it with the gap. This variable is used below and works well.

The issue comes with the content, as --spacing is overwritten all the tailwind gaps use the new value (16px by default) breaking the content layout.

This PR fixes the issue #8445 .

[github-actions]

Thanks a lot for your contribution! But, PR does not seem to be linked to any issues. Please manually link to an issue or mention it in the description using #<issue_id>.

[FrancMunoz]

@tanerengiiin Is it mandadory to create an issue for the alpha version of v11? Can you please take a look into it. Thank you!

[github-actions]

Thanks a lot for your contribution! But, PR does not seem to be linked to any issues. Please manually link to an issue or mention it in the description using #<issue_id>.

[github-actions]

Thanks a lot for your contribution! But, PR does not seem to be linked to any issues. Please manually link to an issue or mention it in the description using #<issue_id>.

[Coderxrohan]

@melloware
Gentle follow-up — this looks ready to merge now.

[Coderxrohan]

Scoping the spacing to --spacing-items avoids the global collision, and the basis calculation is handled correctly. Looks good to merge.