Fix(separator): use data-[orientation] selectors to fix invisible separator in Tailwind v4

[syazwanz]

Summary

The Separator component in the base and radix registries uses data-horizontal: / data-vertical: custom variant shorthands for orientation styling.

These require @import "shadcn/tailwind.css" which defines the corresponding @custom-variant.

Without it, Tailwind v4 treats them as boolean attribute checks, the styles are never applied, and the separator renders invisible (0px height/width).

This replaces the shorthands with data-[orientation=horizontal]: / data-[orientation=vertical]: selectors to match the new-york-v4 style.

Related

• Refs [bug]: shadcn/Create: Tailwind data attribute selector fix: data-horizontal / data-vertical → data-[orientation=horizontal] #9196
• Related: fix(slider, scroll-area): use correct data-orientation attribute selectors #9380

[vercel]

@syazwanz is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[shadcn]

I see. any reason why you don't want the shadcn/tailwind.css custom variants?

[syazwanz]

I see. any reason why you don't want the shadcn/tailwind.css custom variants?

No issues with the custom variants themselves, but when I set up my project, @import "shadcn/tailwind.css" wasn't in my globals.css, so the separator was completely invisible. Took a while to figure out why.

Since new-york-v4 already uses the bracket syntax, this just aligns base and radix to match. Happy to close if you'd rather keep the custom variants though.