fix(leadspace): wrong gradient display when in RLT mode

packages/styles/scss/components/video-player/_video-player.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2024
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -16,6 +16,7 @@
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/button/vars' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
 $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
 
 @mixin video-player {
@@ -60,6 +61,18 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
       min-inline-size: 100%;
       translate: -50% -50%;
     }
+
+    /**
+     * overwriting inset property so the video player is centered in the container when in RTL mode
+     */
+    ::slotted(.#{$c4d-prefix}--video-player__video[dir-mode='rtl']),
+    .#{$c4d-prefix}--video-player__video[dir-mode='rtl'] {
+      inset: 50% -50% 0 50%;
+
+      @include breakpoint-down('lg') {
+        inset: 50% -67% 0 50%;
+      }
+    }
   }
 
   .#{$c4d-prefix}--video-player

packages/web-components/src/components/leadspace/leadspace.ts

@@ -153,6 +153,34 @@ class C4DLeadSpace extends StableSelectorMixin(LitElement) {
   @property({ reflect: true })
   size = 'tall';
 
+  /**
+   *  Determines if the direction is right-to-left
+   */
+  @property({ type: Boolean })
+  isRTL = false;
+
+  private observer!: MutationObserver;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // initializing the MutationObserver
+    this.observer = new MutationObserver(() => {
+      this.isRTL =
+        this.dir === 'rtl' || getComputedStyle(this).direction === 'rtl';
+    });
+
+    // observing the 'dir' attr in the root element
+    this.observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['dir'],
+    });
+
+    // Initial check for the direction
+    this.isRTL =
+      this.dir === 'rtl' || getComputedStyle(this).direction === 'rtl';
+  }
+
   firstUpdated() {
     Array.from(this.children).forEach((child) => {
       if (
@@ -189,8 +217,12 @@ class C4DLeadSpace extends StableSelectorMixin(LitElement) {
                   xmlns:xlink="http://www.w3.org/1999/xlink"
                 >
                   <defs>
-                    <linearGradient id="stops" class="${c4dPrefix}--leadspace__gradient__stops" gradientTransform="${
-                  type === LEADSPACE_TYPE.CENTERED ? 'rotate(90)' : ''
+                    <linearGradient id="stops" class="${c4dPrefix}--leadspace__gradient__stops"     gradientTransform="${
+                  type === LEADSPACE_TYPE.CENTERED
+                    ? 'rotate(90)'
+                    : this.isRTL
+                    ? 'scale(-1, 1) translate(-1, 0)'
+                    : ''
                 }">
                       ${
                         type === LEADSPACE_TYPE.CENTERED

packages/web-components/src/components/video-player/video-player-composite.ts

@@ -357,6 +357,14 @@ class C4DVideoPlayerComposite extends HybridRenderMixin(
   @property({ type: Number, attribute: 'video-thumbnail-width' })
   videoThumbnailWidth = 3;
 
+  /**
+   *  Determines if the direction is right-to-left
+   */
+  @property({ type: Boolean })
+  isRTL = false;
+
+  private observer!: MutationObserver;
+
   /**
    * Observe when the video container enters into view.
    */
@@ -387,6 +395,22 @@ class C4DVideoPlayerComposite extends HybridRenderMixin(
     if (this.intersectionMode) {
       this._cleanAndCreateObserverIntersection({ create: true });
     }
+
+    // initializing the MutationObserver to observe for changes in the direction mode
+    this.observer = new MutationObserver(() => {
+      this.isRTL =
+        this.dir === 'rtl' || getComputedStyle(this).direction === 'rtl';
+    });
+
+    // observing the 'dir' attr in the root element
+    this.observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['dir'],
+    });
+
+    // Initial check for the direction
+    this.isRTL =
+      this.dir === 'rtl' || getComputedStyle(this).direction === 'rtl';
   }
 
   disconnectedCallback() {
@@ -408,6 +432,11 @@ class C4DVideoPlayerComposite extends HybridRenderMixin(
   }
 
   renderLightDOM() {
+    // setting the direction mode of the video player
+    document
+      .querySelector('.c4d--video-player__video')
+      ?.setAttribute('dir-mode', `${this.isRTL ? 'rtl' : 'ltr'}`);
+
     const {
       aspectRatio,
       formatCaption,