From 8757692a7be1a6174a0f1a5d3c280a8912d45dd0 Mon Sep 17 00:00:00 2001
From: Joel Butcher <joelbutcher@users.noreply.github.com>
Date: Wed, 1 Nov 2023 14:18:45 +0000
Subject: [PATCH] Better Support for RTL (#327)

---
 stubs/default/resources/views/auth/login.blade.php   |  4 ++--
 .../default/resources/views/auth/register.blade.php  |  2 +-
 .../views/components/dropdown-link.blade.php         |  2 +-
 .../resources/views/components/dropdown.blade.php    |  4 ++--
 .../views/components/responsive-nav-link.blade.php   |  4 ++--
 .../resources/views/layouts/navigation.blade.php     |  8 ++++----
 .../profile/partials/delete-user-form.blade.php      |  2 +-
 .../resources/js/Components/Dropdown.tsx             |  6 +++---
 .../resources/js/Components/ResponsiveNavLink.tsx    |  2 +-
 .../resources/js/Layouts/AuthenticatedLayout.tsx     | 10 +++++-----
 .../resources/js/Pages/Auth/ConfirmPassword.tsx      |  2 +-
 .../resources/js/Pages/Auth/ForgotPassword.tsx       |  2 +-
 .../resources/js/Pages/Auth/Login.tsx                |  4 ++--
 .../resources/js/Pages/Auth/Register.tsx             |  2 +-
 .../resources/js/Pages/Auth/ResetPassword.tsx        |  2 +-
 .../js/Pages/Profile/Partials/DeleteUserForm.tsx     |  2 +-
 .../inertia-react-ts/resources/js/Pages/Welcome.tsx  | 10 +++++-----
 .../resources/js/Components/Dropdown.jsx             |  6 +++---
 .../resources/js/Components/ResponsiveNavLink.jsx    |  2 +-
 .../resources/js/Layouts/AuthenticatedLayout.jsx     | 10 +++++-----
 .../resources/js/Pages/Auth/ConfirmPassword.jsx      |  2 +-
 .../resources/js/Pages/Auth/ForgotPassword.jsx       |  2 +-
 .../inertia-react/resources/js/Pages/Auth/Login.jsx  |  4 ++--
 .../resources/js/Pages/Auth/Register.jsx             |  2 +-
 .../resources/js/Pages/Auth/ResetPassword.jsx        |  2 +-
 .../js/Pages/Profile/Partials/DeleteUserForm.jsx     |  2 +-
 stubs/inertia-react/resources/js/Pages/Welcome.jsx   | 10 +++++-----
 .../resources/js/Components/Dropdown.vue             |  4 ++--
 .../resources/js/Components/DropdownLink.vue         |  2 +-
 .../resources/js/Components/ResponsiveNavLink.vue    |  4 ++--
 .../resources/js/Layouts/AuthenticatedLayout.vue     | 10 +++++-----
 .../resources/js/Pages/Auth/ConfirmPassword.vue      |  2 +-
 .../inertia-vue-ts/resources/js/Pages/Auth/Login.vue |  4 ++--
 .../resources/js/Pages/Auth/Register.vue             |  2 +-
 .../js/Pages/Profile/Partials/DeleteUserForm.vue     |  2 +-
 stubs/inertia-vue-ts/resources/js/Pages/Welcome.vue  | 10 +++++-----
 .../inertia-vue/resources/js/Components/Dropdown.vue |  4 ++--
 .../resources/js/Components/DropdownLink.vue         |  2 +-
 .../resources/js/Components/ResponsiveNavLink.vue    |  4 ++--
 .../resources/js/Layouts/AuthenticatedLayout.vue     | 10 +++++-----
 .../resources/js/Pages/Auth/ConfirmPassword.vue      |  2 +-
 stubs/inertia-vue/resources/js/Pages/Auth/Login.vue  |  4 ++--
 .../inertia-vue/resources/js/Pages/Auth/Register.vue |  2 +-
 .../js/Pages/Profile/Partials/DeleteUserForm.vue     |  2 +-
 stubs/inertia-vue/resources/js/Pages/Welcome.vue     | 10 +++++-----
 .../resources/views/welcome.blade.php                |  6 +++---
 .../views/livewire/layout/navigation.blade.php       | 12 ++++++------
 .../views/livewire/pages/auth/login.blade.php        |  4 ++--
 .../views/livewire/pages/auth/register.blade.php     |  2 +-
 .../livewire/profile/delete-user-form.blade.php      |  2 +-
 .../livewire/profile/update-password-form.blade.php  |  2 +-
 .../update-profile-information-form.blade.php        |  2 +-
 .../views/livewire/welcome/navigation.blade.php      |  4 ++--
 .../views/livewire/layout/navigation.blade.php       | 12 ++++++------
 .../views/livewire/pages/auth/login.blade.php        |  4 ++--
 .../views/livewire/pages/auth/register.blade.php     |  2 +-
 .../livewire/profile/delete-user-form.blade.php      |  2 +-
 .../livewire/profile/update-password-form.blade.php  |  2 +-
 .../update-profile-information-form.blade.php        |  2 +-
 .../views/livewire/welcome/navigation.blade.php      |  4 ++--
 60 files changed, 126 insertions(+), 126 deletions(-)

diff --git a/stubs/default/resources/views/auth/login.blade.php b/stubs/default/resources/views/auth/login.blade.php
index 94d385687..80e1b392d 100644
--- a/stubs/default/resources/views/auth/login.blade.php
+++ b/stubs/default/resources/views/auth/login.blade.php
@@ -28,7 +28,7 @@
         <div class="block mt-4">
             <label for="remember_me" class="inline-flex items-center">
                 <input id="remember_me" type="checkbox" class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="remember">
-                <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
+                <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
             </label>
         </div>
 
@@ -39,7 +39,7 @@
                 </a>
             @endif
 
-            <x-primary-button class="ml-3">
+            <x-primary-button class="ms-3">
                 {{ __('Log in') }}
             </x-primary-button>
         </div>
diff --git a/stubs/default/resources/views/auth/register.blade.php b/stubs/default/resources/views/auth/register.blade.php
index 759792ba9..d4b3d5894 100644
--- a/stubs/default/resources/views/auth/register.blade.php
+++ b/stubs/default/resources/views/auth/register.blade.php
@@ -44,7 +44,7 @@
                 {{ __('Already registered?') }}
             </a>
 
-            <x-primary-button class="ml-4">
+            <x-primary-button class="ms-4">
                 {{ __('Register') }}
             </x-primary-button>
         </div>
diff --git a/stubs/default/resources/views/components/dropdown-link.blade.php b/stubs/default/resources/views/components/dropdown-link.blade.php
index 6b54bfbd7..6d5279d8b 100644
--- a/stubs/default/resources/views/components/dropdown-link.blade.php
+++ b/stubs/default/resources/views/components/dropdown-link.blade.php
@@ -1 +1 @@
-<a {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out']) }}>{{ $slot }}</a>
+<a {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out']) }}>{{ $slot }}</a>
diff --git a/stubs/default/resources/views/components/dropdown.blade.php b/stubs/default/resources/views/components/dropdown.blade.php
index ff241986d..65d29d88d 100644
--- a/stubs/default/resources/views/components/dropdown.blade.php
+++ b/stubs/default/resources/views/components/dropdown.blade.php
@@ -3,14 +3,14 @@
 @php
 switch ($align) {
     case 'left':
-        $alignmentClasses = 'origin-top-left left-0';
+        $alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0';
         break;
     case 'top':
         $alignmentClasses = 'origin-top';
         break;
     case 'right':
     default:
-        $alignmentClasses = 'origin-top-right right-0';
+        $alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0';
         break;
 }
 
diff --git a/stubs/default/resources/views/components/responsive-nav-link.blade.php b/stubs/default/resources/views/components/responsive-nav-link.blade.php
index 1148d9a9b..98b55d19e 100644
--- a/stubs/default/resources/views/components/responsive-nav-link.blade.php
+++ b/stubs/default/resources/views/components/responsive-nav-link.blade.php
@@ -2,8 +2,8 @@
 
 @php
 $classes = ($active ?? false)
-            ? 'block w-full pl-3 pr-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-left text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
-            : 'block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-left text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out';
+            ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
+            : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out';
 @endphp
 
 <a {{ $attributes->merge(['class' => $classes]) }}>
diff --git a/stubs/default/resources/views/layouts/navigation.blade.php b/stubs/default/resources/views/layouts/navigation.blade.php
index 6b145a87b..c64bf6460 100644
--- a/stubs/default/resources/views/layouts/navigation.blade.php
+++ b/stubs/default/resources/views/layouts/navigation.blade.php
@@ -11,7 +11,7 @@
                 </div>
 
                 <!-- Navigation Links -->
-                <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
+                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
                     <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                         {{ __('Dashboard') }}
                     </x-nav-link>
@@ -19,13 +19,13 @@
             </div>
 
             <!-- Settings Dropdown -->
-            <div class="hidden sm:flex sm:items-center sm:ml-6">
+            <div class="hidden sm:flex sm:items-center sm:ms-6">
                 <x-dropdown align="right" width="48">
                     <x-slot name="trigger">
                         <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
                             <div>{{ Auth::user()->name }}</div>
 
-                            <div class="ml-1">
+                            <div class="ms-1">
                                 <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                     <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                 </svg>
@@ -53,7 +53,7 @@
             </div>
 
             <!-- Hamburger -->
-            <div class="-mr-2 flex items-center sm:hidden">
+            <div class="-me-2 flex items-center sm:hidden">
                 <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
                     <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
diff --git a/stubs/default/resources/views/profile/partials/delete-user-form.blade.php b/stubs/default/resources/views/profile/partials/delete-user-form.blade.php
index 87d31b5e6..b3a638205 100644
--- a/stubs/default/resources/views/profile/partials/delete-user-form.blade.php
+++ b/stubs/default/resources/views/profile/partials/delete-user-form.blade.php
@@ -46,7 +46,7 @@ class="mt-1 block w-3/4"
                     {{ __('Cancel') }}
                 </x-secondary-button>
 
-                <x-danger-button class="ml-3">
+                <x-danger-button class="ms-3">
                     {{ __('Delete Account') }}
                 </x-danger-button>
             </div>
diff --git a/stubs/inertia-react-ts/resources/js/Components/Dropdown.tsx b/stubs/inertia-react-ts/resources/js/Components/Dropdown.tsx
index 65ae49670..f0f033d4d 100644
--- a/stubs/inertia-react-ts/resources/js/Components/Dropdown.tsx
+++ b/stubs/inertia-react-ts/resources/js/Components/Dropdown.tsx
@@ -44,9 +44,9 @@ const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-whit
     let alignmentClasses = 'origin-top';
 
     if (align === 'left') {
-        alignmentClasses = 'origin-top-left left-0';
+        alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0';
     } else if (align === 'right') {
-        alignmentClasses = 'origin-top-right right-0';
+        alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0';
     }
 
     let widthClasses = '';
@@ -83,7 +83,7 @@ const DropdownLink = ({ className = '', children, ...props }: InertiaLinkProps)
         <Link
             {...props}
             className={
-                'block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ' +
+                'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ' +
                 className
             }
         >
diff --git a/stubs/inertia-react-ts/resources/js/Components/ResponsiveNavLink.tsx b/stubs/inertia-react-ts/resources/js/Components/ResponsiveNavLink.tsx
index e90850958..4f691bf96 100644
--- a/stubs/inertia-react-ts/resources/js/Components/ResponsiveNavLink.tsx
+++ b/stubs/inertia-react-ts/resources/js/Components/ResponsiveNavLink.tsx
@@ -4,7 +4,7 @@ export default function ResponsiveNavLink({ active = false, className = '', chil
     return (
         <Link
             {...props}
-            className={`w-full flex items-start pl-3 pr-4 py-2 border-l-4 ${
+            className={`w-full flex items-start ps-3 pe-4 py-2 border-l-4 ${
                 active
                     ? 'border-indigo-400 dark:border-indigo-600 text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300'
                     : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600'
diff --git a/stubs/inertia-react-ts/resources/js/Layouts/AuthenticatedLayout.tsx b/stubs/inertia-react-ts/resources/js/Layouts/AuthenticatedLayout.tsx
index c217bbdca..585223bc0 100644
--- a/stubs/inertia-react-ts/resources/js/Layouts/AuthenticatedLayout.tsx
+++ b/stubs/inertia-react-ts/resources/js/Layouts/AuthenticatedLayout.tsx
@@ -21,15 +21,15 @@ export default function Authenticated({ user, header, children }: PropsWithChild
                                 </Link>
                             </div>
 
-                            <div className="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
+                            <div className="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
                                 <NavLink href={route('dashboard')} active={route().current('dashboard')}>
                                     Dashboard
                                 </NavLink>
                             </div>
                         </div>
 
-                        <div className="hidden sm:flex sm:items-center sm:ml-6">
-                            <div className="ml-3 relative">
+                        <div className="hidden sm:flex sm:items-center sm:ms-6">
+                            <div className="ms-3 relative">
                                 <Dropdown>
                                     <Dropdown.Trigger>
                                         <span className="inline-flex rounded-md">
@@ -40,7 +40,7 @@ export default function Authenticated({ user, header, children }: PropsWithChild
                                                 {user.name}
 
                                                 <svg
-                                                    className="ml-2 -mr-0.5 h-4 w-4"
+                                                    className="ms-2 -me-0.5 h-4 w-4"
                                                     xmlns="http://www.w3.org/2000/svg"
                                                     viewBox="0 0 20 20"
                                                     fill="currentColor"
@@ -65,7 +65,7 @@ export default function Authenticated({ user, header, children }: PropsWithChild
                             </div>
                         </div>
 
-                        <div className="-mr-2 flex items-center sm:hidden">
+                        <div className="-me-2 flex items-center sm:hidden">
                             <button
                                 onClick={() => setShowingNavigationDropdown((previousState) => !previousState)}
                                 className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out"
diff --git a/stubs/inertia-react-ts/resources/js/Pages/Auth/ConfirmPassword.tsx b/stubs/inertia-react-ts/resources/js/Pages/Auth/ConfirmPassword.tsx
index 9cd2f80e0..f0db1a24c 100644
--- a/stubs/inertia-react-ts/resources/js/Pages/Auth/ConfirmPassword.tsx
+++ b/stubs/inertia-react-ts/resources/js/Pages/Auth/ConfirmPassword.tsx
@@ -49,7 +49,7 @@ export default function ConfirmPassword() {
                 </div>
 
                 <div className="flex items-center justify-end mt-4">
-                    <PrimaryButton className="ml-4" disabled={processing}>
+                    <PrimaryButton className="ms-4" disabled={processing}>
                         Confirm
                     </PrimaryButton>
                 </div>
diff --git a/stubs/inertia-react-ts/resources/js/Pages/Auth/ForgotPassword.tsx b/stubs/inertia-react-ts/resources/js/Pages/Auth/ForgotPassword.tsx
index 4e127a01d..ad4d3c5b7 100644
--- a/stubs/inertia-react-ts/resources/js/Pages/Auth/ForgotPassword.tsx
+++ b/stubs/inertia-react-ts/resources/js/Pages/Auth/ForgotPassword.tsx
@@ -41,7 +41,7 @@ export default function ForgotPassword({ status }: { status?: string }) {
                 <InputError message={errors.email} className="mt-2" />
 
                 <div className="flex items-center justify-end mt-4">
-                    <PrimaryButton className="ml-4" disabled={processing}>
+                    <PrimaryButton className="ms-4" disabled={processing}>
                         Email Password Reset Link
                     </PrimaryButton>
                 </div>
diff --git a/stubs/inertia-react-ts/resources/js/Pages/Auth/Login.tsx b/stubs/inertia-react-ts/resources/js/Pages/Auth/Login.tsx
index bf0f9b009..256a1bd2f 100644
--- a/stubs/inertia-react-ts/resources/js/Pages/Auth/Login.tsx
+++ b/stubs/inertia-react-ts/resources/js/Pages/Auth/Login.tsx
@@ -73,7 +73,7 @@ export default function Login({ status, canResetPassword }: { status?: string, c
                             checked={data.remember}
                             onChange={(e) => setData('remember', e.target.checked)}
                         />
-                        <span className="ml-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
+                        <span className="ms-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
                     </label>
                 </div>
 
@@ -87,7 +87,7 @@ export default function Login({ status, canResetPassword }: { status?: string, c
                         </Link>
                     )}
 
-                    <PrimaryButton className="ml-4" disabled={processing}>
+                    <PrimaryButton className="ms-4" disabled={processing}>
                         Log in
                     </PrimaryButton>
                 </div>
diff --git a/stubs/inertia-react-ts/resources/js/Pages/Auth/Register.tsx b/stubs/inertia-react-ts/resources/js/Pages/Auth/Register.tsx
index 291323ef1..575758cdd 100644
--- a/stubs/inertia-react-ts/resources/js/Pages/Auth/Register.tsx
+++ b/stubs/inertia-react-ts/resources/js/Pages/Auth/Register.tsx
@@ -107,7 +107,7 @@ export default function Register() {
                         Already registered?
                     </Link>
 
-                    <PrimaryButton className="ml-4" disabled={processing}>
+                    <PrimaryButton className="ms-4" disabled={processing}>
                         Register
                     </PrimaryButton>
                 </div>
diff --git a/stubs/inertia-react-ts/resources/js/Pages/Auth/ResetPassword.tsx b/stubs/inertia-react-ts/resources/js/Pages/Auth/ResetPassword.tsx
index b5db111b0..cbd57b153 100644
--- a/stubs/inertia-react-ts/resources/js/Pages/Auth/ResetPassword.tsx
+++ b/stubs/inertia-react-ts/resources/js/Pages/Auth/ResetPassword.tsx
@@ -80,7 +80,7 @@ export default function ResetPassword({ token, email }: { token: string, email:
                 </div>
 
                 <div className="flex items-center justify-end mt-4">
-                    <PrimaryButton className="ml-4" disabled={processing}>
+                    <PrimaryButton className="ms-4" disabled={processing}>
                         Reset Password
                     </PrimaryButton>
                 </div>
diff --git a/stubs/inertia-react-ts/resources/js/Pages/Profile/Partials/DeleteUserForm.tsx b/stubs/inertia-react-ts/resources/js/Pages/Profile/Partials/DeleteUserForm.tsx
index fbff6a051..53e7ba71d 100644
--- a/stubs/inertia-react-ts/resources/js/Pages/Profile/Partials/DeleteUserForm.tsx
+++ b/stubs/inertia-react-ts/resources/js/Pages/Profile/Partials/DeleteUserForm.tsx
@@ -88,7 +88,7 @@ export default function DeleteUserForm({ className = '' }: { className?: string
                     <div className="mt-6 flex justify-end">
                         <SecondaryButton onClick={closeModal}>Cancel</SecondaryButton>
 
-                        <DangerButton className="ml-3" disabled={processing}>
+                        <DangerButton className="ms-3" disabled={processing}>
                             Delete Account
                         </DangerButton>
                     </div>
diff --git a/stubs/inertia-react-ts/resources/js/Pages/Welcome.tsx b/stubs/inertia-react-ts/resources/js/Pages/Welcome.tsx
index 5a49949d9..987c614eb 100644
--- a/stubs/inertia-react-ts/resources/js/Pages/Welcome.tsx
+++ b/stubs/inertia-react-ts/resources/js/Pages/Welcome.tsx
@@ -6,7 +6,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }: PageProps<
         <>
             <Head title="Welcome" />
             <div className="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-dots-darker bg-center bg-gray-100 dark:bg-dots-lighter dark:bg-gray-900 selection:bg-red-500 selection:text-white">
-                <div className="sm:fixed sm:top-0 sm:right-0 p-6 text-right">
+                <div className="sm:fixed sm:top-0 sm:right-0 p-6 text-end">
                     {auth.user ? (
                         <Link
                             href={route('dashboard')}
@@ -25,7 +25,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }: PageProps<
 
                             <Link
                                 href={route('register')}
-                                className="ml-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
+                                className="ms-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
                             >
                                 Register
                             </Link>
@@ -292,7 +292,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }: PageProps<
                     </div>
 
                     <div className="flex justify-center mt-16 px-6 sm:items-center sm:justify-between">
-                        <div className="text-center text-sm text-gray-500 dark:text-gray-400 sm:text-left">
+                        <div className="text-center text-sm text-gray-500 dark:text-gray-400 sm:text-start">
                             <div className="flex items-center gap-4">
                                 <a
                                     href="https://github.com/sponsors/taylorotwell"
@@ -303,7 +303,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }: PageProps<
                                         fill="none"
                                         viewBox="0 0 24 24"
                                         strokeWidth="1.5"
-                                        className="-mt-px mr-1 w-5 h-5 stroke-gray-400 dark:stroke-gray-600 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-400"
+                                        className="-mt-px me-1 w-5 h-5 stroke-gray-400 dark:stroke-gray-600 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-400"
                                     >
                                         <path
                                             strokeLinecap="round"
@@ -316,7 +316,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }: PageProps<
                             </div>
                         </div>
 
-                        <div className="ml-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:text-right sm:ml-0">
+                        <div className="ms-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:text-end sm:ms-0">
                             Laravel v{laravelVersion} (PHP v{phpVersion})
                         </div>
                     </div>
diff --git a/stubs/inertia-react/resources/js/Components/Dropdown.jsx b/stubs/inertia-react/resources/js/Components/Dropdown.jsx
index 70405d131..c5129e10f 100644
--- a/stubs/inertia-react/resources/js/Components/Dropdown.jsx
+++ b/stubs/inertia-react/resources/js/Components/Dropdown.jsx
@@ -36,9 +36,9 @@ const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-whit
     let alignmentClasses = 'origin-top';
 
     if (align === 'left') {
-        alignmentClasses = 'origin-top-left left-0';
+        alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0';
     } else if (align === 'right') {
-        alignmentClasses = 'origin-top-right right-0';
+        alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0';
     }
 
     let widthClasses = '';
@@ -75,7 +75,7 @@ const DropdownLink = ({ className = '', children, ...props }) => {
         <Link
             {...props}
             className={
-                'block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ' +
+                'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ' +
                 className
             }
         >
diff --git a/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.jsx b/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.jsx
index b1f0991bf..bc4ba8683 100644
--- a/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.jsx
+++ b/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.jsx
@@ -4,7 +4,7 @@ export default function ResponsiveNavLink({ active = false, className = '', chil
     return (
         <Link
             {...props}
-            className={`w-full flex items-start pl-3 pr-4 py-2 border-l-4 ${
+            className={`w-full flex items-start ps-3 pe-4 py-2 border-l-4 ${
                 active
                     ? 'border-indigo-400 dark:border-indigo-600 text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300'
                     : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600'
diff --git a/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx b/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx
index f818d7646..957d8c639 100644
--- a/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx
+++ b/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx
@@ -20,15 +20,15 @@ export default function Authenticated({ user, header, children }) {
                                 </Link>
                             </div>
 
-                            <div className="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
+                            <div className="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
                                 <NavLink href={route('dashboard')} active={route().current('dashboard')}>
                                     Dashboard
                                 </NavLink>
                             </div>
                         </div>
 
-                        <div className="hidden sm:flex sm:items-center sm:ml-6">
-                            <div className="ml-3 relative">
+                        <div className="hidden sm:flex sm:items-center sm:ms-6">
+                            <div className="ms-3 relative">
                                 <Dropdown>
                                     <Dropdown.Trigger>
                                         <span className="inline-flex rounded-md">
@@ -39,7 +39,7 @@ export default function Authenticated({ user, header, children }) {
                                                 {user.name}
 
                                                 <svg
-                                                    className="ml-2 -mr-0.5 h-4 w-4"
+                                                    className="ms-2 -me-0.5 h-4 w-4"
                                                     xmlns="http://www.w3.org/2000/svg"
                                                     viewBox="0 0 20 20"
                                                     fill="currentColor"
@@ -64,7 +64,7 @@ export default function Authenticated({ user, header, children }) {
                             </div>
                         </div>
 
-                        <div className="-mr-2 flex items-center sm:hidden">
+                        <div className="-me-2 flex items-center sm:hidden">
                             <button
                                 onClick={() => setShowingNavigationDropdown((previousState) => !previousState)}
                                 className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out"
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
index 02f2040cc..323599273 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
@@ -49,7 +49,7 @@ export default function ConfirmPassword() {
                 </div>
 
                 <div className="flex items-center justify-end mt-4">
-                    <PrimaryButton className="ml-4" disabled={processing}>
+                    <PrimaryButton className="ms-4" disabled={processing}>
                         Confirm
                     </PrimaryButton>
                 </div>
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx
index 0199301cf..b1bea0b36 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx
@@ -40,7 +40,7 @@ export default function ForgotPassword({ status }) {
                 <InputError message={errors.email} className="mt-2" />
 
                 <div className="flex items-center justify-end mt-4">
-                    <PrimaryButton className="ml-4" disabled={processing}>
+                    <PrimaryButton className="ms-4" disabled={processing}>
                         Email Password Reset Link
                     </PrimaryButton>
                 </div>
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx b/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
index 0a518224f..abe20907d 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
@@ -73,7 +73,7 @@ export default function Login({ status, canResetPassword }) {
                             checked={data.remember}
                             onChange={(e) => setData('remember', e.target.checked)}
                         />
-                        <span className="ml-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
+                        <span className="ms-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
                     </label>
                 </div>
 
@@ -87,7 +87,7 @@ export default function Login({ status, canResetPassword }) {
                         </Link>
                     )}
 
-                    <PrimaryButton className="ml-4" disabled={processing}>
+                    <PrimaryButton className="ms-4" disabled={processing}>
                         Log in
                     </PrimaryButton>
                 </div>
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx b/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
index 3f058a6e3..4d7726554 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
@@ -107,7 +107,7 @@ export default function Register() {
                         Already registered?
                     </Link>
 
-                    <PrimaryButton className="ml-4" disabled={processing}>
+                    <PrimaryButton className="ms-4" disabled={processing}>
                         Register
                     </PrimaryButton>
                 </div>
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
index f3c56bf05..0e4d329c8 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
@@ -80,7 +80,7 @@ export default function ResetPassword({ token, email }) {
                 </div>
 
                 <div className="flex items-center justify-end mt-4">
-                    <PrimaryButton className="ml-4" disabled={processing}>
+                    <PrimaryButton className="ms-4" disabled={processing}>
                         Reset Password
                     </PrimaryButton>
                 </div>
diff --git a/stubs/inertia-react/resources/js/Pages/Profile/Partials/DeleteUserForm.jsx b/stubs/inertia-react/resources/js/Pages/Profile/Partials/DeleteUserForm.jsx
index 50bcb3f7c..bbf4a4ea4 100644
--- a/stubs/inertia-react/resources/js/Pages/Profile/Partials/DeleteUserForm.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Profile/Partials/DeleteUserForm.jsx
@@ -88,7 +88,7 @@ export default function DeleteUserForm({ className = '' }) {
                     <div className="mt-6 flex justify-end">
                         <SecondaryButton onClick={closeModal}>Cancel</SecondaryButton>
 
-                        <DangerButton className="ml-3" disabled={processing}>
+                        <DangerButton className="ms-3" disabled={processing}>
                             Delete Account
                         </DangerButton>
                     </div>
diff --git a/stubs/inertia-react/resources/js/Pages/Welcome.jsx b/stubs/inertia-react/resources/js/Pages/Welcome.jsx
index 28b7d1836..64cf18c50 100644
--- a/stubs/inertia-react/resources/js/Pages/Welcome.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Welcome.jsx
@@ -5,7 +5,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
         <>
             <Head title="Welcome" />
             <div className="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-dots-darker bg-center bg-gray-100 dark:bg-dots-lighter dark:bg-gray-900 selection:bg-red-500 selection:text-white">
-                <div className="sm:fixed sm:top-0 sm:right-0 p-6 text-right">
+                <div className="sm:fixed sm:top-0 sm:right-0 p-6 text-end">
                     {auth.user ? (
                         <Link
                             href={route('dashboard')}
@@ -24,7 +24,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
 
                             <Link
                                 href={route('register')}
-                                className="ml-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
+                                className="ms-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
                             >
                                 Register
                             </Link>
@@ -291,7 +291,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
                     </div>
 
                     <div className="flex justify-center mt-16 px-6 sm:items-center sm:justify-between">
-                        <div className="text-center text-sm text-gray-500 dark:text-gray-400 sm:text-left">
+                        <div className="text-center text-sm text-gray-500 dark:text-gray-400 sm:text-start">
                             <div className="flex items-center gap-4">
                                 <a
                                     href="https://github.com/sponsors/taylorotwell"
@@ -302,7 +302,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
                                         fill="none"
                                         viewBox="0 0 24 24"
                                         strokeWidth="1.5"
-                                        className="-mt-px mr-1 w-5 h-5 stroke-gray-400 dark:stroke-gray-600 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-400"
+                                        className="-mt-px me-1 w-5 h-5 stroke-gray-400 dark:stroke-gray-600 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-400"
                                     >
                                         <path
                                             strokeLinecap="round"
@@ -315,7 +315,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
                             </div>
                         </div>
 
-                        <div className="ml-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:text-right sm:ml-0">
+                        <div className="ms-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:text-end sm:ms-0">
                             Laravel v{laravelVersion} (PHP v{phpVersion})
                         </div>
                     </div>
diff --git a/stubs/inertia-vue-ts/resources/js/Components/Dropdown.vue b/stubs/inertia-vue-ts/resources/js/Components/Dropdown.vue
index cd112b57a..1abc40948 100644
--- a/stubs/inertia-vue-ts/resources/js/Components/Dropdown.vue
+++ b/stubs/inertia-vue-ts/resources/js/Components/Dropdown.vue
@@ -31,9 +31,9 @@ const widthClass = computed(() => {
 
 const alignmentClasses = computed(() => {
     if (props.align === 'left') {
-        return 'origin-top-left left-0';
+        return 'ltr:origin-top-left rtl:origin-top-right start-0';
     } else if (props.align === 'right') {
-        return 'origin-top-right right-0';
+        return 'ltr:origin-top-right rtl:origin-top-left end-0';
     } else {
         return 'origin-top';
     }
diff --git a/stubs/inertia-vue-ts/resources/js/Components/DropdownLink.vue b/stubs/inertia-vue-ts/resources/js/Components/DropdownLink.vue
index 5d04fa3ce..107228229 100644
--- a/stubs/inertia-vue-ts/resources/js/Components/DropdownLink.vue
+++ b/stubs/inertia-vue-ts/resources/js/Components/DropdownLink.vue
@@ -9,7 +9,7 @@ defineProps<{
 <template>
     <Link
         :href="href"
-        class="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out"
+        class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out"
     >
         <slot />
     </Link>
diff --git a/stubs/inertia-vue-ts/resources/js/Components/ResponsiveNavLink.vue b/stubs/inertia-vue-ts/resources/js/Components/ResponsiveNavLink.vue
index 504a08d87..02f5f22c8 100644
--- a/stubs/inertia-vue-ts/resources/js/Components/ResponsiveNavLink.vue
+++ b/stubs/inertia-vue-ts/resources/js/Components/ResponsiveNavLink.vue
@@ -9,8 +9,8 @@ const props = defineProps<{
 
 const classes = computed(() =>
     props.active
-        ? 'block w-full pl-3 pr-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-left text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
-        : 'block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-left text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out'
+        ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
+        : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out'
 );
 </script>
 
diff --git a/stubs/inertia-vue-ts/resources/js/Layouts/AuthenticatedLayout.vue b/stubs/inertia-vue-ts/resources/js/Layouts/AuthenticatedLayout.vue
index 898657124..98c45ab25 100644
--- a/stubs/inertia-vue-ts/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/stubs/inertia-vue-ts/resources/js/Layouts/AuthenticatedLayout.vue
@@ -28,16 +28,16 @@ const showingNavigationDropdown = ref(false);
                             </div>
 
                             <!-- Navigation Links -->
-                            <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
+                            <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
                                 <NavLink :href="route('dashboard')" :active="route().current('dashboard')">
                                     Dashboard
                                 </NavLink>
                             </div>
                         </div>
 
-                        <div class="hidden sm:flex sm:items-center sm:ml-6">
+                        <div class="hidden sm:flex sm:items-center sm:ms-6">
                             <!-- Settings Dropdown -->
-                            <div class="ml-3 relative">
+                            <div class="ms-3 relative">
                                 <Dropdown align="right" width="48">
                                     <template #trigger>
                                         <span class="inline-flex rounded-md">
@@ -48,7 +48,7 @@ const showingNavigationDropdown = ref(false);
                                                 {{ $page.props.auth.user.name }}
 
                                                 <svg
-                                                    class="ml-2 -mr-0.5 h-4 w-4"
+                                                    class="ms-2 -me-0.5 h-4 w-4"
                                                     xmlns="http://www.w3.org/2000/svg"
                                                     viewBox="0 0 20 20"
                                                     fill="currentColor"
@@ -74,7 +74,7 @@ const showingNavigationDropdown = ref(false);
                         </div>
 
                         <!-- Hamburger -->
-                        <div class="-mr-2 flex items-center sm:hidden">
+                        <div class="-me-2 flex items-center sm:hidden">
                             <button
                                 @click="showingNavigationDropdown = !showingNavigationDropdown"
                                 class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out"
diff --git a/stubs/inertia-vue-ts/resources/js/Pages/Auth/ConfirmPassword.vue b/stubs/inertia-vue-ts/resources/js/Pages/Auth/ConfirmPassword.vue
index f7a904d38..b5cb00b71 100644
--- a/stubs/inertia-vue-ts/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/stubs/inertia-vue-ts/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -43,7 +43,7 @@ const submit = () => {
             </div>
 
             <div class="flex justify-end mt-4">
-                <PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     Confirm
                 </PrimaryButton>
             </div>
diff --git a/stubs/inertia-vue-ts/resources/js/Pages/Auth/Login.vue b/stubs/inertia-vue-ts/resources/js/Pages/Auth/Login.vue
index 362848348..608b73776 100644
--- a/stubs/inertia-vue-ts/resources/js/Pages/Auth/Login.vue
+++ b/stubs/inertia-vue-ts/resources/js/Pages/Auth/Login.vue
@@ -70,7 +70,7 @@ const submit = () => {
             <div class="block mt-4">
                 <label class="flex items-center">
                     <Checkbox name="remember" v-model:checked="form.remember" />
-                    <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
+                    <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
                 </label>
             </div>
 
@@ -83,7 +83,7 @@ const submit = () => {
                     Forgot your password?
                 </Link>
 
-                <PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     Log in
                 </PrimaryButton>
             </div>
diff --git a/stubs/inertia-vue-ts/resources/js/Pages/Auth/Register.vue b/stubs/inertia-vue-ts/resources/js/Pages/Auth/Register.vue
index c2f9d8815..2eb2994e6 100644
--- a/stubs/inertia-vue-ts/resources/js/Pages/Auth/Register.vue
+++ b/stubs/inertia-vue-ts/resources/js/Pages/Auth/Register.vue
@@ -96,7 +96,7 @@ const submit = () => {
                     Already registered?
                 </Link>
 
-                <PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     Register
                 </PrimaryButton>
             </div>
diff --git a/stubs/inertia-vue-ts/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/stubs/inertia-vue-ts/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
index 3e0828e89..769957ec6 100644
--- a/stubs/inertia-vue-ts/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
+++ b/stubs/inertia-vue-ts/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -83,7 +83,7 @@ const closeModal = () => {
                     <SecondaryButton @click="closeModal"> Cancel </SecondaryButton>
 
                     <DangerButton
-                        class="ml-3"
+                        class="ms-3"
                         :class="{ 'opacity-25': form.processing }"
                         :disabled="form.processing"
                         @click="deleteUser"
diff --git a/stubs/inertia-vue-ts/resources/js/Pages/Welcome.vue b/stubs/inertia-vue-ts/resources/js/Pages/Welcome.vue
index 7550aee74..9b7785d2e 100644
--- a/stubs/inertia-vue-ts/resources/js/Pages/Welcome.vue
+++ b/stubs/inertia-vue-ts/resources/js/Pages/Welcome.vue
@@ -15,7 +15,7 @@ defineProps<{
     <div
         class="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-dots-darker bg-center bg-gray-100 dark:bg-dots-lighter dark:bg-gray-900 selection:bg-red-500 selection:text-white"
     >
-        <div v-if="canLogin" class="sm:fixed sm:top-0 sm:right-0 p-6 text-right">
+        <div v-if="canLogin" class="sm:fixed sm:top-0 sm:right-0 p-6 text-end">
             <Link
                 v-if="$page.props.auth.user"
                 :href="route('dashboard')"
@@ -33,7 +33,7 @@ defineProps<{
                 <Link
                     v-if="canRegister"
                     :href="route('register')"
-                    class="ml-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
+                    class="ms-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
                     >Register</Link
                 >
             </template>
@@ -281,7 +281,7 @@ defineProps<{
             </div>
 
             <div class="flex justify-center mt-16 px-6 sm:items-center sm:justify-between">
-                <div class="text-center text-sm text-gray-500 dark:text-gray-400 sm:text-left">
+                <div class="text-center text-sm text-gray-500 dark:text-gray-400 sm:text-start">
                     <div class="flex items-center gap-4">
                         <a
                             href="https://github.com/sponsors/taylorotwell"
@@ -292,7 +292,7 @@ defineProps<{
                                 fill="none"
                                 viewBox="0 0 24 24"
                                 stroke-width="1.5"
-                                class="-mt-px mr-1 w-5 h-5 stroke-gray-400 dark:stroke-gray-600 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-400"
+                                class="-mt-px me-1 w-5 h-5 stroke-gray-400 dark:stroke-gray-600 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-400"
                             >
                                 <path
                                     stroke-linecap="round"
@@ -305,7 +305,7 @@ defineProps<{
                     </div>
                 </div>
 
-                <div class="ml-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:text-right sm:ml-0">
+                <div class="ms-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:text-end sm:ms-0">
                     Laravel v{{ laravelVersion }} (PHP v{{ phpVersion }})
                 </div>
             </div>
diff --git a/stubs/inertia-vue/resources/js/Components/Dropdown.vue b/stubs/inertia-vue/resources/js/Components/Dropdown.vue
index 53357ac08..730148b48 100644
--- a/stubs/inertia-vue/resources/js/Components/Dropdown.vue
+++ b/stubs/inertia-vue/resources/js/Components/Dropdown.vue
@@ -33,9 +33,9 @@ const widthClass = computed(() => {
 
 const alignmentClasses = computed(() => {
     if (props.align === 'left') {
-        return 'origin-top-left left-0';
+        return 'ltr:origin-top-left rtl:origin-top-right start-0';
     } else if (props.align === 'right') {
-        return 'origin-top-right right-0';
+        return 'ltr:origin-top-right rtl:origin-top-left end-0';
     } else {
         return 'origin-top';
     }
diff --git a/stubs/inertia-vue/resources/js/Components/DropdownLink.vue b/stubs/inertia-vue/resources/js/Components/DropdownLink.vue
index 45377637d..8502ee93b 100644
--- a/stubs/inertia-vue/resources/js/Components/DropdownLink.vue
+++ b/stubs/inertia-vue/resources/js/Components/DropdownLink.vue
@@ -12,7 +12,7 @@ defineProps({
 <template>
     <Link
         :href="href"
-        class="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out"
+        class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out"
     >
         <slot />
     </Link>
diff --git a/stubs/inertia-vue/resources/js/Components/ResponsiveNavLink.vue b/stubs/inertia-vue/resources/js/Components/ResponsiveNavLink.vue
index efa182ca5..71930399b 100644
--- a/stubs/inertia-vue/resources/js/Components/ResponsiveNavLink.vue
+++ b/stubs/inertia-vue/resources/js/Components/ResponsiveNavLink.vue
@@ -14,8 +14,8 @@ const props = defineProps({
 
 const classes = computed(() =>
     props.active
-        ? 'block w-full pl-3 pr-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-left text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
-        : 'block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-left text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out'
+        ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
+        : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out'
 );
 </script>
 
diff --git a/stubs/inertia-vue/resources/js/Layouts/AuthenticatedLayout.vue b/stubs/inertia-vue/resources/js/Layouts/AuthenticatedLayout.vue
index 6eaa4e768..e3e51001c 100644
--- a/stubs/inertia-vue/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/stubs/inertia-vue/resources/js/Layouts/AuthenticatedLayout.vue
@@ -28,16 +28,16 @@ const showingNavigationDropdown = ref(false);
                             </div>
 
                             <!-- Navigation Links -->
-                            <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
+                            <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
                                 <NavLink :href="route('dashboard')" :active="route().current('dashboard')">
                                     Dashboard
                                 </NavLink>
                             </div>
                         </div>
 
-                        <div class="hidden sm:flex sm:items-center sm:ml-6">
+                        <div class="hidden sm:flex sm:items-center sm:ms-6">
                             <!-- Settings Dropdown -->
-                            <div class="ml-3 relative">
+                            <div class="ms-3 relative">
                                 <Dropdown align="right" width="48">
                                     <template #trigger>
                                         <span class="inline-flex rounded-md">
@@ -48,7 +48,7 @@ const showingNavigationDropdown = ref(false);
                                                 {{ $page.props.auth.user.name }}
 
                                                 <svg
-                                                    class="ml-2 -mr-0.5 h-4 w-4"
+                                                    class="ms-2 -me-0.5 h-4 w-4"
                                                     xmlns="http://www.w3.org/2000/svg"
                                                     viewBox="0 0 20 20"
                                                     fill="currentColor"
@@ -74,7 +74,7 @@ const showingNavigationDropdown = ref(false);
                         </div>
 
                         <!-- Hamburger -->
-                        <div class="-mr-2 flex items-center sm:hidden">
+                        <div class="-me-2 flex items-center sm:hidden">
                             <button
                                 @click="showingNavigationDropdown = !showingNavigationDropdown"
                                 class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out"
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue
index 32d6623c7..d670672a3 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -41,7 +41,7 @@ const submit = () => {
             </div>
 
             <div class="flex justify-end mt-4">
-                <PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     Confirm
                 </PrimaryButton>
             </div>
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue b/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue
index 9774e7e89..356aa9874 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue
@@ -72,7 +72,7 @@ const submit = () => {
             <div class="block mt-4">
                 <label class="flex items-center">
                     <Checkbox name="remember" v-model:checked="form.remember" />
-                    <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
+                    <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
                 </label>
             </div>
 
@@ -85,7 +85,7 @@ const submit = () => {
                     Forgot your password?
                 </Link>
 
-                <PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     Log in
                 </PrimaryButton>
             </div>
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue b/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue
index befe857d5..76eddb590 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue
@@ -94,7 +94,7 @@ const submit = () => {
                     Already registered?
                 </Link>
 
-                <PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     Register
                 </PrimaryButton>
             </div>
diff --git a/stubs/inertia-vue/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/stubs/inertia-vue/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
index 89572ab29..9cd0be3c8 100644
--- a/stubs/inertia-vue/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -81,7 +81,7 @@ const closeModal = () => {
                     <SecondaryButton @click="closeModal"> Cancel </SecondaryButton>
 
                     <DangerButton
-                        class="ml-3"
+                        class="ms-3"
                         :class="{ 'opacity-25': form.processing }"
                         :disabled="form.processing"
                         @click="deleteUser"
diff --git a/stubs/inertia-vue/resources/js/Pages/Welcome.vue b/stubs/inertia-vue/resources/js/Pages/Welcome.vue
index 089cff233..11cf1dc87 100644
--- a/stubs/inertia-vue/resources/js/Pages/Welcome.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Welcome.vue
@@ -25,7 +25,7 @@ defineProps({
     <div
         class="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-dots-darker bg-center bg-gray-100 dark:bg-dots-lighter dark:bg-gray-900 selection:bg-red-500 selection:text-white"
     >
-        <div v-if="canLogin" class="sm:fixed sm:top-0 sm:right-0 p-6 text-right">
+        <div v-if="canLogin" class="sm:fixed sm:top-0 sm:right-0 p-6 text-end">
             <Link
                 v-if="$page.props.auth.user"
                 :href="route('dashboard')"
@@ -43,7 +43,7 @@ defineProps({
                 <Link
                     v-if="canRegister"
                     :href="route('register')"
-                    class="ml-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
+                    class="ms-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
                     >Register</Link
                 >
             </template>
@@ -291,7 +291,7 @@ defineProps({
             </div>
 
             <div class="flex justify-center mt-16 px-6 sm:items-center sm:justify-between">
-                <div class="text-center text-sm text-gray-500 dark:text-gray-400 sm:text-left">
+                <div class="text-center text-sm text-gray-500 dark:text-gray-400 sm:text-start">
                     <div class="flex items-center gap-4">
                         <a
                             href="https://github.com/sponsors/taylorotwell"
@@ -302,7 +302,7 @@ defineProps({
                                 fill="none"
                                 viewBox="0 0 24 24"
                                 stroke-width="1.5"
-                                class="-mt-px mr-1 w-5 h-5 stroke-gray-400 dark:stroke-gray-600 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-400"
+                                class="-mt-px me-1 w-5 h-5 stroke-gray-400 dark:stroke-gray-600 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-400"
                             >
                                 <path
                                     stroke-linecap="round"
@@ -315,7 +315,7 @@ defineProps({
                     </div>
                 </div>
 
-                <div class="ml-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:text-right sm:ml-0">
+                <div class="ms-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:text-end sm:ms-0">
                     Laravel v{{ laravelVersion }} (PHP v{{ phpVersion }})
                 </div>
             </div>
diff --git a/stubs/livewire-common/resources/views/welcome.blade.php b/stubs/livewire-common/resources/views/welcome.blade.php
index 73666adb5..ea3c336ea 100644
--- a/stubs/livewire-common/resources/views/welcome.blade.php
+++ b/stubs/livewire-common/resources/views/welcome.blade.php
@@ -107,10 +107,10 @@
                 </div>
 
                 <div class="flex justify-center mt-16 px-0 sm:items-center sm:justify-between">
-                    <div class="text-center text-sm text-gray-500 dark:text-gray-400 sm:text-left">
+                    <div class="text-center text-sm text-gray-500 dark:text-gray-400 sm:text-start">
                         <div class="flex items-center gap-4">
                             <a href="https://github.com/sponsors/taylorotwell" class="group inline-flex items-center hover:text-gray-700 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="-mt-px mr-1 w-5 h-5 stroke-gray-400 dark:stroke-gray-600 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-400">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="-mt-px me-1 w-5 h-5 stroke-gray-400 dark:stroke-gray-600 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-400">
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
                                 </svg>
                                 Sponsor
@@ -118,7 +118,7 @@
                         </div>
                     </div>
 
-                    <div class="ml-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:text-right sm:ml-0">
+                    <div class="ms-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:text-end sm:ms-0">
                         Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }})
                     </div>
                 </div>
diff --git a/stubs/livewire-functional/resources/views/livewire/layout/navigation.blade.php b/stubs/livewire-functional/resources/views/livewire/layout/navigation.blade.php
index 2f894d2cd..859ade8b5 100644
--- a/stubs/livewire-functional/resources/views/livewire/layout/navigation.blade.php
+++ b/stubs/livewire-functional/resources/views/livewire/layout/navigation.blade.php
@@ -23,7 +23,7 @@
                 </div>
 
                 <!-- Navigation Links -->
-                <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
+                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
                     <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
                         {{ __('Dashboard') }}
                     </x-nav-link>
@@ -31,13 +31,13 @@
             </div>
 
             <!-- Settings Dropdown -->
-            <div class="hidden sm:flex sm:items-center sm:ml-6">
+            <div class="hidden sm:flex sm:items-center sm:ms-6">
                 <x-dropdown align="right" width="48">
                     <x-slot name="trigger">
                         <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
                             <div x-data="{ name: '{{ auth()->user()->name }}' }" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
 
-                            <div class="ml-1">
+                            <div class="ms-1">
                                 <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                     <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                 </svg>
@@ -51,7 +51,7 @@
                         </x-dropdown-link>
 
                         <!-- Authentication -->
-                        <button wire:click="logout" class="w-full text-left">
+                        <button wire:click="logout" class="w-full text-start">
                             <x-dropdown-link>
                                 {{ __('Log Out') }}
                             </x-dropdown-link>
@@ -61,7 +61,7 @@
             </div>
 
             <!-- Hamburger -->
-            <div class="-mr-2 flex items-center sm:hidden">
+            <div class="-me-2 flex items-center sm:hidden">
                 <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
                     <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
@@ -93,7 +93,7 @@
                 </x-responsive-nav-link>
 
                 <!-- Authentication -->
-                <button wire:click="logout" class="w-full text-left">
+                <button wire:click="logout" class="w-full text-start">
                     <x-responsive-nav-link>
                         {{ __('Log Out') }}
                     </x-responsive-nav-link>
diff --git a/stubs/livewire-functional/resources/views/livewire/pages/auth/login.blade.php b/stubs/livewire-functional/resources/views/livewire/pages/auth/login.blade.php
index 7f4cc26bf..67adda4d1 100644
--- a/stubs/livewire-functional/resources/views/livewire/pages/auth/login.blade.php
+++ b/stubs/livewire-functional/resources/views/livewire/pages/auth/login.blade.php
@@ -54,7 +54,7 @@
         <div class="block mt-4">
             <label for="remember" class="inline-flex items-center">
                 <input wire:model="form.remember" id="remember" type="checkbox" class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="remember">
-                <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
+                <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
             </label>
         </div>
 
@@ -65,7 +65,7 @@
                 </a>
             @endif
 
-            <x-primary-button class="ml-3">
+            <x-primary-button class="ms-3">
                 {{ __('Log in') }}
             </x-primary-button>
         </div>
diff --git a/stubs/livewire-functional/resources/views/livewire/pages/auth/register.blade.php b/stubs/livewire-functional/resources/views/livewire/pages/auth/register.blade.php
index 869ec4b9e..d859f190c 100644
--- a/stubs/livewire-functional/resources/views/livewire/pages/auth/register.blade.php
+++ b/stubs/livewire-functional/resources/views/livewire/pages/auth/register.blade.php
@@ -84,7 +84,7 @@
                 {{ __('Already registered?') }}
             </a>
 
-            <x-primary-button class="ml-4">
+            <x-primary-button class="ms-4">
                 {{ __('Register') }}
             </x-primary-button>
         </div>
diff --git a/stubs/livewire-functional/resources/views/livewire/profile/delete-user-form.blade.php b/stubs/livewire-functional/resources/views/livewire/profile/delete-user-form.blade.php
index 4b3e04d5e..2bf04419e 100644
--- a/stubs/livewire-functional/resources/views/livewire/profile/delete-user-form.blade.php
+++ b/stubs/livewire-functional/resources/views/livewire/profile/delete-user-form.blade.php
@@ -67,7 +67,7 @@ class="mt-1 block w-3/4"
                     {{ __('Cancel') }}
                 </x-secondary-button>
 
-                <x-danger-button class="ml-3">
+                <x-danger-button class="ms-3">
                     {{ __('Delete Account') }}
                 </x-danger-button>
             </div>
diff --git a/stubs/livewire-functional/resources/views/livewire/profile/update-password-form.blade.php b/stubs/livewire-functional/resources/views/livewire/profile/update-password-form.blade.php
index 408abfbd1..4b94a1761 100644
--- a/stubs/livewire-functional/resources/views/livewire/profile/update-password-form.blade.php
+++ b/stubs/livewire-functional/resources/views/livewire/profile/update-password-form.blade.php
@@ -72,7 +72,7 @@
         <div class="flex items-center gap-4">
             <x-primary-button>{{ __('Save') }}</x-primary-button>
 
-            <x-action-message class="mr-3" on="password-updated">
+            <x-action-message class="me-3" on="password-updated">
                 {{ __('Saved.') }}
             </x-action-message>
         </div>
diff --git a/stubs/livewire-functional/resources/views/livewire/profile/update-profile-information-form.blade.php b/stubs/livewire-functional/resources/views/livewire/profile/update-profile-information-form.blade.php
index cad3a3816..1b95b66a7 100644
--- a/stubs/livewire-functional/resources/views/livewire/profile/update-profile-information-form.blade.php
+++ b/stubs/livewire-functional/resources/views/livewire/profile/update-profile-information-form.blade.php
@@ -96,7 +96,7 @@
         <div class="flex items-center gap-4">
             <x-primary-button>{{ __('Save') }}</x-primary-button>
 
-            <x-action-message class="mr-3" on="profile-updated">
+            <x-action-message class="me-3" on="profile-updated">
                 {{ __('Saved.') }}
             </x-action-message>
         </div>
diff --git a/stubs/livewire-functional/resources/views/livewire/welcome/navigation.blade.php b/stubs/livewire-functional/resources/views/livewire/welcome/navigation.blade.php
index 4ee37bbbe..f5c4ecc86 100644
--- a/stubs/livewire-functional/resources/views/livewire/welcome/navigation.blade.php
+++ b/stubs/livewire-functional/resources/views/livewire/welcome/navigation.blade.php
@@ -1,11 +1,11 @@
-<div class="sm:fixed sm:top-0 sm:right-0 p-6 text-right z-10">
+<div class="sm:fixed sm:top-0 sm:right-0 p-6 text-end z-10">
     @auth
         <a href="{{ url('/dashboard') }}" class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500" wire:navigate>Dashboard</a>
     @else
         <a href="{{ route('login') }}" class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500" wire:navigate>Log in</a>
 
         @if (Route::has('register'))
-            <a href="{{ route('register') }}" class="ml-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500" wire:navigate>Register</a>
+            <a href="{{ route('register') }}" class="ms-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500" wire:navigate>Register</a>
         @endif
     @endauth
 </div>
diff --git a/stubs/livewire/resources/views/livewire/layout/navigation.blade.php b/stubs/livewire/resources/views/livewire/layout/navigation.blade.php
index 8ea1628d5..330b4349b 100644
--- a/stubs/livewire/resources/views/livewire/layout/navigation.blade.php
+++ b/stubs/livewire/resources/views/livewire/layout/navigation.blade.php
@@ -30,7 +30,7 @@ public function logout(Logout $logout): void
                 </div>
 
                 <!-- Navigation Links -->
-                <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
+                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
                     <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
                         {{ __('Dashboard') }}
                     </x-nav-link>
@@ -38,13 +38,13 @@ public function logout(Logout $logout): void
             </div>
 
             <!-- Settings Dropdown -->
-            <div class="hidden sm:flex sm:items-center sm:ml-6">
+            <div class="hidden sm:flex sm:items-center sm:ms-6">
                 <x-dropdown align="right" width="48">
                     <x-slot name="trigger">
                         <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
                             <div x-data="{ name: '{{ auth()->user()->name }}' }" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
 
-                            <div class="ml-1">
+                            <div class="ms-1">
                                 <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                     <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                 </svg>
@@ -58,7 +58,7 @@ public function logout(Logout $logout): void
                         </x-dropdown-link>
 
                         <!-- Authentication -->
-                        <button wire:click="logout" class="w-full text-left">
+                        <button wire:click="logout" class="w-full text-start">
                             <x-dropdown-link>
                                 {{ __('Log Out') }}
                             </x-dropdown-link>
@@ -68,7 +68,7 @@ public function logout(Logout $logout): void
             </div>
 
             <!-- Hamburger -->
-            <div class="-mr-2 flex items-center sm:hidden">
+            <div class="-me-2 flex items-center sm:hidden">
                 <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
                     <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
@@ -100,7 +100,7 @@ public function logout(Logout $logout): void
                 </x-responsive-nav-link>
 
                 <!-- Authentication -->
-                <button wire:click="logout" class="w-full text-left">
+                <button wire:click="logout" class="w-full text-start">
                     <x-responsive-nav-link>
                         {{ __('Log Out') }}
                     </x-responsive-nav-link>
diff --git a/stubs/livewire/resources/views/livewire/pages/auth/login.blade.php b/stubs/livewire/resources/views/livewire/pages/auth/login.blade.php
index 5885d085c..5405896e2 100644
--- a/stubs/livewire/resources/views/livewire/pages/auth/login.blade.php
+++ b/stubs/livewire/resources/views/livewire/pages/auth/login.blade.php
@@ -56,7 +56,7 @@ public function login(): void
         <div class="block mt-4">
             <label for="remember" class="inline-flex items-center">
                 <input wire:model="form.remember" id="remember" type="checkbox" class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="remember">
-                <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
+                <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
             </label>
         </div>
 
@@ -67,7 +67,7 @@ public function login(): void
                 </a>
             @endif
 
-            <x-primary-button class="ml-3">
+            <x-primary-button class="ms-3">
                 {{ __('Log in') }}
             </x-primary-button>
         </div>
diff --git a/stubs/livewire/resources/views/livewire/pages/auth/register.blade.php b/stubs/livewire/resources/views/livewire/pages/auth/register.blade.php
index 179b644c0..c1a4249dc 100644
--- a/stubs/livewire/resources/views/livewire/pages/auth/register.blade.php
+++ b/stubs/livewire/resources/views/livewire/pages/auth/register.blade.php
@@ -81,7 +81,7 @@ public function register(): void
                 {{ __('Already registered?') }}
             </a>
 
-            <x-primary-button class="ml-4">
+            <x-primary-button class="ms-4">
                 {{ __('Register') }}
             </x-primary-button>
         </div>
diff --git a/stubs/livewire/resources/views/livewire/profile/delete-user-form.blade.php b/stubs/livewire/resources/views/livewire/profile/delete-user-form.blade.php
index 1d74a63dc..92c9579ea 100644
--- a/stubs/livewire/resources/views/livewire/profile/delete-user-form.blade.php
+++ b/stubs/livewire/resources/views/livewire/profile/delete-user-form.blade.php
@@ -70,7 +70,7 @@ class="mt-1 block w-3/4"
                     {{ __('Cancel') }}
                 </x-secondary-button>
 
-                <x-danger-button class="ml-3">
+                <x-danger-button class="ms-3">
                     {{ __('Delete Account') }}
                 </x-danger-button>
             </div>
diff --git a/stubs/livewire/resources/views/livewire/profile/update-password-form.blade.php b/stubs/livewire/resources/views/livewire/profile/update-password-form.blade.php
index 73846cc4a..f3a2045a5 100644
--- a/stubs/livewire/resources/views/livewire/profile/update-password-form.blade.php
+++ b/stubs/livewire/resources/views/livewire/profile/update-password-form.blade.php
@@ -71,7 +71,7 @@ public function updatePassword(): void
         <div class="flex items-center gap-4">
             <x-primary-button>{{ __('Save') }}</x-primary-button>
 
-            <x-action-message class="mr-3" on="password-updated">
+            <x-action-message class="me-3" on="password-updated">
                 {{ __('Saved.') }}
             </x-action-message>
         </div>
diff --git a/stubs/livewire/resources/views/livewire/profile/update-profile-information-form.blade.php b/stubs/livewire/resources/views/livewire/profile/update-profile-information-form.blade.php
index a5c45eca8..8e7434988 100644
--- a/stubs/livewire/resources/views/livewire/profile/update-profile-information-form.blade.php
+++ b/stubs/livewire/resources/views/livewire/profile/update-profile-information-form.blade.php
@@ -110,7 +110,7 @@ public function sendVerification(): void
         <div class="flex items-center gap-4">
             <x-primary-button>{{ __('Save') }}</x-primary-button>
 
-            <x-action-message class="mr-3" on="profile-updated">
+            <x-action-message class="me-3" on="profile-updated">
                 {{ __('Saved.') }}
             </x-action-message>
         </div>
diff --git a/stubs/livewire/resources/views/livewire/welcome/navigation.blade.php b/stubs/livewire/resources/views/livewire/welcome/navigation.blade.php
index 4ee37bbbe..f5c4ecc86 100644
--- a/stubs/livewire/resources/views/livewire/welcome/navigation.blade.php
+++ b/stubs/livewire/resources/views/livewire/welcome/navigation.blade.php
@@ -1,11 +1,11 @@
-<div class="sm:fixed sm:top-0 sm:right-0 p-6 text-right z-10">
+<div class="sm:fixed sm:top-0 sm:right-0 p-6 text-end z-10">
     @auth
         <a href="{{ url('/dashboard') }}" class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500" wire:navigate>Dashboard</a>
     @else
         <a href="{{ route('login') }}" class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500" wire:navigate>Log in</a>
 
         @if (Route::has('register'))
-            <a href="{{ route('register') }}" class="ml-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500" wire:navigate>Register</a>
+            <a href="{{ route('register') }}" class="ms-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500" wire:navigate>Register</a>
         @endif
     @endauth
 </div>