@a4ui/core 0.38.0 → 0.39.0

package/src/ui/Hero.tsx

@@ -89,8 +89,8 @@ export function Hero(props: HeroProps): JSX.Element {
     >
       <Show when={background() === 'aurora'}>
         <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
-          <div class="aurora-drift absolute -left-[10%] -top-[30%] h-[28rem] w-[28rem] rounded-full bg-primary/30 blur-3xl" />
-          <div class="aurora-drift absolute -right-[10%] top-[10%] h-[24rem] w-[24rem] rounded-full bg-accent/25 blur-3xl [animation-delay:-9s]" />
+          <div class="aurora-drift absolute -start-[10%] -top-[30%] h-[28rem] w-[28rem] rounded-full bg-primary/30 blur-3xl" />
+          <div class="aurora-drift absolute -end-[10%] top-[10%] h-[24rem] w-[24rem] rounded-full bg-accent/25 blur-3xl [animation-delay:-9s]" />
         </div>
       </Show>
       <Show when={photoBackdrop()}>

package/src/ui/HoldToConfirm.tsx

@@ -89,7 +89,7 @@ export function HoldToConfirm(props: HoldToConfirmProps): JSX.Element {
     if (!fillEl) return
     controls = animate(fillEl, { scaleX: [0, 1] }, { duration: holdMs() / 1000, ease: 'linear' })
     controls.finished
-      // eslint-disable-next-line solid/reactivity -- promise callback, not a tracked scope; setHolding runs fine here
+
       .then(() => {
         if (active) succeed()
       })
@@ -132,7 +132,7 @@ export function HoldToConfirm(props: HoldToConfirmProps): JSX.Element {
       <span
         aria-hidden="true"
         ref={fillEl}
-        class="absolute inset-0 origin-left bg-primary/25"
+        class="absolute inset-0 origin-left rtl:origin-right bg-primary/25"
         style={{ transform: 'scaleX(0)' }}
       />
       <span class="relative z-10">{props.label ?? 'Hold to confirm'}</span>

package/src/ui/HoverCard.tsx

@@ -3,6 +3,7 @@ import { HoverCard as KHoverCard } from '@kobalte/core/hover-card'
 import type { JSX, ParentProps } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
 
 interface HoverCardProps extends ParentProps {
   /** Content that opens the card on hover/focus. */
@@ -26,7 +27,7 @@ export function HoverCard(props: HoverCardProps): JSX.Element {
   return (
     <KHoverCard>
       <KHoverCard.Trigger class="inline-flex">{props.trigger}</KHoverCard.Trigger>
-      <KHoverCard.Portal>
+      <KHoverCard.Portal ref={portalDir}>
         <KHoverCard.Content
           class={cn(
             'bg-glass z-50 rounded-lg border border-border p-4 text-card-foreground shadow-lg',

package/src/ui/Image.tsx

@@ -2,12 +2,16 @@
 // Dialog primitive. The thumbnail lazy-loads; when `preview` is on it becomes a
 // button that opens a dimmed, backdrop-blurred overlay with an enlarged copy of
 // the image and a corner close button (focus trap/portal handled by Kobalte).
-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 } from 'solid-js'
 import { createSignal, Show } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
 import { motionReduced } from '../lib/motion'
 
 export interface ImageProps {
@@ -69,8 +73,8 @@ export function Image(props: ImageProps): JSX.Element {
       <button type="button" class="cursor-zoom-in" aria-label={props.alt} onClick={() => setOpen(true)}>
         {img}
       </button>
-      <Dialog open={open()} onOpenChange={setOpen}>
-        <Dialog.Portal>
+      <Dialog.Root open={open()} onOpenChange={setOpen}>
+        <Dialog.Portal ref={portalDir}>
           <Dialog.Overlay class="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm" />
           <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
             <Dialog.Content role="dialog" class="relative">
@@ -80,7 +84,7 @@ export function Image(props: ImageProps): JSX.Element {
                 class="max-h-[85vh] max-w-[90vw] rounded-lg object-contain"
               />
               <Dialog.CloseButton
-                class="absolute right-2 top-2 grid h-8 w-8 place-items-center rounded-lg bg-background/70 text-foreground transition hover:bg-muted"
+                class="absolute end-2 top-2 grid h-8 w-8 place-items-center rounded-lg bg-background/70 text-foreground transition hover:bg-muted"
                 aria-label="Close"
               >
                 <X class="h-5 w-5" />
@@ -88,7 +92,7 @@ export function Image(props: ImageProps): JSX.Element {
             </Dialog.Content>
           </div>
         </Dialog.Portal>
-      </Dialog>
+      </Dialog.Root>
     </Show>
   )
 }

package/src/ui/InlineSelect.tsx

@@ -84,7 +84,7 @@ export function InlineSelect(props: InlineSelectProps): JSX.Element {
         fallback={
           <button
             type="button"
-            class="rounded px-1.5 py-0.5 text-left hover:bg-muted"
+            class="rounded px-1.5 py-0.5 text-start hover:bg-muted"
             aria-label={`Edit — ${selectedLabel()}`}
             onClick={() => setEditing(true)}
           >

package/src/ui/InputGroup.tsx

@@ -54,8 +54,8 @@ export interface InputGroupAddonProps extends ParentProps, JSX.HTMLAttributes<HT
 // Inline addons share the control's row (control is flex-1); block addons take
 // a full row above/below it via `basis-full` + flex-wrap on the group.
 const ADDON_ALIGN: Record<InputGroupAddonAlign, string> = {
-  'inline-start': 'order-1 pl-3',
-  'inline-end': 'order-3 pr-3',
+  'inline-start': 'order-1 ps-3',
+  'inline-end': 'order-3 pe-3',
   'block-start': 'order-0 basis-full px-3 pt-2',
   'block-end': 'order-4 basis-full px-3 pb-2',
 }

package/src/ui/Item.tsx

@@ -72,7 +72,7 @@ export function Item(props: ItemProps): JSX.Element {
       data-variant={local.variant ?? 'default'}
       data-size={local.size ?? 'default'}
       class={cn(
-        'group/item flex w-full flex-wrap items-center rounded-lg text-left text-foreground outline-none transition-colors',
+        'group/item flex w-full flex-wrap items-center rounded-lg text-start text-foreground outline-none transition-colors',
         VARIANT[local.variant ?? 'default'],
         SIZE[local.size ?? 'default'],
         interactive() && 'cursor-pointer hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring',

package/src/ui/JsonViewer.tsx

@@ -120,7 +120,7 @@ export function JsonViewer(props: JsonViewerProps): JSX.Element {
 
     return (
       <Show when={visible()}>
-        <li style={{ 'padding-left': `${nodeProps.depth * 1}rem` }}>
+        <li style={{ 'padding-inline-start': `${nodeProps.depth * 1}rem` }}>
           <Show
             when={isExpandable(value())}
             fallback={
@@ -143,7 +143,7 @@ export function JsonViewer(props: JsonViewerProps): JSX.Element {
                     <ChevronRight
                       class={cn(
                         'h-3.5 w-3.5 shrink-0 self-center transition-transform duration-150',
-                        isOpen() && 'rotate-90',
+                        isOpen() ? 'rotate-90' : 'rtl:-scale-x-100',
                       )}
                       aria-hidden="true"
                     />

package/src/ui/Kanban.tsx

@@ -6,7 +6,7 @@
 // itself (same as Sortable), so there's nothing to gate on reduced motion —
 // drops are instant either way.
 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/KpiBlock.tsx

@@ -36,7 +36,7 @@ export function KpiBlock(props: KpiBlockProps): JSX.Element {
     <Card glass class={props.class}>
       <CardContent class="p-5">
         <p class="text-sm text-muted-foreground">{props.label}</p>
-        <div class="mt-1 flex items-center gap-2">
+        <div class="mt-1 flex flex-wrap items-center gap-2">
           <span class="text-2xl font-semibold text-foreground">{props.value}</span>
           <Show when={props.delta !== undefined}>
             <Badge tone={(props.delta as number) >= 0 ? 'success' : 'danger'}>

package/src/ui/Lightbox.tsx

@@ -9,7 +9,9 @@ import type { JSX } from 'solid-js'
 import { createEffect, createMemo, createSignal, For, onCleanup, Show } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { readingKey } from '../lib/direction'
 import { motionReduced } from '../lib/motion'
+import { useDirection } from './DirectionProvider'
 import { Portal } from './Portal'
 
 /** One image in a {@link Lightbox}. */
@@ -54,6 +56,7 @@ export interface LightboxProps {
  * ```
  */
 export function Lightbox(props: LightboxProps): JSX.Element {
+  const dir = useDirection()
   const [internalOpen, setInternalOpen] = createSignal(false)
   const open = createMemo(() => props.open ?? internalOpen())
 
@@ -109,10 +112,10 @@ export function Lightbox(props: LightboxProps): JSX.Element {
       if (e.key === 'Escape') {
         e.preventDefault()
         close()
-      } else if (e.key === 'ArrowLeft') {
+      } else if (readingKey(e.key, dir()) === 'ArrowLeft') {
         e.preventDefault()
         prev()
-      } else if (e.key === 'ArrowRight') {
+      } else if (readingKey(e.key, dir()) === 'ArrowRight') {
         e.preventDefault()
         next()
       }
@@ -175,9 +178,9 @@ export function Lightbox(props: LightboxProps): JSX.Element {
                     e.stopPropagation()
                     prev()
                   }}
-                  class="absolute left-2 z-10 grid h-10 w-10 place-items-center rounded-full bg-card/80 text-foreground transition hover:bg-muted disabled:pointer-events-none disabled:opacity-40 sm:left-4"
+                  class="absolute start-2 z-10 grid h-10 w-10 place-items-center rounded-full bg-card/80 text-foreground transition hover:bg-muted disabled:pointer-events-none disabled:opacity-40 sm:start-4"
                 >
-                  <ChevronLeft class="h-6 w-6" />
+                  <ChevronLeft class="h-6 w-6 rtl:-scale-x-100" />
                 </button>
               </Show>
 
@@ -204,9 +207,9 @@ export function Lightbox(props: LightboxProps): JSX.Element {
                     e.stopPropagation()
                     next()
                   }}
-                  class="absolute right-2 z-10 grid h-10 w-10 place-items-center rounded-full bg-card/80 text-foreground transition hover:bg-muted disabled:pointer-events-none disabled:opacity-40 sm:right-4"
+                  class="absolute end-2 z-10 grid h-10 w-10 place-items-center rounded-full bg-card/80 text-foreground transition hover:bg-muted disabled:pointer-events-none disabled:opacity-40 sm:end-4"
                 >
-                  <ChevronRight class="h-6 w-6" />
+                  <ChevronRight class="h-6 w-6 rtl:-scale-x-100" />
                 </button>
               </Show>
             </div>

package/src/ui/MasterDetail.tsx

@@ -90,7 +90,7 @@ export function MasterDetail(props: MasterDetailProps): JSX.Element {
                 tabindex={-1}
                 onClick={() => select(item.id)}
                 class={cn(
-                  'flex w-full items-center justify-between gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors',
+                  'flex w-full items-center justify-between gap-2 rounded-lg px-3 py-2 text-start text-sm transition-colors',
                   isSelected() ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-muted/60',
                 )}
               >

package/src/ui/Mentions.tsx

@@ -150,7 +150,7 @@ export function Mentions(props: MentionsProps): JSX.Element {
               <button
                 type="button"
                 class={cn(
-                  'w-full rounded px-2 py-1.5 text-left text-sm hover:bg-muted',
+                  'w-full rounded px-2 py-1.5 text-start text-sm hover:bg-muted',
                   i() === highlighted() && 'bg-muted',
                 )}
                 onMouseDown={(ev) => {

package/src/ui/Menubar.tsx

@@ -8,12 +8,13 @@ import type { JSX, ParentProps } from 'solid-js'
 import { For, Show, splitProps } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
 import { Kbd } from './Kbd'
 
 const CONTENT =
   'bg-glass z-50 min-w-[12rem] overflow-hidden rounded-xl p-1 text-sm text-foreground shadow-xl outline-none'
 const ITEM =
-  'relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 pl-8 pr-2 outline-none transition-colors data-[highlighted]:bg-muted data-[expanded]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus-visible:ring-2 focus-visible:ring-ring'
+  'relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 ps-8 pe-2 outline-none transition-colors data-[highlighted]:bg-muted data-[expanded]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus-visible:ring-2 focus-visible:ring-ring'
 
 interface ClassProps extends ParentProps {
   class?: string
@@ -74,7 +75,7 @@ export function MenubarMenu(props: MenubarMenuProps): JSX.Element {
       >
         {props.label}
       </KMenubar.Trigger>
-      <KMenubar.Portal>
+      <KMenubar.Portal ref={portalDir}>
         <KMenubar.Content class={cn(CONTENT, props.contentClass)}>{props.children}</KMenubar.Content>
       </KMenubar.Portal>
     </KMenubar.Menu>
@@ -95,7 +96,7 @@ export interface MenubarItemProps extends ClassProps {
 function Shortcut(props: { keys?: string[] }): JSX.Element {
   return (
     <Show when={props.keys?.length}>
-      <span class="ml-auto flex gap-0.5 pl-6" aria-hidden="true">
+      <span class="ms-auto flex gap-0.5 ps-6" aria-hidden="true">
         <For each={props.keys}>{(k) => <Kbd class="min-w-[1.25rem] px-1 py-0 text-[11px]">{k}</Kbd>}</For>
       </span>
     </Show>
@@ -133,7 +134,7 @@ export function MenubarCheckboxItem(props: MenubarCheckboxItemProps): JSX.Elemen
       onChange={(v) => props.onChange?.(v)}
       disabled={props.disabled}
     >
-      <KMenubar.ItemIndicator class="absolute left-2 inline-flex items-center">
+      <KMenubar.ItemIndicator class="absolute start-2 inline-flex items-center">
         <Check class="h-3.5 w-3.5" />
       </KMenubar.ItemIndicator>
       {props.children}
@@ -167,7 +168,7 @@ export interface MenubarRadioItemProps extends ClassProps {
 export function MenubarRadioItem(props: MenubarRadioItemProps): JSX.Element {
   return (
     <KMenubar.RadioItem class={cn(ITEM, props.class)} value={props.value} disabled={props.disabled}>
-      <KMenubar.ItemIndicator class="absolute left-2 inline-flex items-center">
+      <KMenubar.ItemIndicator class="absolute start-2 inline-flex items-center">
         <Circle class="h-2 w-2 fill-current" />
       </KMenubar.ItemIndicator>
       {props.children}
@@ -187,9 +188,9 @@ export function MenubarSub(props: MenubarSubProps): JSX.Element {
     <KMenubar.Sub overlap gutter={4} shift={-5}>
       <KMenubar.SubTrigger class={cn(ITEM, props.class)}>
         {props.label}
-        <ChevronRight class="ml-auto h-3.5 w-3.5 text-muted-foreground" />
+        <ChevronRight class="ms-auto h-3.5 w-3.5 text-muted-foreground rtl:-scale-x-100" />
       </KMenubar.SubTrigger>
-      <KMenubar.Portal>
+      <KMenubar.Portal ref={portalDir}>
         <KMenubar.SubContent class={CONTENT}>{props.children}</KMenubar.SubContent>
       </KMenubar.Portal>
     </KMenubar.Sub>
@@ -205,7 +206,7 @@ export function MenubarSeparator(props: { class?: string }): JSX.Element {
 export function MenubarLabel(props: ClassProps): JSX.Element {
   const [local] = splitProps(props, ['class', 'children'])
   return (
-    <div class={cn('px-2 py-1.5 pl-8 text-xs font-semibold text-muted-foreground', local.class)}>
+    <div class={cn('px-2 py-1.5 ps-8 text-xs font-semibold text-muted-foreground', local.class)}>
       {local.children}
     </div>
   )

package/src/ui/Modal.tsx

@@ -5,12 +5,16 @@
 //     yes/no) where a full-height drawer would be overkill.
 // The .drawer-content / .modal-content classes drive the slide/scale keyframes
 // (styles.css) off Kobalte's data-expanded/data-closed presence tracking.
-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'
 
 export interface ModalProps extends ParentProps {
   open: boolean
@@ -75,8 +79,8 @@ function keepForFloating(e: Event): void {
 export function Modal(props: ModalProps): JSX.Element {
   const isCenter = () => props.variant === 'center'
   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" />
         <Show
           when={isCenter()}
@@ -85,7 +89,7 @@ export function Modal(props: ModalProps): JSX.Element {
               <Dialog.Content
                 onInteractOutside={keepForFloating}
                 class={cn(
-                  'drawer-content bg-glass flex h-full w-full flex-col overflow-y-auto border-l border-border text-card-foreground shadow-2xl',
+                  'drawer-content bg-glass flex h-full w-full flex-col overflow-y-auto border-s border-border text-card-foreground shadow-2xl',
                   DRAWER_WIDTH[props.size ?? 'md'],
                   props.class,
                 )}
@@ -137,6 +141,6 @@ export function Modal(props: ModalProps): JSX.Element {
           </div>
         </Show>
       </Dialog.Portal>
-    </Dialog>
+    </Dialog.Root>
   )
 }

package/src/ui/ModelPicker.tsx

@@ -10,6 +10,7 @@ import type { JSX } from 'solid-js'
 import { For, Show, createSignal, untrack } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
 
 /** A single selectable model in a {@link ModelPicker} menu. */
 export interface ModelOption {
@@ -78,7 +79,7 @@ export function ModelPicker(props: ModelPickerProps): JSX.Element {
         <span class="truncate font-medium">{selectedModel()?.name}</span>
         <ChevronDown class="h-4 w-4 shrink-0 text-muted-foreground" />
       </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
+      <DropdownMenu.Portal ref={portalDir}>
         <DropdownMenu.Content class="z-50 min-w-64 overflow-hidden rounded-md border border-border bg-card p-1 text-card-foreground shadow-sm">
           <DropdownMenu.RadioGroup value={selectedId()} onChange={handleChange}>
             <For each={props.models}>

package/src/ui/MultiSelect.tsx

@@ -6,9 +6,9 @@
 import { Check, ChevronDown, X } 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'
 
 /** One selectable option: a stable `value` and its display `label`. */
@@ -66,7 +66,7 @@ export function MultiSelect(props: MultiSelectProps): JSX.Element {
     if (!btnRef) return
     const r = btnRef.getBoundingClientRect()
     const width = Math.max(r.width, MIN_W)
-    const left = Math.max(8, Math.min(r.left, window.innerWidth - width - 8))
+    const left = anchoredLeft(btnRef, width)
     setPos({ top: r.bottom + 4, left, width })
   }
 
@@ -151,7 +151,7 @@ export function MultiSelect(props: MultiSelectProps): JSX.Element {
         aria-haspopup="listbox"
         aria-expanded={open()}
         onClick={() => (open() ? close() : openPopover())}
-        class="flex min-h-9 h-auto w-full flex-wrap 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 min-h-9 h-auto w-full flex-wrap 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="flex flex-1 flex-wrap items-center gap-1">
           <Show
@@ -217,7 +217,7 @@ export function MultiSelect(props: MultiSelectProps): JSX.Element {
                         aria-pressed={isSelected()}
                         onClick={() => toggleValue(opt.value)}
                         class={cn(
-                          'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-muted focus:bg-muted',
+                          'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-start text-sm outline-none transition-colors hover:bg-muted focus:bg-muted',
                           isSelected() && 'bg-primary/10',
                         )}
                       >

package/src/ui/NativeSelect.tsx

@@ -48,7 +48,7 @@ export function NativeSelect(props: NativeSelectProps): JSX.Element {
         ref={select}
         aria-invalid={local.invalid ? 'true' : undefined}
         class={cn(
-          'peer w-full appearance-none rounded-md border bg-background pl-3 pr-9 text-foreground outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50',
+          'peer w-full appearance-none rounded-md border bg-background ps-3 pe-9 text-foreground outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50',
           local.invalid ? 'border-destructive' : 'border-input',
           SIZE[local.size ?? 'default'],
           local.class,
@@ -59,7 +59,7 @@ export function NativeSelect(props: NativeSelectProps): JSX.Element {
       </select>
       <ChevronDown
         aria-hidden="true"
-        class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground peer-disabled:opacity-50"
+        class="pointer-events-none absolute end-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground peer-disabled:opacity-50"
       />
     </div>
   )

package/src/ui/NavigationMenu.tsx

@@ -8,6 +8,7 @@ import type { JSX, ParentProps } from 'solid-js'
 import { createSignal, For, Show } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
 import { useMediaQuery } from '../lib/media'
 import { Accordion } from './Accordion'
 import { Button } from './Button'
@@ -91,7 +92,7 @@ function MobileNavigation(props: NavigationMenuProps): JSX.Element {
       >
         <MenuIcon class="h-4 w-4" />
       </Button>
-      <Drawer side="left" open={open()} onOpenChange={setOpen} title={props.mobileTitle ?? 'Menu'}>
+      <Drawer side="start" open={open()} onOpenChange={setOpen} title={props.mobileTitle ?? 'Menu'}>
         <div
           class="p-5"
           onKeyDown={(e) => {
@@ -188,10 +189,10 @@ export function NavigationMenuContent(props: NavigationMenuContentProps): JSX.El
     else e.currentTarget.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
   }
   return (
-    <KNav.Portal>
+    <KNav.Portal ref={portalDir}>
       <KNav.Content
         class={cn(
-          'navmenu-content absolute left-0 top-0 w-max max-w-[min(90vw,40rem)] p-3 outline-none',
+          'navmenu-content absolute start-0 top-0 w-max max-w-[min(90vw,40rem)] p-3 outline-none',
           props.class,
         )}
         onKeyDown={onTab}
@@ -237,7 +238,7 @@ export function NavigationMenuPanelLink(props: NavigationMenuPanelLinkProps): JS
     <KNav.Item
       href={props.href}
       class={cn(
-        'flex gap-3 rounded-xl p-3 text-left no-underline outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring',
+        'flex gap-3 rounded-xl p-3 text-start no-underline outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring',
         props.featured
           ? 'flex-col justify-end bg-gradient-to-br from-primary/30 to-accent/20 hover:from-primary/40'
           : 'items-start hover:bg-muted data-[highlighted]:bg-muted',

package/src/ui/NotificationCenter.tsx

@@ -44,7 +44,7 @@ export function NotificationCenter(props: NotificationCenterProps): JSX.Element
     <span class={cn('relative inline-grid place-items-center rounded-md p-2 text-foreground', props.class)}>
       <Bell class="h-5 w-5" />
       <Show when={unread() > 0}>
-        <span class="absolute -right-1 -top-1 grid h-4 min-w-4 place-items-center rounded-full bg-primary px-1 text-[10px] text-primary-foreground">
+        <span class="absolute -end-1 -top-1 grid h-4 min-w-4 place-items-center rounded-full bg-primary px-1 text-[10px] text-primary-foreground">
           {unread()}
         </span>
       </Show>

package/src/ui/NotificationStack.tsx

@@ -50,7 +50,7 @@ export function NotificationStack(props: NotificationStackProps): JSX.Element {
       <div
         class={cn(
           expanded()
-            ? 'max-h-[60vh] space-y-2 overflow-y-auto pr-1'
+            ? 'max-h-[60vh] space-y-2 overflow-y-auto pe-1'
             : cn('relative', canExpand() && 'cursor-pointer'),
         )}
         style={

package/src/ui/NumberInput.tsx

@@ -38,14 +38,14 @@ export function NumberInput(props: NumberInputProps): JSX.Element {
       maxValue={props.max}
       class={cn('inline-flex items-stretch', props.class)}
     >
-      <KNumberField.DecrementTrigger class={cn(TRIGGER_CLASS, 'rounded-l-md')} aria-label="Decrement">
+      <KNumberField.DecrementTrigger class={cn(TRIGGER_CLASS, 'rounded-s-md')} aria-label="Decrement">
         −
       </KNumberField.DecrementTrigger>
       <KNumberField.Input
         aria-label={props['aria-label']}
         class="w-16 border-y border-input bg-background px-3 py-2 text-center text-sm text-foreground outline-none transition-colors a4-field"
       />
-      <KNumberField.IncrementTrigger class={cn(TRIGGER_CLASS, 'rounded-r-md')} aria-label="Increment">
+      <KNumberField.IncrementTrigger class={cn(TRIGGER_CLASS, 'rounded-e-md')} aria-label="Increment">
         +
       </KNumberField.IncrementTrigger>
     </KNumberField>

package/src/ui/OnboardingChecklist.tsx

@@ -118,7 +118,7 @@ export function OnboardingChecklist(props: OnboardingChecklistProps): JSX.Elemen
                   </button>
                   <button
                     type="button"
-                    class="min-w-0 flex-1 text-left"
+                    class="min-w-0 flex-1 text-start"
                     aria-expanded={hasDetail() ? isExpanded() : undefined}
                     disabled={!hasDetail()}
                     onClick={() => hasDetail() && toggleExpanded(step.id)}
@@ -141,7 +141,7 @@ export function OnboardingChecklist(props: OnboardingChecklistProps): JSX.Elemen
                     )}
                   >
                     <div class="overflow-hidden">
-                      <div class="mt-2 pl-8 text-sm text-muted-foreground">
+                      <div class="mt-2 ps-8 text-sm text-muted-foreground">
                         <Show when={step.description}>{step.description}</Show>
                         <Show when={step.action}>
                           {(action) => (

package/src/ui/Pagination.tsx

@@ -42,7 +42,7 @@ export function Pagination(props: PaginationProps): JSX.Element {
           aria-label={props.labels?.previous ?? 'Previous page'}
           onClick={() => props.onChange(props.page - 1)}
         >
-          <ChevronLeft class="h-4 w-4" />
+          <ChevronLeft class="h-4 w-4 rtl:-scale-x-100" />
         </button>
         <span class="px-2 font-mono text-[12px] tabular-nums">
           {(props.labels?.page ?? ((p, t) => `Page ${p} of ${t}`))(props.page, props.totalPages)}
@@ -54,7 +54,7 @@ export function Pagination(props: PaginationProps): JSX.Element {
           aria-label={props.labels?.next ?? 'Next page'}
           onClick={() => props.onChange(props.page + 1)}
         >
-          <ChevronRight class="h-4 w-4" />
+          <ChevronRight class="h-4 w-4 rtl:-scale-x-100" />
         </button>
       </div>
     </div>

package/src/ui/PillSearch.tsx

@@ -60,8 +60,8 @@ export function PillSearch(props: PillSearchProps): JSX.Element {
             aria-label={field.label}
             onClick={() => props.onFieldClick?.(field.key)}
             class={cn(
-              'flex min-w-[6.5rem] shrink-0 flex-col items-start px-4 py-2 text-left transition-colors duration-150 hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring',
-              index() === 0 ? 'rounded-l-full' : 'border-l border-border',
+              'flex min-w-[6.5rem] shrink-0 flex-col items-start px-4 py-2 text-start transition-colors duration-150 hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring',
+              index() === 0 ? 'rounded-s-full' : 'border-s border-border',
             )}
           >
             <span class="text-xs font-medium text-muted-foreground">{field.label}</span>
@@ -71,7 +71,7 @@ export function PillSearch(props: PillSearchProps): JSX.Element {
           </button>
         )}
       </For>
-      <div class="shrink-0 py-1.5 pl-1 pr-1.5">
+      <div class="shrink-0 py-1.5 ps-1 pe-1.5">
         <button
           type="button"
           aria-label="Search"

package/src/ui/Popover.tsx

@@ -3,6 +3,7 @@ import { Popover as KPopover } from '@kobalte/core/popover'
 import type { JSX, ParentProps } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
 
 interface PopoverProps extends ParentProps {
   /** Element that opens the popover on click; wrapped in an inline-flex trigger. */
@@ -26,7 +27,7 @@ export function Popover(props: PopoverProps): JSX.Element {
   return (
     <KPopover>
       <KPopover.Trigger class="inline-flex">{props.trigger}</KPopover.Trigger>
-      <KPopover.Portal>
+      <KPopover.Portal ref={portalDir}>
         <KPopover.Content
           class={cn(
             'bg-glass z-50 rounded-lg border border-border p-4 text-card-foreground shadow-lg',

package/src/ui/Portal.tsx

@@ -4,6 +4,8 @@
 import type { JSX } from 'solid-js'
 import { Portal as SolidPortal } from 'solid-js/web'
 
+import { portalDir } from '../lib/direction'
+
 /** Props for {@link Portal}. */
 export interface PortalProps {
   /** Where to mount. Defaults to `document.body`. */
@@ -27,7 +29,7 @@ export interface PortalProps {
  */
 export function Portal(props: PortalProps): JSX.Element {
   return (
-    <SolidPortal mount={props.mount} useShadow={props.useShadow}>
+    <SolidPortal mount={props.mount} useShadow={props.useShadow} ref={portalDir}>
       {props.children}
     </SolidPortal>
   )