Foundation
Direction and localization
HTML owns reading direction, Base UI receives the same direction for interactive behavior, and components accept locale only when they own durable formatting.
Direction
Set dir on the document or an intentional product surface. Nerio layout uses inherited direction and logical properties. Physical sides remain physical only for APIs such as Sheet and Sidebar side placement.
<html dir="rtl" data-theme="purple" data-mode="system" data-density="comfortable"> <body>{/* Render the matching DirectionProvider inside the app. */}</body></html>Base UI behavior
Base UI does not infer behavioral direction from CSS. Wrap direction-sensitive interactive primitives once and keep its value synchronized with the HTML direction.
"use client";import { DirectionProvider } from "@base-ui/react/direction-provider";export function Providers({ children }: { children: React.ReactNode }) { const direction = "rtl"; return <DirectionProvider direction={direction}>{children}</DirectionProvider>;}RTL fixture
This fixture pairs inherited CSS direction with the behavioral provider. Arrow keys follow RTL reading order in horizontal Tabs and Slider.
import { DirectionProvider } from "@base-ui/react/direction-provider";import { SidebarProvider, Slider, Tabs, TabsContent, TabsList, TabsPanels, TabsTrigger } from "@nerio-ui/ui/client";<DirectionProvider direction="rtl"> <div dir="rtl"> <Tabs defaultValue="overview"> <TabsList aria-label="RTL workspace sections"> <TabsTrigger value="overview">Overview</TabsTrigger> <TabsTrigger value="details">Details</TabsTrigger> </TabsList> <TabsPanels> <TabsContent value="overview">Overview content</TabsContent> <TabsContent value="details">Details content</TabsContent> </TabsPanels> </Tabs> <Slider label="RTL priority" defaultValue={35} /> <SidebarProvider side="left">Inherited left Sidebar direction</SidebarProvider> <SidebarProvider side="right">Inherited right Sidebar direction</SidebarProvider> </div></DirectionProvider>Locale-sensitive output
Calendar, DatePicker, Slider, and Command accept locale where formatting, value text, or filtering belongs to the component. Calendar and DatePicker default to expliciten-US output so server and client markup agree. Pass the same explicit locale on both sides when your application uses another locale.
Labels and copy
Built-in English strings are overridable fallbacks for Core-owned controls, not a message catalog. Translation loading, product terminology, pluralization, routing, currency, and time-zone policy remain application responsibilities.
Keyboard and visual direction
Horizontal navigation follows reading direction where the platform or component contract requires it. Previous and next icons may mirror; arbitrary product icons do not mirror automatically. Calendar keeps locale formatting, week start, and direction as separate decisions.
Consumer boundary
Nerio does not provide a locale provider or an i18n framework. Consumers own catalogs, routing, product copy, domain formatting, and data localization. See the repository contract in docs/direction-localization.md for the complete audited boundary.