fix(progress-bar): flip rtl using the existing reversed property (#17464

)

updates the progress bar to always use the ltr dir but take advantage of the reversed property when dir is rtl.

references #17012

core/src/components/progress-bar/progress-bar.scss

@@ -20,6 +20,8 @@
   width: 100%;
 
   contain: strict;
+
+  direction: ltr;
   overflow: hidden;
 }
 
@@ -41,6 +43,7 @@
 .progress-buffer-bar:before,
 .buffer-circles {
   @include position(0, 0, 0, 0);
+
   position: absolute;
 
   width: 100%;
@@ -52,7 +55,9 @@
 
 .progress,
 .progress-buffer-bar {
-  @include transform-origin(start, top);
+  /* stylelint-disable-next-line property-blacklist */
+  transform-origin: left top;
+
   transition: transform 150ms linear;
 }
 
@@ -84,7 +89,13 @@
 // --------------------------------------------------
 
 .indeterminate-bar-primary {
-  @include position(0, 0, 0, -145.166611%);
+  /* stylelint-disable property-blacklist */
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: -145.166611%;
+  /* stylelint-enable property-blacklist */
+
   animation: primary-indeterminate-translate 2s infinite linear;
 
   .progress-indeterminate {
@@ -94,7 +105,13 @@
 }
 
 .indeterminate-bar-secondary {
-  @include position(0, 0, 0, -54.888891%);
+  /* stylelint-disable property-blacklist */
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left:  -54.888891%;
+  /* stylelint-enable property-blacklist */
+
   animation: secondary-indeterminate-translate 2s infinite linear;
 
   .progress-indeterminate {
@@ -121,7 +138,8 @@
 :host(.progress-bar-reversed) {
   .progress,
   .progress-buffer-bar {
-    @include transform-origin(end, top);
+    /* stylelint-disable-next-line property-blacklist */
+    transform-origin: right top;
   }
 
   .buffer-circles,

core/src/components/progress-bar/progress-bar.tsx

@@ -64,7 +64,7 @@ export class ProgressBar implements ComponentInterface {
         ...createColorClasses(color),
         [`progress-bar-${type}`]: true,
         'progress-paused': paused,
-        'progress-bar-reversed': reversed,
+        'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed
       }
     };
   }