@a4ui/core 0.38.1 → 0.39.0

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

@@ -14,6 +14,7 @@ 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
@@ -79,7 +80,7 @@ export function Modal(props: ModalProps): JSX.Element {
   const isCenter = () => props.variant === 'center'
   return (
     <Dialog.Root open={props.open} onOpenChange={props.onOpenChange}>
-      <Dialog.Portal>
+      <Dialog.Portal ref={portalDir}>
         <Dialog.Overlay class="modal-overlay fixed inset-0 z-40 bg-background/80 backdrop-blur-sm" />
         <Show
           when={isCenter()}
@@ -88,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,
                 )}

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

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%',