@a4ui/core 0.38.1 → 0.39.0

package/dist/ui/DirectionProvider.d.ts

@@ -0,0 +1,47 @@
+import { Accessor, JSX } from 'solid-js';
+import { Direction } from '../lib/direction';
+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 declare function DirectionProvider(props: DirectionProviderProps): JSX.Element;
+/**
+ * Accessor of the current direction: the nearest {@link DirectionProvider}'s,
+ * or outside one the `dir` attribute of `<html>` (`'ltr'` when unset).
+ */
+export declare function useDirection(): Accessor<Direction>;

package/dist/ui/Drawer.d.ts

@@ -12,10 +12,14 @@ interface DrawerProps extends ParentProps {
     /** Edge the panel is anchored to and slides in from. @default 'right' */
     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';
 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`.
  *

package/dist/ui/Sidebar.d.ts

@@ -1,5 +1,11 @@
 import { Accessor, JSX, ParentProps } from 'solid-js';
-export type SidebarSide = 'left' | 'right';
+/**
+ * Which edge the sidebar sits on. The layout is a flex row in DOM order, so the
+ * edge follows the reading direction: `start` (alias `left`) is the leading
+ * edge, `end` (alias `right`) the trailing one. Under `dir="rtl"` `start` is the
+ * right-hand side.
+ */
+export type SidebarSide = 'start' | 'end' | 'left' | 'right';
 export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
 export type SidebarCollapsible = 'offcanvas' | 'icon' | 'none';
 interface SidebarContextValue {
@@ -53,7 +59,7 @@ interface SidebarProviderProps extends ParentProps {
  */
 export declare function SidebarProvider(props: SidebarProviderProps): JSX.Element;
 interface SidebarProps extends ParentProps {
-    /** Which edge it sits on. @default 'left' */
+    /** Which edge it sits on; follows `dir` (see {@link SidebarSide}). @default 'start' */
     side?: SidebarSide;
     /** `sidebar` is flush, `floating` is a detached rounded panel, `inset` has no surface of its own (pair with `SidebarInset`). @default 'sidebar' */
     variant?: SidebarVariant;

package/dist/ui/Toast.d.ts

@@ -17,5 +17,9 @@ export declare const toast: {
     error: (title: string, description?: string) => void;
     info: (title: string, description?: string) => void;
 };
-/** Mount once near the app root — hosts the toast viewport. */
+/**
+ * Mount once near the app root — hosts the toast viewport. Mount it inside a
+ * `DirectionProvider` for RTL: the viewport sits in the end corner (the left
+ * one under RTL) and swipe-to-dismiss follows the direction.
+ */
 export declare function Toaster(): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.38.1",
+  "version": "0.39.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",
@@ -70,6 +70,7 @@
     },
     "./styles.css": "./dist/styles.css",
     "./full.css": "./dist/full.css",
+    "./theme.css": "./dist/theme.css",
     "./elements": {
       "import": "./dist/elements.js",
       "default": "./dist/elements.js"
@@ -86,8 +87,9 @@
   },
   "scripts": {
     "prebuild": "node scripts/sync-version.mjs",
-    "build": "vite build && npm run build:elements",
+    "build": "vite build && npm run build:elements && npm run build:theme",
     "build:elements": "vite build --config vite.elements.config.ts && node scripts/build-elements-css.mjs",
+    "build:theme": "node scripts/build-theme-css.mjs",
     "dev": "vite build --watch",
     "preview": "node scripts/gen-llms.mjs && vite --config vite.preview.config.ts",
     "preview:build": "node scripts/gen-llms.mjs && vite build --config vite.preview.config.ts",
@@ -119,7 +121,7 @@
   },
   "peerDependencies": {
     "solid-js": "^1.9.16",
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^3.4.0 || ^4.0.0"
   },
   "dependencies": {
     "@kobalte/core": "^0.13.14",

package/preset.d.ts

@@ -1,5 +1,6 @@
 // Types for `@a4ui/core/preset` — the Spatial Glass Tailwind preset.
-// Requires Tailwind CSS v3 (`tailwindcss@^3.4.0`): v4 removed `presets:`.
+// Requires Tailwind CSS v3 (`tailwindcss@^3.4.0`): v4 removed `presets:`. On v4, use
+// `@import '@a4ui/core/theme.css'` instead; loading this preset there throws.
 import type { Config } from 'tailwindcss'
 
 /**

package/preset.js

@@ -13,6 +13,9 @@
 //     presets: [a4ui],
 //     content: ['./src/**/*.{ts,tsx}', './node_modules/@a4ui/core/dist/**/*.js'],
 //   }
+//
+// Tailwind 3 only. Tailwind 4 consumers use `@a4ui/core/theme.css`, which
+// scripts/build-theme-css.mjs generates from this file.
 
 // Explicit .js extension so the preset resolves under strict Node ESM (used by
 // our elements-css build), not just bundlers.
@@ -21,7 +24,15 @@ import plugin from 'tailwindcss/plugin.js'
 // Frosted "space glass" surfaces. addComponents so they tree-shake like any
 // utility (emitted only when the class is found in scanned content — a4ui's own
 // components use them, so scanning ./node_modules/@a4ui/core/dist covers it).
-const glass = plugin(({ addComponents, addVariant }) => {
+const glass = plugin(({ addComponents, addVariant, e }) => {
+  // Tailwind 4 reaches this only through `@config`. It would otherwise stop on a
+  // message about `addUtilities` that says nothing about the actual problem, and the
+  // components need more than this preset there anyway. `e` is a Tailwind 3 plugin API.
+  if (typeof e !== 'function') {
+    throw new Error(
+      "@a4ui/core/preset requires Tailwind 3. On Tailwind 4, remove the preset and add `@import '@a4ui/core/theme.css';` after `@import 'tailwindcss';` in your CSS.",
+    )
+  }
   // `light:` applies when an ancestor is in the light theme (`[data-theme='light']`),
   // mirroring how dark is the base and light is the override throughout A4ui. Used
   // for theme-aware tints (e.g. Badge tones) that need a lighter foreground on dark
@@ -56,8 +67,8 @@ const glass = plugin(({ addComponents, addVariant }) => {
       position: 'relative',
       overflow: 'hidden',
       background: 'hsl(var(--card) / 0.5)',
-      backdropFilter: 'blur(14px) saturate(180%)',
       WebkitBackdropFilter: 'blur(14px) saturate(180%)',
+      backdropFilter: 'blur(14px) saturate(180%)',
       border: '1px solid hsl(var(--foreground) / 0.14)',
       borderRadius: 'var(--radius-xl, 1rem)',
       boxShadow:
@@ -76,8 +87,8 @@ const glass = plugin(({ addComponents, addVariant }) => {
     '.card': {
       position: 'relative',
       background: 'hsl(var(--card) / 0.55)',
-      backdropFilter: 'blur(8px) saturate(150%)',
       WebkitBackdropFilter: 'blur(8px) saturate(150%)',
+      backdropFilter: 'blur(8px) saturate(150%)',
       border: '1px solid hsl(var(--foreground) / 0.16)',
       borderRadius: 'var(--radius-xl, 1rem)',
       boxShadow: '0 1px 2px hsl(var(--shadow) / 0.05), 0 4px 12px hsl(var(--shadow) / 0.1)',
@@ -145,8 +156,8 @@ const glass = plugin(({ addComponents, addVariant }) => {
     // ---- Floating overlay glass (menus, modals, drawers, toasts) ----
     '.bg-glass': {
       background: 'hsl(var(--card) / 0.72)',
-      backdropFilter: 'blur(14px) saturate(160%)',
       WebkitBackdropFilter: 'blur(14px) saturate(160%)',
+      backdropFilter: 'blur(14px) saturate(160%)',
       border: '1px solid hsl(var(--foreground) / 0.14)',
     },
     "[data-theme='light'] .bg-glass": {
@@ -174,8 +185,8 @@ const glass = plugin(({ addComponents, addVariant }) => {
     },
     'html.calm .card, html.calm .bg-glass': {
       background: 'hsl(var(--card))',
-      backdropFilter: 'none',
       WebkitBackdropFilter: 'none',
+      backdropFilter: 'none',
     },
     'html.calm .tile-glass': {
       background: 'hsl(var(--muted))',

package/src/charts/BarList.tsx

@@ -54,7 +54,7 @@ export function BarList(props: BarListProps): JSX.Element {
         {(datum) => (
           <div class="relative isolate flex h-8 w-full min-w-0 items-center overflow-hidden rounded-md bg-muted/40">
             <div
-              class={cn('absolute inset-y-0 left-0 rounded-md transition-all', fillClass())}
+              class={cn('absolute inset-y-0 start-0 rounded-md transition-all', fillClass())}
               style={{ width: `${Math.max((datum.value / max()) * 100, 0)}%` }}
             />
             <Show

package/src/charts/Sparkline.tsx

@@ -17,6 +17,8 @@ export interface SparklineProps {
   tone?: 'primary' | 'accent' | 'destructive'
   /** Fill the area under the line faintly. Default false. */
   area?: boolean
+  /** Accessible description, e.g. 'Revenue, rising'. Without it the chart is hidden from assistive tech as decoration. */
+  label?: string
   class?: string
 }
 
@@ -76,7 +78,9 @@ export function Sparkline(props: SparklineProps): JSX.Element {
       height={height()}
       viewBox={`0 0 ${width()} ${height()}`}
       preserveAspectRatio="none"
-      role="img"
+      role={props.label ? 'img' : undefined}
+      aria-label={props.label}
+      aria-hidden={props.label ? undefined : 'true'}
     >
       <Show when={points().length > 0}>
         <Show when={props.area}>

package/src/commerce/CartLine.tsx

@@ -66,7 +66,7 @@ export function CartLine(props: CartLineProps): JSX.Element {
         onChange={(quantity) => props.onQuantityChange?.(quantity)}
         min={1}
       />
-      <span class="min-w-[4rem] text-right font-medium tabular-nums text-foreground">
+      <span class="min-w-[4rem] text-end font-medium tabular-nums text-foreground">
         {format(lineTotal())}
       </span>
       <Show when={props.onRemove}>

package/src/commerce/FacetSidebar.tsx

@@ -152,7 +152,7 @@ export function FacetSidebar(props: FacetSidebarProps): JSX.Element {
         <Show when={props.onClearAll}>
           <Button
             variant="ghost"
-            class="ml-auto h-auto px-2 py-1 text-xs"
+            class="ms-auto h-auto px-2 py-1 text-xs"
             onClick={() => props.onClearAll?.()}
           >
             Clear all

package/src/commerce/ProductCard.tsx

@@ -95,7 +95,7 @@ export function ProductCard(props: ProductCardProps): JSX.Element {
           {/* Diagonal corner ribbon (clipped by the overflow-hidden image box). */}
           <span
             class={cn(
-              'absolute -right-9 top-3.5 w-32 rotate-45 py-1 text-center text-[11px] font-semibold uppercase tracking-wide shadow-md',
+              'absolute -end-9 top-3.5 w-32 rotate-45 py-1 text-center text-[11px] font-semibold uppercase tracking-wide shadow-md',
               RIBBON_TONE[inferTone(props.badge, props.badgeTone)],
             )}
           >

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.38.1'
+export const A4UI_VERSION = '0.39.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -277,6 +277,12 @@ export { ColorPicker, type ColorPickerProps } from './ui/ColorPicker'
 export { Comment, type CommentData, type CommentProps } from './ui/Comment'
 export { CalendarHeatmap, type HeatmapValue, type CalendarHeatmapProps } from './ui/CalendarHeatmap'
 export { Portal, type PortalProps } from './ui/Portal'
+export {
+  DirectionProvider,
+  useDirection,
+  type Direction,
+  type DirectionProviderProps,
+} from './ui/DirectionProvider'
 export { Sortable, type SortableProps } from './ui/Sortable'
 export { Clock, type ClockProps } from './ui/Clock'
 

package/src/layout/NavGroup.tsx

@@ -28,7 +28,7 @@ export function NavGroup(props: NavGroupProps): JSX.Element {
       <summary class="mt-3 flex cursor-pointer list-none select-none items-center justify-between rounded-md px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground transition-colors hover:bg-muted hover:text-foreground [&::-webkit-details-marker]:hidden">
         <span>{props.title}</span>
         <svg
-          class="h-3.5 w-3.5 shrink-0 transition-transform duration-200 group-[[open]]:rotate-90"
+          class="h-3.5 w-3.5 shrink-0 transition-transform duration-200 group-[[open]]:rotate-90 rtl:-scale-x-100 rtl:group-[[open]]:scale-x-100"
           viewBox="0 0 20 20"
           fill="none"
           stroke="currentColor"
@@ -39,7 +39,7 @@ export function NavGroup(props: NavGroupProps): JSX.Element {
           <path d="M7 5l6 5-6 5" />
         </svg>
       </summary>
-      <div class="ml-4 mt-1 space-y-0.5 border-l border-border pl-2">{props.children}</div>
+      <div class="ms-4 mt-1 space-y-0.5 border-s border-border ps-2">{props.children}</div>
     </details>
   )
 }

package/src/lib/anchored.ts

@@ -55,3 +55,16 @@ export function createAnchorReflow(options: AnchorReflowOptions): () => void {
     else options.place()
   }
 }
+
+/**
+ * Viewport `left` for a fixed panel aligned with its trigger's inline-start edge,
+ * kept 8px inside the viewport. Under `dir="rtl"` that is the trigger's right
+ * edge, so the panel extends leftwards. The direction is read from the trigger,
+ * which also works for a `dir` set by a provider or an ancestor element.
+ */
+export function anchoredLeft(anchor: HTMLElement, panelWidth: number): number {
+  const rect = anchor.getBoundingClientRect()
+  const rtl = getComputedStyle(anchor).direction === 'rtl'
+  const start = rtl ? rect.right - panelWidth : rect.left
+  return Math.max(8, Math.min(start, window.innerWidth - panelWidth - 8))
+}

package/src/lib/direction.ts

@@ -0,0 +1,35 @@
+// Shared direction context. `DirectionProvider` (src/ui/DirectionProvider.tsx)
+// provides it; overlays that render through a portal read it to stamp `dir`
+// on their container, because a portal mounts outside the provider's wrapper
+// element and so does not inherit its `dir` attribute.
+import { type Accessor, createContext, createEffect, useContext } from 'solid-js'
+
+/** Text direction supported by {@link DirectionProvider}. */
+export type Direction = 'ltr' | 'rtl'
+
+/** Accessor of the nearest provider's direction, or `undefined` outside one. */
+export const DirectionContext = createContext<Accessor<Direction>>()
+
+/**
+ * Maps a physical horizontal arrow key to the key that means the same thing in
+ * reading order: under `rtl`, ArrowLeft moves forward and ArrowRight back, so
+ * handlers written for LTR can run on the swapped key. Other keys pass through.
+ */
+export function readingKey(key: string, dir: Direction): string {
+  if (dir !== 'rtl') return key
+  if (key === 'ArrowLeft') return 'ArrowRight'
+  if (key === 'ArrowRight') return 'ArrowLeft'
+  return key
+}
+
+/**
+ * `ref` for a portal container (Solid `Portal` or any Kobalte `*.Portal`).
+ * Copies the nearest `DirectionProvider`'s direction onto the container so the
+ * overlay renders in the same direction as the tree that opened it. Outside a
+ * provider it does nothing, so the overlay inherits from `<body>` as before.
+ */
+export function portalDir(el: Element): void {
+  const dir = useContext(DirectionContext)
+  if (!dir) return
+  createEffect(() => el.setAttribute('dir', dir()))
+}

package/src/ui/Accordion.tsx

@@ -41,10 +41,10 @@ export function Accordion(props: AccordionProps): JSX.Element {
         {(item) => (
           <KAccordion.Item value={item.value} class="border-b border-border">
             <KAccordion.Header>
-              <KAccordion.Trigger class="flex w-full items-center justify-between py-3 text-sm font-medium text-foreground [&[data-expanded]>svg]:rotate-90">
+              <KAccordion.Trigger class="flex w-full items-center justify-between py-3 text-sm font-medium text-foreground [&[data-expanded]>svg]:rotate-90 [&[data-expanded]>svg]:rtl:scale-x-100">
                 {item.title}
                 <svg
-                  class="h-3.5 w-3.5 shrink-0 transition-transform duration-200"
+                  class="h-3.5 w-3.5 shrink-0 transition-transform duration-200 rtl:-scale-x-100"
                   viewBox="0 0 20 20"
                   fill="none"
                   stroke="currentColor"

package/src/ui/ActivityFeed.tsx

@@ -136,11 +136,11 @@ export function ActivityFeed(props: ActivityFeedProps): JSX.Element {
             <ol class="relative flex flex-col gap-5">
               <For each={group.items}>
                 {(item, index) => (
-                  <li class="relative flex gap-3 pl-1">
+                  <li class="relative flex gap-3 ps-1">
                     <Show when={index() < group.items.length - 1}>
                       <span
                         aria-hidden="true"
-                        class="absolute left-[1.375rem] top-9 -bottom-5 w-px -translate-x-1/2 bg-border"
+                        class="absolute start-[1.375rem] top-9 -bottom-5 w-px -translate-x-1/2 bg-border"
                       />
                     </Show>
                     <Show

package/src/ui/AlertDialog.tsx

@@ -8,6 +8,7 @@ import type { JSX, ParentProps } from 'solid-js'
 import { Show } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
 
 interface AlertDialogProps extends ParentProps {
   /** Whether the dialog is currently visible. */
@@ -34,7 +35,7 @@ interface AlertDialogProps extends ParentProps {
 export function AlertDialog(props: AlertDialogProps): JSX.Element {
   return (
     <KAlertDialog.Root open={props.open} onOpenChange={props.onOpenChange}>
-      <KAlertDialog.Portal>
+      <KAlertDialog.Portal ref={portalDir}>
         <KAlertDialog.Overlay class="modal-overlay 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">
           <KAlertDialog.Content

package/src/ui/Anchor.tsx

@@ -87,7 +87,7 @@ export function Anchor(props: AnchorProps): JSX.Element {
             class={cn(
               'block rounded px-3 py-1.5 text-sm transition-colors',
               activeId() === item.id
-                ? 'border-l-2 border-primary font-medium text-primary'
+                ? 'border-s-2 border-primary font-medium text-primary'
                 : 'text-muted-foreground hover:text-foreground',
             )}
           >

package/src/ui/AnnouncementBar.tsx

@@ -76,7 +76,7 @@ export function AnnouncementBar(props: AnnouncementBarProps): JSX.Element {
         class={cn(
           'relative w-full rounded-none px-4 py-2 text-center text-sm',
           TONE[props.tone ?? 'primary'],
-          props.dismissible && 'pr-10',
+          props.dismissible && 'pe-10',
           props.class,
         )}
       >
@@ -91,7 +91,7 @@ export function AnnouncementBar(props: AnnouncementBarProps): JSX.Element {
 
         <Show when={props.couponCode}>
           {(code) => (
-            <span class="ml-2 inline-flex items-center gap-1 rounded-md bg-black/10 px-2 py-0.5 font-mono">
+            <span class="ms-2 inline-flex items-center gap-1 rounded-md bg-black/10 px-2 py-0.5 font-mono">
               {code()}
               <button
                 type="button"
@@ -113,7 +113,7 @@ export function AnnouncementBar(props: AnnouncementBarProps): JSX.Element {
             type="button"
             aria-label="Dismiss announcement"
             onClick={dismiss}
-            class="absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-1 transition-opacity hover:opacity-80 motion-reduce:transition-none"
+            class="absolute end-2 top-1/2 -translate-y-1/2 rounded-sm p-1 transition-opacity hover:opacity-80 motion-reduce:transition-none"
           >
             <X class="h-4 w-4" />
           </button>

package/src/ui/ArtifactPanel.tsx

@@ -51,7 +51,7 @@ export function ArtifactPanel(props: ArtifactPanelProps): JSX.Element {
       aria-hidden={!props.open}
       class={cn(
         'card h-full shrink-0 overflow-hidden border-border bg-glass',
-        props.open ? 'border-l' : 'border-0',
+        props.open ? 'border-s' : 'border-0',
         reduced() ? undefined : 'transition-[width] duration-300 ease-in-out',
         props.class,
       )}

package/src/ui/AvailabilityPicker.tsx

@@ -90,7 +90,7 @@ export function AvailabilityPicker(props: AvailabilityPickerProps): JSX.Element
   return (
     <div class={cn('flex overflow-hidden rounded-xl border border-border bg-card', props.class)}>
       {/* Date list */}
-      <div class="flex w-32 shrink-0 flex-col gap-1 overflow-y-auto border-r border-border p-2">
+      <div class="flex w-32 shrink-0 flex-col gap-1 overflow-y-auto border-e border-border p-2">
         <For each={dates()} fallback={<p class="p-2 text-xs text-muted-foreground">No dates</p>}>
           {(dateKey) => {
             const d = parseDateKey(dateKey)
@@ -103,7 +103,7 @@ export function AvailabilityPicker(props: AvailabilityPickerProps): JSX.Element
                 disabled={count() === 0}
                 onClick={() => setViewingDate(dateKey)}
                 class={cn(
-                  'flex flex-col items-start rounded-md px-2 py-1.5 text-left transition-colors',
+                  'flex flex-col items-start rounded-md px-2 py-1.5 text-start transition-colors',
                   isActive() ? 'bg-primary text-primary-foreground' : 'text-foreground hover:bg-muted',
                   count() === 0 && !isActive() && 'text-muted-foreground/50',
                 )}

package/src/ui/AvatarGroup.tsx

@@ -38,13 +38,13 @@ export function AvatarGroup(props: AvatarGroupProps): JSX.Element {
     <div class={cn('flex items-center', props.class)}>
       <For each={shown()}>
         {(avatar, index) => (
-          <div class={cn('ring-2 ring-background rounded-full', index() > 0 && '-ml-2')}>
+          <div class={cn('ring-2 ring-background rounded-full', index() > 0 && '-ms-2')}>
             <Avatar src={avatar.src} alt={avatar.alt} fallback={avatar.fallback} />
           </div>
         )}
       </For>
       {overflow() > 0 && (
-        <div class="-ml-2 ring-2 ring-background rounded-full">
+        <div class="-ms-2 ring-2 ring-background rounded-full">
           <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>

package/src/ui/BackToTop.tsx

@@ -40,7 +40,7 @@ export function BackToTop(props: BackToTopProps): JSX.Element {
         aria-label="Back to top"
         onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
         class={cn(
-          'fixed bottom-6 right-6 z-40 grid h-11 w-11 place-items-center rounded-full bg-primary text-primary-foreground shadow-lg',
+          'fixed bottom-6 end-6 z-40 grid h-11 w-11 place-items-center rounded-full bg-primary text-primary-foreground shadow-lg',
           props.class,
         )}
       >

package/src/ui/Badge.tsx

@@ -15,7 +15,7 @@ export type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info'
 const TONE_CLASSES: Record<BadgeTone, string> = {
   neutral: 'bg-muted text-muted-foreground ring-border',
   success: 'bg-emerald-500/15 text-emerald-300 ring-emerald-500/30 light:text-emerald-700',
-  warning: 'bg-amber-500/15 text-amber-300 ring-amber-500/30 light:text-amber-700',
+  warning: 'bg-amber-500/15 text-amber-300 ring-amber-500/30 light:text-amber-800',
   danger: 'bg-rose-500/15 text-rose-300 ring-rose-500/30 light:text-rose-700',
   info: 'bg-sky-500/15 text-sky-300 ring-sky-500/30 light:text-sky-700',
 }

package/src/ui/BlockEditor.tsx

@@ -115,7 +115,7 @@ export function BlockEditor(props: BlockEditorProps): JSX.Element {
           onClick={() => setMenuOpen((open) => !open)}
           aria-expanded={menuOpen()}
         >
-          <Plus class="mr-1 h-4 w-4" />
+          <Plus class="me-1 h-4 w-4" />
           Add block
         </Button>
 

package/src/ui/ButtonGroup.tsx

@@ -17,7 +17,7 @@ interface ButtonGroupProps extends ParentProps {
 export type { ButtonGroupProps }
 
 const HORIZONTAL =
-  'flex-row [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none'
+  'flex-row [&>*:not(:first-child)]:-ms-px [&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none'
 const VERTICAL =
   'flex-col [&>*]:w-full [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none'
 

package/src/ui/Callout.tsx

@@ -48,7 +48,7 @@ export interface CalloutProps {
 export function Callout(props: CalloutProps): JSX.Element {
   const tone = () => TONE[props.tone ?? 'info']
   return (
-    <div class={cn('flex gap-3 rounded-lg border-l-4 p-4 text-sm text-foreground', tone().wrap, props.class)}>
+    <div class={cn('flex gap-3 rounded-lg border-s-4 p-4 text-sm text-foreground', tone().wrap, props.class)}>
       <Show
         when={props.icon}
         fallback={<Dynamic component={tone().Icon} class={cn('mt-0.5 h-4 w-4 shrink-0', tone().icon)} />}

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>