@carbon/ibmdotcom-styles 2.23.0 → 2.25.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.23.0",
+  "version": "2.25.0",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
@@ -48,5 +48,5 @@
     "sass": "~1.84.0",
     "sass-loader": "^13.0.0"
   },
-  "gitHead": "9604f645e0c57f759fa698ef64a2504b0b244c52"
+  "gitHead": "f3f2a1b80455f6300ce092c729bae016442259ff"
 }

package/scss/components/background-media/_background-media.scss

@@ -69,6 +69,16 @@
     }
   }
 
+  .#{$prefix}--background-media--gradient--right-to-left {
+    @include breakpoint(lg) {
+      background-image: linear-gradient(
+        to left,
+        $background 25%,
+        rgba(255, 255, 255, 0) 75%
+      );
+    }
+  }
+
   .#{$prefix}--background-media--gradient--top-to-bottom {
     @include breakpoint(lg) {
       background-image: linear-gradient(

package/scss/components/card-group/_card-group.scss

@@ -14,6 +14,7 @@
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/scroll-snap' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/imports' as *;
@@ -243,6 +244,53 @@
     }
   }
 
+  // Mobile horizontal scroll snap behavior
+  :host(#{$c4d-prefix}-card-group).inside-block-cards:not(
+      .media-type-block-cards__logo
+    ) {
+    $gutter: 1rem;
+    $gap: 1rem;
+
+    @include breakpoint-down('md') {
+      @include scroll-snap-container();
+
+      display: flex;
+      gap: $gap;
+      padding-inline: $gutter;
+
+      > ::slotted(a) {
+        /* stylelint-disable-next-line declaration-no-important */
+        display: grid !important;
+        box-sizing: border-box;
+        flex-basis: clamp(220px, 65vw, 400px);
+        flex-shrink: 0;
+        align-content: start;
+        block-size: auto;
+
+        // override web component internal padding and rely on gap instead
+        padding-inline: 0;
+
+        scroll-margin: $gutter;
+        scroll-snap-align: start;
+      }
+
+      > ::slotted(#{$c4d-prefix}-card-group-item) {
+        display: grid;
+        box-sizing: border-box;
+        flex-basis: clamp(220px, 65vw, 400px);
+        flex-shrink: 0;
+        align-content: start;
+        block-size: auto;
+
+        // // override web component internal padding and rely on gap instead
+        padding-inline: 0;
+
+        scroll-margin: $gutter;
+        scroll-snap-align: start;
+      }
+    }
+  }
+
   // Print styles
   @media print {
     :host(#{$c4d-prefix}-card-group) {

package/scss/components/card-section-offset/_card-section-offset.scss

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2024
+ * Copyright IBM Corp. 2020, 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.
@@ -106,6 +106,19 @@
     }
   }
 
+  :host(:dir(rtl)) {
+    ::slotted([slot='heading']) {
+      margin-right: 1rem;
+    }
+
+    ::slotted([slot='action']) {
+      //important needed because <a slot="action" style="display: contents;"> in AEM has an inline style
+      /* stylelint-disable declaration-no-important */
+      display: block !important;
+      margin-right: 1rem !important;
+    }
+  }
+
   // Print styles
   @media print {
     .#{$prefix}--card-section-offset__content,