Describe the bug

The vertical Separator (Base UI styles) doesn't vertically center inside a flex row that uses items-center. When you give it a fixed height — exactly like the docs/blocks examples do for the sidebar header and breadcrumbs, e.g. data-[orientation=vertical]:h-4 — the line sticks to the top of the row instead of sitting in the middle.

I tracked it down to this class on the Separator:

data-vertical:self-stretch

https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/base/ui/separator.tsx#L17

align-self: stretch on a child that already has a fixed height makes it align to flex-start (the top) instead of being centered by the parent's items-center. So the separator renders at the correct 1px × 16px size, it's just pinned to the top.

The Radix new-york-v4 separator doesn't have this problem because it uses data-[orientation=vertical]:h-full instead of self-stretch, which doesn't override align-self:

https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/separator.tsx

Switching the Base UI separator to data-vertical:h-full fixes the alignment and keeps it consistent with the Radix one. I confirmed in the browser that removing self-stretch (so align-self falls back to auto) recenters the line perfectly.

This looks like the same thing reported in #10646 — that issue was closed as "fixed" but the change never actually landed in the component source, self-stretch is still there on main.

Screenshots

Before (separator pinned to the top of the row):

After (data-vertical:self-stretch → data-vertical:h-full, separator centered):

Affected component/components

Separator (all Base UI styles: base-vega, base-luma, base-lyra, base-maia, base-mira, base-nova, base-rhea, base-sera). Visible anywhere a fixed-height vertical separator sits in an items-center row — sidebar header, breadcrumbs, toolbars, faceted filters, etc.

How to reproduce

1. Scaffold a Base UI project: npx shadcn@latest init (pick a base style).
2. Add the sidebar block: npx shadcn@latest add sidebar-07.
3. Look at the header — it renders a <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" /> next to the sidebar trigger.
4. The separator is glued to the top of the header instead of being vertically centered next to the trigger/breadcrumb.

Codesandbox/StackBlitz link

No response

Logs

System Info

shadcn (Base UI / base-vega), @base-ui/react latest, Tailwind v4

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues