@a4ui/core 0.38.1 → 0.39.0

package/src/ui/SideRail.tsx

@@ -60,7 +60,7 @@ export function SideRail(props: SideRailProps): JSX.Element {
     <div
       role="tablist"
       aria-orientation="vertical"
-      class={cn('flex w-20 flex-col items-stretch gap-1 border-r border-border bg-glass py-2', props.class)}
+      class={cn('flex w-20 flex-col items-stretch gap-1 border-e border-border bg-glass py-2', props.class)}
     >
       <For each={props.items}>
         {(item, index) => {
@@ -92,14 +92,14 @@ export function SideRail(props: SideRailProps): JSX.Element {
               <span
                 aria-hidden="true"
                 class={cn(
-                  'absolute inset-y-1 left-0 w-0.5 rounded-full bg-primary transition-opacity',
+                  'absolute inset-y-1 start-0 w-0.5 rounded-full bg-primary transition-opacity',
                   active() ? 'opacity-100' : 'opacity-0',
                 )}
               />
               <span class="relative inline-flex">
                 {item.icon}
                 <Show when={item.badge}>
-                  <span class="absolute -right-2 -top-2">{item.badge}</span>
+                  <span class="absolute -end-2 -top-2">{item.badge}</span>
                 </Show>
               </span>
               <Show when={showLabels()}>

package/src/ui/Sidebar.tsx

@@ -23,11 +23,20 @@ import {
 } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
+import { useDirection } from './DirectionProvider'
 import { useMediaQuery } from '../lib/media'
 import { Drawer } from './Drawer'
 import { ScrollArea } from './ScrollArea'
 
-export type SidebarSide = 'left' | 'right'
+/**
+ * Which edge the sidebar sits on. The layout is a flex row in DOM order, so the
+ * edge follows the reading direction: `start` (alias `left`) is the leading
+ * edge, `end` (alias `right`) the trailing one. Under `dir="rtl"` `start` is the
+ * right-hand side.
+ */
+export type SidebarSide = 'start' | 'end' | 'left' | 'right'
+const isStart = (side: SidebarSide): boolean => side === 'start' || side === 'left'
 export type SidebarVariant = 'sidebar' | 'floating' | 'inset'
 export type SidebarCollapsible = 'offcanvas' | 'icon' | 'none'
 
@@ -95,7 +104,7 @@ export function SidebarProvider(props: SidebarProviderProps): JSX.Element {
   const [internal, setInternal] = createSignal(props.defaultOpen ?? true)
   const [openMobile, setOpenMobile] = createSignal(false)
   const [config, setConfig] = createSignal<ReturnType<SidebarContextValue['config']>>({
-    side: 'left',
+    side: 'start',
     variant: 'sidebar',
     collapsible: 'offcanvas',
   })
@@ -144,7 +153,7 @@ export function SidebarProvider(props: SidebarProviderProps): JSX.Element {
 }
 
 interface SidebarProps extends ParentProps {
-  /** Which edge it sits on. @default 'left' */
+  /** Which edge it sits on; follows `dir` (see {@link SidebarSide}). @default 'start' */
   side?: SidebarSide
   /** `sidebar` is flush, `floating` is a detached rounded panel, `inset` has no surface of its own (pair with `SidebarInset`). @default 'sidebar' */
   variant?: SidebarVariant
@@ -169,7 +178,7 @@ interface SidebarProps extends ParentProps {
  */
 export function Sidebar(props: SidebarProps): JSX.Element {
   const ctx = useSidebarInternal()
-  const side = () => props.side ?? 'left'
+  const side = () => props.side ?? 'start'
   const variant = () => props.variant ?? 'sidebar'
   const collapsible = () => props.collapsible ?? 'offcanvas'
   createEffect(() => ctx.setConfig({ side: side(), variant: variant(), collapsible: collapsible() }))
@@ -185,7 +194,7 @@ export function Sidebar(props: SidebarProps): JSX.Element {
       class={cn(
         'relative flex h-full w-full min-w-0 flex-col',
         variant() === 'sidebar' &&
-          cn('bg-glass', side() === 'left' ? 'border-r border-border' : 'border-l border-border'),
+          cn('bg-glass', isStart(side()) ? 'border-e border-border' : 'border-s border-border'),
         variant() === 'floating' && 'rounded-xl border border-border bg-glass shadow-lg',
         props.class,
       )}
@@ -202,7 +211,7 @@ export function Sidebar(props: SidebarProps): JSX.Element {
           <Drawer
             open={ctx.openMobile()}
             onOpenChange={ctx.setOpenMobile}
-            side={side()}
+            side={isStart(side()) ? 'start' : 'end'}
             title={label()}
             class="max-w-[var(--sidebar-w)] p-0"
           >
@@ -233,10 +242,16 @@ export function Sidebar(props: SidebarProps): JSX.Element {
           <div
             class={cn(
               'absolute inset-y-0 transition-[transform,visibility] duration-200 ease-out',
-              side() === 'left' ? 'left-0' : 'right-0',
+              isStart(side()) ? 'start-0' : 'end-0',
               variant() !== 'sidebar' && 'p-2',
               collapsible() === 'icon' ? 'w-full' : 'w-[var(--sidebar-w)]',
-              offscreen() && cn('invisible', side() === 'left' ? '-translate-x-full' : 'translate-x-full'),
+              offscreen() &&
+                cn(
+                  'invisible',
+                  isStart(side())
+                    ? '-translate-x-full rtl:translate-x-full'
+                    : 'translate-x-full rtl:-translate-x-full',
+                ),
             )}
           >
             {surface()}
@@ -275,7 +290,7 @@ export function SidebarTrigger(props: SidebarTriggerProps): JSX.Element {
         props.class,
       )}
     >
-      {props.children ?? <PanelLeft class="h-4 w-4" aria-hidden="true" />}
+      {props.children ?? <PanelLeft class="h-4 w-4 rtl:-scale-x-100" aria-hidden="true" />}
     </button>
   )
 }
@@ -287,7 +302,7 @@ export function SidebarTrigger(props: SidebarTriggerProps): JSX.Element {
  */
 export function SidebarRail(props: { class?: string }): JSX.Element {
   const ctx = useSidebarInternal()
-  const left = () => ctx.config().side === 'left'
+  const left = () => isStart(ctx.config().side)
   return (
     <button
       type="button"
@@ -297,8 +312,10 @@ export function SidebarRail(props: { class?: string }): JSX.Element {
       title="Toggle sidebar"
       onClick={() => ctx.toggle()}
       class={cn(
-        'absolute inset-y-0 z-10 hidden w-3 after:absolute after:inset-y-0 after:left-1/2 after:w-px after:bg-transparent after:transition-colors hover:after:bg-border md:block',
-        left() ? '-right-1.5 cursor-w-resize' : '-left-1.5 cursor-e-resize',
+        'absolute inset-y-0 z-10 hidden w-3 after:absolute after:inset-y-0 after:start-1/2 after:w-px after:bg-transparent after:transition-colors hover:after:bg-border md:block',
+        left()
+          ? '-end-1.5 cursor-w-resize rtl:cursor-e-resize'
+          : '-start-1.5 cursor-e-resize rtl:cursor-w-resize',
         props.class,
       )}
     />
@@ -325,7 +342,7 @@ export function SidebarInset(props: ParentProps<{ class?: string }>): JSX.Elemen
         inset() &&
           cn(
             'm-2 rounded-xl border border-border bg-glass shadow-sm',
-            ctx.config().side === 'left' ? 'ml-0' : 'mr-0',
+            isStart(ctx.config().side) ? 'ms-0' : 'me-0',
           ),
         props.class,
       )}
@@ -416,7 +433,7 @@ export function SidebarGroupAction(props: SidebarGroupActionProps): JSX.Element
       aria-label={props.label}
       onClick={(e) => props.onClick?.(e)}
       class={cn(
-        'absolute right-1 top-0 grid h-6 w-6 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-data-[icon-collapsed=true]/sidebar:hidden [&>svg]:h-4 [&>svg]:w-4',
+        'absolute end-1 top-0 grid h-6 w-6 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-data-[icon-collapsed=true]/sidebar:hidden [&>svg]:h-4 [&>svg]:w-4',
         props.class,
       )}
     >
@@ -476,17 +493,20 @@ const SIZE: Record<MenuButtonSize, string> = {
 // child is visually hidden (sr-only) so the accessible name survives, and the
 // icon is centred.
 const ITEM_BASE =
-  'flex w-full min-w-0 items-center gap-2.5 rounded-lg px-2.5 text-left font-medium text-foreground/80 outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:bg-muted aria-[current=page]:text-foreground group-has-[[data-sidebar=menu-action]]/item:pr-9 [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0 [&>span]:truncate group-data-[icon-collapsed=true]/sidebar:justify-center group-data-[icon-collapsed=true]/sidebar:px-0 group-data-[icon-collapsed=true]/sidebar:[&>span]:sr-only'
+  'flex w-full min-w-0 items-center gap-2.5 rounded-lg px-2.5 text-start font-medium text-foreground/80 outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:bg-muted aria-[current=page]:text-foreground group-has-[[data-sidebar=menu-action]]/item:pe-9 [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0 [&>span]:truncate group-data-[icon-collapsed=true]/sidebar:justify-center group-data-[icon-collapsed=true]/sidebar:px-0 group-data-[icon-collapsed=true]/sidebar:[&>span]:sr-only'
 
 function MenuTooltip(
   props: ParentProps<{ tooltip?: JSX.Element; as: 'a' | 'button'; [key: string]: unknown }>,
 ) {
   const iconCollapsed = useContext(IconCollapsed)
   const ctx = useSidebarInternal()
+  const dir = useDirection()
   const [local, rest] = splitProps(props, ['tooltip', 'as', 'children'])
+  // Kobalte placements are physical: the tooltip opens toward the content side.
+  const towardContent = () => (isStart(ctx.config().side) === (dir() === 'ltr') ? 'right' : 'left')
   return (
     <KTooltip
-      placement={ctx.config().side === 'left' ? 'right' : 'left'}
+      placement={towardContent()}
       gutter={10}
       openDelay={150}
       closeDelay={0}
@@ -495,7 +515,7 @@ function MenuTooltip(
       <KTooltip.Trigger as={local.as} {...rest}>
         {local.children}
       </KTooltip.Trigger>
-      <KTooltip.Portal>
+      <KTooltip.Portal ref={portalDir}>
         <KTooltip.Content class="z-50 rounded-md border border-border bg-card px-2.5 py-1.5 text-xs text-card-foreground shadow-md">
           {local.tooltip}
         </KTooltip.Content>
@@ -565,7 +585,7 @@ export function SidebarMenuAction(
       aria-label={props.label}
       onClick={(e) => props.onClick?.(e)}
       class={cn(
-        'absolute right-1 top-1/2 grid h-6 w-6 -translate-y-1/2 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-data-[icon-collapsed=true]/sidebar:hidden [&>svg]:h-4 [&>svg]:w-4',
+        'absolute end-1 top-1/2 grid h-6 w-6 -translate-y-1/2 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-data-[icon-collapsed=true]/sidebar:hidden [&>svg]:h-4 [&>svg]:w-4',
         props.showOnHover &&
           'opacity-0 focus-visible:opacity-100 group-focus-within/item:opacity-100 group-hover/item:opacity-100',
         props.class,
@@ -582,7 +602,7 @@ export function SidebarMenuBadge(props: ParentProps<{ class?: string }>): JSX.El
     <span
       data-sidebar="menu-badge"
       class={cn(
-        'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 select-none rounded-md bg-primary/15 px-1.5 text-[11px] font-semibold tabular-nums text-primary group-data-[icon-collapsed=true]/sidebar:hidden',
+        'pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 select-none rounded-md bg-primary/15 px-1.5 text-[11px] font-semibold tabular-nums text-foreground group-data-[icon-collapsed=true]/sidebar:hidden',
         props.class,
       )}
     >
@@ -651,8 +671,8 @@ export function SidebarMenuSub(props: SidebarMenuSubProps): JSX.Element {
         <ChevronRight
           aria-hidden="true"
           class={cn(
-            'ml-auto h-4 w-4 shrink-0 transition-transform duration-200 group-data-[icon-collapsed=true]/sidebar:hidden',
-            shown() && 'rotate-90',
+            'ms-auto h-4 w-4 shrink-0 transition-transform duration-200 group-data-[icon-collapsed=true]/sidebar:hidden',
+            shown() ? 'rotate-90' : 'rtl:-scale-x-100',
           )}
         />
       </MenuTooltip>
@@ -664,7 +684,7 @@ export function SidebarMenuSub(props: SidebarMenuSubProps): JSX.Element {
         )}
       >
         <div class="min-h-0 overflow-hidden">
-          <ul class="ml-4 mt-1 flex list-none flex-col gap-0.5 border-l border-border py-0.5 pl-2.5">
+          <ul class="ms-4 mt-1 flex list-none flex-col gap-0.5 border-s border-border py-0.5 ps-2.5">
             {props.children}
           </ul>
         </div>
@@ -688,7 +708,7 @@ export function SidebarMenuSubButton(
 ): JSX.Element {
   const cls = () =>
     cn(
-      'flex h-8 w-full min-w-0 items-center gap-2 rounded-md px-2 text-left text-[13px] font-medium text-foreground/75 outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:bg-muted aria-[current=page]:text-foreground [&>span]:truncate',
+      'flex h-8 w-full min-w-0 items-center gap-2 rounded-md px-2 text-start text-[13px] font-medium text-foreground/75 outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:bg-muted aria-[current=page]:text-foreground [&>span]:truncate',
       props.class,
     )
   return (

package/src/ui/SlashMenu.tsx

@@ -116,7 +116,7 @@ export function SlashMenu(props: SlashMenuProps): JSX.Element {
                 onMouseEnter={() => setActive(i())}
                 onClick={() => pick(item)}
                 class={cn(
-                  'flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-left transition-colors',
+                  'flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-start transition-colors',
                   active() === i() ? 'bg-muted' : undefined,
                 )}
               >

package/src/ui/Snippet.tsx

@@ -42,21 +42,24 @@ export function Snippet(props: SnippetProps): JSX.Element {
   return (
     <div class={cn('relative rounded-lg border border-border bg-muted px-3 py-2', props.class)}>
       <Show when={props.language}>
-        <span class="absolute right-9 top-2 rounded bg-card px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+        <span class="absolute end-9 top-2 rounded bg-card px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
           {props.language}
         </span>
       </Show>
       <button
         type="button"
         aria-label={copied() ? 'Copied' : 'Copy to clipboard'}
-        class="absolute right-2 top-2 inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground"
+        class="absolute end-2 top-2 inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground"
         onClick={copy}
       >
         <Show when={copied()} fallback={<Copy class="h-3.5 w-3.5" />}>
           <Check class="h-3.5 w-3.5" />
         </Show>
       </button>
-      <pre class="overflow-x-auto whitespace-pre pr-8 font-mono text-sm text-foreground">
+      <pre
+        dir="ltr"
+        class="overflow-x-auto whitespace-pre pr-8 rtl:pl-8 rtl:pr-0 font-mono text-sm text-foreground"
+      >
         <code>{props.code}</code>
       </pre>
     </div>

package/src/ui/Sortable.tsx

@@ -3,7 +3,7 @@
 // a floating clone follows the pointer through a Portal, and the grabbed
 // row's slot collapses into a dashed placeholder until it's dropped.
 import { createEffect, createSignal, For, Show, type JSX } from 'solid-js'
-import { Portal } from 'solid-js/web'
+import { Portal } from './Portal'
 import { GripVertical } from 'lucide-solid'
 
 import { cn } from '../lib/cn'

package/src/ui/SpecSheet.tsx

@@ -76,7 +76,7 @@ export function SpecSheet(props: SpecSheetProps): JSX.Element {
                     )}
                   >
                     <dt class="text-muted-foreground">{row.label}</dt>
-                    <dd class="text-right font-medium text-foreground">{row.value}</dd>
+                    <dd class="text-end font-medium text-foreground">{row.value}</dd>
                   </div>
                 )}
               </For>

package/src/ui/SpeedDial.tsx

@@ -40,7 +40,7 @@ export function SpeedDial(props: SpeedDialProps): JSX.Element {
   const [open, setOpen] = createSignal(false)
 
   return (
-    <div class={cn('fixed bottom-6 right-6 z-40 flex flex-col items-center gap-3', props.class)}>
+    <div class={cn('fixed bottom-6 end-6 z-40 flex flex-col items-center gap-3', props.class)}>
       <Show when={open()}>
         <div class="flex flex-col items-center gap-3">
           <For each={props.actions}>

package/src/ui/Splitter.tsx

@@ -2,6 +2,8 @@
 import type { JSX } from 'solid-js'
 import { createSignal } from 'solid-js'
 import { cn } from '../lib/cn'
+import { readingKey } from '../lib/direction'
+import { useDirection } from './DirectionProvider'
 
 export interface SplitterProps {
   /** Content of the first pane (left when horizontal, top when vertical). */
@@ -35,6 +37,7 @@ export interface SplitterProps {
  * ```
  */
 export function Splitter(props: SplitterProps): JSX.Element {
+  const dir = useDirection()
   const orientation = () => props.orientation ?? 'horizontal'
   const min = () => props.min ?? 15
   const max = () => props.max ?? 85
@@ -50,7 +53,7 @@ export function Splitter(props: SplitterProps): JSX.Element {
     const rect = container.getBoundingClientRect()
     const pct =
       orientation() === 'horizontal'
-        ? ((event.clientX - rect.left) / rect.width) * 100
+        ? ((dir() === 'rtl' ? rect.right - event.clientX : event.clientX - rect.left) / rect.width) * 100
         : ((event.clientY - rect.top) / rect.height) * 100
     setSize(clamp(pct))
   }
@@ -72,8 +75,10 @@ export function Splitter(props: SplitterProps): JSX.Element {
   const onKeyDown = (event: KeyboardEvent) => {
     const step = 3
     let delta = 0
-    if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') delta = -step
-    else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') delta = step
+    // The first pane sits on the right under rtl, so the horizontal keys swap.
+    const key = readingKey(event.key, dir())
+    if (key === 'ArrowLeft' || key === 'ArrowUp') delta = -step
+    else if (key === 'ArrowRight' || key === 'ArrowDown') delta = step
     else if (event.key === 'Home') return setSize(min())
     else if (event.key === 'End') return setSize(max())
     else return

package/src/ui/SpreadsheetGrid.tsx

@@ -246,12 +246,12 @@ export function SpreadsheetGrid(props: SpreadsheetGridProps): JSX.Element {
     >
       <div class="grid" style={{ 'grid-template-columns': `48px repeat(${props.cols}, minmax(80px, 1fr))` }}>
         <div role="row" class="contents">
-          <div aria-hidden="true" class="border-b border-r border-border bg-muted" />
+          <div aria-hidden="true" class="border-b border-e border-border bg-muted" />
           <For each={headers()}>
             {(h) => (
               <div
                 role="columnheader"
-                class="border-b border-r border-border bg-muted px-2 py-1 text-center text-xs font-semibold text-muted-foreground"
+                class="border-b border-e border-border bg-muted px-2 py-1 text-center text-xs font-semibold text-muted-foreground"
               >
                 {h}
               </div>
@@ -263,7 +263,7 @@ export function SpreadsheetGrid(props: SpreadsheetGridProps): JSX.Element {
             <div role="row" class="contents">
               <div
                 role="rowheader"
-                class="border-b border-r border-border bg-muted px-2 py-1 text-center text-xs text-muted-foreground"
+                class="border-b border-e border-border bg-muted px-2 py-1 text-center text-xs text-muted-foreground"
               >
                 {r + 1}
               </div>
@@ -273,7 +273,7 @@ export function SpreadsheetGrid(props: SpreadsheetGridProps): JSX.Element {
                     role="gridcell"
                     aria-selected={isActive(r, c)}
                     class={cn(
-                      'relative h-8 border-b border-r border-border px-2 py-1 text-sm cursor-cell',
+                      'relative h-8 border-b border-e border-border px-2 py-1 text-sm cursor-cell',
                       inSelection(r, c) && 'bg-primary/10',
                       isActive(r, c) && 'ring-2 ring-inset ring-primary',
                       isAnchor(r, c) && !isActive(r, c) && 'border-primary',

package/src/ui/Stepper.tsx

@@ -90,7 +90,7 @@ export function Stepper(props: StepperProps): JSX.Element {
                     aria-hidden="true"
                     class={cn(
                       connectorFilled() ? 'bg-primary' : 'bg-border',
-                      isVertical() ? 'ml-4 -mt-1 mb-1 w-0.5 flex-1' : 'mx-2 h-0.5 flex-1',
+                      isVertical() ? 'ms-4 -mt-1 mb-1 w-0.5 flex-1' : 'mx-2 h-0.5 flex-1',
                     )}
                   />
                 </Show>

package/src/ui/SuggestionChips.tsx

@@ -36,7 +36,7 @@ export function SuggestionChips(props: SuggestionChipsProps): JSX.Element {
     <div class={cn('flex flex-wrap gap-2', props.class)}>
       <For each={props.suggestions}>
         {(suggestion) => (
-          <span class="inline-flex items-center gap-1 rounded-full border border-border pl-3 pr-1.5 py-1.5 text-sm text-foreground transition-colors hover:bg-muted">
+          <span class="inline-flex items-center gap-1 rounded-full border border-border ps-3 pe-1.5 py-1.5 text-sm text-foreground transition-colors hover:bg-muted">
             <button
               type="button"
               onClick={() => props.onSelect?.(suggestion)}

package/src/ui/Switch.tsx

@@ -34,7 +34,7 @@ export function Switch(props: SwitchProps): JSX.Element {
     >
       <KSwitch.Input />
       <KSwitch.Control class="inline-flex h-5 w-9 shrink-0 items-center rounded-full bg-input px-0.5 transition-colors data-[checked]:bg-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50">
-        <KSwitch.Thumb class="h-4 w-4 rounded-full bg-white shadow-sm transition-transform data-[checked]:translate-x-4" />
+        <KSwitch.Thumb class="h-4 w-4 rounded-full bg-white shadow-sm transition-transform data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4" />
       </KSwitch.Control>
       <Show when={props.label}>
         <KSwitch.Label class="text-sm text-foreground">{props.label}</KSwitch.Label>

package/src/ui/Table.tsx

@@ -61,7 +61,7 @@ export function Table(props: TableProps): JSX.Element {
 export function TableHead(props: TableProps): JSX.Element {
   const [local, rest] = splitProps(props, ['class', 'children'])
   return (
-    <thead class={cn('border-b border-border text-left text-muted-foreground', local.class)} {...rest}>
+    <thead class={cn('border-b border-border text-muted-foreground', local.class)} {...rest}>
       {local.children}
     </thead>
   )
@@ -112,7 +112,10 @@ export function TableRow(props: TableProps): JSX.Element {
 export function TableHeadCell(props: TableProps): JSX.Element {
   const [local, rest] = splitProps(props, ['class', 'children'])
   return (
-    <th class={cn('px-3 py-2 text-xs font-semibold uppercase tracking-wide', local.class)} {...rest}>
+    <th
+      class={cn('px-3 py-2 text-start text-xs font-semibold uppercase tracking-wide', local.class)}
+      {...rest}
+    >
       {local.children}
     </th>
   )

package/src/ui/TimeField.tsx

@@ -6,9 +6,9 @@
 import { Clock } from 'lucide-solid'
 import type { JSX } from 'solid-js'
 import { For, Show, createEffect, createMemo, createSignal, onCleanup } from 'solid-js'
-import { Portal } from 'solid-js/web'
+import { Portal } from './Portal'
 
-import { createAnchorReflow } from '../lib/anchored'
+import { anchoredLeft, createAnchorReflow } from '../lib/anchored'
 import { cn } from '../lib/cn'
 
 type AmPm = 'AM' | 'PM'
@@ -108,7 +108,7 @@ export function TimeField(props: TimeFieldProps): JSX.Element {
     if (!btnRef) return
     const r = btnRef.getBoundingClientRect()
     const w = popWidth()
-    const left = Math.max(8, Math.min(r.left, window.innerWidth - w - 8))
+    const left = anchoredLeft(btnRef, w)
     setPos({ top: r.bottom + 4, left })
   }
 
@@ -200,7 +200,7 @@ export function TimeField(props: TimeFieldProps): JSX.Element {
 
   const optionClass = (selected: boolean) =>
     cn(
-      'rounded-md px-2 py-1 text-left text-sm transition-colors',
+      'rounded-md px-2 py-1 text-start text-sm transition-colors',
       selected ? 'bg-primary text-primary-foreground' : 'text-foreground hover:bg-muted',
     )
 
@@ -211,7 +211,7 @@ export function TimeField(props: TimeFieldProps): JSX.Element {
         type="button"
         disabled={props.disabled}
         onClick={() => (open() ? close() : openPopover())}
-        class="flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm text-foreground outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50"
+        class="flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-start text-sm text-foreground outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50"
       >
         <span class={displayLabel(props.value, props.hour12 ?? false) ? '' : 'text-muted-foreground'}>
           {displayLabel(props.value, props.hour12 ?? false) ?? props.label ?? 'Select time'}
@@ -226,12 +226,12 @@ export function TimeField(props: TimeFieldProps): JSX.Element {
             data-a4-floating
             style={{ position: 'fixed', top: `${pos().top}px`, left: `${pos().left}px` }}
             class={cn(
-              'pointer-events-auto z-50 flex gap-1 divide-x divide-border rounded-lg border border-border bg-card p-2 text-card-foreground shadow-lg',
+              'pointer-events-auto z-50 flex gap-1 divide-x rtl:divide-x-reverse divide-border rounded-lg border border-border bg-card p-2 text-card-foreground shadow-lg',
               props.hour12 ? 'w-56' : 'w-44',
             )}
           >
             <div
-              class="flex max-h-56 flex-1 flex-col gap-0.5 overflow-y-auto pr-1"
+              class="flex max-h-56 flex-1 flex-col gap-0.5 overflow-y-auto pe-1"
               role="listbox"
               aria-label="Hour"
             >
@@ -278,7 +278,7 @@ export function TimeField(props: TimeFieldProps): JSX.Element {
 
             <Show when={props.hour12}>
               <div
-                class="flex max-h-56 flex-1 flex-col gap-0.5 overflow-y-auto pl-1"
+                class="flex max-h-56 flex-1 flex-col gap-0.5 overflow-y-auto ps-1"
                 role="listbox"
                 aria-label="AM or PM"
               >

package/src/ui/Timeline.tsx

@@ -55,12 +55,12 @@ export function Timeline(props: TimelineProps): JSX.Element {
     <ol class={cn('relative flex flex-col gap-6', props.class)}>
       <For each={props.items}>
         {(item, index) => (
-          <li class="relative flex gap-4 pl-2">
+          <li class="relative flex gap-4 ps-2">
             {/* Line segment: hidden on the last item so it doesn't extend past the dot. */}
             <Show when={index() < props.items.length - 1}>
               <span
                 aria-hidden="true"
-                class="absolute left-[calc(0.5rem+0.375rem)] top-3 -bottom-6 w-px -translate-x-1/2 bg-border"
+                class="absolute start-[calc(0.5rem+0.375rem)] top-3 -bottom-6 w-px -translate-x-1/2 bg-border"
               />
             </Show>
             <span

package/src/ui/Toast.tsx

@@ -6,6 +6,7 @@ import type { JSX } from 'solid-js'
 import { Show } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { useDirection } from './DirectionProvider'
 
 /** Visual/semantic tone of a toast — controls its border/background accent color. */
 export type ToastTone = 'success' | 'error' | 'info'
@@ -58,11 +59,16 @@ export const toast = {
   info: (title: string, description?: string) => show('info', title, description),
 }
 
-/** Mount once near the app root — hosts the toast viewport. */
+/**
+ * Mount once near the app root — hosts the toast viewport. Mount it inside a
+ * `DirectionProvider` for RTL: the viewport sits in the end corner (the left
+ * one under RTL) and swipe-to-dismiss follows the direction.
+ */
 export function Toaster(): JSX.Element {
+  const dir = useDirection()
   return (
-    <KToast.Region duration={5000} swipeDirection="right">
-      <KToast.List class="fixed bottom-4 right-4 z-50 flex w-80 flex-col gap-2 outline-none" />
+    <KToast.Region duration={5000} swipeDirection={dir() === 'rtl' ? 'left' : 'right'}>
+      <KToast.List class="fixed bottom-4 end-4 z-50 flex w-80 flex-col gap-2 outline-none" />
     </KToast.Region>
   )
 }

package/src/ui/ToolCallTimeline.tsx

@@ -46,11 +46,11 @@ export function ToolCallTimeline(props: ToolCallTimelineProps): JSX.Element {
     <ol class={cn('relative flex flex-col gap-4', props.class)}>
       <For each={props.calls}>
         {(call, index) => (
-          <li class="relative flex gap-3 pl-1">
+          <li class="relative flex gap-3 ps-1">
             <Show when={index() < props.calls.length - 1}>
               <span
                 aria-hidden="true"
-                class="absolute left-[calc(0.5rem+2px)] top-6 -bottom-4 w-px -translate-x-1/2 bg-border"
+                class="absolute start-[calc(0.5rem+2px)] top-6 -bottom-4 w-px -translate-x-1/2 bg-border"
               />
             </Show>
             <StatusNode status={call.status} />

package/src/ui/Tooltip.tsx

@@ -3,6 +3,7 @@ import { Tooltip as KTooltip } from '@kobalte/core/tooltip'
 import type { JSX, ParentProps } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
 
 interface TooltipProps extends ParentProps {
   /** Content shown inside the tooltip popover. */
@@ -26,7 +27,7 @@ export function Tooltip(props: TooltipProps): JSX.Element {
   return (
     <KTooltip>
       <KTooltip.Trigger class="inline-flex">{props.children}</KTooltip.Trigger>
-      <KTooltip.Portal>
+      <KTooltip.Portal ref={portalDir}>
         <KTooltip.Content
           class={cn(
             'z-50 rounded-md border border-border bg-card px-2.5 py-1.5 text-xs text-card-foreground shadow-md',

package/src/ui/Tour.tsx

@@ -8,7 +8,7 @@
 // highlight.
 import type { JSX } from 'solid-js'
 import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'
-import { Portal } from 'solid-js/web'
+import { Portal } from './Portal'
 
 import { cn } from '../lib/cn'
 import { Button } from './Button'

package/src/ui/TransactionFeed.tsx

@@ -86,7 +86,7 @@ export function TransactionFeed(props: TransactionFeedProps): JSX.Element {
           <p class="truncate text-xs text-muted-foreground">{tx.subtitle}</p>
         </Show>
       </div>
-      <div class="shrink-0 text-right">
+      <div class="shrink-0 text-end">
         <p
           class={cn(
             'text-sm font-medium tabular-nums',

package/src/ui/Transfer.tsx

@@ -100,10 +100,10 @@ export function Transfer(props: TransferProps): JSX.Element {
       {pane(titles()[0], available)}
       <div class="flex flex-col items-center justify-center gap-2">
         <Button variant="outline" class="px-2" onClick={moveRight} aria-label="Move to selected">
-          <ChevronRight class="h-4 w-4" />
+          <ChevronRight class="h-4 w-4 rtl:-scale-x-100" />
         </Button>
         <Button variant="outline" class="px-2" onClick={moveLeft} aria-label="Move to available">
-          <ChevronLeft class="h-4 w-4" />
+          <ChevronLeft class="h-4 w-4 rtl:-scale-x-100" />
         </Button>
       </div>
       {pane(titles()[1], chosen)}

package/src/ui/Tree.tsx

@@ -64,14 +64,14 @@ export function Tree(props: TreeProps): JSX.Element {
       <li role="treeitem" aria-expanded={hasChildren() ? isExpanded() : undefined}>
         <div
           class="flex items-center gap-1.5 rounded-md px-2 py-1 text-sm text-foreground hover:bg-muted cursor-pointer"
-          style={{ 'padding-left': `${nodeProps.depth * 1 + 0.5}rem` }}
+          style={{ 'padding-inline-start': `${nodeProps.depth * 1 + 0.5}rem` }}
           onClick={() => hasChildren() && toggle(nodeProps.node.id)}
         >
           <Show when={hasChildren()} fallback={<span class="h-3.5 w-3.5 shrink-0" aria-hidden="true" />}>
             <ChevronRight
               class={cn(
                 'h-3.5 w-3.5 shrink-0 transition-transform duration-200',
-                isExpanded() && 'rotate-90',
+                isExpanded() ? 'rotate-90' : 'rtl:-scale-x-100',
               )}
               aria-hidden="true"
             />