Merge branch 'v4-dev' into carousel

diff --cc js/src/carousel.js
index c0d572f0a9b27b3bba0b7b6aab20d69ba7885f07,7fda8f6152f287c48debe00ff281387c77576af3..a8c16283e207da4d1dea9845bbf021e26a8020c1
--- 1/js/src/carousel.js
--- 2/js/src/carousel.js
+++ b/js/src/carousel.js
@@@ -372,15 -355,10 +373,10 @@@ const Carousel = (($) => 
          $(activeElement)
            .one(Util.TRANSITION_END, () => {
              $(nextElement)
-               .removeClass(directionalClassName)
-               .removeClass(orderClassName)
- 
-             $(nextElement).addClass(ClassName.ACTIVE)
 -              .removeClass(`${directionalClassName} ${direction}`)
++              .removeClass(`${directionalClassName} ${orderClassName}`)
+               .addClass(ClassName.ACTIVE)
  
-             $(activeElement)
-               .removeClass(ClassName.ACTIVE)
-               .removeClass(orderClassName)
-               .removeClass(directionalClassName)
 -            $(activeElement).removeClass(`${ClassName.ACTIVE} ${direction} ${directionalClassName}`)
++            $(activeElement).removeClass(`${ClassName.ACTIVE} ${orderClassName} ${directionalClassName}`)
  
              this._isSliding = false
  

diff --cc scss/_carousel.scss
index 0ed8d4e3d71ba55686b79ea8326f1da3a8224554,09f6ea73e04df0e3b517cdc4da7061b76e1ed207..12e0fa290969e0a859cefc263f2fc2a7510f479d
--- 1/scss/_carousel.scss
--- 2/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@@ -7,48 -7,77 +7,48 @@@
    position: relative;
    width: 100%;
    overflow: hidden;
 +}
  
 -  > .carousel-item {
 -    position: relative;
 -    display: none;
 -    @include transition(left .6s ease-in-out);
 -
 -    // Account for jankitude on images
 -    > img,
 -    > a > img {
 -      @extend .img-fluid;
 -      line-height: 1;
 -    }
 +.carousel-item {
 +  position: relative;
 +  display: none;
 +  width: 100%;
  
 -    // CSS3 transforms when supported by the browser
 -    @include if-supports-3d-transforms() {
 -      @include transition(transform .6s ease-in-out);
 -      backface-visibility: hidden;
 -      perspective: 1000px;
 -
 -      &.next,
 -      &.active.right {
 -        left: 0;
 -        transform: translate3d(100%, 0, 0);
 -      }
 -      &.prev,
 -      &.active.left {
 -        left: 0;
 -        transform: translate3d(-100%, 0, 0);
 -      }
 -      &.next.left,
 -      &.prev.right,
 -      &.active {
 -        left: 0;
 -        transform: translate3d(0, 0, 0);
 -      }
 -    }
 +  // CSS3 transforms when supported by the browser
 +  @include if-supports-3d-transforms() {
-     transition: transform .6s ease-in-out;
++    @include transition(transform .6s ease-in-out);
 +    backface-visibility: hidden;
 +    perspective: 1000px;
    }
 +}
  
 -  > .active,
 -  > .next,
 -  > .prev {
 -    display: block;
 -  }
 +.carousel-item.active,
 +.carousel-item-next,
 +.carousel-item-prev {
 +  display: block;
 +}
  
 -  > .active {
 -    left: 0;
 -  }
 +.carousel-item-next,
 +.carousel-item-prev {
 +  position: absolute;
 +  top: 0;
 +}
  
 -  > .next,
 -  > .prev {
 -    position: absolute;
 -    top: 0;
 -    width: 100%;
 +// CSS3 transforms when supported by the browser
 +@include if-supports-3d-transforms() {
 +  .carousel-item-next.carousel-item-left,
 +  .carousel-item-prev.carousel-item-right {
 +    transform: translate3d(0, 0, 0);
    }
  
 -  > .next {
 -    left: 100%;
 -  }
 -  > .prev {
 -    left: -100%;
 -  }
 -  > .next.left,
 -  > .prev.right {
 -    left: 0;
 +  .carousel-item-next,
 +  .active.carousel-item-right {
 +    transform: translate3d(100%, 0, 0);
    }
  
 -  > .active.left {
 -    left: -100%;
 -  }
 -  > .active.right {
 -    left: 100%;
 +  .carousel-item-prev,
 +  .active.carousel-item-left {
 +    transform: translate3d(-100%, 0, 0);
    }
  }
  

diff --cc scss/_variables.scss
Simple merge