@a4ui/core 0.38.0 → 0.39.0

package/src/ui/PresenceAvatars.tsx

@@ -85,19 +85,19 @@ export function PresenceAvatars(props: PresenceAvatarsProps): JSX.Element {
         <For each={shown()}>
           {(user, index) => (
             <div
-              class={cn('relative rounded-full ring-2 ring-background', index() > 0 && '-ml-2')}
+              class={cn('relative rounded-full ring-2 ring-background', index() > 0 && '-ms-2')}
               title={user.name}
             >
               <Avatar src={user.avatar} alt={user.name} fallback={initials(user.name)} />
               <span
                 aria-hidden="true"
-                class="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-emerald-500 ring-2 ring-background"
+                class="absolute bottom-0 end-0 h-2.5 w-2.5 rounded-full bg-emerald-500 ring-2 ring-background"
               />
             </div>
           )}
         </For>
         <Show when={overflow() > 0}>
-          <div class="-ml-2 rounded-full ring-2 ring-background">
+          <div class="-ms-2 rounded-full ring-2 ring-background">
             <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
               +{overflow()}
             </span>
@@ -125,7 +125,7 @@ export function PresenceAvatars(props: PresenceAvatarsProps): JSX.Element {
                       />
                     </svg>
                     <span
-                      class="ml-1.5 whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium text-white shadow"
+                      class="ms-1.5 whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium text-white shadow"
                       style={{ 'background-color': color() }}
                     >
                       {user()!.name}

package/src/ui/PricingTable.tsx

@@ -131,7 +131,7 @@ export function PricingTable(props: PricingTableProps): JSX.Element {
               class={cn('relative flex flex-col', tier.highlighted && 'ring-2 ring-primary')}
             >
               <Show when={tier.highlighted}>
-                <Badge tone="info" class="absolute -top-3 right-6">
+                <Badge tone="info" class="absolute -top-3 end-6">
                   Popular
                 </Badge>
               </Show>

package/src/ui/Prose.tsx

@@ -29,14 +29,14 @@ const PROSE =
   '[&_h4]:mb-2 [&_h4]:mt-4 [&_h4]:font-semibold ' +
   '[&_p]:my-4 [&_.lead]:text-muted-foreground ' +
   '[&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:opacity-80 ' +
-  '[&_blockquote]:my-6 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground ' +
-  '[&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:my-4 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:my-1 ' +
+  '[&_blockquote]:my-6 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground ' +
+  '[&_ul]:my-4 [&_ul]:list-disc [&_ul]:ps-6 [&_ol]:my-4 [&_ol]:list-decimal [&_ol]:ps-6 [&_li]:my-1 ' +
   '[&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.875em] ' +
   '[&_pre]:my-4 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:border-border [&_pre]:bg-muted [&_pre]:p-4 ' +
   '[&_pre_code]:bg-transparent [&_pre_code]:p-0 ' +
   '[&_hr]:my-8 [&_hr]:border-border ' +
   '[&_table]:my-6 [&_table]:w-full [&_table]:border-collapse [&_table]:text-sm ' +
-  '[&_th]:border-b [&_th]:border-border [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:font-semibold ' +
+  '[&_th]:border-b [&_th]:border-border [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:font-semibold ' +
   '[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:py-2'
 
 /**

package/src/ui/QueryBuilder.tsx

@@ -143,7 +143,7 @@ function GroupView(props: GroupViewProps): JSX.Element {
   }
 
   return (
-    <div class={cn('flex flex-col gap-2 rounded-md p-2', props.depth > 0 && 'border-l-2 border-border pl-3')}>
+    <div class={cn('flex flex-col gap-2 rounded-md p-2', props.depth > 0 && 'border-s-2 border-border ps-3')}>
       <div class="flex flex-wrap items-center gap-2">
         <div
           class="inline-flex overflow-hidden rounded-md border border-input"
@@ -169,18 +169,18 @@ function GroupView(props: GroupViewProps): JSX.Element {
           </For>
         </div>
         <Button variant="outline" onClick={addRule}>
-          <Plus class="mr-1 h-3.5 w-3.5" aria-hidden="true" />
+          <Plus class="me-1 h-3.5 w-3.5" aria-hidden="true" />
           Rule
         </Button>
         <Button variant="outline" onClick={addGroup}>
-          <Plus class="mr-1 h-3.5 w-3.5" aria-hidden="true" />
+          <Plus class="me-1 h-3.5 w-3.5" aria-hidden="true" />
           Group
         </Button>
         <Show when={props.onRemove}>
           {(remove) => (
             <button
               type="button"
-              class="ml-auto rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+              class="ms-auto rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
               aria-label="Remove group"
               onClick={() => remove()()}
             >

package/src/ui/Rating.tsx

@@ -6,6 +6,8 @@ import type { JSX } from 'solid-js'
 import { createSignal, For, Show } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { readingKey } from '../lib/direction'
+import { useDirection } from './DirectionProvider'
 
 export interface RatingProps {
   /** Currently selected rating, from 0 to `max`. */
@@ -30,6 +32,7 @@ export interface RatingProps {
  * ```
  */
 export function Rating(props: RatingProps): JSX.Element {
+  const dir = useDirection()
   const [hover, setHover] = createSignal(0)
   const max = () => props.max ?? 5
   const stars = () => Array.from({ length: max() }, (_, i) => i + 1)
@@ -79,10 +82,11 @@ export function Rating(props: RatingProps): JSX.Element {
               onBlur={() => setHover(0)}
               onClick={() => set(n)}
               onKeyDown={(e) => {
-                if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+                const key = readingKey(e.key, dir())
+                if (key === 'ArrowRight' || key === 'ArrowUp') {
                   e.preventDefault()
                   set(Math.min(props.value + 1, max()))
-                } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+                } else if (key === 'ArrowLeft' || key === 'ArrowDown') {
                   e.preventDefault()
                   set(Math.max(props.value - 1, 0))
                 }

package/src/ui/ReasoningTrace.tsx

@@ -46,7 +46,7 @@ export function ReasoningTrace(props: ReasoningTraceProps): JSX.Element {
         class="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted"
       >
         <Brain class="h-4 w-4 shrink-0" aria-hidden="true" />
-        <span class="flex-1 text-left">{props.label ?? 'Reasoning'}</span>
+        <span class="flex-1 text-start">{props.label ?? 'Reasoning'}</span>
         <Show when={props.streaming}>
           <span class="relative flex h-1.5 w-1.5 shrink-0" aria-hidden="true">
             <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75 motion-reduce:animate-none" />

package/src/ui/ScrollArea.tsx

@@ -59,7 +59,7 @@ export function ScrollArea(props: ScrollAreaProps): JSX.Element {
         '[scrollbar-color:hsl(var(--muted-foreground)/0.35)_transparent] [scrollbar-width:thin]',
         '[&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent',
         '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/35',
-        'hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/55',
+        '[&::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/55',
         AXIS[local.orientation ?? 'vertical'],
         local.class,
       )}

package/src/ui/ScrollProgress.tsx

@@ -44,12 +44,12 @@ export function ScrollProgress(props: ScrollProgressProps): JSX.Element {
   return (
     <div
       aria-hidden="true"
-      class={cn('fixed top-0 left-0 z-[9999] w-full', props.class)}
+      class={cn('fixed top-0 start-0 z-[9999] w-full', props.class)}
       style={{ height: `${props.height ?? 3}px` }}
     >
       <div
         ref={bar}
-        class="origin-left will-change-transform"
+        class="origin-left rtl:origin-right will-change-transform"
         style={{
           height: '100%',
           width: '100%',

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>
   )