feat(components): improve RTL support

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>

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: '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,

src/theme/slideover.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: {
     side: {

src/theme/switch.ts

@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
     root: 'relative flex items-start',
     base: ['inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg)] data-[state=unchecked]:bg-[var(--ui-bg-accented)]', options.theme.transitions && 'transition-colors duration-200'],
     container: 'flex items-center',
-    thumb: 'group pointer-events-none block rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center',
+    thumb: 'group pointer-events-none block rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center',
     icon: ['absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12', options.theme.transitions && 'transition-[color,opacity] duration-200'],
     wrapper: 'ms-2',
     label: 'block font-medium text-[var(--ui-text)]',
@@ -26,31 +26,31 @@ export default (options: Required<ModuleOptions>) => ({
       xs: {
         base: 'w-7',
         container: 'h-4',
-        thumb: 'size-3 data-[state=checked]:translate-x-3',
+        thumb: 'size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3',
         wrapper: 'text-xs'
       },
       sm: {
         base: 'w-8',
         container: 'h-4',
-        thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
+        thumb: 'size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5',
         wrapper: 'text-xs'
       },
       md: {
         base: 'w-9',
         container: 'h-5',
-        thumb: 'size-4 data-[state=checked]:translate-x-4',
+        thumb: 'size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4',
         wrapper: 'text-sm'
       },
       lg: {
         base: 'w-10',
         container: 'h-5',
-        thumb: 'size-4.5 data-[state=checked]:translate-x-4.5',
+        thumb: 'size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5',
         wrapper: 'text-sm'
       },
       xl: {
         base: 'w-11',
         container: 'h-6',
-        thumb: 'size-5 data-[state=checked]:translate-x-5',
+        thumb: 'size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5',
         wrapper: 'text-base'
       }
     },

src/theme/tabs.ts

@@ -92,8 +92,8 @@ export default (options: Required<ModuleOptions>) => ({
     orientation: 'vertical',
     variant: 'link',
     class: {
-      list: 'border-l',
-      indicator: '-left-px w-px'
+      list: 'border-s',
+      indicator: '-start-px w-px'
     }
   }, ...(options.theme.colors || []).map((color: string) => ({
     color,

src/theme/tooltip.ts

@@ -3,7 +3,7 @@ export default {
     content: 'flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow rounded-[var(--ui-radius)] ring ring-[var(--ui-border)] h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
     arrow: 'fill-[var(--ui-border)]',
     text: 'truncate',
-    kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5`,
+    kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:me-0.5`,
     kbdsSize: 'sm'
   }
 }

test/components/Modal.spec.ts

@@ -16,7 +16,7 @@ describe('Modal', () => {
     ['without close', { props: { ...props, close: false, title: 'Title', description: 'Description' } }],
     ['with closeIcon', { props: { ...props, closeIcon: 'i-heroicons-trash' } }],
     ['with class', { props: { ...props, class: 'bg-[var(--ui-bg-elevated)]' } }],
-    ['with ui', { props: { ...props, ui: { close: 'right-2' } } }],
+    ['with ui', { props: { ...props, ui: { close: 'end-2' } } }],
     // Slots
     ['with default slot', { props, slots: { default: () => 'Default slot' } }],
     ['with content slot', { props, slots: { content: () => 'Content slot' } }],

test/components/Slideover.spec.ts

@@ -18,7 +18,7 @@ describe('Slideover', () => {
     ['without close', { props: { ...props, close: false, title: 'Title', description: 'Description' } }],
     ['with closeIcon', { props: { ...props, closeIcon: 'i-heroicons-trash' } }],
     ['with class', { props: { ...props, class: 'bg-[var(--ui-bg-elevated)]' } }],
-    ['with ui', { props: { ...props, ui: { close: 'right-2' } } }],
+    ['with ui', { props: { ...props, ui: { close: 'end-2' } } }],
     // Slots
     ['with default slot', { props, slots: { default: () => 'Default slot' } }],
     ['with content slot', { props, slots: { content: () => 'Content slot' } }],