fix(separator): replace self-stretch with h-full for vertical alignment

[sergioperezcheco]

Summary

The vertical Separator in Base UI and Radix styles uses data-vertical:self-stretch, which sets align-self: stretch. This overrides the parent flex container's items-center alignment, causing the separator to stick to the top of the row instead of being vertically centered.

This is visible in sidebar headers, breadcrumbs, toolbars, and anywhere a fixed-height vertical separator sits in an items-center flex row — exactly the pattern used throughout the docs/blocks examples (e.g. data-[orientation=vertical]:h-4).

Root Cause

align-self: stretch on a flex child that already has a fixed height (e.g. h-4) causes the child to align to flex-start (top) instead of being centered by the parent's items-center.

The new-york-v4 style already uses data-vertical:h-full instead of self-stretch and does not have this problem.

Fix

Replace data-vertical:self-stretch with data-vertical:h-full in both Base UI and Radix separator components, matching the working new-york-v4 implementation:

File	Change
bases/base/ui/separator.tsx	data-vertical:self-stretch → data-vertical:h-full
bases/radix/ui/separator.tsx	data-vertical:self-stretch → data-vertical:h-full

The button-group.tsx files also use self-stretch but in a different context (cn-button-group-separator with explicit data-vertical:h-auto), so they are intentionally left unchanged.

Verification

Confirmed by the issue reporter: removing self-stretch so align-self falls back to auto recenters the separator perfectly. The h-full approach is already proven in new-york-v4.

Closes #11027

[vercel]

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

A member of the Team first needs to authorize it.