Fixed sizes for toggle components

src/components/FwbToggle/composables/useToggleClasses.ts

@@ -3,12 +3,12 @@ import type { InputSize } from '@/components/FwbInput/types'
 
 // Toggle Background
 const defaultLabelClasses = 'w-fit relative inline-flex items-center cursor-pointer'
-const defaultToggleBackgroundClasses = 'bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[""] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600'
+const defaultToggleBackgroundClasses = 'relative bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[""] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600 peer-checked:bg-blue-600'
 const defaultToggleBallClasses = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300'
 const toggleSizeClasses: Record<InputSize, string> = {
-  lg: 'w-14 h-7 after:top-0.5 after:left-[4px] after:h-6 after:w-6',
-  md: 'w-11 h-6 after:top-[2px] after:left-[2px] after:h-5 after:w-5',
-  sm: 'w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4',
+  lg: 'w-14 h-7 after:top-0.5 after:start-[4px] after:h-6 after:w-6',
+  md: 'w-11 h-6 after:top-[2px] after:start-[2px] after:h-5 after:w-5',
+  sm: 'w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4',
 }
 const toggleColorClasses: Record<string, string> = {
   red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',