Merge branch '4.0.0-dev' into bivas-v4

Author: Anindra123

assets/core/scss/components/_calendar.scss

@@ -6,6 +6,11 @@
   background-color: $tutor-surface-l1 !important;
   border-radius: $tutor-radius-md !important;
 
+  // Ensure hidden calendar doesn't block interaction with other elements
+  &[data-vc-calendar-hidden] {
+    pointer-events: none !important;
+  }
+
   [data-vc='month'],
   [data-vc='year'] {
     @include tutor-typography('small', 'medium', 'primary');
@@ -169,6 +174,10 @@
   .vc-controls {
     grid-area: controls;
     padding: $tutor-spacing-2 $tutor-spacing-none $tutor-spacing-none $tutor-spacing-none;
+
+    [dir='rtl'] & .vc-arrow {
+      transform: scaleX(-1);
+    }
   }
 
   .vc-grid {
@@ -177,7 +186,7 @@
     gap: $tutor-spacing-6;
 
     @include tutor-breakpoint-down(md) {
-      .vc-column:nth-child(n+2) {
+      .vc-column:nth-child(n + 2) {
         display: none;
       }
     }

assets/core/scss/components/_modal.scss

@@ -5,21 +5,15 @@
 
 .tutor-modal {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: $tutor-z-highest;
   display: flex;
   align-items: center;
   justify-content: center;
 
   &-backdrop {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     background-color: #00000099;
     backdrop-filter: blur(20px);
 
@@ -96,7 +90,7 @@
     @include tutor-button-variant(ghost);
     position: absolute;
     top: $tutor-spacing-4;
-    right: $tutor-spacing-4;
+    inset-inline-end: $tutor-spacing-4;
 
     svg {
       color: $tutor-icon-idle !important;

assets/core/scss/components/_popover.scss

@@ -25,7 +25,7 @@
     .tutor-popover-close {
       position: absolute;
       top: $tutor-spacing-2;
-      right: $tutor-spacing-2;
+      inset-inline-end: $tutor-spacing-2;
       width: 24px;
       height: 24px;
       padding: 0;
@@ -38,11 +38,6 @@
 
       @include tutor-flex-center();
 
-      [dir='rtl'] & {
-        right: auto;
-        left: $tutor-spacing-2;
-      }
-
       &:hover,
       &:focus {
         background-color: $tutor-surface-l2;
@@ -132,7 +127,7 @@
     &-body,
     &-footer {
       padding-left: $tutor-spacing-3;
-      padding-right: $tutor-spacing-3;
+      padding-inline-end: $tutor-spacing-3;
     }
   }
 }

assets/core/scss/components/_preview-trigger.scss

@@ -5,12 +5,9 @@
 @use '../mixins' as *;
 
 .tutor-preview-trigger {
-  display: inline-flex;
-  vertical-align: middle;
-  max-width: 100%;
+  display: flex;
   min-width: 0;
-  width: 100%;
-  position: relative;
+  max-width: 100%;
 
   &-text {
     font-style: italic;
@@ -21,6 +18,13 @@
     @include tutor-transition(color);
     padding-inline-end: $tutor-spacing-1;
 
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    vertical-align: bottom;
+
     &:focus {
       outline: none;
     }
@@ -30,13 +34,6 @@
       outline-offset: 2px;
       border-radius: $tutor-radius-sm;
     }
-
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-    vertical-align: bottom;
   }
 }
 

assets/core/scss/components/_progress.scss

@@ -4,7 +4,7 @@
 .tutor-progress-bar {
   width: 100%;
   height: $tutor-progress-height;
-  background-color: $tutor-actions-gray-secondary;
+  background-color: $tutor-actions-gray-quaternary;
   box-shadow: inset 0 0 1.75px rgba(0, 0, 0, 0.16);
   border-radius: $tutor-radius-full;
   overflow: hidden;
@@ -21,11 +21,15 @@
     position: relative;
     @include tutor-transition(transform, 0.3s);
 
+    [dir='rtl'] & {
+      transform: translateX(calc(100% - var(--tutor-progress-width)));
+    }
+
     &::before {
       content: '';
       position: absolute;
       top: $tutor-progress-indicator-top;
-      right: $tutor-spacing-2;
+      inset-inline-end: $tutor-spacing-2;
       height: $tutor-progress-indicator-height;
       width: 8.16px;
       background-color: $tutor-actions-success-secondary;
@@ -38,8 +42,8 @@
       display: $tutor-progress-indicator-secondary-display;
       position: absolute;
       top: $tutor-progress-indicator-top;
-      left: $tutor-spacing-2;
-      right: calc(#{$tutor-spacing-2} + 8.16px + 1px);
+      inset-inline-start: $tutor-spacing-2;
+      inset-inline-end: calc(#{$tutor-spacing-2} + 8.16px + 1px);
       height: $tutor-progress-indicator-height;
       background-color: $tutor-actions-success-secondary;
       border-radius: inherit;
@@ -48,7 +52,7 @@
   }
 
   &.tutor-progress-bar-brand {
-    background-color: $tutor-actions-gray-secondary;
+    background-color: $tutor-actions-gray-quaternary;
 
     .tutor-progress-bar-fill {
       background-color: $tutor-actions-brand-primary;
@@ -81,6 +85,10 @@
 
   &[data-tutor-animated] .tutor-progress-bar-fill {
     animation: tutor-progress-fill-animate 1s ease-out forwards;
+
+    [dir='rtl'] & {
+      animation-name: tutor-progress-fill-animate-rtl;
+    }
   }
 }
 
@@ -92,3 +100,12 @@
     transform: translateX(calc(var(--tutor-progress-width) - 100%));
   }
 }
+
+@keyframes tutor-progress-fill-animate-rtl {
+  from {
+    transform: translateX(calc(100% - var(--tutor-progress-start, 0%)));
+  }
+  to {
+    transform: translateX(calc(100% - var(--tutor-progress-width)));
+  }
+}

assets/core/scss/components/_result-badge.scss

@@ -19,7 +19,7 @@
 
   svg {
     position: absolute;
-    left: -$tutor-spacing-4;
+    inset-inline-start: -$tutor-spacing-4;
     top: 50%;
     transform: translateY(-50%);
   }

assets/core/scss/components/_tabs.scss

@@ -1,6 +1,5 @@
 @use '../mixins' as *;
 @use '../tokens' as *;
-@use '../mixins/rtl' as rtl;
 
 button.tutor-tabs-tab,
 .tutor-tabs-tab {
@@ -23,6 +22,7 @@ button.tutor-tabs-tab,
 
   @include tutor-breakpoint-down(sm) {
     @include tutor-text('tiny');
+    justify-content: center;
   }
 
   &-active {
@@ -96,10 +96,6 @@ button.tutor-tabs-tab,
     &::-webkit-scrollbar {
       display: none;
     }
-
-    [dir='rtl'] & {
-      flex-direction: row-reverse;
-    }
   }
 
   &-content {
@@ -110,10 +106,6 @@ button.tutor-tabs-tab,
   &-vertical {
     @include tutor-flex(row, flex-start, flex-start);
 
-    [dir='rtl'] & {
-      flex-direction: row-reverse;
-    }
-
     .tutor-tabs-nav {
       @include tutor-flex-column;
       align-items: stretch;
@@ -124,6 +116,13 @@ button.tutor-tabs-tab,
       flex: 1;
       min-width: 0;
     }
+
+    @include tutor-breakpoint-down(sm) {
+      button.tutor-tabs-tab,
+      .tutor-tabs-tab {
+        justify-content: flex-start;
+      }
+    }
   }
 }
 

assets/core/scss/main.scss

@@ -68,6 +68,15 @@ form {
   }
 }
 
+/**
+ * Flips directional icons in RTL layouts.
+ * Use only for icons whose meaning depends on reading direction,
+ * such as arrows, chevrons, previous/next pagination controls, etc.
+ */
+[dir='rtl'] .tutor-icon-flip-rtl {
+  transform: scaleX(-1);
+}
+
 // Alpine.js cloak utility
 [x-cloak] {
   display: none !important;

assets/core/scss/mixins/_avatars.scss

@@ -113,7 +113,7 @@ $tutor-avatar-sizes: (
       color: $tutor-actions-brand-primary;
     }
   } @else if $variant == border {
-    border: 2px solid $tutor-border-brand-secondary;
+    border: 1px solid $tutor-border-brand-secondary;
     svg,
     .tutor-avatar-image {
       border-radius: 0px;

assets/core/scss/themes/_dark.scss

@@ -29,6 +29,7 @@
   --tutor-surface-dark: #{$tutor-gray-600};
   --tutor-surface-warning: #{$tutor-gray-750};
   --tutor-surface-warning-hover: #{$tutor-warning-900};
+  --tutor-surface-warning-hover-2: #{$tutor-exception-10};
   --tutor-surface-success: #{$tutor-success-950};
   --tutor-surface-critical: #{$tutor-error-950};
 
@@ -165,6 +166,7 @@
   --tutor-actions-gray-empty: #{$tutor-gray-800};
   --tutor-actions-gray-secondary: #{$tutor-gray-750};
   --tutor-actions-gray-tertiary: #{$tutor-gray-800};
+  --tutor-actions-gray-quaternary: #{$tutor-gray-900};
   --tutor-actions-critical-primary: #{$tutor-error-500};
   --tutor-actions-critical-secondary: #{$tutor-gray-700};
   --tutor-actions-exception3-highlight: #{$tutor-exception-3};