@carbon/ibmdotcom-styles 2.24.0 → 2.26.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.24.0",
+  "version": "2.26.0-rc.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": "fa8caaccbd76c72beac47f83c0d6da573fdb413e"
+  "gitHead": "2bb6159f2a0e79c36286ccdc3de5a0e77fb54d49"
 }

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-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,

package/scss/components/carousel/_carousel.scss

@@ -1,7 +1,7 @@
 //
 // @license
 //
-// Copyright IBM Corp. 2020, 2023
+// 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.
@@ -64,6 +64,12 @@
       vertical-align: middle;
     }
 
+    ::slotted(#{$c4d-prefix}-callout-quote:not(:first-child)) {
+      @include breakpoint(md) {
+        margin-inline-start: 0;
+      }
+    }
+
     .#{$prefix}--carousel__scroll-container {
       position: relative;
       overflow: hidden;

package/scss/components/image/_image.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.
@@ -65,7 +65,6 @@
   :host(#{$c4d-prefix}-image)[heading] {
     display: block;
     margin-block: $spacing-07;
-    max-inline-size: to-rem(640px);
 
     @include breakpoint(md) {
       margin-block: $spacing-07;
@@ -140,6 +139,8 @@
     color: $text-helper;
 
     margin-block-start: $spacing-03;
+
+    max-inline-size: to-rem(640px);
   }
 
   :host(#{$c4d-prefix}-image[lightbox-contrast='dark']) {

package/scss/components/link-list/_link-list.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.
@@ -87,7 +87,7 @@
     .#{$prefix}--link {
       display: flex;
       align-content: flex-start;
-      padding: $spacing-04 0;
+      padding: $spacing-03 0;
       gap: $spacing-03;
       inline-size: 100%;
 

package/scss/components/quote/_quote.scss

@@ -191,55 +191,71 @@
     display: inline-block;
   }
 
+  //Hiding bubble-pointer as bubble-quote is mobible only
   .#{$prefix}-bubble-quote {
-    position: relative;
-    padding: 2.5rem;
-    border: 1px solid #8d8d8d;
-    border-radius: 0.25rem;
-    background: #f4f4f4;
-    margin-block-end: 3.81rem; /* match svg pointer height */
-    margin-inline: 0;
+    .bubble-pointer {
+      display: none;
+    }
+  }
 
-    @include breakpoint-down(md) {
-      /* mobile inline gutters for the bubble quote */
+  //Bubble-quote variation is mobile only
+  @include breakpoint-down(md) {
+    .#{$prefix}-bubble-quote {
+      position: relative;
+      padding: 2.5rem;
+      border: 1px solid #8d8d8d;
+      border-radius: 0.25rem;
+      background: #f4f4f4;
+      margin-block-end: 3.81rem; /* match svg pointer height */
       margin-inline: 16px;
       max-inline-size: calc(100% - 32px);
-    }
 
-    .bubble-pointer {
-      --fill: #f4f4f4;
-      --stroke: #8d8d8d;
+      .bubble-pointer {
+        --fill: #f4f4f4;
+        --stroke: #8d8d8d;
 
-      position: absolute;
-      inset-block-start: 100%;
-      inset-inline-start: 2rem;
+        position: absolute;
 
-      @include breakpoint-down(md) {
-        /* adjusting the pointer top position a bit since the max-inline-size calc changes in mobile. */
-        inset-block-start: calc(100% - 1px);
+        display: block;
+        inset-block-start: 100%;
+        inset-inline-start: 2rem;
       }
-    }
 
-    .bubble-pointer-fill {
-      fill: var(--fill);
-    }
+      .bubble-pointer-fill {
+        fill: var(--fill);
+      }
 
-    .bubble-pointer-stroke {
-      stroke: var(--stroke);
+      .bubble-pointer-stroke {
+        stroke: var(--stroke);
+      }
     }
   }
 
-  :host([mark-type='bubble-quote']) {
-    span.cds--quote__mark[part~='mark--opening'] {
-      z-index: 1;
-      inset-block-start: 2.5rem;
-      inset-inline-start: 0.875rem;
+  @include breakpoint-down(md) {
+    :host([appearance='bubble-quote']),
+    :host([appearance='card']) {
+      span.cds--quote__mark[part~='mark--opening'] {
+        z-index: 1;
+        inset-block-start: 2.5rem;
+        inset-inline-start: 2.8rem;
+      }
+    }
+  }
 
-      @include breakpoint-down(lg) {
-        inset-inline-start: 1.25rem;
+  @include breakpoint-down(md) {
+    :host([appearance='bubble-quote'])[mark-type='corner-bracket'],
+    :host([appearance='card'])[mark-type='corner-bracket'] {
+      span.cds--quote__mark[part~='mark--opening'] {
+        inset-inline-start: 2.2rem;
       }
-      @include breakpoint-down(md) {
-        inset-inline-start: 2.8rem;
+    }
+  }
+
+  @include breakpoint-up(md) {
+    :host([appearance='bubble-quote'])[mark-type='corner-bracket'],
+    :host([appearance='card'])[mark-type='corner-bracket'] {
+      span.cds--quote__mark[part~='mark--opening'] {
+        inset-inline-start: -1.125rem;
       }
     }
   }