Skip to main content
Mantı UI logoMantı UIv0.12.1
Studio

v0.12.1

Released 2026-09-14.

A part reads its own orientation

Slider's track and range, and Steps' item and separator, sized themselves with a nested ancestor selector:

[data-orientation='vertical'] & {
  width: var(--manti-slider-track-size);
  height: 100%;
}

That matches the part under any ancestor carrying the attribute, not just its own machine's root, and plenty of components stamp it for their own reasons: Scroll Area, Splitter, Tabs, Toggle Group, Segmented Control. A horizontal slider placed inside a vertical Scroll Area therefore took the vertical geometry, and its track collapsed into a narrow column at the left of the control while the range and thumb stayed on the horizontal axis.

Every one of these parts is stamped with its own data-orientation, so they now read that instead. Steps' list is the one exception, since the machine does not stamp it there: that rule keeps an ancestor form, qualified to the steps root rather than to a bare attribute any wrapper could satisfy.

Nothing changes for a component that was already laid out correctly: the two axes resolve exactly as before when no outer element carries the attribute.

Last updated

Built end-to-end with Manti UI components and design tokens. Manti UI is a framework-agnostic design system on Zag.js.

GitHub