@agent-native/core 0.76.3 → 0.76.4

package/corpus/templates/forms/app/pages/FormBuilderPage.tsx

@@ -315,7 +315,7 @@ export function FormBuilderPage() {
     return (
       <div className="flex flex-col h-full">
         {/* Top bar */}
-        <div className="flex items-center justify-between border-b border-border pl-12 pr-2 sm:px-4 md:pl-4 h-14 shrink-0 min-w-0">
+        <div className="flex items-center justify-between border-b border-border ps-12 pe-2 sm:px-4 md:ps-4 h-14 shrink-0 min-w-0">
           <div className="flex items-center gap-3 min-w-0 flex-1">
             <Skeleton className="h-5 w-48" />
             <Skeleton className="h-4 w-14 rounded-full" />
@@ -344,7 +344,7 @@ export function FormBuilderPage() {
               </div>
             </div>
           </div>
-          <div className="hidden lg:block w-72 border-l border-border p-4 space-y-4">
+          <div className="hidden lg:block w-72 border-s border-border p-4 space-y-4">
             <Skeleton className="h-4 w-32" />
             <Skeleton className="h-9 w-full" />
             <Skeleton className="h-9 w-full" />
@@ -519,8 +519,8 @@ export function FormBuilderPage() {
     <div className="flex flex-col h-full">
       {codeRequiredDialog}
       {/* Top bar */}
-      <div className="flex items-center justify-between border-b border-border pl-12 pr-2 sm:px-4 md:pl-4 h-14 shrink-0 min-w-0">
-        <div className="flex items-center gap-2 sm:gap-3 relative min-w-0 flex-1 mr-2">
+      <div className="flex items-center justify-between border-b border-border ps-12 pe-2 sm:px-4 md:ps-4 h-14 shrink-0 min-w-0">
+        <div className="flex items-center gap-2 sm:gap-3 relative min-w-0 flex-1 me-2">
           <span
             ref={titleMeasureRef}
             aria-hidden
@@ -646,7 +646,7 @@ export function FormBuilderPage() {
               disabled={pendingStatus !== null}
             >
               {pendingStatus !== null && (
-                <IconLoader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
+                <IconLoader2 className="h-3.5 w-3.5 me-1.5 animate-spin" />
               )}
               {pendingStatus === "published"
                 ? "Publishing…"
@@ -678,15 +678,15 @@ export function FormBuilderPage() {
                   onClick={handleTogglePublish}
                 >
                   {pendingStatus === "draft" ? (
-                    <IconLoader2 className="h-4 w-4 mr-2 animate-spin" />
+                    <IconLoader2 className="h-4 w-4 me-2 animate-spin" />
                   ) : (
-                    <IconLock className="h-4 w-4 mr-2" />
+                    <IconLock className="h-4 w-4 me-2" />
                   )}
                   {pendingStatus === "draft" ? "Unpublishing…" : "Unpublish"}
                 </DropdownMenuItem>
                 {canArchive && (
                   <DropdownMenuItem onClick={handleArchiveForm}>
-                    <IconArchive className="h-4 w-4 mr-2" />
+                    <IconArchive className="h-4 w-4 me-2" />
                     Move to Archive
                   </DropdownMenuItem>
                 )}
@@ -717,7 +717,7 @@ export function FormBuilderPage() {
                   {(form.responseCount ?? 0) > 0 && (
                     <Badge
                       variant="secondary"
-                      className="ml-1.5 text-[9px] px-1 py-0 h-4 min-w-4"
+                      className="ms-1.5 text-[9px] px-1 py-0 h-4 min-w-4"
                     >
                       {form.responseCount}
                     </Badge>
@@ -941,7 +941,7 @@ function BuilderContent({
                       )}
                     >
                       <div
-                        className="absolute -left-3 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 cursor-grab hidden sm:block"
+                        className="absolute -start-3 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 cursor-grab hidden sm:block"
                         aria-label="Drag to reorder"
                       >
                         <IconGripVertical className="h-4 w-4 text-muted-foreground" />
@@ -1264,13 +1264,13 @@ function ResultsContent({ formId, form }: { formId: string; form: any }) {
         </div>
         <div className="flex items-center gap-2">
           <div className="relative">
-            <IconSearch className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
+            <IconSearch className="absolute start-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
             <Input
               type="search"
               placeholder="Search responses…"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              className="h-8 pl-7 text-xs w-44 sm:w-56"
+              className="h-8 ps-7 text-xs w-44 sm:w-56"
             />
           </div>
           <Button
@@ -1302,13 +1302,13 @@ function ResultsContent({ formId, form }: { formId: string; form: any }) {
               <tr className="border-b border-border bg-muted/30">
                 <th
                   scope="col"
-                  className="min-w-16 px-4 py-2.5 text-left text-xs font-medium text-muted-foreground whitespace-nowrap"
+                  className="min-w-16 px-4 py-2.5 text-start text-xs font-medium text-muted-foreground whitespace-nowrap"
                 >
                   #
                 </th>
                 <th
                   scope="col"
-                  className="min-w-36 px-4 py-2.5 text-left text-xs font-medium text-muted-foreground whitespace-nowrap"
+                  className="min-w-36 px-4 py-2.5 text-start text-xs font-medium text-muted-foreground whitespace-nowrap"
                 >
                   <ResultsSortableHeader
                     label="Submitted"
@@ -1320,7 +1320,7 @@ function ResultsContent({ formId, form }: { formId: string; form: any }) {
                 {hasSubmitterEmail && (
                   <th
                     scope="col"
-                    className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground whitespace-nowrap"
+                    className="px-4 py-2.5 text-start text-xs font-medium text-muted-foreground whitespace-nowrap"
                   >
                     <ResultsSortableHeader
                       label="Email"
@@ -1334,7 +1334,7 @@ function ResultsContent({ formId, form }: { formId: string; form: any }) {
                   <th
                     key={f.id}
                     scope="col"
-                    className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground whitespace-nowrap"
+                    className="px-4 py-2.5 text-start text-xs font-medium text-muted-foreground whitespace-nowrap"
                   >
                     <ResultsSortableHeader
                       label={f.label}
@@ -1660,7 +1660,7 @@ function IntegrationsEditor({
                   key={type}
                   type="button"
                   onClick={() => addIntegration(type)}
-                  className="cursor-pointer rounded-lg border bg-background p-3 text-left hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring min-h-[44px]"
+                  className="cursor-pointer rounded-lg border bg-background p-3 text-start hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring min-h-[44px]"
                 >
                   <div className="flex items-center gap-3">
                     <IntegrationBrandMark type={type} className="h-9 w-9" />
@@ -1771,7 +1771,7 @@ function IntegrationsEditor({
             size="sm"
             className="h-11 w-full rounded-xl"
           >
-            <IconPlus className="h-3.5 w-3.5 mr-1.5" />
+            <IconPlus className="h-3.5 w-3.5 me-1.5" />
             {hasIntegrations ? "Add Another Integration" : "Add Integration"}
           </Button>
         </DropdownMenuTrigger>

package/corpus/templates/forms/app/pages/FormsListPage.tsx

@@ -394,7 +394,7 @@ export function FormsListPage() {
           <Button
             variant="ghost"
             size="icon"
-            className="ml-auto h-8 w-8"
+            className="ms-auto h-8 w-8"
             onClick={clearSelection}
             aria-label="Exit selection mode"
           >
@@ -526,7 +526,7 @@ export function FormsListPage() {
                                 navigate(`/forms/${form.id}/responses`);
                               }}
                             >
-                              <IconChartBar className="h-4 w-4 mr-2" />
+                              <IconChartBar className="h-4 w-4 me-2" />
                               View Responses
                             </DropdownMenuItem>
                             <DropdownMenuItem
@@ -535,7 +535,7 @@ export function FormsListPage() {
                                 handleRestore(form.id);
                               }}
                             >
-                              <IconArchiveOff className="h-4 w-4 mr-2" />
+                              <IconArchiveOff className="h-4 w-4 me-2" />
                               Restore
                             </DropdownMenuItem>
                             <DropdownMenuItem
@@ -545,7 +545,7 @@ export function FormsListPage() {
                                 setPurgeId(form.id);
                               }}
                             >
-                              <IconTrash className="h-4 w-4 mr-2" />
+                              <IconTrash className="h-4 w-4 me-2" />
                               Delete forever
                             </DropdownMenuItem>
                           </>
@@ -574,7 +574,7 @@ export function FormsListPage() {
                                     navigate(`/forms/${form.id}`);
                                   }}
                                 >
-                                  <IconExternalLink className="h-4 w-4 mr-2" />
+                                  <IconExternalLink className="h-4 w-4 me-2" />
                                   Open
                                 </DropdownMenuItem>
                               );
@@ -587,7 +587,7 @@ export function FormsListPage() {
                                     navigate(`/forms/${form.id}/responses`);
                                   }}
                                 >
-                                  <IconChartBar className="h-4 w-4 mr-2" />
+                                  <IconChartBar className="h-4 w-4 me-2" />
                                   View Responses
                                 </DropdownMenuItem>
                                 <DropdownMenuItem
@@ -596,7 +596,7 @@ export function FormsListPage() {
                                     handleTogglePublish(form);
                                   }}
                                 >
-                                  <IconExternalLink className="h-4 w-4 mr-2" />
+                                  <IconExternalLink className="h-4 w-4 me-2" />
                                   {form.status === "published"
                                     ? "Unpublish"
                                     : "Publish"}
@@ -607,7 +607,7 @@ export function FormsListPage() {
                                     handleDuplicate(form);
                                   }}
                                 >
-                                  <IconCopy className="h-4 w-4 mr-2" />
+                                  <IconCopy className="h-4 w-4 me-2" />
                                   Duplicate
                                 </DropdownMenuItem>
                                 <DropdownMenuItem
@@ -617,7 +617,7 @@ export function FormsListPage() {
                                     handleDelete(form.id);
                                   }}
                                 >
-                                  <IconTrash className="h-4 w-4 mr-2" />
+                                  <IconTrash className="h-4 w-4 me-2" />
                                   Delete
                                 </DropdownMenuItem>
                               </>

package/corpus/templates/macros/app/components/layout/AppLayout.tsx

@@ -135,7 +135,7 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
           {/* Desktop sidebar */}
           <aside
             className={cn(
-              "hidden shrink-0 flex-col border-r border-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 md:flex",
+              "hidden shrink-0 flex-col border-e border-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 md:flex",
               desktopSidebarCollapsed ? "w-14" : "w-56",
             )}
           >
@@ -331,10 +331,10 @@ function SyncIndicator({ sidebarCollapsed }: { sidebarCollapsed: boolean }) {
   return (
     <div
       className={cn(
-        "pointer-events-none fixed bottom-10 left-4 z-50 flex h-8 items-center gap-2 rounded-full border border-white/[0.06] bg-muted/80 px-3 text-xs text-muted-foreground shadow-sm backdrop-blur-sm md:bottom-8",
+        "pointer-events-none fixed bottom-10 start-4 z-50 flex h-8 items-center gap-2 rounded-full border border-white/[0.06] bg-muted/80 px-3 text-xs text-muted-foreground shadow-sm backdrop-blur-sm md:bottom-8",
         sidebarCollapsed
-          ? "md:left-[calc(3.5rem+1rem)]"
-          : "md:left-[calc(14rem+1rem)]",
+          ? "md:start-[calc(3.5rem+1rem)]"
+          : "md:start-[calc(14rem+1rem)]",
       )}
     >
       <IconLoader2 className="h-3.5 w-3.5 animate-spin" />

package/corpus/templates/macros/app/components/ui/alert-dialog.tsx

@@ -49,7 +49,7 @@ const AlertDialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
+      "flex flex-col space-y-2 text-center sm:text-start",
       className,
     )}
     {...props}

package/corpus/templates/macros/app/components/ui/alert.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border p-4 [&>svg~*]:ps-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-foreground",
   {
     variants: {
       variant: {

package/corpus/templates/macros/app/components/ui/breadcrumb.tsx

@@ -83,7 +83,7 @@ const BreadcrumbSeparator = ({
     className={cn("[&>svg]:size-3.5", className)}
     {...props}
   >
-    {children ?? <IconChevronRight />}
+    {children ?? <IconChevronRight className="rtl:-scale-x-100" />}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";

package/corpus/templates/macros/app/components/ui/command.tsx

@@ -41,7 +41,7 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <IconSearch className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <IconSearch className="me-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
@@ -132,7 +132,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ms-auto text-xs tracking-widest text-muted-foreground",
         className,
       )}
       {...props}

package/corpus/templates/macros/app/components/ui/context-menu.tsx

@@ -30,13 +30,13 @@ const ContextMenuSubTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
   >
     {children}
-    <IconChevronRight className="ml-auto h-4 w-4" />
+    <IconChevronRight className="ms-auto h-4 w-4 rtl:-scale-x-100" />
   </ContextMenuPrimitive.SubTrigger>
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
@@ -83,7 +83,7 @@ const ContextMenuItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
@@ -98,13 +98,13 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <IconCheck className="h-4 w-4" />
       </ContextMenuPrimitive.ItemIndicator>
@@ -122,12 +122,12 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <IconCircleFilled className="h-2 w-2" />
       </ContextMenuPrimitive.ItemIndicator>
@@ -147,7 +147,7 @@ const ContextMenuLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
@@ -174,7 +174,7 @@ const ContextMenuShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ms-auto text-xs tracking-widest text-muted-foreground",
         className,
       )}
       {...props}

package/corpus/templates/macros/app/components/ui/dialog.tsx

@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <IconX className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -60,7 +60,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      "flex flex-col space-y-1.5 text-center sm:text-start",
       className,
     )}
     {...props}

package/corpus/templates/macros/app/components/ui/drawer.tsx

@@ -58,7 +58,7 @@ const DrawerHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    className={cn("grid gap-1.5 p-4 text-center sm:text-start", className)}
     {...props}
   />
 );

package/corpus/templates/macros/app/components/ui/dropdown-menu.tsx

@@ -30,13 +30,13 @@ const DropdownMenuSubTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
   >
     {children}
-    <IconChevronRight className="ml-auto h-4 w-4" />
+    <IconChevronRight className="ms-auto h-4 w-4 rtl:-scale-x-100" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =
@@ -96,7 +96,7 @@ const DropdownMenuItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
@@ -111,13 +111,13 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <IconCheck className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -135,12 +135,12 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <IconCircleFilled className="h-2 w-2" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -160,7 +160,7 @@ const DropdownMenuLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
@@ -186,7 +186,7 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      className={cn("ms-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
   );

package/corpus/templates/macros/app/components/ui/menubar.tsx

@@ -58,13 +58,13 @@ const MenubarSubTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
   >
     {children}
-    <IconChevronRight className="ml-auto h-4 w-4" />
+    <IconChevronRight className="ms-auto h-4 w-4 rtl:-scale-x-100" />
   </MenubarPrimitive.SubTrigger>
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
@@ -119,7 +119,7 @@ const MenubarItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
@@ -134,13 +134,13 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
         <IconCheck className="h-4 w-4" />
       </MenubarPrimitive.ItemIndicator>
@@ -157,12 +157,12 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
         <IconCircleFilled className="h-2 w-2" />
       </MenubarPrimitive.ItemIndicator>
@@ -182,7 +182,7 @@ const MenubarLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
@@ -209,7 +209,7 @@ const MenubarShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ms-auto text-xs tracking-widest text-muted-foreground",
         className,
       )}
       {...props}

package/corpus/templates/macros/app/components/ui/navigation-menu.tsx

@@ -55,7 +55,7 @@ const NavigationMenuTrigger = React.forwardRef<
   >
     {children}{" "}
     <IconChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      className="relative top-[1px] ms-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
@@ -69,7 +69,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      "start-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
       className,
     )}
     {...props}
@@ -83,7 +83,7 @@ const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
+  <div className={cn("absolute start-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
         "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",

package/corpus/templates/macros/app/components/ui/pagination.tsx

@@ -70,10 +70,10 @@ const PaginationPrevious = ({
   <PaginationLink
     aria-label="Go to previous page"
     size="default"
-    className={cn("gap-1 pl-2.5", className)}
+    className={cn("gap-1 ps-2.5", className)}
     {...props}
   >
-    <IconChevronLeft className="h-4 w-4" />
+    <IconChevronLeft className="h-4 w-4 rtl:-scale-x-100" />
     <span>Previous</span>
   </PaginationLink>
 );
@@ -86,11 +86,11 @@ const PaginationNext = ({
   <PaginationLink
     aria-label="Go to next page"
     size="default"
-    className={cn("gap-1 pr-2.5", className)}
+    className={cn("gap-1 pe-2.5", className)}
     {...props}
   >
     <span>Next</span>
-    <IconChevronRight className="h-4 w-4" />
+    <IconChevronRight className="h-4 w-4 rtl:-scale-x-100" />
   </PaginationLink>
 );
 PaginationNext.displayName = "PaginationNext";

package/corpus/templates/macros/app/components/ui/scroll-area.tsx

@@ -31,7 +31,7 @@ const ScrollBar = React.forwardRef<
     className={cn(
       "flex touch-none select-none transition-colors",
       orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        "h-full w-2.5 border-s border-s-transparent p-[1px]",
       orientation === "horizontal" &&
         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className,

package/corpus/templates/macros/app/components/ui/select.tsx

@@ -103,7 +103,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn("py-1.5 ps-8 pe-2 text-sm font-semibold", className)}
     {...props}
   />
 ));
@@ -116,12 +116,12 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
         <IconCheck className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>