maglevcms 3.0.3 → 3.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 91a5ea2feecec6351e3e7042be72418ce8e95374e50108d6a798b2f179d47ee4
-  data.tar.gz: c674bf2fb233c7aec70823875c804e7f7741df83f809a09cc670ac13eedb9d74
+  metadata.gz: 7b3c21664099214944c91eb07e3aa563b6043e9ab1e7af4d6a0443b0d83972a9
+  data.tar.gz: b2618b80cdec94c2b2574ce61845c783a0593748a1498c097107213d80c60677
 SHA512:
-  metadata.gz: 2f3301ae182676801e8fc2baecbc6774f1c3e10e072fa509a2272185ff6b62aa64c7cdd68a92426679b6545c14a40f376e0be3f038df1cb18d78cd6e55747da1
-  data.tar.gz: a1dce55e8a53f13e394b82f548a6726a06b2a3babe65e6e645d1ee5c00040022d10243f75c9eede599fe957e4b2bb0aafe5fd8a9becc32dfa8b35a3f4767a873
+  metadata.gz: 7352a60fca5460da127d428cfc52cc430d887cb794879238e8a34a545e67a4a39c2fd002dd9de79a71e48f6e4e434194ffc2309e3c4b0a3c7f64084c2226d324
+  data.tar.gz: 16a58a3770b2be147e894d5630837ee5c4cc6de0cfaa4d81b1cd601a887f2d3b81f2f67d01821ef453b252287a8abbd83d801df59a55059545f8650ca9dc61ee

data/app/assets/builds/maglev/tailwind.css

@@ -301,6 +301,27 @@
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
+  .-start-1 {
+    inset-inline-start: calc(var(--spacing) * -1);
+  }
+  .start-0 {
+    inset-inline-start: calc(var(--spacing) * 0);
+  }
+  .start-3 {
+    inset-inline-start: calc(var(--spacing) * 3);
+  }
+  .start-16 {
+    inset-inline-start: calc(var(--spacing) * 16);
+  }
+  .-end-2 {
+    inset-inline-end: calc(var(--spacing) * -2);
+  }
+  .end-0 {
+    inset-inline-end: calc(var(--spacing) * 0);
+  }
+  .end-3 {
+    inset-inline-end: calc(var(--spacing) * 3);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -319,15 +340,9 @@
   .top-16 {
     top: calc(var(--spacing) * 16);
   }
-  .-right-2 {
-    right: calc(var(--spacing) * -2);
-  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
-  .right-3 {
-    right: calc(var(--spacing) * 3);
-  }
   .-bottom-0\.25 {
     bottom: calc(var(--spacing) * -0.25);
   }
@@ -337,18 +352,9 @@
   .bottom-0\.5 {
     bottom: calc(var(--spacing) * 0.5);
   }
-  .-left-1 {
-    left: calc(var(--spacing) * -1);
-  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
-  .left-3 {
-    left: calc(var(--spacing) * 3);
-  }
-  .left-16 {
-    left: calc(var(--spacing) * 16);
-  }
   .isolate {
     isolation: isolate;
   }
@@ -439,6 +445,27 @@
   .my-20 {
     margin-block: calc(var(--spacing) * 20);
   }
+  .ms-1 {
+    margin-inline-start: calc(var(--spacing) * 1);
+  }
+  .ms-2 {
+    margin-inline-start: calc(var(--spacing) * 2);
+  }
+  .ms-3 {
+    margin-inline-start: calc(var(--spacing) * 3);
+  }
+  .ms-5 {
+    margin-inline-start: calc(var(--spacing) * 5);
+  }
+  .ms-auto {
+    margin-inline-start: auto;
+  }
+  .me-2 {
+    margin-inline-end: calc(var(--spacing) * 2);
+  }
+  .me-3 {
+    margin-inline-end: calc(var(--spacing) * 3);
+  }
   .-mt-0\.5 {
     margin-top: calc(var(--spacing) * -0.5);
   }
@@ -475,12 +502,6 @@
   .-mr-1 {
     margin-right: calc(var(--spacing) * -1);
   }
-  .mr-2 {
-    margin-right: calc(var(--spacing) * 2);
-  }
-  .mr-3 {
-    margin-right: calc(var(--spacing) * 3);
-  }
   .-mb-5 {
     margin-bottom: calc(var(--spacing) * -5);
   }
@@ -514,18 +535,6 @@
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
-  .ml-2 {
-    margin-left: calc(var(--spacing) * 2);
-  }
-  .ml-3 {
-    margin-left: calc(var(--spacing) * 3);
-  }
-  .ml-5 {
-    margin-left: calc(var(--spacing) * 5);
-  }
-  .ml-auto {
-    margin-left: auto;
-  }
   .box-content {
     box-sizing: content-box;
   }
@@ -911,6 +920,9 @@
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -970,34 +982,6 @@
   .gap-x-8 {
     column-gap: calc(var(--spacing) * 8);
   }
-  .space-x-0\.5 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-1\.5 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
   .space-x-4 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1077,13 +1061,13 @@
   .rounded-xs {
     border-radius: var(--radius-xs);
   }
-  .rounded-l-2xl {
-    border-top-left-radius: var(--radius-2xl);
-    border-bottom-left-radius: var(--radius-2xl);
+  .rounded-s-2xl {
+    border-start-start-radius: var(--radius-2xl);
+    border-end-start-radius: var(--radius-2xl);
   }
-  .rounded-r-2xl {
-    border-top-right-radius: var(--radius-2xl);
-    border-bottom-right-radius: var(--radius-2xl);
+  .rounded-e-2xl {
+    border-start-end-radius: var(--radius-2xl);
+    border-end-end-radius: var(--radius-2xl);
   }
   .rounded-b {
     border-bottom-right-radius: 0.25rem;
@@ -1105,6 +1089,10 @@
     border-style: var(--tw-border-style);
     border-width: 4px;
   }
+  .border-e {
+    border-inline-end-style: var(--tw-border-style);
+    border-inline-end-width: 1px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1117,10 +1105,6 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 4px;
   }
-  .border-r {
-    border-right-style: var(--tw-border-style);
-    border-right-width: 1px;
-  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -1409,6 +1393,24 @@
   .py-24 {
     padding-block: calc(var(--spacing) * 24);
   }
+  .ps-2 {
+    padding-inline-start: calc(var(--spacing) * 2);
+  }
+  .ps-3 {
+    padding-inline-start: calc(var(--spacing) * 3);
+  }
+  .ps-11 {
+    padding-inline-start: calc(var(--spacing) * 11);
+  }
+  .pe-4 {
+    padding-inline-end: calc(var(--spacing) * 4);
+  }
+  .pe-8 {
+    padding-inline-end: calc(var(--spacing) * 8);
+  }
+  .pe-9 {
+    padding-inline-end: calc(var(--spacing) * 9);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -1424,15 +1426,6 @@
   .pt-32 {
     padding-top: calc(var(--spacing) * 32);
   }
-  .pr-4 {
-    padding-right: calc(var(--spacing) * 4);
-  }
-  .pr-8 {
-    padding-right: calc(var(--spacing) * 8);
-  }
-  .pr-9 {
-    padding-right: calc(var(--spacing) * 9);
-  }
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
@@ -1454,21 +1447,15 @@
   .pb-16 {
     padding-bottom: calc(var(--spacing) * 16);
   }
-  .pl-2 {
-    padding-left: calc(var(--spacing) * 2);
-  }
-  .pl-3 {
-    padding-left: calc(var(--spacing) * 3);
-  }
-  .pl-11 {
-    padding-left: calc(var(--spacing) * 11);
-  }
   .text-center {
     text-align: center;
   }
   .text-left {
     text-align: left;
   }
+  .text-start {
+    text-align: start;
+  }
   .font-nunito {
     font-family: var(--font-nunito);
   }
@@ -1867,14 +1854,14 @@
       width: calc(1024px * var(--page-preview-scale-ratio));
     }
   }
-  .group-data-\[expanded-page-layout\]\/page-layout\:left-104 {
+  .group-data-\[expanded-page-layout\]\/page-layout\:start-104 {
     &:is(:where(.group\/page-layout)[data-expanded-page-layout] *) {
-      left: calc(var(--spacing) * 104);
+      inset-inline-start: calc(var(--spacing) * 104);
     }
   }
-  .group-data-\[expanded-page-layout\]\/page-layout\:pl-88 {
+  .group-data-\[expanded-page-layout\]\/page-layout\:ps-88 {
     &:is(:where(.group\/page-layout)[data-expanded-page-layout] *) {
-      padding-left: calc(var(--spacing) * 88);
+      padding-inline-start: calc(var(--spacing) * 88);
     }
   }
   .group-data-\[focus\]\:text-white {
@@ -2046,16 +2033,16 @@
       display: flex;
     }
   }
-  .first\:rounded-l-sm {
+  .first\:rounded-s-sm {
     &:first-child {
-      border-top-left-radius: var(--radius-sm);
-      border-bottom-left-radius: var(--radius-sm);
+      border-start-start-radius: var(--radius-sm);
+      border-end-start-radius: var(--radius-sm);
     }
   }
-  .last\:rounded-r-sm {
+  .last\:rounded-e-sm {
     &:last-child {
-      border-top-right-radius: var(--radius-sm);
-      border-bottom-right-radius: var(--radius-sm);
+      border-start-end-radius: var(--radius-sm);
+      border-end-end-radius: var(--radius-sm);
     }
   }
   .hover\:z-10 {
@@ -2783,6 +2770,37 @@
       padding-inline: calc(var(--spacing) * 16);
     }
   }
+  .rtl\:origin-top-right {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      transform-origin: 100% 0;
+    }
+  }
+  .rtl\:-translate-x-\[50\%\] {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      --tw-translate-x: calc(50% * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .rtl\:translate-x-\[50\%\] {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      --tw-translate-x: 50%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .rtl\:-scale-x-100 {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      --tw-scale-x: calc(100% * -1);
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .rtl\:group-has-checked\:-translate-x-4 {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      &:is(:where(.group):has(*:checked) *) {
+        --tw-translate-x: calc(var(--spacing) * -4);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .dark\:text-editor-primary {
     @media (prefers-color-scheme: dark) {
       color: var(--color-editor-primary);
@@ -2881,16 +2899,16 @@
       }
     }
   }
-  .\[\&\>\*\:first-child\]\:rounded-l-sm {
+  .\[\&\>\*\:first-child\]\:rounded-s-sm {
     &>*:first-child {
-      border-top-left-radius: var(--radius-sm);
-      border-bottom-left-radius: var(--radius-sm);
+      border-start-start-radius: var(--radius-sm);
+      border-end-start-radius: var(--radius-sm);
     }
   }
-  .\[\&\>\*\:last-child\]\:rounded-r-sm {
+  .\[\&\>\*\:last-child\]\:rounded-e-sm {
     &>*:last-child {
-      border-top-right-radius: var(--radius-sm);
-      border-bottom-right-radius: var(--radius-sm);
+      border-start-end-radius: var(--radius-sm);
+      border-end-end-radius: var(--radius-sm);
     }
   }
 }

data/app/assets/stylesheets/maglev/application.css

@@ -32,6 +32,27 @@
   }
 }
 
+/* RTL: the page-layout panel lives on the right, so it slides off to / in from the right edge */
+@keyframes slide-out-rtl {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slide-in-rtl {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0%);
+  }
+}
+
 html[data-turbo-visit-direction="forward"]::view-transition-old(page-layout),
 html[data-turbo-visit-direction="back"]::view-transition-old(page-layout),
 html[data-turbo-visit-direction="forward"]::view-transition-old(expanded-page-layout),
@@ -46,6 +67,20 @@ html[data-turbo-visit-direction="back"]::view-transition-new(expanded-page-layou
   animation: 0.2s cubic-bezier(0.55, 0, 0.1, 1) both slide-in;
 }
 
+html[dir="rtl"][data-turbo-visit-direction="forward"]::view-transition-old(page-layout),
+html[dir="rtl"][data-turbo-visit-direction="back"]::view-transition-old(page-layout),
+html[dir="rtl"][data-turbo-visit-direction="forward"]::view-transition-old(expanded-page-layout),
+html[dir="rtl"][data-turbo-visit-direction="back"]::view-transition-old(expanded-page-layout) {
+  animation-name: slide-out-rtl;
+}
+
+html[dir="rtl"][data-turbo-visit-direction="forward"]::view-transition-new(page-layout),
+html[dir="rtl"][data-turbo-visit-direction="back"]::view-transition-new(page-layout),
+html[dir="rtl"][data-turbo-visit-direction="forward"]::view-transition-new(expanded-page-layout),
+html[dir="rtl"][data-turbo-visit-direction="back"]::view-transition-new(expanded-page-layout) {
+  animation-name: slide-in-rtl;
+}
+
 html[data-page-layout-vt-pair="already-present"]::view-transition-old(page-layout),
 html[data-page-layout-vt-pair="already-present"]::view-transition-old(expanded-page-layout),
 html[data-page-layout-vt-pair="already-present"]::view-transition-new(page-layout),
@@ -61,8 +96,12 @@ html[data-page-layout-vt-pair="already-present"]::view-transition-new(expanded-p
   z-index: 30;
 }
 
-::view-transition-group(page-preview) { 
-  transform-origin: right center; 
+::view-transition-group(page-preview) {
+  transform-origin: right center;
+}
+
+html[dir="rtl"]::view-transition-group(page-preview) {
+  transform-origin: left center;
 }
 
 #page-layout[data-not-expanded] {
@@ -95,7 +134,12 @@ html[data-page-layout-vt-pair="already-present"]::view-transition-new(expanded-p
 
 /* couldn't get this done in Tailwind custom classes */
 #page-preview {
-  transform: translateX(var(--page-preview-transform-x, 0px)) scale(var(--page-preview-scale-ratio, 1)); 
+  transform: translateX(var(--page-preview-transform-x, 0px)) scale(var(--page-preview-scale-ratio, 1));
   height: calc(100% * 1 / 1 / var(--page-preview-scale-ratio, 1));
   width: var(--page-preview-width, 100%);
+}
+
+/* RTL: the expanded panel is on the right, so the canvas must shift the opposite way to clear it */
+html[dir="rtl"] #page-preview {
+  transform: translateX(calc(-1 * var(--page-preview-transform-x, 0px))) scale(var(--page-preview-scale-ratio, 1));
 }

data/app/components/maglev/uikit/app_layout/sidebar_component.html.erb

@@ -1,6 +1,6 @@
 <aside 
   id="app-layout-sidebar"
-  class="w-16 flex-shrink-0 flex content-center h-full border-r border-gray-200 relative z-20 bg-white"
+  class="w-16 flex-shrink-0 flex content-center h-full border-e border-gray-200 relative z-20 bg-white"
 >
   <nav class="flex h-full w-16 flex-col justify-between py-2">
     <ol class="flex flex-col gap-1 px-2">

data/app/components/maglev/uikit/app_layout/topbar/logo_component.html.erb

@@ -1,3 +1,3 @@
-<%= link_to root_path, class: "w-16 h-full flex justify-center items-center border-r border-gray-200 shrink-0", data: { controller: 'prevent-same-path' } do %>
+<%= link_to root_path, class: "w-16 h-full flex justify-center items-center border-e border-gray-200 shrink-0", data: { controller: 'prevent-same-path' } do %>
   <%= image_tag logo_url, class: "w-2/4", id: 'editor-logo-image', data: { turbo_permanent: true } %>
 <% end %>

data/app/components/maglev/uikit/app_layout/topbar/page_info_component.html.erb

@@ -5,7 +5,7 @@
     <div class="flex flex-col leading-none overflow-hidden">
       <div class="flex items-center overflow-hidden">
         <%= helpers.maglev_page_icon(page, size: '1.1rem', wrapper_class_names: 'text-gray-900 shrink-0') %>
-        <div class="text-base font-semibold truncate ml-1 mr-3 min-w-0">
+        <div class="text-base font-semibold truncate ms-1 me-3 min-w-0">
           <%= page.title.presence || page.default_title %>
         </div>
 
@@ -16,7 +16,7 @@
         %>
       </div>
 
-      <div class="text-xs text-gray-500 flex items-center space-x-1 overflow-hidden">
+      <div class="text-xs text-gray-500 flex items-center gap-1 overflow-hidden">
         <p class="truncate text-gray-700 min-w-0">
           <span class="text-gray-900 font-semibold">/</span><%= page_path %>
         </p>

data/app/components/maglev/uikit/breadcrumbs/breadcrumbs_component.html.erb

@@ -1,9 +1,9 @@
 <nav class="flex justify-between">
-  <ol class="inline-flex items-center space-x-0.5 text-xs text-gray-500">
+  <ol class="inline-flex items-center gap-0.5 text-xs text-gray-500">
     <% breadcrumbs.each_with_index do |breadcrumb, index| %>
       <%= breadcrumb %>
       <% if index < breadcrumbs.size - 1 %>
-        <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1rem', class_names: 'text-gray-400') %>
+        <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1rem', class_names: 'text-gray-400 rtl:-scale-x-100') %>
       <% end %>
     <% end %>
   </ol>

data/app/components/maglev/uikit/breadcrumbs/link_component.html.erb

@@ -1,12 +1,12 @@
 <li class="flex items-center h-full">
   <% if url? %>
-    <%= link_to url, class: 'inline-flex items-center text-xs space-x-1.5 rounded-sm hover:text-gray-900', data: { turbo_frame: '_top' } do %>
+    <%= link_to url, class: 'inline-flex items-center text-xs gap-1.5 rounded-sm hover:text-gray-900', data: { turbo_frame: '_top' } do %>
       <% if icon? %>
         <%= render Maglev::Uikit::IconComponent.new(name: icon, size: '0.85rem') %>
       <% end %>
       <span><%= label %></span>
     <% end %>
   <% else %>
-    <span class="inline-flex items-center text-xs space-x-1.5 rounded-sm"><%= label %></span>
+    <span class="inline-flex items-center text-xs gap-1.5 rounded-sm"><%= label %></span>
   <% end %>
 </li>  

data/app/components/maglev/uikit/button_group_component/button_group_component.html.erb

@@ -1,4 +1,4 @@
-<div class="[&>*:first-child]:rounded-l-sm [&>*:last-child]:rounded-r-sm inline-flex items-center text-white divide-x divide-white/15">
+<div class="[&>*:first-child]:rounded-s-sm [&>*:last-child]:rounded-e-sm inline-flex items-center text-white divide-x divide-white/15">
   <% buttons.each do |button| %>
     <%= button %>    
   <% end %>

data/app/components/maglev/uikit/collapsible/item_component.html.erb

@@ -2,7 +2,7 @@
   <div class="flex items-center cursor-pointer select-none px-3 py-3 bg-editor-primary text-white rounded-xs" data-action="click->uikit-collapsible#toggle">
     <div class="flex items-center"><%= title %></div>
 
-    <div class="ml-auto">
+    <div class="ms-auto">
       <%= render Maglev::Uikit::IconComponent.new(name: :arrow_down, size: '1.15rem', class_names: 'transition-transform duration-200 rotate-180 group-[.is-collapsed]:rotate-0') %>
     </div>
   </div>

data/app/components/maglev/uikit/dropdown_component/dropdown_controller.js

@@ -9,10 +9,11 @@ export default class extends Controller {
   connect() {
     const button = this.buttonTarget
     const content = this.contentTarget
+    const placement = this.directionAwarePlacement(this.placementValue || 'bottom-start')
 
-    this.cleanup = autoUpdate(button, content, () => computePosition(button, content, { 
+    this.cleanup = autoUpdate(button, content, () => computePosition(button, content, {
       strategy: 'fixed',
-      placement: this.placementValue || 'bottom-start',
+      placement,
       middleware: [
         flip(), 
         shift(),
@@ -71,4 +72,14 @@ export default class extends Controller {
   hide() {
     this.leave()
   }
+
+  // Floating UI already flips the -start/-end alignment for RTL, but the physical
+  // left/right main side is direction-agnostic. Mirror it so submenus/side popovers
+  // open toward the reading direction (e.g. right-start -> left-start in RTL).
+  directionAwarePlacement(placement) {
+    if (getComputedStyle(this.element).direction !== 'rtl') return placement
+    if (placement.startsWith('left')) return placement.replace('left', 'right')
+    if (placement.startsWith('right')) return placement.replace('right', 'left')
+    return placement
+  }
 }

data/app/components/maglev/uikit/form/checkbox_component.html.erb

@@ -3,8 +3,8 @@
     <div class="font-semibold text-gray-800">
       <%= label %>
     </div>
-    <div class="ml-auto group relative inline-flex w-10 shrink-0 rounded-full bg-gray-200 p-0.5 inset-ring inset-ring-gray-900/5 outline-offset-2 outline-editor-primary transition-colors duration-200 ease-in-out has-checked:bg-editor-primary has-focus-visible:outline-2">
-      <span class="size-5 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked:translate-x-4"></span>
+    <div class="ms-auto group relative inline-flex w-10 shrink-0 rounded-full bg-gray-200 p-0.5 inset-ring inset-ring-gray-900/5 outline-offset-2 outline-editor-primary transition-colors duration-200 ease-in-out has-checked:bg-editor-primary has-focus-visible:outline-2">
+      <span class="size-5 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked:translate-x-4 rtl:group-has-checked:-translate-x-4"></span>
       <%= hidden_field_tag name, '0', { id: "#{dom_id}_hidden" } %>
       <%= check_box_tag name, '1', checked?, class: 'absolute inset-0 appearance-none focus:outline-hidden cursor-pointer', aria: { label: label }, data: { action: 'change->uikit-form-checkbox#change' } %>
     </div>

data/app/components/maglev/uikit/form/color_field_component.html.erb

@@ -16,7 +16,7 @@
 
   <div class="inline-block relative">
     <%= tag.div(
-      class: 'absolute left-3 top-2 w-6 h-6 rounded-sm border border-gray-200 group-[.is-empty]/color:bg-checkerboard group-[.is-empty]/color:bg-white!',
+      class: 'absolute start-3 top-2 w-6 h-6 rounded-sm border border-gray-200 group-[.is-empty]/color:bg-checkerboard group-[.is-empty]/color:bg-white!',
       style: "background-color: #{value}",
       data: {
         "uikit-form-color-field-target": "preview",
@@ -31,7 +31,7 @@
       minlength: 4,
       maxlength: 8,
       size: 9,
-      class: 'block py-2 pl-11 pr-8 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50 placeholder-gray-500',
+      class: 'block py-2 ps-11 pe-8 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50 placeholder-gray-500',
       data: {
         'uikit-form-color-field-target': 'input',
         action: ['input->uikit-form-color-field#change', **input_action].join(' '),
@@ -41,7 +41,7 @@
     ) %>
 
     <% if presets? %>
-      <div class="absolute top-1.5 right-3">
+      <div class="absolute top-1.5 end-3">
         <%= render Maglev::Uikit::DropdownComponent.new(placement: 'bottom-end') do |dropdown| %>
           <% dropdown.with_trigger do %>
             <%= render Maglev::Uikit::IconButtonComponent.new(

data/app/components/maglev/uikit/form/combobox/list_component.html.erb

@@ -1,6 +1,6 @@
 <% options.each_with_index do |option, index| %>
   <li
-    class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 group data-[focus]:bg-editor-primary data-[focus]:text-white" 
+    class="relative cursor-default select-none py-2 ps-3 pe-9 text-gray-900 group data-[focus]:bg-editor-primary data-[focus]:text-white"
     role="option" 
     tabindex="-1"     
     data-id="<%= option.id %>"

data/app/components/maglev/uikit/form/combobox/option_component.html.erb

@@ -9,7 +9,7 @@
   </span>
 <% end %>
 
-<span class="absolute inset-y-0 right-0 flex items-center pr-4 text-editor-primary hidden group-data-[selected]:flex group-data-[focus]:text-white">
+<span class="absolute inset-y-0 end-0 flex items-center pe-4 text-editor-primary hidden group-data-[selected]:flex group-data-[focus]:text-white">
   <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
     <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
   </svg>

data/app/components/maglev/uikit/form/combobox_component.html.erb

@@ -48,7 +48,7 @@
         }
       ) %>
       
-      <div class="absolute top-0.5 bottom-0.5 right-3 bg-gray-100 flex items-center gap-2">
+      <div class="absolute top-0.5 bottom-0.5 end-3 bg-gray-100 flex items-center gap-2">
         <svg data-uikit-form-combobox-target="spinner" aria-hidden="true" class="hidden w-4 h-4 text-gray-200 animate-spin dark:text-editor-primary fill-editor-primary" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
           <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>

data/app/components/maglev/uikit/form/link/email_link_component.html.erb

@@ -3,10 +3,10 @@
     class: 'flex-1 flex items-center overflow-hidden items-center w-full h-10 px-3 rounded bg-gray-100 text-gray-800 cursor-pointer focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50',
     data: { turbo_frame: 'modal' } do %>
     <%= render Maglev::Uikit::IconComponent.new(name: "mail") %>
-    <span class="ml-3 shrink"><%= link[:email] %></span>
+    <span class="ms-3 shrink"><%= link[:email] %></span>
   <% end %>
 
-  <div class="absolute right-3 top-0 bottom-0 flex items-center pl-3">
+  <div class="absolute end-3 top-0 bottom-0 flex items-center ps-3">
     <%= render(Maglev::Uikit::IconButtonComponent.new(icon_name: 'eraser', data: { action: 'click->uikit-form-link#clear:prevent' })) %>
   </div>
 

data/app/components/maglev/uikit/form/link/page_link_component.html.erb

@@ -3,10 +3,10 @@
     class: 'flex-1 flex items-center overflow-hidden items-center w-full h-10 px-3 rounded bg-gray-100 text-gray-800 cursor-pointer focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50',
     data: { turbo_frame: 'modal' } do %>
     <%= render Maglev::Uikit::IconComponent.new(name: "file") %>
-    <span class="ml-3 shrink"><%= link[:link_label] %></span>
+    <span class="ms-3 shrink"><%= link[:link_label] %></span>
   <% end %>
 
-  <div class="absolute right-3 top-0 bottom-0 flex items-center pl-3">
+  <div class="absolute end-3 top-0 bottom-0 flex items-center ps-3">
     <%= render(Maglev::Uikit::IconButtonComponent.new(icon_name: 'eraser', data: { action: 'click->uikit-form-link#clear:prevent' })) %>
   </div>
 

data/app/components/maglev/uikit/form/link/static_page_link_component.html.erb

@@ -3,10 +3,10 @@
     class: 'flex-1 flex items-center overflow-hidden items-center w-full h-10 px-3 rounded bg-gray-100 text-gray-800 cursor-pointer focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50',
     data: { turbo_frame: 'modal' } do %>
     <%= render Maglev::Uikit::IconComponent.new(name: "file") %>
-    <span class="ml-3 shrink"><%= link[:link_label] %></span>
+    <span class="ms-3 shrink"><%= link[:link_label] %></span>
   <% end %>
 
-  <div class="absolute right-3 top-0 bottom-0 flex items-center pl-3">
+  <div class="absolute end-3 top-0 bottom-0 flex items-center ps-3">
     <%= render(Maglev::Uikit::IconButtonComponent.new(icon_name: 'eraser', data: { action: 'click->uikit-form-link#clear:prevent' })) %>
   </div>
 

data/app/components/maglev/uikit/form/link/url_link_component.html.erb

@@ -3,10 +3,10 @@
     class: 'flex-1 flex items-center overflow-hidden items-center w-full h-10 px-3 rounded bg-gray-100 text-gray-800 cursor-pointer focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50',
     data: { turbo_frame: 'modal' } do %>
     <%= render Maglev::Uikit::IconComponent.new(name: "external_link") %>
-    <span class="ml-3 shrink"><%= link[:href] %></span>
+    <span class="ms-3 shrink"><%= link[:href] %></span>
   <% end %>
 
-  <div class="absolute right-3 top-0 bottom-0 flex items-center pl-3">
+  <div class="absolute end-3 top-0 bottom-0 flex items-center ps-3">
     <%= render(Maglev::Uikit::IconButtonComponent.new(icon_name: 'eraser', data: { action: 'click->uikit-form-link#clear:prevent' })) %>
   </div>
   

data/app/components/maglev/uikit/form/richtext/block_button_component.html.erb

@@ -20,7 +20,7 @@
     <% end %>
   <% end %>
           
-  <div class="flex flex-row space-x-2 py-1 px-1">
+  <div class="flex flex-row gap-2 py-1 px-1">
     <% choices.each do |choice| %>
       <%= tag.button(
         class: 'hover:bg-gray-100 px-2 py-1 cursor-pointer rounded-sm',

data/app/components/maglev/uikit/form/richtext/button_component.html.erb

@@ -1,8 +1,8 @@
 <%= tag.button(
   class: class_names(
     'cursor-pointer px-2 py-2 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-editor-primary/50 focus:ring-inset focus:ring bg-gray-100',
-    'first:rounded-l-sm',
-    'last:rounded-r-sm',
+    'first:rounded-s-sm',
+    'last:rounded-e-sm',
     '[&.active]:bg-gray-600 [&.active]:hover:bg-gray-600 [&.active]:text-white'
   ),
   type: 'button', 

data/app/components/maglev/uikit/form/richtext/toolbar_component.html.erb

@@ -1,4 +1,4 @@
-<div class="flex sticky top-0 z-10 pb-2 bg-white space-x-1 overflow-x-auto">  
+<div class="flex sticky top-0 z-10 pb-2 bg-white gap-1 overflow-x-auto">
   <%= render Maglev::Uikit::Form::Richtext::ButtonGroupComponent.new do |button_group| %>
     <%= render Maglev::Uikit::Form::Richtext::BlockButtonComponent.new %>
   <% end unless line_break? %>

data/app/components/maglev/uikit/form/search_form_component.html.erb

@@ -5,7 +5,7 @@
   <%= tag.attributes(data: data) %>
 >
   <%= content if content? %>
-  <button type="submit" class="mr-2">
+  <button type="submit" class="me-2">
     <%= render Maglev::Uikit::IconComponent.new(name: 'search', size: '1.25rem', class_names: 'text-gray-500') %>
   </button>
   <%= tag.input(

data/app/components/maglev/uikit/form/search_form_component.rb

@@ -26,7 +26,7 @@ module Maglev
 
         def clear_button_class_names(...)
           class_variants(
-            base: 'ml-1 text-gray-500 cursor-pointer',
+            base: 'ms-1 text-gray-500 cursor-pointer',
             variants: {
               invisible: 'invisible'
             }

data/app/components/maglev/uikit/form/select_component.html.erb

@@ -14,6 +14,6 @@
       **input_tag_options,
       **html_options
     %>
-    <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_down', size: '1.25rem', class_names: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4') %>    
+    <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_down', size: '1.25rem', class_names: 'pointer-events-none col-start-1 row-start-1 me-2 size-5 self-center justify-self-end text-gray-500 sm:size-4') %>
   </div>
 </div>

data/app/components/maglev/uikit/image_library/card_component.html.erb

@@ -24,7 +24,7 @@
       >
         <%= button_to delete_path, 
           method: :delete,
-          form_class: 'ml-auto flex items-center', 
+          form_class: 'ms-auto flex items-center',
           class: 'px-1 py-1 bg-white rounded-full flex items-center justify-center text-gray-900 cursor-pointer',
           data: { turbo_confirm: t('maglev.editor.image_library.confirm_destroy'), turbo_frame: 'modal-dialog' } do 
         %>

data/app/components/maglev/uikit/list/insert_button_component.html.erb

@@ -1,5 +1,5 @@
 <div <%= tag.attributes(class: wrapper_classes) %>>
-  <div class="absolute top-0 left-0 w-full justify-center flex opacity-0 group-hover/button:opacity-100 transition-opacity duration-200">
+  <div class="absolute top-0 start-0 w-full justify-center flex opacity-0 group-hover/button:opacity-100 transition-opacity duration-200">
     <%= link_to link_url, data: link_data, class: "h-7 w-7 flex items-center justify-center rounded-full focus:outline-none transition-colors duration-200 border-4 border-white bg-gray-500 text-gray-200 hover:bg-gray-900 hover:text-gray-100" do %>
       <%= render Maglev::Uikit::IconComponent.new(name: "add", size: "1.15rem") %>    
     <% end %>

data/app/components/maglev/uikit/list/list_item_component.html.erb

@@ -1,6 +1,6 @@
 <%= tag.div(data: { sortable_target: sortable_target, item_id: id, item_index: index }) do %>
   <%= content_tag(wrapper_tag_name.to_sym, class: wrapper_classes) do %>
-    <%= content if content? %>
+    <%= leading if leading? %>
 
     <%= tag.div(class: 'flex items-center cursor-move', data: { sortable_target: sortable_handle }) do %>
       <%= render Maglev::Uikit::IconComponent.new(name: "draggable") %>
@@ -9,7 +9,7 @@
     <% item_body = capture do %>
       <% if icon? %>
         <div class="grid grid-cols-[auto_1fr_auto] flex flex-1 items-center">
-          <div class="mr-2">
+          <div class="me-2">
             <%= icon %>
           </div>
           <div class="text-gray-800 truncate"><%= title %></div>
@@ -56,9 +56,11 @@
     <% end %>
 
     <% if action? %>
-      <div class="relative ml-auto flex items-center shrink-0 min-h-full gap-2">
+      <div class="relative ms-auto flex items-center shrink-0 min-h-full gap-2">
         <%= action %>
       </div>
     <% end %>  
-  <% end %>  
-<% end %>
+  <% end %>
+
+  <%= content if content? %>
+<% end %>

data/app/components/maglev/uikit/list/list_item_component.rb

@@ -12,6 +12,8 @@ module Maglev
         renders_one :sub_title
         renders_one :title
         renders_one :action
+        # Inside the wrapper (e.g. radio for label wrappers). Default content stays below.
+        renders_one :leading
 
         attr_reader :link, :index, :options, :variant, :wrapper_tag_name
 

data/app/components/maglev/uikit/locale_switcher_component/locale_switcher_component.html.erb

@@ -1,6 +1,6 @@
 <%= render(Maglev::Uikit::MenuDropdownComponent.new) do |dropdown| %>
   <% dropdown.with_trigger do %>
-    <%= tag.button class: helpers.maglev_button_classes(color: :secondary, class: 'space-x-2'), data: { action: 'click->uikit-dropdown#toggle', 'uikit-dropdown-target': 'button' } do %>
+    <%= tag.button class: helpers.maglev_button_classes(color: :secondary, class: 'gap-2'), data: { action: 'click->uikit-dropdown#toggle', 'uikit-dropdown-target': 'button' } do %>
       <%= render Maglev::Uikit::IconComponent.new(name: 'global') %>
       <span class="whitespace-nowrap">
         <%= current_locale_label %>

data/app/components/maglev/uikit/menu_dropdown_component.rb

@@ -52,7 +52,7 @@ module Maglev
         class_variants(
           base: %(
             col-span-3 grid grid-cols-subgrid
-            flex flex-1 items-center px-2 py-3 w-full mx-1 rounded-sm text-left
+            flex flex-1 items-center px-2 py-3 w-full mx-1 rounded-sm text-start
             transition-colors duration-200 focus:outline-none cursor-pointer
           ),
           variants: {
@@ -82,11 +82,11 @@ module Maglev
 
         def self.inner_content
           <<-ERB
-            <%= render Maglev::Uikit::IconComponent.new(name: icon.to_s, size: '1.15rem', class_names: 'mr-2 shrink-0') if icon? %>
+            <%= render Maglev::Uikit::IconComponent.new(name: icon.to_s, size: '1.15rem', class_names: 'me-2 shrink-0') if icon? %>
             <span class="<%= 'col-start-2' unless icon? %> whitespace-nowrap whitespace-nowrap truncate overflow-hidden">
               <%= label %>
             </span>
-            <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1.15rem', class_names: 'ml-2 shrink-0') if right_arrow? %>
+            <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1.15rem', class_names: 'ms-2 shrink-0 rtl:-scale-x-100') if right_arrow? %>
             <span class="col-start-2 whitespace-nowrap whitespace-nowrap truncate overflow-hidden text-xs text-gray-500">
               <%= sub_label %>
             </span>

data/app/components/maglev/uikit/modal_component/modal_component.html.erb

@@ -23,7 +23,7 @@
   <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
     <div class="flex min-h-full items-center justify-center p-4" data-action="click->uikit-modal#close:self">
       <div 
-        class="relative transform overflow-y-visible rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:min-w-96 sm:p-6 w-full sm:w-auto hidden"
+        class="relative transform overflow-y-visible rounded-lg bg-white px-4 pb-4 pt-5 text-start shadow-xl transition-all sm:my-8 sm:min-w-96 sm:p-6 w-full sm:w-auto hidden"
         data-uikit-modal-target="dialog"
         data-transition-enter="ease-out duration-100"
         data-transition-enter-start="opacity-0 -translate-y-6 scale-95"
@@ -36,12 +36,12 @@
           <div class="flex items-center justify-between">
             <h2 class="text-gray-800 font-semibold antialiased text-lg"><%= title %></h2>
 
-            <div class="ml-auto pl-2 gap-0.5 flex items-center">
+            <div class="ms-auto ps-2 gap-0.5 flex items-center">
               <% if notification? %>
                 <%= notification %>          
               <% end %>
 
-              <div class="relative -right-2">
+              <div class="relative -end-2">
                 <%= render Maglev::Uikit::IconButtonComponent.new(icon_name: 'close', data: { action: 'click->uikit-modal#close' }) %>
               </div>
             </div>

data/app/components/maglev/uikit/modal_component.rb

@@ -19,7 +19,7 @@ module Maglev
       def dialog_classes
         class_variants(
           base: %(
-            relative transform overflow-y-visible rounded-lg bg-white px-4 pb-4 pt-5 text-left
+            relative transform overflow-y-visible rounded-lg bg-white px-4 pb-4 pt-5 text-start
             shadow-xl transition-all sm:my-8 sm:p-6 hidden
           ),
           variants: {

data/app/components/maglev/uikit/page_layout_component/back_link_component.html.erb

@@ -1,4 +1,4 @@
 <%= link_to path, class: 'text-gray-500 hover:text-gray-700 inline-flex items-center space-x text-xs', data: { turbo_frame: '_top' } do %>
-  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_left', size: '1.15rem', class_names: 'relative -left-1') %>
+  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_left', size: '1.15rem', class_names: 'relative -start-1 rtl:-scale-x-100') %>
   <%= content %>
 <% end %>

data/app/components/maglev/uikit/page_layout_component/page_layout_component.html.erb

@@ -22,14 +22,14 @@
           <%= title_html %>
         <% end %>
       </div>
-      <div class="ml-auto pl-2 gap-0.5 flex items-center">
+      <div class="ms-auto ps-2 gap-0.5 flex items-center">
         <turbo-frame id="page-layout-notification">
           <% if notification? %>
             <%= notification %>
           <% end %>
         </turbo-frame>
 
-        <%= link_to back_path, class: 'h-7 w-7 flex items-center justify-center rounded-full focus:outline-none transition-colors duration-200 relative -right-2 bg-gray-600/0 hover:text-gray-900 text-gray-800 hover:bg-gray-600/10', data: { turbo_frame: '_top' } do %>
+        <%= link_to back_path, class: 'h-7 w-7 flex items-center justify-center rounded-full focus:outline-none transition-colors duration-200 relative -end-2 bg-gray-600/0 hover:text-gray-900 text-gray-800 hover:bg-gray-600/10', data: { turbo_frame: '_top' } do %>
           <%= render Maglev::Uikit::IconComponent.new(name: 'close', size: '1.15rem') %>
         <% end %>
       </div>

data/app/components/maglev/uikit/page_layout_component.rb

@@ -21,11 +21,11 @@ module Maglev
         class_variants(
           base: %(
             slide-pane absolute inset-y-0 h-[100dvh-(--spacing(16))] bg-white
-            border-r border-gray-200 origin-top-left flex flex-col top-16 w-104
+            border-e border-gray-200 origin-top-left rtl:origin-top-right flex flex-col top-16 w-104
           ),
           variants: {
-            expanded: 'left-0 z-40',
-            '!expanded': 'left-16 z-10'
+            expanded: 'start-0 z-40',
+            '!expanded': 'start-16 z-10'
           }
         ).render(expanded: expanded)
       end

data/app/components/maglev/uikit/pagination_component/pagination_component.html.erb

@@ -1,11 +1,11 @@
 <% a = pagy_anchor(pagy) %>
 
 <% left_arrow = capture do %>
-  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_left', size: '1.25rem') %>  
+  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_left', size: '1.25rem', class_names: 'rtl:-scale-x-100') %>
 <% end %>
 
 <% right_arrow = capture do %>
-  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1.25rem') %>
+  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1.25rem', class_names: 'rtl:-scale-x-100') %>
 <% end %>
 
 <div class="flex items-center justify-between bg-white w-full h-10">
@@ -19,9 +19,9 @@
     <% end %>
 
      <% if pagy.next %>
-      <%== a.(pagy.next, pagy_t('pagy.aria_label.next'), aria_label: 'Next', classes: 'relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100') %>
+      <%== a.(pagy.next, pagy_t('pagy.aria_label.next'), aria_label: 'Next', classes: 'relative ms-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100') %>
     <% else %>
-      <a role="link" aria-disabled="true" aria-label="Next" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100">
+      <a role="link" aria-disabled="true" aria-label="Next" class="relative ms-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100">
         <%= pagy_t('pagy.aria_label.next') %>
       </a>
     <% end %>

data/app/components/maglev/uikit/section_toolbar/top_left_corner_component.html.erb

@@ -1,15 +1,15 @@
 <div 
-  class="absolute top-0 left-0 mt-2 ml-2 flex hidden transition ease-[cubic-bezier(0.55,0,0.1,1)]"
+  class="absolute top-0 start-0 mt-2 ms-2 flex hidden transition ease-[cubic-bezier(0.55,0,0.1,1)]"
   data-uikit-section-toolbar-target="topLeftCorner"
   data-transition-enter="duration-200"
-  data-transition-enter-start="-translate-x-[50%] opacity-0"
+  data-transition-enter-start="-translate-x-[50%] rtl:translate-x-[50%] opacity-0"
   data-transition-enter-end="translate-x-0 opacity-100"
   data-transition-leave="duration-200"
   data-transition-leave-start="translate-x-0 opacity-100"
-  data-transition-leave-end="-translate-x-[50%] opacity-0"
+  data-transition-leave-end="-translate-x-[50%] rtl:translate-x-[50%] opacity-0"
 >
   <div
-    class="bg-editor-primary text-white py-1 px-3 rounded-l-2xl rounded-r-2xl text-xs flex items-center"    
+    class="bg-editor-primary text-white py-1 px-3 rounded-s-2xl rounded-e-2xl text-xs flex items-center"
   >
     <span><%= label %></span>
   </div>  

data/app/components/maglev/uikit/section_toolbar/top_right_corner_component.html.erb

@@ -1,11 +1,11 @@
-<div class="absolute top-0 right-0 mt-2 mr-2 flex justify-center gap-x-2 hidden transition ease-[cubic-bezier(0.55,0,0.1,1)]"
+<div class="absolute top-0 end-0 mt-2 me-2 flex justify-center gap-x-2 hidden transition ease-[cubic-bezier(0.55,0,0.1,1)]"
   data-uikit-section-toolbar-target="topRightCorner"
   data-transition-enter="duration-200"
-  data-transition-enter-start="translate-x-[50%] opacity-0"
+  data-transition-enter-start="translate-x-[50%] rtl:-translate-x-[50%] opacity-0"
   data-transition-enter-end="translate-x-0 opacity-100"
   data-transition-leave="duration-200"
   data-transition-leave-start="translate-x-0 opacity-100"
-  data-transition-leave-end="translate-x-[50%] opacity-0"
+  data-transition-leave-end="translate-x-[50%] rtl:-translate-x-[50%] opacity-0"
 >
   <%= link_to paths[:edit], class: button_classes, data: { turbo_frame: '_top' } do %>
     <%= render Maglev::Uikit::IconComponent.new(name: 'pencil') %>

data/app/helpers/maglev/application_helper.rb

@@ -3,6 +3,8 @@
 # rubocop:disable Metrics/ModuleLength
 module Maglev
   module ApplicationHelper
+    RTL_UI_LOCALES = %i[ar he fa ur].freeze
+
     ## "system" helpers
     def turbo_stream
       # we don't want to pollute the global Turbo::Streams::TagBuilder
@@ -63,6 +65,10 @@ module Maglev
     end
 
     ## Editor helpers
+    def maglev_editor_direction
+      RTL_UI_LOCALES.include?(editor_ui_locale.to_sym) ? 'rtl' : 'ltr'
+    end
+
     def maglev_editor_title
       case maglev_config.title
       when nil

data/app/views/layouts/maglev/editor/application.html.erb

@@ -1,4 +1,4 @@
-<html lang="<%= I18n.locale %>">
+<html lang="<%= editor_ui_locale %>" dir="<%= maglev_editor_direction %>">
   <head>
     <title><%= maglev_editor_title %></title>
     <meta name="view-transition" content="same-origin" />

data/app/views/maglev/editor/assets/index.html.erb

@@ -19,7 +19,7 @@
           <% end %>
           
         </div>
-        <div class="ml-auto">
+        <div class="ms-auto">
           <%= render Maglev::Uikit::ImageLibrary::UploaderComponent.new(
             create_path: editor_assets_path,
             refresh_path: editor_assets_path(query_params)

data/app/views/maglev/editor/pages/_preview.html.erb

@@ -1,5 +1,5 @@
 <div 
-  class="absolute top-16 left-16 right-0 bottom-0 z-0 overflow-hidden group"
+  class="absolute top-16 start-16 end-0 bottom-0 z-0 overflow-hidden group"
   data-controller="editor-page-preview"
   data-action="
     uikit-device-toggler:change@window->editor-page-preview#changeDevice 
@@ -14,7 +14,7 @@
 >
   <div 
     id="page-preview"
-    class="bg-gray-50 origin-top-left transition-transform duration-150 ease-out will-change-transform transform-gpu hidden opacity-0 group-[.is-loaded]:opacity-100 group-[.is-loaded]:block"  
+    class="bg-gray-50 origin-top-left rtl:origin-top-right transition-transform duration-150 ease-out will-change-transform transform-gpu hidden opacity-0 group-[.is-loaded]:opacity-100 group-[.is-loaded]:block"
     data-editor-page-preview-target="iframe-wrapper"
   >
     <iframe 
@@ -28,7 +28,7 @@
   </div>
 
   <div class="flex h-full w-full justify-center items-center transition-discrete transition-all duration-100 ease-in-out opacity-100 group-[.is-loaded]:opacity-0 group-[.is-loaded]:hidden" data-editor-page-preview-target="loading">
-    <p class="animate-bounce duration-200 group-data-[expanded-page-layout]/page-layout:pl-88">
+    <p class="animate-bounce duration-200 group-data-[expanded-page-layout]/page-layout:ps-88">
       <%= t('maglev.editor.page_preview.loading') %>
     </p>
   </div>

data/app/views/maglev/editor/pages/_preview_empty_message.html.erb

@@ -1,5 +1,5 @@
 <%# z-[5]: below PageLayoutComponent (z-10 / z-40), above preview shell (z-0). editor-preview-empty: tailwind.css.erb @custom-variant on [data-controller~="editor-page-preview"].is-empty %>
-<div class="fixed top-16 left-16 right-0 bottom-0 z-[5] bg-gray-50 hidden editor-preview-empty:block">
+<div class="fixed top-16 start-16 end-0 bottom-0 z-[5] bg-gray-50 hidden editor-preview-empty:block">
   <div class="flex min-h-full flex-col items-center justify-center px-4">
     <h2 class="text-center text-2xl font-bold">
       <%= t('maglev.editor.page_preview.empty.title') %>

data/app/views/maglev/editor/section_blocks/index/_tree.html.erb

@@ -38,9 +38,9 @@
       <% end %>
 
       <% if @section.child_blocks_of(section_block.id).any? %>
-        <div class="ml-5 mt-3">
-          <%= render 'maglev/editor/section_blocks/index/tree', 
-            blocks: @section.child_blocks_of(section_block.id), 
+        <div class="ms-5 mt-3">
+          <%= render 'maglev/editor/section_blocks/index/tree',
+            blocks: @section.child_blocks_of(section_block.id),
             parent_id: section_block.id
           %>
         </div>

data/app/views/maglev/editor/sections/_toolbar_list.html.erb

@@ -1,5 +1,5 @@
 <div class="
-  absolute inset-0 top-16 left-16 group-data-[expanded-page-layout]/page-layout:left-104 bg-transparent z-5 pointer-events-none mx-auto 
+  absolute inset-0 top-16 start-16 group-data-[expanded-page-layout]/page-layout:start-104 bg-transparent z-5 pointer-events-none mx-auto
   group-data-[device=mobile]/device:w-[calc(375px*var(--page-preview-scale-ratio))] group-data-[device=tablet]/device:w-[calc(1024px*var(--page-preview-scale-ratio))]
   ">
   <% current_maglev_sections.each_with_index do |section, index| %>

data/app/views/maglev/editor/sections/theme/_list.html.erb

@@ -25,9 +25,11 @@
             <% end %>        
           <% end %>
             
-          <% item.with_title_content(section.human_name) %>   
+          <% item.with_title_content(section.human_name) %>
 
-          <%= f.radio_button :section_type, section.id, class: 'sr-only peer' %>   
+          <% item.with_leading do %>
+            <%= f.radio_button :section_type, section.id, class: 'sr-only peer' %>
+          <% end %>
         <% end %>
       <% end %>
     </div>

data/lib/maglev/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Maglev
-  VERSION = '3.0.3'
+  VERSION = '3.1.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: maglevcms
 version: !ruby/object:Gem::Version
-  version: 3.0.3
+  version: 3.1.0
 platform: ruby
 authors:
 - Didier Lafforgue
@@ -121,16 +121,22 @@ dependencies:
   name: view_component
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.12.0
+    - - "<"
       - !ruby/object:Gem::Version
-        version: 4.1.1
+        version: '5'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.12.0
+    - - "<"
       - !ruby/object:Gem::Version
-        version: 4.1.1
+        version: '5'
 description: "  MaglevCMS integrates a powerful website/page builder with a polished
   UX/UI into your Ruby on Rails application, backed by a flexible and robust CMS engine.\n"
 email: