Foundations
Internationalization
The library is bidirectional. Wrap a subtree in <PdsProvider dir="rtl"> and layouts mirror, text right-aligns, and leading/trailing affordances swap sides — no per-page patching. The mechanism is deliberately boring: CSS logical properties do almost all of the work, so most components are correct under RTL for free.
The contract
dir prop
PdsProvider takes dir="ltr"|"rtl" (default ltr), stamps dir on its host, and feeds Radix's DirectionProvider so portaled overlays flip too. Read it at runtime with useDirection().
Logical, not physical
Inline-axis spacing/edges use margin-inline-*, padding-inline-*, inset-inline-*, border-inline-*, and text-align: start/end — never left/right. Block-axis props (top, border-bottom rails) stay physical.
Mirror directional glyphs
SVG chevrons and outbound arrows point the wrong way in RTL; flip them with [dir="rtl"] …> svg { transform: scaleX(-1) } and flip any translateX hover nudge. Down-rotating expand carets need no flip.
Text in children
Translatable copy lives in children/props, never in ::before/::after content. Pseudo-content is reserved for non-linguistic separators (a "/" breadcrumb divider is fine).
Both directions, side by side
The same navigation rail, listing rows, and calendar under each direction. Nothing about the markup changes between them — only the dir on the wrapper.
dir = ltr
Leading affordances sit at the inline-start (left) edge; trailing meta and outbound arrows sit at the inline-end (right).
dir = rtl
نفس المكوّن — تنعكس الحواف تلقائيًا: تبدأ العناصر من اليمين وتنتهي الأسهم عند اليسار.