@carbon/ibmdotcom-styles 2.21.0 → 2.23.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.21.0",
+  "version": "2.23.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": "6574e60647f425d56225e0909d80ae894376db99"
+  "gitHead": "9604f645e0c57f759fa698ef64a2504b0b244c52"
 }

package/scss/components/card-group/_card-group.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.
@@ -42,7 +42,9 @@
         1fr
       );
     }
+  }
 
+  :host(#{$c4d-prefix}-card-group):not(.is-full-width-template) {
     @include breakpoint-down(md) {
       padding-inline: $spacing-05;
     }

package/scss/components/content-item-row-media/_content-item-row-media.scss

@@ -30,14 +30,20 @@
     }
 
     ::slotted([slot='media']) {
-      margin-block-start: $spacing-07;
+      margin-block-end: $spacing-07;
+      margin-inline: -$spacing-05;
+
+      @include breakpoint-between(md, lg) {
+        margin-inline: -$spacing-07;
+      }
 
       @include breakpoint(md) {
-        margin-block-start: $spacing-09;
+        margin-block-end: $spacing-09;
       }
 
       @include breakpoint(lg) {
-        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline: 0;
       }
     }
   }
@@ -115,10 +121,6 @@
       grid-column: 1 / span 4;
       text-align: start;
 
-      &:first-of-type {
-        margin-inline-end: $spacing-07;
-      }
-
       &:last-of-type {
         @include breakpoint(lg) {
           grid-column: 5 / span 8;
@@ -132,14 +134,12 @@
         &:first-of-type {
           @include breakpoint(lg) {
             grid-column: 1 / span 8;
-            margin-inline-end: 0;
           }
         }
 
         &:last-of-type {
           @include breakpoint(lg) {
             grid-column: 9 / span 4;
-            margin-inline-end: $spacing-07;
           }
         }
       }

package/scss/components/masthead/_masthead-l1.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.
@@ -150,6 +150,8 @@ $search-transition-timing: 95ms;
 
       &.is-open {
         box-shadow: 0 2px 6px 0 $shadow;
+        /* stylelint-disable-next-line declaration-no-important */
+        inline-size: 100vw !important;
       }
 
       &:not(.is-open) {

package/scss/components/pricing-table/_pricing-table.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2024
+// Copyright IBM Corp. 2022, 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.
@@ -364,4 +364,9 @@
     transform: translateY(-#{$spacing-05});
     transition: $duration-fast-02 motion(standard, productive);
   }
+
+  :host(.overflowing-right) .overflow-indicator.right,
+  :host(.overflowing-left) .overflow-indicator.left {
+    opacity: 1;
+  }
 }

package/scss/components/quote/_quote.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.
@@ -190,4 +190,63 @@
 
     display: inline-block;
   }
+
+  .#{$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;
+
+    @include breakpoint-down(md) {
+      /* mobile inline gutters for the bubble quote */
+      margin-inline: 16px;
+      max-inline-size: calc(100% - 32px);
+    }
+
+    .bubble-pointer {
+      --fill: #f4f4f4;
+      --stroke: #8d8d8d;
+
+      position: absolute;
+      inset-block-start: 100%;
+      inset-inline-start: 2rem;
+
+      @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);
+      }
+    }
+
+    .bubble-pointer-fill {
+      fill: var(--fill);
+    }
+
+    .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(lg) {
+        inset-inline-start: 1.25rem;
+      }
+      @include breakpoint-down(md) {
+        inset-inline-start: 2.8rem;
+      }
+    }
+  }
+
+  /* Mirroing the bubble quote in RTL modes */
+  :host([lang='ar']) .#{$prefix}-bubble-quote .bubble-pointer {
+    inset-inline: auto 2rem;
+    transform: scaleX(-1);
+  }
 }

package/scss/components/structured-list/_structured-list.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 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.
@@ -20,6 +20,13 @@
     --cols: var(--col-span-#{$colNumber}, 2);
     --width: calc((var(--cols) / var(--max-cols)) * 100%);
 
+    @include breakpoint-down(md) {
+      //Adjusting the mobile column width calculation. We're subtracting 5% of its width in mobile so that the next column 'peeks out' from the right side of the screen, indicating there's more scrollable content.
+      --width: calc(
+        (var(--cols) / var(--max-cols)) * 100% - var(--mobile-peek, 5%)
+      );
+    }
+
     flex: 0 0 var(--width);
 
     max-inline-size: var(--width);

package/scss/globals/_scroll-snap.scss

@@ -0,0 +1,24 @@
+/**
+ * @license
+ *
+ * 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.
+ */
+
+@use '@carbon/styles/scss/breakpoint' as *;
+
+@mixin scroll-snap-container() {
+  overflow: scroll hidden;
+  // Width safeguards
+  inline-size: 100%;
+  max-inline-size: 100vw;
+  overscroll-behavior-x: contain;
+
+  // Extra space for auto-appearing scrollbar
+  padding-block: 4px 1rem;
+
+  // Extra space for css outlines on inner cards
+  scroll-snap-type: x mandatory;
+}