@carbon/ibmdotcom-styles 2.22.0 → 2.24.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.22.0",
+  "version": "2.24.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": "132e28b837ca5dab284f107912f150a5863a4495"
+  "gitHead": "fa8caaccbd76c72beac47f83c0d6da573fdb413e"
 }

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