@carbon/ibm-products-styles 2.63.0 → 2.64.0-rc.0

package/scss/components/AboutModal/_about-modal.scss

@@ -25,9 +25,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
 }
 
 .#{$block-class} .#{$block-class}__header {
-  padding: 0 20% 0 $spacing-05;
+  padding: 0;
   grid-row: auto;
   margin-block-end: 0;
+  padding-inline-end: 20%;
+  padding-inline-start: $spacing-05;
 }
 
 .#{$block-class} .#{$block-class}__title {

package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -80,7 +80,6 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
 
   .#{$_block-class}__displayed-breadcrumb:last-child {
     display: inline-flex; // flex instead of block due to spacing
-    overflow: hidden;
   }
 
   .#{$_block-class}__displayed-breadcrumb:last-child

package/scss/components/Carousel/_carousel.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities';
 @use '../../global/styles/project-settings' as c4p-settings;
 
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -60,6 +61,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--carousel;
   -ms-user-select: none;
   user-select: none;
 
+  &:focus {
+    @include utilities.focus-outline('outline');
+  }
+
   /* stylelint-disable-next-line max-nesting-depth */
   @media (prefers-reduced-motion) {
     scroll-behavior: auto;

package/scss/components/Datagrid/styles/_draggableElement.scss

@@ -11,13 +11,24 @@
 @use '@carbon/styles/scss/motion' as *;
 @use './variables';
 
+// Drag handle.
 .#{variables.$block-class}__draggable-handleStyle {
-  display: flex;
-  align-items: center;
+  // Cancel out default button styling.
+  padding: 0;
+  border: none;
+  background: none;
+
+  cursor: grab;
   margin-inline-end: $spacing-03;
 }
 
+.#{variables.$block-class}__draggable-handleStyle:active,
+.#{variables.$block-class}__draggable-handleHolder--dragging {
+  cursor: grabbing;
+}
+
 .#{variables.$block-class}__draggable-handleStyle.disabled {
+  cursor: none;
   pointer-events: none;
 }
 
@@ -39,13 +50,13 @@
   inline-size: 100%;
 }
 
+// The draggable element itself.
 .#{variables.$block-class}__draggable-handleHolder {
   position: relative; // above underlay
   display: flex;
   background-color: $layer;
   block-size: $spacing-09;
   border-block-end: 1px solid $layer-active;
-  cursor: grab;
 }
 
 .#{variables.$block-class}__draggable-handleHolder:hover {
@@ -68,11 +79,6 @@
   outline: none;
 }
 
-.#{variables.$block-class}__draggable-handleHolder:active,
-.#{variables.$block-class}__draggable-handleHolder--dragging {
-  cursor: grabbing;
-}
-
 .#{variables.$block-class}__draggable-handleHolder-selected:hover {
   background-color: $layer-selected-hover-01;
 }

package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss

@@ -38,13 +38,6 @@
   justify-content: center;
 }
 
-.#{variables.$block-class}__customize-columns-column-list
-  .#{variables.$block-class}__customize-columns-checkbox-visible-label {
-  // Disabling linter only to match the spacing that Carbon uses for the Checkbox label
-  /* stylelint-disable-next-line */
-  padding-inline-start: convert.to-rem(6px);
-}
-
 .#{variables.$block-class}__customize-columns-column-list
   .#{variables.$block-class}__customize-columns-checkbox-wrapper.#{c4p-settings.$carbon-prefix}--form-item {
   margin-block-end: 0;

package/scss/components/FilterSummary/_filter-summary.scss

@@ -9,7 +9,6 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/motion' as *;
-@use './animations' as *;
 
 $block-class: #{$pkg-prefix}--filter-summary;
 
@@ -31,10 +30,6 @@ $block-class: #{$pkg-prefix}--filter-summary;
   &.#{$block-class}__expanded {
     block-size: fit-content;
   }
-  .#{$pkg-prefix}--tag-set__tag-container {
-    animation: filter-summary-enter $duration-moderate-01
-      motion(entrance, productive) forwards;
-  }
 }
 
 .#{$block-class}

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -70,7 +70,7 @@ $one-grid-column: calc(100% / 16);
     .#{$block-class}--titleContainer {
       margin-block-end: $spacing-05;
 
-      h2 {
+      h1 {
         @include type.type-style('productive-heading-04');
 
         margin-block-end: $spacing-03;
@@ -80,7 +80,7 @@ $one-grid-column: calc(100% / 16);
         }
       }
 
-      h3 {
+      h2 {
         @include type.type-style('productive-heading-03');
 
         &:empty {

package/scss/global/styles/_display-box.scss

@@ -41,10 +41,8 @@ $indicator-height: $spacing-04;
 }
 
 .sb-main-centered .#{$block-class}__message {
-  inset-inline-start: 50%;
-  min-inline-size: 100vh;
+  inline-size: inherit;
   text-align: center;
-  transform: translateX(-50%);
 }
 
 .#{$block-class}__indicator--left,

package/scss/components/FilterSummary/_animations.scss

@@ -1,20 +0,0 @@
-//
-// Copyright IBM Corp. 2025, 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.
-//
-@keyframes filter-summary-enter {
-  0% {
-    block-size: 0;
-    opacity: 0;
-    /* Move from top */
-    transform: translateY(calc(var(--panel-transform) * -1));
-  }
-
-  100% {
-    block-size: var(--panel-transform);
-    opacity: 1;
-    transform: translateY(0);
-  }
-}