separator: fix invisible separator

[spesnova]

What does this PR do?

Fixes the Base UI Separator so it renders with the correct size and becomes visible again.

Motivation / Background

The Base UI Separator sets data-orientation="horizontal" or data-orientation="vertical", but the wrapper was using data-horizontal / data-vertical Tailwind selectors. Because of that mismatch, the size classes were not applied and the separator was rendered with no visible width or height.

Describe how you validated your changes

Ran pnpm registry:build successfully to regenerate and validate the updated Base registry outputs.

[vercel]

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

A member of the Team first needs to authorize it.

[mahdirajaee]

Good catch. The shorthand data-horizontal: and data-vertical: selectors are Tailwind v4 variants that match the data-horizontal boolean attribute, but Base UI's SeparatorPrimitive renders data-orientation="horizontal" (a key-value attribute, not a boolean). Switching to data-[orientation=horizontal]: and data-[orientation=vertical]: is the correct fix for targeting the actual DOM output.

The change is thorough -- it covers the base component, all five style variants (lyra, maia, mira, nova, vega), the RTL variant for nova, and the corresponding JSON registry files. Both horizontal and vertical orientations are handled consistently. No risk of side effects on existing themes since the previous selectors simply never matched, meaning separators were rendering as zero-dimension elements everywhere for base-ui styles.

One thing to verify: are there other base-ui components in the codebase using the same data-horizontal:/data-vertical: shorthand pattern that might have the same invisible-element bug? Might be worth a quick grep to catch them all in one pass.

[spesnova]

@mahdirajaee

Good point — I had a similar thought.

For this PR, I intentionally scoped it down to Separator to avoid expanding the change surface too much and increasing review overhead.

That said, I agree it's worth checking. I'll do a quick grep across the codebase and share what I find here, and we can decide whether to address them in this PR or follow up separately.

[spesnova]

The same orientation-selector mismatch still exists in following components:

• UI
  • ButtonGroupSeparator (apps/v4/registry/bases/base/ui/button-group.tsx)
  • Slider (apps/v4/registry/bases/base/ui/slider.tsx)
  • Tabs (apps/v4/registry/bases/base/ui/tabs.tsx)
  • ToggleGroup (apps/v4/registry/bases/base/ui/toggle-group.tsx)
• Block
  • Sizebar-16 - apps/v4/registry/bases/base/blocks/sidebar-16/components/site-header.tsx
  • Dashboard-01 - apps/v4/registry/bases/base/blocks/dashboard-01/components/site-header.tsx