@carbon/ibmdotcom-web-components 2.21.0 → 2.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/ibmdotcom-web-components",
-  "version": "2.21.0",
+  "version": "2.23.0",
   "description": "Carbon for IBM.com Web Components",
   "license": "Apache-2.0",
   "exports": {
@@ -92,9 +92,9 @@
     "cypress:verify": "cypress verify"
   },
   "dependencies": {
-    "@carbon/ibmdotcom-services": "2.21.0",
-    "@carbon/ibmdotcom-styles": "2.21.0",
-    "@carbon/ibmdotcom-utilities": "2.21.0",
+    "@carbon/ibmdotcom-services": "2.23.0",
+    "@carbon/ibmdotcom-styles": "2.23.0",
+    "@carbon/ibmdotcom-utilities": "2.23.0",
     "@carbon/layout": "11.27.0",
     "@carbon/motion": "11.24.0",
     "@carbon/styles": "1.65.0",
@@ -243,5 +243,5 @@
     "web-component-analyzer": "1.2.0-next.0",
     "webpack": "^4.46.0"
   },
-  "gitHead": "6574e60647f425d56225e0909d80ae894376db99"
+  "gitHead": "9604f645e0c57f759fa698ef64a2504b0b244c52"
 }

package/scss/components/cta-block/cta-block.scss

@@ -1,5 +1,5 @@
 //
-// 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.
@@ -15,7 +15,7 @@
 @use '@carbon/ibmdotcom-styles/scss/components/layout';
 @use '@carbon/ibmdotcom-styles/scss/globals/utils/flex-grid' as *;
 @use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
-
+@use '@carbon/ibmdotcom-styles/scss/globals/scroll-snap' as *;
 :host(#{$c4d-prefix}-cta-block) {
   display: block;
 
@@ -129,6 +129,41 @@
   grid-template-rows: auto;
   inline-size: 100%;
 
+  .scroll-container {
+    $gutter: 1rem;
+    $gap: 1rem;
+
+    @include breakpoint('md') {
+      display: contents;
+    }
+    @include breakpoint-down('md') {
+      @include scroll-snap-container();
+
+      display: flex;
+      gap: $gap;
+      padding-inline: $gutter;
+
+      &::after {
+        flex-basis: 1px;
+        flex-shrink: 0;
+        content: '';
+      }
+
+      ::slotted(#{$c4d-prefix}-content-item),
+      ::slotted(#{$c4d-prefix}-cta-block-item) {
+        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;
+      }
+    }
+  }
+
   // Hide last row's items' bottom border
   &::after {
     @include breakpoint(md) {

package/scss/components/masthead/masthead-l1.scss

@@ -1,11 +1,12 @@
 //
-// 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.
 //
 
-@use '@carbon/ibmdotcom-styles/scss/components/masthead/masthead-l1' as *;
+//@use '@carbon/ibmdotcom-styles/scss/components/masthead/masthead-l1' as *;
+@use '../../../../styles/scss/components/masthead/masthead-l1' as *;
 @use '@carbon/styles/scss/reset' as *;
 
 @include masthead-l1;