@carlonicora/nextjs-jsonapi 3.3.9 → 3.4.1

package/src/features/rbac/components/RbacByRoleContainer.tsx

@@ -156,7 +156,7 @@ export default function RbacByRoleContainer() {
   return (
     <RoundPageContainer fullWidth forceHeader>
       <div className="flex h-full w-full">
-        <aside className="w-60 shrink-0 overflow-y-auto border-r bg-muted/20">
+        <aside className="w-60 shrink-0 overflow-y-auto border-e bg-muted/20">
           <ul className="py-1">
             {sortedRoleIds.map((id) => (
               <li key={id}>
@@ -165,7 +165,7 @@ export default function RbacByRoleContainer() {
                   onClick={() => handleSelectRole(id)}
                   aria-current={id === selectedRoleId ? "true" : undefined}
                   className={cn(
-                    "block w-full px-4 py-1.5 text-left text-sm hover:bg-muted",
+                    "block w-full px-4 py-1.5 text-start text-sm hover:bg-muted",
                     id === selectedRoleId && "bg-muted font-medium text-foreground",
                     id !== selectedRoleId && "text-muted-foreground",
                   )}
@@ -184,7 +184,7 @@ export default function RbacByRoleContainer() {
                 <table className="w-full text-sm">
                   <thead className="sticky top-0 z-10">
                     <tr className="border-b bg-muted/80 backdrop-blur-sm">
-                      <th className="w-40 px-4 py-2 text-left text-xs font-medium text-muted-foreground">
+                      <th className="w-40 px-4 py-2 text-start text-xs font-medium text-muted-foreground">
                         {t("rbac.module")}
                       </th>
                       {ACTION_TYPES.map((action) => (

package/src/features/rbac/components/RbacContainer.tsx

@@ -118,7 +118,7 @@ const ModuleEditor = memo(function ModuleEditor({
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b bg-muted/50">
-              <th className="w-40 px-4 py-2 text-left text-xs font-medium text-muted-foreground">{t("rbac.role")}</th>
+              <th className="w-40 px-4 py-2 text-start text-xs font-medium text-muted-foreground">{t("rbac.role")}</th>
               {ACTION_TYPES.map((action) => (
                 <th key={action} className="min-w-28 px-2 py-2 text-center text-xs font-medium text-muted-foreground">
                   {ACTION_LABELS[action]}
@@ -295,7 +295,7 @@ export default function RbacContainer() {
     <RoundPageContainer fullWidth forceHeader>
       <div className="flex h-full w-full">
         {/* Sidebar: module list */}
-        <aside className="w-60 shrink-0 overflow-y-auto border-r bg-muted/20">
+        <aside className="w-60 shrink-0 overflow-y-auto border-e bg-muted/20">
           <ul className="py-1">
             {sortedModuleIds.map((id) => (
               <li key={id}>
@@ -304,7 +304,7 @@ export default function RbacContainer() {
                   onClick={() => handleSelectModule(id)}
                   aria-current={id === selectedModuleId ? "true" : undefined}
                   className={cn(
-                    "block w-full px-4 py-1.5 text-left text-sm hover:bg-muted",
+                    "block w-full px-4 py-1.5 text-start text-sm hover:bg-muted",
                     id === selectedModuleId && "bg-muted font-medium text-foreground",
                     id !== selectedModuleId && "text-muted-foreground",
                   )}

package/src/features/referral/components/ReferralWidget.tsx

@@ -110,6 +110,7 @@ async function copyToClipboard(text: string): Promise<boolean> {
     const textArea = document.createElement("textarea");
     textArea.value = text;
     textArea.style.position = "fixed";
+    // rtl-ok: off-screen clipboard fallback, not layout — physical offset is deliberate
     textArea.style.left = "-999999px";
     textArea.style.top = "-999999px";
     document.body.appendChild(textArea);

package/src/features/role/components/forms/FormRoles.tsx

@@ -47,7 +47,7 @@ export function FormRoles({ form, id, name, roles }: FormRolesProps) {
                     />
                     <Tooltip>
                       <TooltipTrigger>
-                        <FieldLabel htmlFor={`role-${role.id}`} className="ml-3 cursor-pointer font-normal">
+                        <FieldLabel htmlFor={`role-${role.id}`} className="ms-3 cursor-pointer font-normal">
                           {t(`role.roles`, { role: role.id.replaceAll(`-`, ``) })}
                         </FieldLabel>
                       </TooltipTrigger>

package/src/features/role/components/forms/RemoveUserFromRole.tsx

@@ -84,7 +84,7 @@ export function RemoveUserFromRole({ role, user, refresh }: RemoveUserFromRolePr
           <>
             {t(`role.remove_user.description_allowed`, { role: roleName, user: user.name })}
             <div className="flex justify-end">
-              <Button className="mr-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
+              <Button className="me-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
                 {t(`ui.buttons.cancel`)}
               </Button>
               <Button

package/src/features/role/components/forms/UserRoleAdd.tsx

@@ -82,7 +82,7 @@ export function UserRoleAdd({ user, refresh }: UserRoleAddProps) {
   return (
     <>
       <Button size="sm" onClick={() => setOpen(true)}>
-        <PlusCircle className="mr-3 h-3.5 w-3.5" />
+        <PlusCircle className="me-3 h-3.5 w-3.5" />
         {t(`common.association.label`, {
           source: t(`entities.roles`, { count: 1 }),
           destination: t(`entities.users`, { count: 1 }),

package/src/features/tokenusage/components/TokenUsageBreakdownTable.tsx

@@ -104,7 +104,7 @@ export function TokenUsageBreakdownTable({ rows, metric }: Props) {
         <TableHeader>
           <TableRow>
             {columns.map((column) => (
-              <TableHead key={column.key} className={cn(column.numeric && "text-right")}>
+              <TableHead key={column.key} className={cn(column.numeric && "text-end")}>
                 <button
                   type="button"
                   onClick={() => toggleSort(column.key)}
@@ -137,19 +137,19 @@ export function TokenUsageBreakdownTable({ rows, metric }: Props) {
                 </TableCell>
                 <TableCell className="text-muted-foreground text-xs">{row.sublabel ?? ""}</TableCell>
                 {showActiveUsers && (
-                  <TableCell className="text-right text-xs tabular-nums">
+                  <TableCell className="text-end text-xs tabular-nums">
                     {row.activeUsers === undefined ? "" : decimal(row.activeUsers, 0)}
                   </TableCell>
                 )}
-                <TableCell className="text-right text-xs tabular-nums">{decimal(row.calls, 0)}</TableCell>
-                <TableCell className="text-right text-xs tabular-nums">{decimal(row.tokensIn, 0)}</TableCell>
-                <TableCell className="text-right text-xs tabular-nums">{decimal(row.tokensOut, 0)}</TableCell>
-                <TableCell className="text-right text-xs tabular-nums">
+                <TableCell className="text-end text-xs tabular-nums">{decimal(row.calls, 0)}</TableCell>
+                <TableCell className="text-end text-xs tabular-nums">{decimal(row.tokensIn, 0)}</TableCell>
+                <TableCell className="text-end text-xs tabular-nums">{decimal(row.tokensOut, 0)}</TableCell>
+                <TableCell className="text-end text-xs tabular-nums">
                   {percent(cacheHitPercentage(row.cached, row.tokensIn))}
                 </TableCell>
-                <TableCell className="text-right text-xs tabular-nums">{formatValue(row.cost, "cost")}</TableCell>
-                <TableCell className="text-right text-xs tabular-nums">{formatValue(row.credits, "credits")}</TableCell>
-                <TableCell className="text-right text-xs tabular-nums">{percent(share)}</TableCell>
+                <TableCell className="text-end text-xs tabular-nums">{formatValue(row.cost, "cost")}</TableCell>
+                <TableCell className="text-end text-xs tabular-nums">{formatValue(row.credits, "credits")}</TableCell>
+                <TableCell className="text-end text-xs tabular-nums">{percent(share)}</TableCell>
               </TableRow>
             );
           })}

package/src/features/tokenusage/components/TokenUsageRankedBar.tsx

@@ -90,21 +90,26 @@ export function TokenUsageRankedBar({ rows, metric, emptyLabel, labelsAreOperati
           <div key={row.id} className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-3 gap-y-0.5 py-0.5">
             <div className="grid min-w-0 gap-0.5">
               <span className="text-muted-foreground truncate text-xs">{renderLabel(row)}</span>
-              <div className="bg-muted h-2 w-full overflow-hidden rounded-r-[4px]">
+              {/* The bar itself is a magnitude drawn on an axis, not prose: it always grows
+                  rightward and only its trailing corner is rounded, so the track and its fill
+                  stay an LTR island. The label, value and share around it mirror normally.
+                  rtl-ok: deliberate LTR island (chart) */}
+              <div className="bg-muted h-2 w-full overflow-hidden rounded-r-[4px]" dir="ltr">
                 <div
                   data-testid={`ranked-fill-${row.id}`}
                   data-ramp-step={String(step)}
+                  /* rtl-ok: inside the LTR island above */
                   className="h-full rounded-r-[4px]"
                   style={{ width: `${width}%`, backgroundColor: SEQUENTIAL_RAMP[step] }}
                 />
               </div>
             </div>
-            <span data-testid={`ranked-value-${row.id}`} className="text-right text-xs tabular-nums">
+            <span data-testid={`ranked-value-${row.id}`} className="text-end text-xs tabular-nums">
               {formatValue(value, metric)}
             </span>
             <span
               data-testid={`ranked-share-${row.id}`}
-              className="text-muted-foreground w-16 text-right text-xs tabular-nums"
+              className="text-muted-foreground w-16 text-end text-xs tabular-nums"
             >
               {percent(share)}
             </span>

package/src/features/tokenusage/components/TokenUsageTimelineChart.tsx

@@ -161,7 +161,11 @@ export function TokenUsageTimelineChart({ rows, metric, stackBy, className }: To
     series === OTHER_SERIES ? OTHER_COLOR : seriesColor(index, mode);
 
   return (
-    <div className={className}>
+    // The chart is a coordinate system, not prose: recharts lays the axes and the
+    // stacked bars out left-to-right, so the whole chart stays an LTR island even
+    // under dir="rtl". Only the labels inside it are translated.
+    // rtl-ok: deliberate LTR island (chart)
+    <div className={className} dir="ltr">
       {/* The pivot, exposed for assertions and for screen readers that would
           otherwise get nothing from the SVG. */}
       <span className="sr-only" data-testid="timeline-data">

package/src/features/user/components/details/UserStandaloneDetails.tsx

@@ -29,7 +29,7 @@ export function UserStanadaloneDetails({ user }: UserDetailsProps) {
         <div className="flex flex-wrap gap-2">
           {user.roles.map((role: RoleInterface, _index: number) => (
             <Link key={role.id} href={generateUrl({ page: Modules.Role, id: role.id })}>
-              <Badge className="mr-2" variant={`default`}>
+              <Badge className="me-2" variant={`default`}>
                 {t(`role.roles`, { role: role.id.replaceAll(`-`, ``) })}
               </Badge>
             </Link>

package/src/features/user/components/forms/UserReactivator.tsx

@@ -43,7 +43,7 @@ function UserReactivatorInterface({ user, propagateChanges }: UserReactivatorPro
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger>
         <Button size="sm">
-          <UserCheckIcon className="mr-3 h-3.5 w-3.5" />
+          <UserCheckIcon className="me-3 h-3.5 w-3.5" />
           {t(`user.buttons.reactivate`)}
         </Button>
       </DialogTrigger>
@@ -54,7 +54,7 @@ function UserReactivatorInterface({ user, propagateChanges }: UserReactivatorPro
         </DialogHeader>
         {t(`user.reactivate.description`, { name: user.name })}
         <div className="flex justify-end">
-          <Button className="mr-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
+          <Button className="me-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
             {t(`ui.buttons.cancel`)}
           </Button>
           <Button

package/src/features/user/components/forms/UserResentInvitationEmail.tsx

@@ -63,7 +63,7 @@ function UserResentInvitationEmailInternal({ user }: UserResentInvitationEmailPr
         </DialogHeader>
         {t(`user.resend_activation.description`, { email: user.email })}
         <div className="flex justify-end">
-          <Button className="mr-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
+          <Button className="me-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
             {t(`ui.buttons.cancel`)}
           </Button>
           <Button

package/src/features/user/components/forms/UserSelector.tsx

@@ -97,7 +97,7 @@ export function UserSelector({ id, form, label, placeholder, onChange, isRequire
                   {field.value ? (
                     <div className="bg-input/20 dark:bg-input/30 border-input flex h-7 w-full flex-row items-center justify-start rounded-md border px-2 py-0.5 text-sm md:text-xs/relaxed">
                       <div className="*:ring-border *:ring-1">
-                        <Avatar className={`mr-2 h-4 w-4`}>
+                        <Avatar className={`me-2 h-4 w-4`}>
                           <AvatarImage src={field.value?.avatar} />
                           <AvatarFallback>
                             {field.value?.name
@@ -117,7 +117,7 @@ export function UserSelector({ id, form, label, placeholder, onChange, isRequire
               </PopoverTrigger>
               {field.value && (
                 <CircleX
-                  className="text-muted hover:text-destructive ml-2 h-4 w-4 shrink-0 cursor-pointer"
+                  className="text-muted hover:text-destructive ms-2 h-4 w-4 shrink-0 cursor-pointer"
                   onClick={() => setUser()}
                 />
               )}
@@ -125,19 +125,19 @@ export function UserSelector({ id, form, label, placeholder, onChange, isRequire
             <PopoverContent align="start" className="w-(--anchor-width)">
               <Command shouldFilter={false}>
                 <div className="relative mb-2 w-full">
-                  <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
+                  <SearchIcon className="text-muted-foreground absolute top-2.5 start-2.5 h-4 w-4" />
                   <Input
                     placeholder={t(`ui.search.placeholder`, { type: t(`entities.users`, { count: 1 }) })}
                     type="text"
-                    className="w-full pr-8 pl-8"
+                    className="w-full pe-8 ps-8"
                     onChange={(e) => setSearchTerm(e.target.value)}
                     value={searchTerm}
                   />
                   {isSearching ? (
-                    <RefreshCwIcon className="text-muted-foreground absolute top-2.5 right-2.5 h-4 w-4 animate-spin" />
+                    <RefreshCwIcon className="text-muted-foreground absolute top-2.5 end-2.5 h-4 w-4 animate-spin" />
                   ) : searchTermRef.current ? (
                     <XIcon
-                      className={`absolute top-2.5 right-2.5 h-4 w-4 ${searchTermRef.current ? "cursor-pointer" : "text-muted-foreground"}`}
+                      className={`absolute top-2.5 end-2.5 h-4 w-4 ${searchTermRef.current ? "cursor-pointer" : "text-muted-foreground"}`}
                       onClick={() => {
                         setSearchTerm("");
                         search("");
@@ -156,7 +156,7 @@ export function UserSelector({ id, form, label, placeholder, onChange, isRequire
                         key={user.id}
                         onSelect={() => setUser(user)}
                       >
-                        <UserAvatar user={user} className={`mr-2 h-4 w-4`} />
+                        <UserAvatar user={user} className={`me-2 h-4 w-4`} />
                         <span className="">{user.name}</span>
                       </CommandItem>
                     ))}

package/src/features/user/components/lists/ContributorsList.tsx

@@ -21,7 +21,7 @@ export function ContributorsList({ content }: ContributorsListProps) {
         href={generateUrl({ page: Modules.User, id: content.author.id })}
         onClick={(e: React.MouseEvent<HTMLAnchorElement>) => e.stopPropagation()}
       >
-        <UserAvatar user={content.author} className="mr-1 h-6 w-6" />
+        <UserAvatar user={content.author} className="me-1 h-6 w-6" />
       </Link>
       <div className="flex flex-row-reverse justify-end -space-x-1 space-x-reverse">
         {content.editors

package/src/features/user/components/lists/UserListInAdd.tsx

@@ -39,7 +39,7 @@ export function UserListInAdd({ data, existingUsers, setSelectedUser, setLevelOp
                 >
                   <div className="flex w-full flex-row items-center justify-between px-4 py-1">
                     <UserAvatar user={user} />
-                    <div className="ml-5 flex w-full flex-col">
+                    <div className="ms-5 flex w-full flex-col">
                       <div className="text-sm font-medium">{user.name}</div>
                       <div className="text-xs font-normal">{user.email}</div>
                     </div>

package/src/features/user/components/widgets/UserSearchPopover.tsx

@@ -45,20 +45,20 @@ export const UserSearchPopover = ({ children, onSelect, align = "start", classNa
       <PopoverContent align={align} onClick={(e) => e.stopPropagation()} className={className ?? "w-80"}>
         <Command shouldFilter={false}>
           <div className="relative mb-2 w-full">
-            <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
+            <SearchIcon className="text-muted-foreground absolute top-2.5 start-2.5 h-4 w-4" />
             <Input
               placeholder={t(`ui.search.placeholder`, { type: t(`entities.users`, { count: 1 }) })}
               type="text"
-              className="w-full pr-8 pl-8"
+              className="w-full pe-8 ps-8"
               onChange={(e) => setSearchQuery(e.target.value)}
               value={searchQuery}
               onClick={(e) => e.stopPropagation()}
             />
             {isLoading ? (
-              <RefreshCwIcon className="text-muted-foreground absolute top-2.5 right-2.5 h-4 w-4 animate-spin" />
+              <RefreshCwIcon className="text-muted-foreground absolute top-2.5 end-2.5 h-4 w-4 animate-spin" />
             ) : searchQuery ? (
               <XIcon
-                className="text-muted-foreground hover:text-foreground absolute top-2.5 right-2.5 h-4 w-4 cursor-pointer"
+                className="text-muted-foreground hover:text-foreground absolute top-2.5 end-2.5 h-4 w-4 cursor-pointer"
                 onClick={(e) => {
                   e.stopPropagation();
                   clearSearch();
@@ -74,7 +74,7 @@ export const UserSearchPopover = ({ children, onSelect, align = "start", classNa
                   className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                   onSelect={() => handleSelectUser(user.id)}
                 >
-                  <UserAvatar user={user} className="mr-2 h-4 w-4" showLink={false} />
+                  <UserAvatar user={user} className="me-2 h-4 w-4" showLink={false} />
                   <span>{user.name}</span>
                 </CommandItem>
               ))

package/src/features/user/hooks/useUserTableStructure.tsx

@@ -99,7 +99,7 @@ export const useUserTableStructure: UseTableStructureHook<UserInterface, UserFie
         return (
           <div className="relative flex h-5 w-20 items-center justify-center overflow-clip rounded border text-center">
             <div
-              className={`bg-accent absolute top-0 left-0 h-full opacity-${Math.round(user.relevance)}`}
+              className={`bg-accent absolute top-0 start-0 h-full opacity-${Math.round(user.relevance)}`}
               style={{ width: `${user.relevance}%` }}
             ></div>
             <span

package/src/features/waitlist/components/forms/WaitlistQuestionnaireRenderer.tsx

@@ -84,7 +84,7 @@ export function WaitlistQuestionnaireRenderer<T extends FieldValues>({
               <div key={field.id} className="space-y-2">
                 <span className="text-sm font-medium">
                   {field.label}
-                  {field.required && <span className="ml-1 text-destructive">*</span>}
+                  {field.required && <span className="ms-1 text-destructive">*</span>}
                 </span>
                 {field.description && <p className="text-muted-foreground text-xs">{field.description}</p>}
                 <div className="space-y-2">

package/src/features/waitlist/hooks/useWaitlistTableStructure.tsx

@@ -94,7 +94,7 @@ export function useWaitlistTableStructure({
         if (entry.status === "confirmed") {
           return (
             <Button size="sm" variant="outline" onClick={() => onInvite(entry)}>
-              <Send className="mr-2 h-4 w-4" />
+              <Send className="me-2 h-4 w-4" />
               {t("waitlist.admin.actions.invite")}
             </Button>
           );

package/src/hooks/useCustomD3Graph.tsx

@@ -30,6 +30,11 @@ function estimateLabelWidth(node: D3Node): number {
 
 /**
  * Custom hook for D3 graph visualization with larger circles and more interactive features
+ *
+ * Direction: the hook stamps `dir="ltr"` (and `direction: ltr`) on the SVG it
+ * owns — the layout is coordinate-based, so it is a deliberate LTR island and
+ * never mirrors under `dir="rtl"`. Consumers do not need to set anything; a
+ * wrapping container may still mirror around the graph.
  */
 export function useCustomD3Graph(
   nodes: D3Node[],
@@ -199,6 +204,17 @@ export function useCustomD3Graph(
   );
 
   useEffect(() => {
+    // The graph lives in SVG user space: node positions, link endpoints and label
+    // offsets are all computed coordinates, so an RTL ancestor must not mirror it.
+    // Stamped on the element the hook owns rather than left to each caller, so no
+    // consumer can forget it. Both the attribute and the inline property are set
+    // because `dir` is an HTML attribute and does not reliably reach SVG.
+    // rtl-ok: deliberate LTR island (chart)
+    if (svgRef.current) {
+      svgRef.current.setAttribute("dir", "ltr");
+      svgRef.current.style.direction = "ltr";
+    }
+
     if (!nodes.length || !svgRef.current) return;
 
     const visibleNodes = visibleNodeIds

package/src/lib/__tests__/direction.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { resolvePhysicalSide } from "../direction";
+
+describe("resolvePhysicalSide", () => {
+  it("maps start/end by direction", () => {
+    expect(resolvePhysicalSide("start", "ltr")).toBe("left");
+    expect(resolvePhysicalSide("start", "rtl")).toBe("right");
+    expect(resolvePhysicalSide("end", "ltr")).toBe("right");
+    expect(resolvePhysicalSide("end", "rtl")).toBe("left");
+  });
+  it("passes physical sides through unchanged in both directions", () => {
+    for (const dir of ["ltr", "rtl"] as const) {
+      for (const side of ["top", "bottom", "left", "right"] as const) {
+        expect(resolvePhysicalSide(side, dir)).toBe(side);
+      }
+    }
+  });
+});

package/src/lib/direction.ts

@@ -0,0 +1,8 @@
+export type PhysicalSide = "top" | "bottom" | "left" | "right";
+export type LogicalSide = PhysicalSide | "start" | "end";
+
+export function resolvePhysicalSide(side: LogicalSide, dir: "ltr" | "rtl"): PhysicalSide {
+  if (side === "start") return dir === "rtl" ? "right" : "left";
+  if (side === "end") return dir === "rtl" ? "left" : "right";
+  return side;
+}

package/src/shadcnui/custom/multi-select.tsx

@@ -291,11 +291,11 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                       className={cn(isAnimating ? "animate-bounce" : "", multiSelectVariants({ variant }))}
                       style={{ animationDuration: `${animation}s` }}
                     >
-                      {IconComponent && <IconComponent className="mr-2 h-4 w-4" />}
+                      {IconComponent && <IconComponent className="me-2 h-4 w-4" />}
                       {option?.selectedLabel ?? option?.label}
                       <XCircle
                         data-remove-button
-                        className="ml-2 h-4 w-4 cursor-pointer"
+                        className="ms-2 h-4 w-4 cursor-pointer"
                         onPointerDown={(event) => {
                           event.stopPropagation();
                           event.preventDefault();
@@ -321,7 +321,7 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                     {`+ ${selectedValues.length - maxCount} more`}
                     <XCircle
                       data-remove-button
-                      className="ml-2 h-4 w-4 cursor-pointer"
+                      className="ms-2 h-4 w-4 cursor-pointer"
                       onPointerDown={(event) => {
                         event.stopPropagation();
                         event.preventDefault();
@@ -388,7 +388,7 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                   >
                     <div
                       className={cn(
-                        "border-primary mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
+                        "border-primary me-2 flex h-4 w-4 items-center justify-center rounded-sm border",
                         selectedValues.length === options.length
                           ? "bg-primary text-primary-foreground"
                           : "opacity-50 [&_svg]:invisible",
@@ -411,14 +411,14 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                     >
                       <div
                         className={cn(
-                          "border-primary mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
+                          "border-primary me-2 flex h-4 w-4 items-center justify-center rounded-sm border",
                           isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible",
                         )}
                       >
                         <CheckIcon className="h-4 w-4" />
                       </div>
                       {option.icon && (
-                        <option.icon className={option.iconClassName ?? "text-muted-foreground mr-2 h-4 w-4"} />
+                        <option.icon className={option.iconClassName ?? "text-muted-foreground me-2 h-4 w-4"} />
                       )}
                       <span>{option.label}</span>
                     </CommandItem>

package/src/shadcnui/custom/multiple-selector.tsx

@@ -213,6 +213,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
     const [onScrollbar, setOnScrollbar] = React.useState(false);
     const [isLoading, setIsLoading] = React.useState(false);
     const dropdownRef = React.useRef<HTMLDivElement>(null);
+    // rtl-ok: viewport-anchored floating position (physical viewport coordinates, not a layout inset)
     const [dropdownPosition, setDropdownPosition] = React.useState({ top: 0, left: 0, width: 0 });
 
     const [selected, setSelected] = React.useState<Option[]>(value || []);
@@ -331,6 +332,8 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
           const rect = containerRef.current.getBoundingClientRect();
           setDropdownPosition({
             top: rect.bottom + window.scrollY + 4,
+            // rtl-ok: viewport-anchored floating position — the portal is placed at the
+            // container's measured rect and spans its full width, so it matches in RTL too
             left: rect.left + window.scrollX,
             width: rect.width,
           });
@@ -502,7 +505,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
                   <button
                     type="button"
                     className={cn(
-                      "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                      "ms-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
                       (disabled || option.fixed) && "hidden",
                     )}
                     onKeyDown={(e) => {
@@ -550,7 +553,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
                 "flex-1 self-baseline bg-transparent outline-none placeholder:text-muted-foreground text-foreground caret-foreground",
                 {
                   "w-full": hidePlaceholderWhenSelected,
-                  "ml-1": selected.length !== 0,
+                  "ms-1": selected.length !== 0,
                 },
                 inputProps?.className,
               )}
@@ -653,6 +656,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
               className="fixed z-50 max-h-80 rounded-md border bg-background text-foreground shadow-md outline-none animate-in"
               style={{
                 top: dropdownPosition.top,
+                // rtl-ok: viewport-anchored floating position (measured px, not a logical inset)
                 left: dropdownPosition.left,
                 width: dropdownPosition.width,
               }}

package/src/shadcnui/ui/accordion.tsx

@@ -31,7 +31,7 @@ function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-left text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
+          "**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-start text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
           className,
         )}
         {...props}

package/src/shadcnui/ui/alert-dialog.tsx

@@ -45,6 +45,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
+          // rtl-ok: symmetric centering (`left-1/2` + `-translate-x-1/2`) — identical in LTR and RTL
           "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-3 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-64 data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
           className,
         )}
@@ -59,7 +60,7 @@ function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">)
     <div
       data-slot="alert-dialog-header"
       className={cn(
-        "grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        "grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
         className,
       )}
       {...props}

package/src/shadcnui/ui/alert.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "grid gap-0.5 rounded-lg border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5 w-full relative group/alert",
+  "grid gap-0.5 rounded-lg border px-2 py-1.5 text-start text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5 w-full relative group/alert",
   {
     variants: {
       variant: {
@@ -47,7 +47,7 @@ function AlertDescription({ className, ...props }: React.ComponentProps<"div">)
 }
 
 function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="alert-action" className={cn("absolute top-1.5 right-2", className)} {...props} />;
+  return <div data-slot="alert-action" className={cn("absolute top-1.5 end-2", className)} {...props} />;
 }
 
 export { Alert, AlertTitle, AlertDescription, AlertAction };

package/src/shadcnui/ui/avatar.tsx

@@ -53,7 +53,7 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
     <span
       data-slot="avatar-badge"
       className={cn(
-        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+        "bg-primary text-primary-foreground ring-background absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",

package/src/shadcnui/ui/badge.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
+  "h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
   {
     variants: {
       variant: {

package/src/shadcnui/ui/breadcrumb.tsx

@@ -61,7 +61,7 @@ function BreadcrumbSeparator({ children, className, ...props }: React.ComponentP
       className={cn("[&>svg]:size-3.5", className)}
       {...props}
     >
-      {children ?? <ChevronRightIcon />}
+      {children ?? <ChevronRightIcon className="rtl:rotate-180" />}
     </li>
   );
 }

package/src/shadcnui/ui/button.tsx

@@ -21,10 +21,10 @@ const buttonVariants = cva(
       },
       size: {
         default:
-          "h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        xs: "h-5 gap-1 rounded-sm px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5",
-        sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4",
+          "h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        xs: "h-5 gap-1 rounded-sm px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-2.5",
+        sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
+        lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-4",
         icon: "size-7 [&_svg:not([class*='size-'])]:size-3.5",
         "icon-xs": "size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5",
         "icon-sm": "size-6 [&_svg:not([class*='size-'])]:size-3",