feat(components): improve RTL support (#2433)

Co-authored-by: Benjamin Canac <[email protected]>

playground-vue/src/app.vue

@@ -80,7 +80,7 @@ defineShortcuts({
 <template>
   <UApp :toaster="(appConfig.toaster as any)">
     <div class="h-screen w-screen overflow-hidden flex min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
-      <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-r border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
+      <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
       <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] overflow-x-auto" />
 
       <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4">

playground/app/app.vue

@@ -68,7 +68,7 @@ defineShortcuts({
 <template>
   <UApp :toaster="appConfig.toaster">
     <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
-      <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-r border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
+      <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
       <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] overflow-x-auto" />
 
       <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4">

playground/app/pages/components/badge.vue

@@ -19,7 +19,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
     <div class="flex items-center gap-2">
       <UBadge v-for="variant in variants" :key="variant" :label="upperFirst(variant)" :variant="variant" color="neutral" />
     </div>
-    <div class="flex items-center gap-2 ml-[-56px]">
+    <div class="flex items-center gap-2 ms-[-56px]">
       <UBadge v-for="size in sizes" :key="size" label="Badge" :size="size" />
     </div>
   </div>

playground/app/pages/components/button-group.vue

@@ -6,7 +6,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
 
 <template>
   <div class="flex flex-col gap-4 items-center">
-    <div class="flex flex-col gap-4 -ml-[110px]">
+    <div class="flex flex-col gap-4 -ms-[110px]">
       <UButtonGroup>
         <UButton>Button</UButton>
       </UButtonGroup>

playground/app/pages/components/button.vue

@@ -69,16 +69,16 @@ function onClick() {
         :variant="variant"
       />
     </div>
-    <div class="flex items-center gap-2 ml-[-129px]">
+    <div class="flex items-center gap-2 ms-[-129px]">
       <UButton v-for="size in sizes" :key="size" label="Button" :size="size" />
     </div>
-    <div class="flex items-center gap-2 ml-[-171px]">
+    <div class="flex items-center gap-2 ms-[-171px]">
       <UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" label="Button" :size="size" />
     </div>
-    <div class="flex items-center gap-2 ml-[-171px]">
+    <div class="flex items-center gap-2 ms-[-171px]">
       <UButton v-for="size in sizes" :key="size" :avatar="{ src: 'https://github.com/benjamincanac.png' }" label="Button" :size="size" />
     </div>
-    <div class="flex items-center gap-2 ml-[-159px]">
+    <div class="flex items-center gap-2 ms-[-159px]">
       <UButton
         v-for="size in sizes"
         :key="size"
@@ -88,7 +88,7 @@ function onClick() {
         :size="size"
       />
     </div>
-    <div class="flex items-center gap-2 ml-[-159px]">
+    <div class="flex items-center gap-2 ms-[-159px]">
       <UButton
         v-for="size in sizes"
         :key="size"
@@ -98,10 +98,10 @@ function onClick() {
         :size="size"
       />
     </div>
-    <div class="flex items-center gap-2 ml-[-68px]">
+    <div class="flex items-center gap-2 ms-[-68px]">
       <UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" :size="size" />
     </div>
-    <div class="flex items-center gap-2 ml-[-68px]">
+    <div class="flex items-center gap-2 ms-[-68px]">
       <UButton
         v-for="size in sizes"
         :key="size"

playground/app/pages/components/checkbox.vue

@@ -18,10 +18,10 @@ const checked = ref(true)
       <UCheckbox label="Required" required />
       <UCheckbox label="Disabled" disabled />
     </div>
-    <div class="flex items-center gap-4 mr-[-11px]">
+    <div class="flex items-center gap-4 me-[-11px]">
       <UCheckbox v-for="size in sizes" :key="size" label="Check me" :size="size" />
     </div>
-    <div class="flex items-center gap-4 mr-[-96px]">
+    <div class="flex items-center gap-4 me-[-96px]">
       <UCheckbox v-for="size in sizes" :key="size" label="Check me" description="This is a description" :size="size" />
     </div>
   </div>

playground/app/pages/components/form-field.vue

@@ -14,7 +14,7 @@ const feedbacks = [
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ml-[-38px]">
+    <div class="flex flex-col gap-4 ms-[-38px]">
       <div v-for="(feedback, count) in feedbacks" :key="count" class="flex items-center">
         <UFormField v-bind="feedback" label="Email" name="email">
           <UInput placeholder="[email protected]" />

playground/app/pages/components/kbd.vue

@@ -18,10 +18,10 @@ const kbdKeys = Object.keys(kbdKeysMap)
     <div class="flex items-center gap-1">
       <UKbd value="meta" variant="solid" />
     </div>
-    <div class="flex items-center gap-1 ml-[-216px]">
+    <div class="flex items-center gap-1 ms-[-216px]">
       <UKbd v-for="(kdbKey, index) in kbdKeys" :key="index" :value="kdbKey" />
     </div>
-    <div class="flex items-center gap-1 ml-[-22px]">
+    <div class="flex items-center gap-1 ms-[-22px]">
       <UKbd v-for="size in sizes" :key="size" value="meta" :size="size" />
     </div>
   </div>

playground/app/pages/components/navigation-menu.vue

@@ -99,7 +99,7 @@ const items = [
       :orientation="orientation"
       :highlight="highlight"
       :highlight-color="highlightColor"
-      :class="highlight && 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-[var(--ui-border)]'"
+      :class="highlight && 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-s border-[var(--ui-border)]'"
     />
   </div>
 </template>

playground/app/pages/components/radio-group.vue

@@ -23,20 +23,20 @@ const itemsWithDescription = [
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ml-[100px]">
+    <div class="flex flex-col gap-4 ms-[100px]">
       <URadioGroup :items="items" default-value="1" />
       <URadioGroup :items="items" color="neutral" default-value="1" />
       <URadioGroup :items="items" color="error" default-value="2" />
       <URadioGroup :items="literalOptions" />
       <URadioGroup :items="items" label="Disabled" disabled />
-      <URadioGroup :items="items" orientation="horizontal" class="ml-[-91px]" />
+      <URadioGroup :items="items" orientation="horizontal" class="ms-[-91px]" />
     </div>
 
-    <div class="flex items-center gap-4 ml-[34px]">
+    <div class="flex items-center gap-4 ms-[34px]">
       <URadioGroup v-for="size in sizes" :key="size" :size="size" :items="items" />
     </div>
 
-    <div class="flex items-center gap-4 ml-[74px]">
+    <div class="flex items-center gap-4 ms-[74px]">
       <URadioGroup v-for="size in sizes" :key="size" :size="size" :items="itemsWithDescription" />
     </div>
 

playground/app/pages/components/switch.vue

@@ -8,18 +8,18 @@ const checked = ref(true)
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ml-[-114px]">
+    <div class="flex flex-col gap-4 ms-[-114px]">
       <USwitch v-model="checked" label="Primary" />
       <USwitch color="neutral" label="Neutral" :default-value="true" />
       <USwitch color="error" label="Error" :default-value="true" />
       <USwitch label="Default value" :default-value="true" />
       <USwitch label="Required" required />
       <USwitch label="Disabled" disabled />
     </div>
-    <div class="flex items-center gap-4 ml-[-82px]">
+    <div class="flex items-center gap-4 ms-[-82px]">
       <USwitch v-for="size in sizes" :key="size" :size="size" label="Switch me" />
     </div>
-    <div class="flex items-center gap-4 ml-[-82px]">
+    <div class="flex items-center gap-4 ms-[-82px]">
       <USwitch
         v-for="size in sizes"
         :key="size"
@@ -29,7 +29,7 @@ const checked = ref(true)
         checked-icon="i-heroicons-check-20-solid"
       />
     </div>
-    <div class="flex items-center gap-4 ml-[-82px]">
+    <div class="flex items-center gap-4 ms-[-82px]">
       <USwitch
         v-for="size in sizes"
         :key="size"

playground/app/pages/components/table.vue

@@ -253,7 +253,7 @@ const columns: TableColumn<Payment>[] = [{
       icon: 'i-heroicons-ellipsis-vertical-20-solid',
       color: 'neutral',
       variant: 'ghost',
-      class: 'ml-auto'
+      class: 'ms-auto'
     })))
   }
 }]
@@ -306,7 +306,7 @@ onMounted(() => {
           color="neutral"
           variant="outline"
           trailing-icon="i-heroicons-chevron-down-20-solid"
-          class="ml-auto"
+          class="ms-auto"
         />
       </UDropdownMenu>
     </div>

playground/app/pages/components/tooltip.vue

@@ -4,7 +4,7 @@
       <UAvatar text="T" />
     </UTooltip>
 
-    <div class="flex items-center gap-2 ml-[-20px]">
+    <div class="flex items-center gap-2 ms-[-20px]">
       <UTooltip text="Left" :kbds="['meta', 'L']" :content="{ side: 'left' }" arrow>
         <UAvatar text="L" />
       </UTooltip>

src/theme/accordion.ts

@@ -8,7 +8,7 @@ export default {
     body: 'text-sm pb-3.5',
     leadingIcon: 'shrink-0 size-5',
     trailingIcon: 'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200',
-    label: 'text-left break-words'
+    label: 'text-start break-words'
   },
   variants: {
     disabled: {

src/theme/carousel.ts

@@ -22,10 +22,10 @@ export default (options: Required<ModuleOptions>) => ({
         next: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90'
       },
       horizontal: {
-        container: 'flex-row -ml-4',
-        item: 'pl-4',
-        prev: '-left-12 top-1/2 -translate-y-1/2',
-        next: '-right-12 top-1/2 -translate-y-1/2'
+        container: 'flex-row -ms-4',
+        item: 'ps-4',
+        prev: '-start-12 top-1/2 -translate-y-1/2',
+        next: '-end-12 top-1/2 -translate-y-1/2'
       }
     },
     active: {

src/theme/command-palette.ts

@@ -21,7 +21,7 @@ export default (options: Required<ModuleOptions>) => ({
     itemTrailingHighlightedIcon: 'shrink-0 size-5 text-[var(--ui-text-dimmed)] hidden group-data-highlighted:inline-flex',
     itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
     itemTrailingKbdsSize: 'md',
-    itemLabel: 'truncate space-x-1',
+    itemLabel: 'truncate space-x-1 rtl:space-x-reverse',
     itemLabelBase: 'text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]',
     itemLabelPrefix: 'text-[var(--ui-text)]',
     itemLabelSuffix: 'text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]'

src/theme/input.ts

@@ -17,40 +17,40 @@ export default (options: Required<ModuleOptions>) => ({
     size: {
       xs: {
         base: 'px-2 py-1 text-xs gap-1',
-        leading: 'pl-2',
-        trailing: 'pr-2',
+        leading: 'ps-2',
+        trailing: 'pe-2',
         leadingIcon: 'size-4',
         leadingAvatarSize: '3xs',
         trailingIcon: 'size-4'
       },
       sm: {
         base: 'px-2.5 py-1.5 text-xs gap-1.5',
-        leading: 'pl-2.5',
-        trailing: 'pr-2.5',
+        leading: 'ps-2.5',
+        trailing: 'pe-2.5',
         leadingIcon: 'size-4',
         leadingAvatarSize: '3xs',
         trailingIcon: 'size-4'
       },
       md: {
         base: 'px-2.5 py-1.5 text-sm gap-1.5',
-        leading: 'pl-2.5',
-        trailing: 'pr-2.5',
+        leading: 'ps-2.5',
+        trailing: 'pe-2.5',
         leadingIcon: 'size-5',
         leadingAvatarSize: '2xs',
         trailingIcon: 'size-5'
       },
       lg: {
         base: 'px-3 py-2 text-sm gap-2',
-        leading: 'pl-3',
-        trailing: 'pr-3',
+        leading: 'ps-3',
+        trailing: 'pe-3',
         leadingIcon: 'size-5',
         leadingAvatarSize: '2xs',
         trailingIcon: 'size-5'
       },
       xl: {
         base: 'px-3 py-2 text-base gap-2',
-        leading: 'pl-3',
-        trailing: 'pr-3',
+        leading: 'ps-3',
+        trailing: 'pe-3',
         leadingIcon: 'size-6',
         leadingAvatarSize: 'xs',
         trailingIcon: 'size-6'
@@ -80,7 +80,7 @@ export default (options: Required<ModuleOptions>) => ({
       true: ''
     },
     type: {
-      file: 'file:mr-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none'
+      file: 'file:me-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none'
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
@@ -102,43 +102,43 @@ export default (options: Required<ModuleOptions>) => ({
   }, {
     leading: true,
     size: 'xs',
-    class: 'pl-7'
+    class: 'ps-7'
   }, {
     leading: true,
     size: 'sm',
-    class: 'pl-8'
+    class: 'ps-8'
   }, {
     leading: true,
     size: 'md',
-    class: 'pl-9'
+    class: 'ps-9'
   }, {
     leading: true,
     size: 'lg',
-    class: 'pl-10'
+    class: 'ps-10'
   }, {
     leading: true,
     size: 'xl',
-    class: 'pl-11'
+    class: 'ps-11'
   }, {
     trailing: true,
     size: 'xs',
-    class: 'pr-7'
+    class: 'pe-7'
   }, {
     trailing: true,
     size: 'sm',
-    class: 'pr-8'
+    class: 'pe-8'
   }, {
     trailing: true,
     size: 'md',
-    class: 'pr-9'
+    class: 'pe-9'
   }, {
     trailing: true,
     size: 'lg',
-    class: 'pr-10'
+    class: 'pe-10'
   }, {
     trailing: true,
     size: 'xl',
-    class: 'pr-11'
+    class: 'pe-11'
   }, {
     loading: true,
     leading: true,

src/theme/modal.ts

@@ -7,7 +7,7 @@ export default {
     footer: 'flex items-center gap-1.5 p-4 sm:px-6',
     title: 'text-[var(--ui-text-highlighted)] font-semibold',
     description: 'mt-1 text-[var(--ui-text-muted)] text-sm',
-    close: 'absolute top-4 right-4'
+    close: 'absolute top-4 end-4'
   },
   variants: {
     transition: {

src/theme/navigation-menu.ts

@@ -17,7 +17,7 @@ export default (options: Required<ModuleOptions>) => ({
     linkLabelExternalIcon: 'inline-block size-3 align-top text-[var(--ui-text-dimmed)]',
     childList: '',
     childItem: '',
-    childLink: 'group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-left',
+    childLink: 'group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start',
     childLinkWrapper: 'flex flex-col items-start',
     childLinkIcon: 'size-5 shrink-0',
     childLinkLabel: 'font-semibold text-sm relative inline-flex',
@@ -61,8 +61,8 @@ export default (options: Required<ModuleOptions>) => ({
       vertical: {
         root: 'flex-col',
         link: 'flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0',
-        childList: 'ml-5 border-l border-[var(--ui-border)]',
-        childItem: 'pl-1.5 -ml-px'
+        childList: 'ms-5 border-s border-[var(--ui-border)]',
+        childItem: 'ps-1.5 -ms-px'
       }
     },
     active: {
@@ -97,8 +97,8 @@ export default (options: Required<ModuleOptions>) => ({
     highlight: true,
     orientation: 'vertical',
     class: {
-      item: 'px-1.5 -ml-px',
-      link: 'after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full'
+      item: 'px-1.5 -ms-px',
+      link: 'after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full'
     }
   }, {
     disabled: false,