From 13149575905a1b522f0a10abacdf17db8f8bed75 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Wed, 11 Oct 2023 16:47:58 -0400
Subject: [PATCH] fix(carousel): carousel rtl fixes

---
 .../scss/components/carousel/_carousel.scss   | 42 ++++++++++---------
 .../src/components/carousel/carousel.ts       |  3 +-
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/packages/styles/scss/components/carousel/_carousel.scss b/packages/styles/scss/components/carousel/_carousel.scss
index 57e28e7e518..b339d4fd383 100644
--- a/packages/styles/scss/components/carousel/_carousel.scss
+++ b/packages/styles/scss/components/carousel/_carousel.scss
@@ -32,19 +32,19 @@
   flex-direction: column;
 
   overflow: hidden;
-  width: calc(
+  inline-size: calc(
     100% + var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05})
   );
-  margin-right: calc(
+  margin-inline-end: calc(
     -1 * var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05})
   );
-  padding-left: $spacing-05;
-  padding-right: calc(
+  padding-inline-start: $spacing-05;
+  padding-inline-end: calc(
     #{$spacing-05} + var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05})
   );
 
   @include carbon--breakpoint(md) {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   ::slotted(:not([name])) {
@@ -54,8 +54,8 @@
             100% - (var(--#{$dds-prefix}--carousel--page-size, 1) - 1) * #{$spacing-05}
           ) / var(--#{$dds-prefix}--carousel--page-size, 1)
       );
-    height: auto;
-    margin-right: $spacing-05;
+    block-size: auto;
+    margin-inline-end: $spacing-05;
     vertical-align: middle;
   }
 
@@ -63,14 +63,14 @@
     grid-area: body;
     position: relative;
     overflow: hidden;
-    margin-right: calc(
+    margin-inline-end: calc(
       -1 * (#{$spacing-05} + var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05}))
     );
   }
 
   .#{$prefix}--carousel__scroll-contents {
     position: relative;
-    margin-right: calc(
+    margin-inline-end: calc(
       #{$spacing-05} + var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05})
     );
     display: flex;
@@ -80,7 +80,8 @@
   }
 
   .#{$prefix}--carousel__scroll-contents--scrolling {
-    transition: left $duration--slow-01 motion(standard, productive);
+    transition: inset-inline-start $duration--slow-01
+      motion(standard, productive);
   }
 
   .#{$prefix}--carousel__navigation {
@@ -92,14 +93,15 @@
     justify-content: flex-end;
     align-items: center;
     gap: $spacing-05;
-    margin-top: $spacing-05;
+    margin-block-start: $spacing-05;
+    direction: ltr;
   }
 
   .#{$prefix}--btn.#{$prefix}--carousel__navigation__btn {
     padding: 0;
-    min-height: $container-03;
-    width: $container-03;
-    height: $container-03;
+    min-block-size: $container-03;
+    block-size: $container-03;
+    inline-size: $container-03;
 
     svg {
       margin: auto;
@@ -109,11 +111,11 @@
 
 :host(#{$dds-prefix}-carousel[in-modal]) {
   padding: 0 0 $spacing-05;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
 
   @include carbon--breakpoint(md) {
-    padding-bottom: 0;
+    padding-block-end: 0;
   }
 
   .#{$prefix}--carousel__scroll-container {
@@ -121,7 +123,7 @@
   }
 
   .#{$prefix}--carousel__scroll-contents {
-    height: 100%;
+    block-size: 100%;
   }
 }
 
@@ -133,8 +135,8 @@
     flex-flow: row wrap;
     margin: 0;
     padding: 0;
-    max-width: 100%;
-    width: 100%;
+    max-inline-size: 100%;
+    block-size: 100%;
 
     .#{$prefix}--carousel__scroll-container {
       margin: 0;
diff --git a/packages/web-components/src/components/carousel/carousel.ts b/packages/web-components/src/components/carousel/carousel.ts
index 3411de5f862..c5896a01c16 100644
--- a/packages/web-components/src/components/carousel/carousel.ts
+++ b/packages/web-components/src/components/carousel/carousel.ts
@@ -722,7 +722,8 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
           )}">
           <div
             class="${scrollContentsClasses}"
-            style="left:${(-start * (contentsBaseWidth + gap)) / pageSize}px">
+            style="inset-inline-start:${(-start * (contentsBaseWidth + gap)) /
+            pageSize}px">
             <slot @slotchange="${handleSlotChange}"></slot>
           </div>
         </div>