@a4ui/core 0.38.0 → 0.39.0

package/src/ui/Carousel.tsx

@@ -6,7 +6,9 @@ import { ChevronLeft, ChevronRight } from 'lucide-solid'
 import { For, createSignal, onCleanup, onMount, type JSX } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { readingKey } from '../lib/direction'
 import { motionReduced } from '../lib/motion'
+import { useDirection } from './DirectionProvider'
 
 export interface CarouselProps {
   /** Slides to page through, one visible at a time. */
@@ -37,6 +39,7 @@ export interface CarouselProps {
  * ```
  */
 export function Carousel(props: CarouselProps): JSX.Element {
+  const dir = useDirection()
   const [index, setIndex] = createSignal(0)
   const count = (): number => props.slides.length
 
@@ -49,10 +52,11 @@ export function Carousel(props: CarouselProps): JSX.Element {
   const next = (): void => go(index() + 1)
 
   const onKeyDown = (e: KeyboardEvent): void => {
-    if (e.key === 'ArrowLeft') {
+    const key = readingKey(e.key, dir())
+    if (key === 'ArrowLeft') {
       e.preventDefault()
       prev()
-    } else if (e.key === 'ArrowRight') {
+    } else if (key === 'ArrowRight') {
       e.preventDefault()
       next()
     }
@@ -80,8 +84,10 @@ export function Carousel(props: CarouselProps): JSX.Element {
     const width = viewport?.clientWidth ?? 1
     const dx = dragPx()
     const threshold = Math.max(48, width * 0.2)
-    if (dx <= -threshold) next()
-    else if (dx >= threshold) prev()
+    // A swipe toward the start of the line goes forward: left in LTR, right in RTL.
+    const forward = dir() === 'rtl' ? dx : -dx
+    if (forward >= threshold) next()
+    else if (forward <= -threshold) prev()
     setDragPx(0)
     setDragging(false)
   }
@@ -119,7 +125,9 @@ export function Carousel(props: CarouselProps): JSX.Element {
             swipeOn() && count() > 1 && 'touch-pan-y cursor-grab active:cursor-grabbing',
             !dragging() && 'transition-transform duration-500 ease-out',
           )}
-          style={{ transform: `translateX(calc(-${index() * 100}% + ${dragPx()}px))` }}
+          style={{
+            transform: `translateX(calc(${index() * -100}% * var(--dir-x, 1) + ${dragPx()}px))`,
+          }}
           onPointerDown={onPointerDown}
           onPointerMove={onPointerMove}
           onPointerUp={endDrag}
@@ -132,17 +140,17 @@ export function Carousel(props: CarouselProps): JSX.Element {
           type="button"
           aria-label="Previous slide"
           onClick={prev}
-          class="absolute left-2 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-primary text-primary-foreground shadow transition-opacity hover:opacity-90"
+          class="absolute start-2 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-primary text-primary-foreground shadow transition-opacity hover:opacity-90"
         >
-          <ChevronLeft class="h-5 w-5" />
+          <ChevronLeft class="h-5 w-5 rtl:-scale-x-100" />
         </button>
         <button
           type="button"
           aria-label="Next slide"
           onClick={next}
-          class="absolute right-2 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-primary text-primary-foreground shadow transition-opacity hover:opacity-90"
+          class="absolute end-2 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-primary text-primary-foreground shadow transition-opacity hover:opacity-90"
         >
-          <ChevronRight class="h-5 w-5" />
+          <ChevronRight class="h-5 w-5 rtl:-scale-x-100" />
         </button>
       </div>
 

package/src/ui/Cascader.tsx

@@ -126,7 +126,7 @@ export function Cascader(props: CascaderProps): JSX.Element {
         <div class="absolute z-50 mt-1 flex overflow-hidden rounded-md border border-border bg-card text-card-foreground shadow-md">
           <For each={columns()}>
             {(column, colIndex) => (
-              <ul class="min-w-[10rem] max-h-64 overflow-y-auto border-r border-border p-1 last:border-r-0">
+              <ul class="min-w-[10rem] max-h-64 overflow-y-auto border-e border-border p-1 last:border-e-0">
                 <For each={column}>
                   {(opt) => {
                     const hasChildren = () => !!opt.children && opt.children.length > 0
@@ -142,7 +142,7 @@ export function Cascader(props: CascaderProps): JSX.Element {
                       >
                         <span class="truncate">{opt.label}</span>
                         <Show when={hasChildren()}>
-                          <ChevronRight class="h-4 w-4 shrink-0 opacity-60" />
+                          <ChevronRight class="h-4 w-4 shrink-0 opacity-60 rtl:-scale-x-100" />
                         </Show>
                       </li>
                     )

package/src/ui/CategoryStrip.tsx

@@ -5,6 +5,8 @@ import type { JSX } from 'solid-js'
 import { For } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { readingKey } from '../lib/direction'
+import { useDirection } from './DirectionProvider'
 
 /** A single selectable category: value, label, and optional leading icon. */
 export interface CategoryItem {
@@ -31,6 +33,7 @@ export interface CategoryStripProps {
  * ```
  */
 export function CategoryStrip(props: CategoryStripProps): JSX.Element {
+  const dir = useDirection()
   const activeIndex = () => props.items.findIndex((item) => item.value === props.value)
 
   const onKeyDown = (event: KeyboardEvent) => {
@@ -39,7 +42,7 @@ export function CategoryStrip(props: CategoryStripProps): JSX.Element {
     const count = props.items.length
     if (count === 0) return
     const current = activeIndex()
-    const delta = event.key === 'ArrowRight' ? 1 : -1
+    const delta = readingKey(event.key, dir()) === 'ArrowRight' ? 1 : -1
     const next = ((current === -1 ? 0 : current) + delta + count) % count
     props.onChange(props.items[next].value)
   }

package/src/ui/CodeEditor.tsx

@@ -233,13 +233,13 @@ export function CodeEditor(props: CodeEditorProps): JSX.Element {
   }
 
   return (
-    <div class={cn('relative flex overflow-hidden rounded-md border border-border bg-card', local.class)}>
+    <div
+      dir="ltr"
+      class={cn('relative flex overflow-hidden rounded-md border border-border bg-card', local.class)}
+    >
       <div
         aria-hidden="true"
-        class={cn(
-          SHARED_TEXT,
-          'select-none border-r border-border bg-muted text-right text-muted-foreground',
-        )}
+        class={cn(SHARED_TEXT, 'select-none border-e border-border bg-muted text-end text-muted-foreground')}
       >
         <For each={lines()}>{(_line, index) => <div>{index() + 1}</div>}</For>
       </div>

package/src/ui/CodeTabs.tsx

@@ -52,7 +52,7 @@ export function CodeTabs(props: CodeTabsProps): JSX.Element {
 
   return (
     <div class={cn('overflow-hidden rounded-lg border border-border bg-card', props.class)}>
-      <div class="flex items-center justify-between border-b border-border pr-2">
+      <div class="flex items-center justify-between border-b border-border pe-2">
         <div class="flex" role="tablist">
           <For each={props.tabs}>
             {(tab, index) => (

package/src/ui/Combobox.tsx

@@ -4,6 +4,7 @@ import { Check, ChevronsUpDown } from 'lucide-solid'
 import type { JSX } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
 
 interface ComboboxProps {
   /** Full list of selectable string options (filtered as the user types). */
@@ -57,7 +58,7 @@ export function Combobox(props: ComboboxProps): JSX.Element {
           </KCombobox.Icon>
         </KCombobox.Trigger>
       </KCombobox.Control>
-      <KCombobox.Portal>
+      <KCombobox.Portal ref={portalDir}>
         <KCombobox.Content class="z-50 overflow-hidden rounded-md border border-border bg-card p-1 text-card-foreground shadow-sm">
           <KCombobox.Listbox class="max-h-60 overflow-y-auto" />
         </KCombobox.Content>

package/src/ui/Command.tsx

@@ -3,10 +3,14 @@
 // handles fuzzy filtering (label + hint + group), keyboard navigation
 // (↑/↓/Enter), optional grouping, and query reset on close. Theme-agnostic:
 // every color comes from a semantic token, never a literal.
-import { Dialog } from '@kobalte/core/dialog'
+// Namespace import on purpose: Kobalte's `AlertDialog` is built with Object.assign on the
+// same `DialogRoot` function as `Dialog`, so `Dialog.Content` depends on module load order (#118).
+// The named exports (`Root`, `Content`, ...) are not affected.
+import * as Dialog from '@kobalte/core/dialog'
 import { createEffect, createMemo, createSignal, For, Show, type JSX } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
 
 /** A single selectable row in the palette. */
 export interface CommandItem {
@@ -93,8 +97,8 @@ export function Command(props: CommandProps): JSX.Element {
   }
 
   return (
-    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
-      <Dialog.Portal>
+    <Dialog.Root open={props.open} onOpenChange={props.onOpenChange}>
+      <Dialog.Portal ref={portalDir}>
         <Dialog.Overlay class="modal-overlay fixed inset-0 z-40 bg-background/80 backdrop-blur-sm" />
         <div class="fixed inset-x-0 top-[14vh] z-50 mx-auto w-full max-w-lg px-4">
           <Dialog.Content
@@ -129,7 +133,7 @@ export function Command(props: CommandProps): JSX.Element {
                         onMouseEnter={() => setActive(i())}
                         onClick={() => pick(item)}
                         class={cn(
-                          'flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-left transition-colors',
+                          'flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-start transition-colors',
                           active() === i() ? 'bg-primary/15 text-foreground' : 'text-muted-foreground',
                         )}
                       >
@@ -153,6 +157,6 @@ export function Command(props: CommandProps): JSX.Element {
           </Dialog.Content>
         </div>
       </Dialog.Portal>
-    </Dialog>
+    </Dialog.Root>
   )
 }

package/src/ui/Comment.tsx

@@ -80,7 +80,7 @@ export function Comment(props: CommentProps): JSX.Element {
         </div>
       </div>
       <Show when={props.comment.replies?.length}>
-        <div class="mt-4 space-y-4 border-l border-border pl-4">
+        <div class="mt-4 space-y-4 border-s border-border ps-4">
           <For each={props.comment.replies}>
             {(reply) => <Comment comment={reply} actions={props.actions} />}
           </For>

package/src/ui/Configurator.tsx

@@ -125,7 +125,7 @@ export function Configurator(props: ConfiguratorProps): JSX.Element {
                       >
                         {o.label}
                         <Show when={o.price}>
-                          <span class="ml-1 opacity-70">· {fmt(o.price as number)}</span>
+                          <span class="ms-1 opacity-70">· {fmt(o.price as number)}</span>
                         </Show>
                       </button>
                     )}
@@ -144,7 +144,7 @@ export function Configurator(props: ConfiguratorProps): JSX.Element {
                           <span class="text-sm text-foreground">
                             {it.label}
                             <Show when={it.price}>
-                              <span class="ml-1 text-muted-foreground">· {fmt(it.price as number)}</span>
+                              <span class="ms-1 text-muted-foreground">· {fmt(it.price as number)}</span>
                             </Show>
                           </span>
                           <div class="flex items-center gap-2">

package/src/ui/ContextMenu.tsx

@@ -4,6 +4,7 @@ import type { JSX, ParentProps } from 'solid-js'
 import { For } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
 
 /** A single actionable row rendered by {@link ContextMenu}. */
 export interface ContextMenuItem {
@@ -35,7 +36,7 @@ export function ContextMenu(props: ContextMenuProps): JSX.Element {
   return (
     <KContextMenu>
       <KContextMenu.Trigger class={cn('inline-flex', props.class)}>{props.children}</KContextMenu.Trigger>
-      <KContextMenu.Portal>
+      <KContextMenu.Portal ref={portalDir}>
         <KContextMenu.Content class="z-50 min-w-[10rem] overflow-hidden rounded-md border border-border bg-card p-1 text-card-foreground shadow-sm">
           <For each={props.items}>
             {(item) => (

package/src/ui/DateField.tsx

@@ -7,9 +7,9 @@
 import { CalendarDays } from 'lucide-solid'
 import type { JSX } from 'solid-js'
 import { 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'
 import { CalendarCore } from './internal/CalendarCore'
 
@@ -93,7 +93,7 @@ export function DateField(props: DateFieldProps): JSX.Element {
   const place = () => {
     if (!btnRef) return
     const r = btnRef.getBoundingClientRect()
-    const left = Math.max(8, Math.min(r.left, window.innerWidth - POP_W - 8))
+    const left = anchoredLeft(btnRef, POP_W)
     setPos({ top: r.bottom + 4, left })
   }
 
@@ -155,7 +155,7 @@ export function DateField(props: DateFieldProps): 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.months ?? MONTHS) ? '' : 'text-muted-foreground'}>
           {displayLabel(props.value, props.months ?? MONTHS) ?? props.label ?? 'Select date'}

package/src/ui/DateRangePicker.tsx

@@ -7,9 +7,9 @@
 import { CalendarDays } from 'lucide-solid'
 import type { JSX } from 'solid-js'
 import { createEffect, createMemo, createSignal, onCleanup, Show } 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'
 import { CalendarCore } from './internal/CalendarCore'
 
@@ -94,7 +94,7 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
   const place = () => {
     if (!btnRef) return
     const r = btnRef.getBoundingClientRect()
-    const left = Math.max(8, Math.min(r.left, window.innerWidth - POP_W - 8))
+    const left = anchoredLeft(btnRef, POP_W)
     setPos({ top: r.bottom + 4, left })
   }
 
@@ -181,7 +181,7 @@ export function DateRangePicker(props: DateRangePickerProps): 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={triggerLabel() ? '' : 'text-muted-foreground'}>
           {triggerLabel() ?? props.label ?? 'Select range'}

package/src/ui/DiffViewer.tsx

@@ -131,6 +131,7 @@ export function DiffViewer(props: DiffViewerProps): JSX.Element {
   return (
     <div
       role="figure"
+      dir="ltr"
       aria-label={ariaLabel()}
       class={cn('overflow-hidden rounded-lg border border-border bg-card', props.class)}
     >
@@ -144,16 +145,16 @@ export function DiffViewer(props: DiffViewerProps): JSX.Element {
           <For each={rows()}>
             {(line) => (
               <div class={cn('flex', ROW_BG[line.type])}>
-                <span class="w-12 shrink-0 select-none py-0.5 pr-2 text-right tabular-nums text-xs text-muted-foreground">
+                <span class="w-12 shrink-0 select-none py-0.5 pe-2 text-end tabular-nums text-xs text-muted-foreground">
                   {line.oldNum ?? ''}
                 </span>
-                <span class="w-12 shrink-0 select-none py-0.5 pr-2 text-right tabular-nums text-xs text-muted-foreground">
+                <span class="w-12 shrink-0 select-none py-0.5 pe-2 text-end tabular-nums text-xs text-muted-foreground">
                   {line.newNum ?? ''}
                 </span>
                 <span class={cn('w-5 shrink-0 select-none py-0.5 text-center', MARKER_TONE[line.type])}>
                   {MARKER[line.type]}
                 </span>
-                <span class={cn('flex-1 whitespace-pre py-0.5 pr-4', CONTENT_TONE[line.type])}>
+                <span class={cn('flex-1 whitespace-pre py-0.5 pe-4', CONTENT_TONE[line.type])}>
                   {line.content}
                 </span>
               </div>

package/src/ui/DirectionProvider.tsx

@@ -0,0 +1,82 @@
+// Right-to-left support: one provider that sets `dir` on the DOM and tells
+// Kobalte which direction to use for keyboard navigation.
+import { I18nProvider, getReadingDirection } from '@kobalte/core/i18n'
+import { type Accessor, type JSX, createMemo, splitProps, useContext } from 'solid-js'
+
+import { type Direction, DirectionContext } from '../lib/direction'
+import { cn } from '../lib/cn'
+
+export type { Direction }
+
+/** Props for {@link DirectionProvider}. */
+export interface DirectionProviderProps {
+  /**
+   * Text direction. When omitted it is derived from `locale`; when both are
+   * omitted it is `'ltr'`.
+   */
+  dir?: Direction
+  /**
+   * BCP 47 locale (for example `'ar'`, `'he-IL'`). Forwarded to Kobalte for
+   * number/date formatting and collation. Its reading direction must agree
+   * with `dir`; a mismatch throws.
+   */
+  locale?: string
+  /** Extra classes for the wrapper element. */
+  class?: string
+  children?: JSX.Element
+}
+
+/**
+ * Sets the reading direction for everything inside it.
+ *
+ * - Renders a `display: contents` wrapper carrying the `dir` attribute, so
+ *   Tailwind logical utilities (`ms-*`, `start-*`, `text-start`) and the
+ *   browser's bidi handling follow it.
+ * - Wraps Kobalte's `I18nProvider`, so arrow keys in Tabs, Menubar, Slider,
+ *   menus and the like reverse under `rtl`.
+ * - Overlays that portal out to `<body>` (Modal, Drawer, Popover, Dropdown,
+ *   Toast, ...) copy the direction onto their own container.
+ *
+ * Without a provider nothing changes: components inherit `dir` from the page
+ * (set `<html dir="rtl">` yourself in that case).
+ *
+ * @example
+ * ```tsx
+ * <DirectionProvider dir="rtl" locale="ar">
+ *   <App />
+ * </DirectionProvider>
+ * ```
+ */
+export function DirectionProvider(props: DirectionProviderProps): JSX.Element {
+  const [local] = splitProps(props, ['dir', 'locale', 'class', 'children'])
+  const resolved = createMemo<Direction>(() => {
+    const fromLocale = local.locale ? getReadingDirection(local.locale) : undefined
+    if (local.dir && fromLocale && local.dir !== fromLocale) {
+      throw new Error(
+        `DirectionProvider: dir="${local.dir}" conflicts with locale "${local.locale}" (reading direction "${fromLocale}").`,
+      )
+    }
+    return local.dir ?? fromLocale ?? 'ltr'
+  })
+  const locale = createMemo(() => local.locale ?? (resolved() === 'rtl' ? 'ar' : 'en-US'))
+  return (
+    <DirectionContext.Provider value={resolved}>
+      <I18nProvider locale={locale()}>
+        <div dir={resolved()} lang={local.locale} class={cn('contents', local.class)}>
+          {local.children}
+        </div>
+      </I18nProvider>
+    </DirectionContext.Provider>
+  )
+}
+
+/**
+ * Accessor of the current direction: the nearest {@link DirectionProvider}'s,
+ * or outside one the `dir` attribute of `<html>` (`'ltr'` when unset).
+ */
+export function useDirection(): Accessor<Direction> {
+  const ctx = useContext(DirectionContext)
+  if (ctx) return ctx
+  return () =>
+    typeof document !== 'undefined' && document.documentElement.getAttribute('dir') === 'rtl' ? 'rtl' : 'ltr'
+}

package/src/ui/Drawer.tsx

@@ -3,12 +3,16 @@
 // slide-in/out keyframes in styles.css off Kobalte's data-expanded/data-closed.
 // Pass a `title` for the sticky glass header, or omit it and render your own
 // inside `children`.
-import { Dialog } from '@kobalte/core/dialog'
+// Namespace import on purpose: Kobalte's `AlertDialog` is built with Object.assign on the
+// same `DialogRoot` function as `Dialog`, so `Dialog.Content` depends on module load order (#118).
+// The named exports (`Root`, `Content`, ...) are not affected.
+import * as Dialog from '@kobalte/core/dialog'
 import { X } from 'lucide-solid'
 import type { JSX, ParentProps } from 'solid-js'
 import { Show } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
 
 interface DrawerProps extends ParentProps {
   open: boolean
@@ -24,19 +28,36 @@ interface DrawerProps extends ParentProps {
   side?: DrawerSide
 }
 
-export type DrawerSide = 'right' | 'left' | 'top' | 'bottom'
+/**
+ * `left` / `right` are physical edges. `start` / `end` follow the reading
+ * direction (`start` is the right edge under `dir="rtl"`).
+ */
+export type DrawerSide = 'right' | 'left' | 'start' | 'end' | 'top' | 'bottom'
 
 const SIDE: Record<DrawerSide, { wrap: string; panel: string; offscreen: string }> = {
+  // `right` / `left` are physical and never flip; `end` / `start` follow the
+  // reading direction (flex `justify-*` and `border-s/e` are logical, while the
+  // slide offset uses `--dir-x`, which `[dir=rtl]` sets to -1 in tokens.css).
   right: {
-    wrap: 'justify-end',
+    wrap: 'justify-end rtl:justify-start',
     panel: 'h-full w-full max-w-[520px] border-l',
     offscreen: 'translateX(100%)',
   },
   left: {
-    wrap: 'justify-start',
+    wrap: 'justify-start rtl:justify-end',
     panel: 'h-full w-full max-w-[520px] border-r',
     offscreen: 'translateX(-100%)',
   },
+  end: {
+    wrap: 'justify-end',
+    panel: 'h-full w-full max-w-[520px] border-s',
+    offscreen: 'translateX(calc(100% * var(--dir-x, 1)))',
+  },
+  start: {
+    wrap: 'justify-start',
+    panel: 'h-full w-full max-w-[520px] border-e',
+    offscreen: 'translateX(calc(-100% * var(--dir-x, 1)))',
+  },
   top: {
     wrap: 'flex-col justify-start',
     panel: 'max-h-[85vh] w-full rounded-b-2xl border-b',
@@ -52,7 +73,7 @@ const SIDE: Record<DrawerSide, { wrap: string; panel: string; offscreen: string
 export type { DrawerProps }
 
 /**
- * Edge-anchored slide-over panel (right by default, or `side="left" | "top" | "bottom"`) built on Kobalte's `Dialog` (focus trap, portal,
+ * Edge-anchored slide-over panel (right by default, or `side="left" | "start" | "end" | "top" | "bottom"`) built on Kobalte's `Dialog` (focus trap, portal,
  * and open/close presence handled for you). Use for create/edit forms or detail
  * panels that need more room than a centered `Modal`.
  *
@@ -67,8 +88,8 @@ export type { DrawerProps }
 export function Drawer(props: DrawerProps): JSX.Element {
   const side = (): (typeof SIDE)[DrawerSide] => SIDE[props.side ?? 'right']
   return (
-    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
-      <Dialog.Portal>
+    <Dialog.Root open={props.open} onOpenChange={props.onOpenChange}>
+      <Dialog.Portal ref={portalDir}>
         <Dialog.Overlay class="modal-overlay fixed inset-0 z-40 bg-black/50 backdrop-blur-[2px]" />
         <div class={cn('fixed inset-0 z-50 flex', side().wrap)}>
           <Dialog.Content
@@ -100,6 +121,6 @@ export function Drawer(props: DrawerProps): JSX.Element {
           </Dialog.Content>
         </div>
       </Dialog.Portal>
-    </Dialog>
+    </Dialog.Root>
   )
 }

package/src/ui/Dropdown.tsx

@@ -4,6 +4,7 @@ import type { JSX, ParentProps } from 'solid-js'
 import { For } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
 
 /** A single selectable row in a {@link Dropdown} menu. */
 export interface DropdownItem {
@@ -48,7 +49,7 @@ export function Dropdown(props: DropdownProps): JSX.Element {
       <DropdownMenu.Trigger class={cn('inline-flex', props.class)} aria-label={props.label}>
         {props.children}
       </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
+      <DropdownMenu.Portal ref={portalDir}>
         <DropdownMenu.Content class="z-50 min-w-[10rem] overflow-hidden rounded-md border border-border bg-card p-1 text-card-foreground shadow-sm">
           <For each={props.items}>
             {(item) => (

package/src/ui/EmojiPicker.tsx

@@ -8,6 +8,8 @@ import { Dumbbell, Hash, Lightbulb, Leaf, Plane, Search, Smile, Users, Utensils
 import { createMemo, createSignal, For, Show, type Component, type JSX } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { readingKey } from '../lib/direction'
+import { useDirection } from './DirectionProvider'
 
 type Category = 'Smileys' | 'People' | 'Nature' | 'Food' | 'Activity' | 'Travel' | 'Objects' | 'Symbols'
 
@@ -276,6 +278,7 @@ export interface EmojiPickerProps {
  * ```
  */
 export function EmojiPicker(props: EmojiPickerProps): JSX.Element {
+  const dir = useDirection()
   const [query, setQuery] = createSignal('')
   const [recents, setRecents] = createSignal<string[]>([])
 
@@ -320,9 +323,9 @@ export function EmojiPicker(props: EmojiPickerProps): JSX.Element {
     if (index === -1) return
     const columns = 8
     const delta =
-      event.key === 'ArrowRight'
+      readingKey(event.key, dir()) === 'ArrowRight'
         ? 1
-        : event.key === 'ArrowLeft'
+        : readingKey(event.key, dir()) === 'ArrowLeft'
           ? -1
           : event.key === 'ArrowDown'
             ? columns

package/src/ui/Expandable.tsx

@@ -4,7 +4,7 @@
 // scale, so its content never stretches. Covers the motion.dev "family dialog"
 // (size="dialog") and "app store layout" (size="full") patterns with one API.
 import { createSignal, Show, onCleanup, onMount, type JSX } from 'solid-js'
-import { Portal } from 'solid-js/web'
+import { Portal } from './Portal'
 
 import { cn } from '../lib/cn'
 import { animate, motionReduced } from '../lib/motion'
@@ -206,7 +206,7 @@ export function Expandable(props: ExpandableProps): JSX.Element {
               type="button"
               aria-label="Close"
               onClick={doClose}
-              class="absolute right-3 top-3 z-10 grid h-8 w-8 place-items-center rounded-full bg-muted/80 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              class="absolute end-3 top-3 z-10 grid h-8 w-8 place-items-center rounded-full bg-muted/80 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
             >
               <svg
                 viewBox="0 0 24 24"

package/src/ui/Faq.tsx

@@ -41,7 +41,7 @@ export function Faq(props: FaqProps): JSX.Element {
       class={cn('mx-auto flex w-full max-w-3xl flex-col gap-10 px-5 py-20', props.class)}
     >
       <SectionHeading title={props.title} subtitle={props.subtitle} />
-      <div class="card rounded-xl px-5 sm:px-6 [&_button]:py-4 [&_button]:text-left [&_button]:text-base">
+      <div class="card rounded-xl px-5 sm:px-6 [&_button]:py-4 [&_button]:text-start [&_button]:text-base">
         <Accordion
           multiple={props.multiple}
           class="[&>*:last-child]:border-b-0"

package/src/ui/Field.tsx

@@ -364,7 +364,7 @@ export function FieldError(props: FieldErrorProps): JSX.Element {
     <Show when={visible()}>
       <div id={id} role="alert" data-slot="field-error" class={cn('text-xs text-destructive', props.class)}>
         <Show when={messages().length > 1} fallback={<>{messages()[0] ?? props.children}</>}>
-          <ul class="ml-4 list-disc space-y-0.5">
+          <ul class="ms-4 list-disc space-y-0.5">
             <For each={messages()}>{(m) => <li>{m}</li>}</For>
           </ul>
         </Show>

package/src/ui/FloatingActionButton.tsx

@@ -7,8 +7,8 @@ import { spawnRipple } from './Ripple'
 export type FloatingActionButtonPosition = 'bottom-right' | 'bottom-left'
 
 const POSITION_CLASSES: Record<FloatingActionButtonPosition, string> = {
-  'bottom-right': 'bottom-6 right-6',
-  'bottom-left': 'bottom-6 left-6',
+  'bottom-right': 'bottom-6 end-6',
+  'bottom-left': 'bottom-6 start-6',
 }
 
 // brightness-110 on hover keeps the tint theme-agnostic — it lifts whatever

package/src/ui/FollowingPointer.tsx

@@ -75,7 +75,7 @@ export function FollowingPointer(props: FollowingPointerProps): JSX.Element {
         <div
           ref={pointerEl}
           aria-hidden="true"
-          class="pointer-events-none absolute left-0 top-0 z-50 flex items-center opacity-0 transition-opacity duration-150 will-change-transform"
+          class="pointer-events-none absolute start-0 top-0 z-50 flex items-center opacity-0 transition-opacity duration-150 will-change-transform"
         >
           <svg
             width="20"
@@ -96,7 +96,7 @@ export function FollowingPointer(props: FollowingPointerProps): JSX.Element {
           <Show when={props.label}>
             <div
               class={cn(
-                'ml-2 whitespace-nowrap rounded-full px-2.5 py-1 text-xs font-medium shadow-lg',
+                'ms-2 whitespace-nowrap rounded-full px-2.5 py-1 text-xs font-medium shadow-lg',
                 tone() === 'accent'
                   ? 'bg-accent text-accent-foreground'
                   : 'bg-primary text-primary-foreground',