refactor(maz-ui): accessibilty - support of rtl direction

LouisMazel · LouisMazel · commit 8cc99bf56e55 · 2025-10-10T15:30:01.000+02:00
diff --git a/packages/lib/src/components/MazCard.vue b/packages/lib/src/components/MazCard.vue
@@ -177,7 +177,7 @@ function toggleCollapse() {
       <MazBtn
         v-if="collapsible"
         color="transparent"
-        class="maz-ml-2 maz-text-sm"
+        class="maz-ms-2 maz-text-sm"
         size="xs"
         @click.stop="toggleCollapse"
       >
@@ -349,7 +349,7 @@ function toggleCollapse() {
     @apply maz-absolute maz-left-0 maz-top-0 maz-z-2;
 
     & > *:not(:last-child) {
-      @apply maz-mr-2;
+      @apply maz-me-2;
     }
   }
 }
diff --git a/packages/lib/src/components/MazCarousel.vue b/packages/lib/src/components/MazCarousel.vue
@@ -151,7 +151,7 @@ function setScrollState(event: Event) {
 
   &__items {
     @apply maz-z-1 maz-flex maz-flex-1 maz-items-center maz-justify-start
-        maz-space-x-5 maz-overflow-y-hidden maz-py-4 maz-pl-3;
+        maz-space-x-5 maz-overflow-y-hidden maz-py-4 maz-ps-3;
 
     scroll-behavior: smooth;
 
diff --git a/packages/lib/src/components/MazChecklist.vue b/packages/lib/src/components/MazChecklist.vue
@@ -272,7 +272,7 @@ function updateQuery(value?: string) {
   }
 
   .m-checklist-item {
-    @apply maz-flex maz-w-full maz-cursor-pointer maz-items-center maz-gap-4 maz-rounded maz-px-3 maz-py-2 maz-text-left hover:maz-bg-surface-600;
+    @apply maz-flex maz-w-full maz-cursor-pointer maz-items-center maz-gap-4 maz-rounded maz-px-3 maz-py-2 maz-text-start hover:maz-bg-surface-600;
   }
 
   .item-label {
diff --git a/packages/lib/src/components/MazDatePicker.vue b/packages/lib/src/components/MazDatePicker.vue
@@ -791,7 +791,7 @@ watch(
   }
 
   & .m-date-picker__button {
-    @apply maz-flex maz-h-full maz-cursor-not-allowed maz-bg-transparent maz-pr-1 maz-flex-center;
+    @apply maz-flex maz-h-full maz-cursor-not-allowed maz-bg-transparent maz-pe-1 maz-flex-center;
 
     &__chevron {
       @apply maz-text-foreground maz-transition-transform maz-duration-200;
diff --git a/packages/lib/src/components/MazDatePicker/MazPickerCalendar.vue b/packages/lib/src/components/MazDatePicker/MazPickerCalendar.vue
@@ -127,7 +127,7 @@ const calendarDate = computed({
       width: 34rem;
 
       & .maz-picker-calendar__months > :first-child {
-        @apply maz-border-r maz-border-divider;
+        @apply maz-border-e maz-border-divider;
       }
     }
   }
diff --git a/packages/lib/src/components/MazDatePicker/MazPickerShortcuts.vue b/packages/lib/src/components/MazDatePicker/MazPickerShortcuts.vue
@@ -65,7 +65,7 @@ watch(
 
 <style lang="postcss" scoped>
 .maz-picker-shortcuts {
-  @apply maz-flex maz-flex-col maz-items-start maz-gap-1 maz-overflow-y-auto maz-border-r maz-border-divider maz-p-2;
+  @apply maz-flex maz-flex-col maz-items-start maz-gap-1 maz-overflow-y-auto maz-border-e maz-border-divider maz-p-2;
 
   &::-webkit-scrollbar {
     display: none;
diff --git a/packages/lib/src/components/MazDatePicker/MazPickerTime.vue b/packages/lib/src/components/MazDatePicker/MazPickerTime.vue
@@ -331,7 +331,7 @@ async function selectTime(identifier: ColumnIdentifier, value: TimeValue) {
   }
 
   &.--has-date {
-    @apply maz-border-l maz-border-divider;
+    @apply maz-border-s maz-border-divider;
   }
 
   &::before {
diff --git a/packages/lib/src/components/MazDialog.vue b/packages/lib/src/components/MazDialog.vue
@@ -180,7 +180,7 @@ if (scrollable) {
   }
 
   &-header {
-    @apply maz-flex maz-items-baseline maz-justify-end maz-pl-6 maz-pr-2 maz-pt-2 maz-pb-4;
+    @apply maz-flex maz-items-baseline maz-justify-end maz-ps-6 maz-pe-2 maz-pt-2 maz-pb-4;
 
     &.--has-title {
       @apply maz-justify-between;
diff --git a/packages/lib/src/components/MazDrawer.vue b/packages/lib/src/components/MazDrawer.vue
@@ -121,7 +121,7 @@ const hasTitle = computed(() => {
     @apply maz-overflow-y-auto maz-bg-surface maz-pointer-events-auto maz-flex maz-flex-col;
 
     > .m-drawer-header {
-      @apply maz-z-1 maz-flex maz-h-16 maz-shrink-0 maz-items-center maz-border-b maz-border-divider maz-bg-surface maz-bg-clip-padding maz-pl-4 maz-pr-2 maz-py-3;
+      @apply maz-z-1 maz-flex maz-h-16 maz-shrink-0 maz-items-center maz-border-b maz-border-divider maz-bg-surface maz-bg-clip-padding maz-ps-4 maz-pe-2 maz-py-3;
 
       .m-drawer-header__title {
         @apply maz-m-0 maz-text-xl maz-font-semibold;
diff --git a/packages/lib/src/components/MazGallery.vue b/packages/lib/src/components/MazGallery.vue
@@ -238,7 +238,7 @@ function shouldHaveRemainingLayer(index: number): boolean {
   }
 
   &__item {
-    @apply maz-absolute maz-top-0 maz-m-0 maz-h-1/2 maz-w-full maz-overflow-hidden maz-border-l-2 maz-p-0;
+    @apply maz-absolute maz-top-0 maz-m-0 maz-h-1/2 maz-w-full maz-overflow-hidden maz-border-s-2 maz-p-0;
 
     border-color: var(--gallery-separator-color);
 
diff --git a/packages/lib/src/components/MazInput.vue b/packages/lib/src/components/MazInput.vue
@@ -588,7 +588,7 @@ const stateColor = computed(() => {
 
       &.--has-left-icon {
         .m-input-input {
-          @apply maz-pl-2;
+          @apply maz-ps-2;
         }
 
         .m-input-label {
@@ -598,7 +598,7 @@ const stateColor = computed(() => {
 
       &.--has-right-icon {
         .m-input-input {
-          @apply maz-pr-2;
+          @apply maz-pe-2;
         }
       }
 
@@ -658,11 +658,11 @@ const stateColor = computed(() => {
     }
 
     &-right {
-      @apply maz-pr-2;
+      @apply maz-pe-2;
     }
 
     &-left {
-      @apply maz-pl-2;
+      @apply maz-ps-2;
     }
 
     &.--rounded {
diff --git a/packages/lib/src/components/MazInputPhoneNumber/PhoneInput.vue b/packages/lib/src/components/MazInputPhoneNumber/PhoneInput.vue
@@ -139,7 +139,7 @@ defineExpose({
   @apply maz-hidden;
 
   &.--responsive .m-phone-input {
-    @apply -maz-mt-[var(--maz-border-width)] maz-flex-none mob-m:-maz-ml-[var(--maz-border-width)] mob-m:maz-mt-0 mob-m:maz-flex-auto;
+    @apply -maz-mt-[var(--maz-border-width)] maz-flex-none mob-m:-maz-ms-[var(--maz-border-width)] mob-m:maz-mt-0 mob-m:maz-flex-auto;
 
     &.--border-radius {
       &:deep(.m-input-wrapper) {
@@ -149,7 +149,7 @@ defineExpose({
   }
 
   &.--row .m-phone-input {
-    @apply -maz-ml-[var(--maz-border-width)] maz-flex-auto;
+    @apply -maz-ms-[var(--maz-border-width)] maz-flex-auto;
 
     &.--border-radius {
       &:deep(.m-input-wrapper) {
@@ -159,7 +159,7 @@ defineExpose({
   }
 
   &.--col .m-phone-input {
-    @apply -maz-mt-[var(--maz-border-width)] maz-ml-0 maz-flex-none;
+    @apply -maz-mt-[var(--maz-border-width)] maz-ms-0 maz-flex-none;
 
     &.--border-radius {
       &:deep(.m-input-wrapper) {
diff --git a/packages/lib/src/components/MazSelect.vue b/packages/lib/src/components/MazSelect.vue
@@ -828,7 +828,7 @@ defineExpose({
     }
 
     &__toggle-button {
-      @apply maz-flex maz-h-full maz-bg-transparent maz-pl-0 maz-flex-center;
+      @apply maz-flex maz-h-full maz-bg-transparent maz-ps-0 maz-flex-center;
     }
 
     &:deep(input) {
@@ -917,7 +917,7 @@ defineExpose({
   }
 
   &__scroll-wrapper {
-    @apply maz-flex maz-flex-1 maz-flex-col maz-gap-1 maz-overflow-auto maz-px-2 maz-pe-2;
+    @apply maz-flex maz-flex-1 maz-flex-col maz-gap-1 maz-overflow-auto maz-px-2 maz-py-2;
 
     /* Custom scrollbar for webkit browsers (Chrome, Safari, Edge) */
     &::-webkit-scrollbar {
diff --git a/packages/lib/src/components/MazStepper.vue b/packages/lib/src/components/MazStepper.vue
@@ -380,7 +380,7 @@ function isLastStep(step: number): boolean {
   }
 
   &__content {
-    @apply maz-ml-[1.95rem] maz-border-l-2 maz-border-transparent maz-py-2 maz-pl-8;
+    @apply maz-ms-[1.95rem] maz-border-s-2 maz-border-transparent maz-py-2 maz-ps-8;
 
     &__wrapper {
       @apply maz-py-2;
diff --git a/packages/lib/src/plugins/toast/MazToast.vue b/packages/lib/src/plugins/toast/MazToast.vue
@@ -415,7 +415,7 @@ onMounted(() => {
   }
 
   &__button {
-    @apply maz-relative maz-flex maz-w-full maz-items-center maz-gap-2 maz-self-center maz-rounded maz-pl-2 maz-pr-2 maz-shadow-md maz-transition maz-duration-300 maz-ease-in-out maz-overflow-hidden maz-border maz-backdrop-blur-xl;
+    @apply maz-relative maz-flex maz-w-full maz-items-center maz-gap-2 maz-self-center maz-rounded maz-ps-2 maz-pe-2 maz-shadow-md maz-transition maz-duration-300 maz-ease-in-out maz-overflow-hidden maz-border maz-backdrop-blur-xl;
   }
 
   &__close {

Original file line number	Diff line number	Diff line change
`@@ -177,7 +177,7 @@ function toggleCollapse() {`
`177`	`177`	`<MazBtn`
`178`	`178`	`v-if="collapsible"`
`179`	`179`	`color="transparent"`
`180`		`- class="maz-ml-2 maz-text-sm"`
	`180`	`+ class="maz-ms-2 maz-text-sm"`
`181`	`181`	`size="xs"`
`182`	`182`	`@click.stop="toggleCollapse"`
`183`	`183`	`>`
`@@ -349,7 +349,7 @@ function toggleCollapse() {`
`349`	`349`	`@apply maz-absolute maz-left-0 maz-top-0 maz-z-2;`
`350`	`350`
`351`	`351`	`& > *:not(:last-child) {`
`352`		`- @apply maz-mr-2;`
	`352`	`+ @apply maz-me-2;`
`353`	`353`	`}`
`354`	`354`	`}`
`355`	`355`	`}`
Original file line number	Diff line number	Diff line change
`@@ -272,7 +272,7 @@ function updateQuery(value?: string) {`
`272`	`272`	`}`
`273`	`273`
`274`	`274`	`.m-checklist-item {`
`275`		`- @apply maz-flex maz-w-full maz-cursor-pointer maz-items-center maz-gap-4 maz-rounded maz-px-3 maz-py-2 maz-text-left hover:maz-bg-surface-600;`
	`275`	`+ @apply maz-flex maz-w-full maz-cursor-pointer maz-items-center maz-gap-4 maz-rounded maz-px-3 maz-py-2 maz-text-start hover:maz-bg-surface-600;`
`276`	`276`	`}`
`277`	`277`
`278`	`278`	`.item-label {`
Original file line number	Diff line number	Diff line change
`@@ -791,7 +791,7 @@ watch(`
`791`	`791`	`}`
`792`	`792`
`793`	`793`	`& .m-date-picker__button {`
`794`		`- @apply maz-flex maz-h-full maz-cursor-not-allowed maz-bg-transparent maz-pr-1 maz-flex-center;`
	`794`	`+ @apply maz-flex maz-h-full maz-cursor-not-allowed maz-bg-transparent maz-pe-1 maz-flex-center;`
`795`	`795`
`796`	`796`	`&__chevron {`
`797`	`797`	`@apply maz-text-foreground maz-transition-transform maz-duration-200;`
Original file line number	Diff line number	Diff line change
`@@ -127,7 +127,7 @@ const calendarDate = computed({`
`127`	`127`	`width: 34rem;`
`128`	`128`
`129`	`129`	`& .maz-picker-calendar__months > :first-child {`
`130`		`- @apply maz-border-r maz-border-divider;`
	`130`	`+ @apply maz-border-e maz-border-divider;`
`131`	`131`	`}`
`132`	`132`	`}`
`133`	`133`	`}`
Original file line number	Diff line number	Diff line change
`@@ -331,7 +331,7 @@ async function selectTime(identifier: ColumnIdentifier, value: TimeValue) {`
`331`	`331`	`}`
`332`	`332`
`333`	`333`	`&.--has-date {`
`334`		`- @apply maz-border-l maz-border-divider;`
	`334`	`+ @apply maz-border-s maz-border-divider;`
`335`	`335`	`}`
`336`	`336`
`337`	`337`	`&::before {`
Original file line number	Diff line number	Diff line change
`@@ -180,7 +180,7 @@ if (scrollable) {`
`180`	`180`	`}`
`181`	`181`
`182`	`182`	`&-header {`
`183`		`- @apply maz-flex maz-items-baseline maz-justify-end maz-pl-6 maz-pr-2 maz-pt-2 maz-pb-4;`
	`183`	`+ @apply maz-flex maz-items-baseline maz-justify-end maz-ps-6 maz-pe-2 maz-pt-2 maz-pb-4;`
`184`	`184`
`185`	`185`	`&.--has-title {`
`186`	`186`	`@apply maz-justify-between;`
Original file line number	Diff line number	Diff line change
`@@ -238,7 +238,7 @@ function shouldHaveRemainingLayer(index: number): boolean {`
`238`	`238`	`}`
`239`	`239`
`240`	`240`	`&__item {`
`241`		`- @apply maz-absolute maz-top-0 maz-m-0 maz-h-1/2 maz-w-full maz-overflow-hidden maz-border-l-2 maz-p-0;`
	`241`	`+ @apply maz-absolute maz-top-0 maz-m-0 maz-h-1/2 maz-w-full maz-overflow-hidden maz-border-s-2 maz-p-0;`
`242`	`242`
`243`	`243`	`border-color: var(--gallery-separator-color);`
`244`	`244`