@carbon/ibm-products-styles 2.55.0 → 2.56.0-rc.0

package/scss/components/Saving/_saving.scss

@@ -7,7 +7,7 @@
 
 // Standard imports.
 @use '@carbon/styles/scss/type';
-@use '@carbon/react/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
 
@@ -18,7 +18,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--saving;
 }
 
 .#{$block-class}__error-icon {
-  margin-right: $spacing-05;
+  margin-inline-end: $spacing-05;
 }
 
 .#{$block-class}__error-icon svg {

package/scss/components/ScrollGradient/_scroll-gradient.scss

@@ -16,20 +16,20 @@ $block-class: #{c4p-settings.$pkg-prefix}--scroll-gradient;
 .#{$block-class} {
   position: relative;
   display: flex;
-  width: inherit;
-  height: inherit;
   align-items: stretch;
   justify-content: stretch;
+  block-size: inherit;
+  inline-size: inherit;
 }
 .#{$block-class}__content {
   overflow: auto;
-  width: 100%;
-  height: inherit;
+  block-size: inherit;
+  inline-size: 100%;
 }
 
 .#{$block-class}__content-children {
-  width: 100%;
-  height: 100%;
+  block-size: 100%;
+  inline-size: 100%;
 }
 // All gradients
 .#{$block-class}__start-vertical,
@@ -44,29 +44,29 @@ $block-class: #{c4p-settings.$pkg-prefix}--scroll-gradient;
 
 // Vertical start
 .#{$block-class}--y-scrollable .#{$block-class}__start-vertical {
-  top: 0;
-  left: 0;
-  height: $spacing-09;
+  block-size: $spacing-09;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 // Vertical end
 .#{$block-class}--y-scrollable .#{$block-class}__end-vertical {
-  bottom: 0;
-  left: 0;
-  height: $spacing-09;
+  block-size: $spacing-09;
+  inset-block-end: 0;
+  inset-inline-start: 0;
 }
 
 // Horizontal start
 .#{$block-class}--x-scrollable .#{$block-class}__start-horizontal {
-  top: 0;
-  left: 0;
-  width: $spacing-09;
+  inline-size: $spacing-09;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 
 // Horizontal end
 .#{$block-class}--x-scrollable .#{$block-class}__end-horizontal {
-  top: 0;
-  right: 0;
-  width: $spacing-09;
+  inline-size: $spacing-09;
+  inset-block-start: 0;
+  inset-inline-end: 0;
 }
 
 // Vertical start states

package/scss/components/SidePanel/_animations.scss

@@ -0,0 +1,78 @@
+//
+// 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 side-panel-entrance-reduced {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes side-panel-exit-reduced {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes side-panel-entrance-right {
+  0% {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(var(--panel-transform));
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes side-panel-entrance-left {
+  0% {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(calc(var(--panel-transform) * -1));
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes side-panel-exit-right {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(var(--panel-transform));
+  }
+}
+
+@keyframes side-panel-exit-left {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(calc(var(--panel-transform) * -1));
+  }
+}

package/scss/components/SidePanel/_carbon-imports.scss

@@ -7,4 +7,4 @@
 
 // SidePanel uses the following Carbon components:
 // Button
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/components/button';

package/scss/components/SidePanel/_side-panel.scss

@@ -1,5 +1,5 @@
 //
-// 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.
@@ -21,6 +21,7 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins' as *;
 @use './side-panel-variables' as *;
+@use './animations' as *;
 
 // SidePanel uses the following IBM Products components:
 // ActionSet
@@ -29,42 +30,53 @@
 $block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
+@property --panel-transform {
+  inherits: true;
+  initial-value: 320px;
+  syntax: '<integer>';
+}
+
 @mixin setPanelSize($size: map.get($side-panel-sizes, md)) {
   /* any value is single value list */
-  width: list.nth($size, 1);
+  inline-size: list.nth($size, 1);
   @if list.length($size) > 1 {
-    min-width: list.nth($size, 2);
+    min-inline-size: list.nth($size, 2);
   }
 
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 @mixin setDividerStyles() {
   position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 1px;
   background-color: $border-subtle-02;
+  block-size: 1px;
   content: '';
+  inline-size: 100%;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   opacity: var(--#{$block-class}--scroll-animation-progress);
 }
 
 @mixin setCommonTitleStyles() {
   display: -webkit-box;
   overflow: hidden;
-  /* stylelint-disable-next-line carbon/layout-use -- custom css property set below */
-  padding-right: var(--#{$block-class}--title-padding-right);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
+  /* stylelint-disable-next-line carbon/layout-use -- custom css property set below */
+  padding-inline-end: var(--#{$block-class}--title-padding-right);
 }
 
 .#{$block-class}--scrolls {
   overflow: auto;
   overflow-x: hidden;
+  @supports (overflow-inline: hidden) {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+    overflow-inline: hidden;
+  }
 }
 
 .#{$block-class} {
+  --panel-transform: 320px;
   --#{$block-class}--title-stop: #{$spacing-05};
   --#{$block-class}--scroll-animation-progress: 0;
   --#{$block-class}--title-padding-right: #{$spacing-07};
@@ -72,14 +84,25 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
   position: fixed;
   z-index: utilities.z('modal');
-  top: $spacing-09;
   display: grid;
-  height: calc(100% - 3rem);
   box-sizing: border-box;
   background-color: $layer-01;
+  block-size: calc(100% - 3rem);
   color: $text-primary;
   /* if the title does not scroll then we have a child scrolling section. */
   grid-template-rows: auto 1fr auto; /* titles content and actions */
+  inset-block-start: $spacing-09;
+
+  transform: translateX(0);
+  transition-behavior: allow-discrete;
+  transition-duration: $duration-moderate-01;
+  transition-property: display, opacity, transform;
+
+  @starting-style {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(var(--panel-transform));
+  }
 
   @each $size, $size_value in $side-panel-sizes {
     &.#{$block-class}--#{$size} {
@@ -87,6 +110,61 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     }
   }
 
+  &.#{$block-class}--open.#{$block-class}--right-placement {
+    animation: side-panel-entrance-right $duration-moderate-01
+      motion(entrance, productive) forwards;
+  }
+
+  // animation only set for older browsers that do not support `transition-behavior: allow-discrete;`
+  &.#{$block-class}--open.#{$block-class}--left-placement {
+    animation: side-panel-entrance-left $duration-moderate-01
+      motion(entrance, productive) forwards;
+  }
+
+  // animation only set for older browsers that do not support `transition-behavior: allow-discrete;`
+  &.#{$block-class}--closing.#{$block-class}--right-placement {
+    animation: side-panel-exit-right $duration-moderate-01
+      motion(exit, productive) forwards;
+  }
+
+  &.#{$block-class}--closing.#{$block-class}--left-placement {
+    animation: side-panel-exit-left $duration-moderate-01
+      motion(exit, productive) forwards;
+  }
+
+  @supports (transition-behavior: allow-discrete) {
+    &.#{$block-class}--closing {
+      opacity: 0;
+      /* stylelint-disable-next-line carbon/layout-use */
+      transform: translateX(var(--panel-transform, 320px));
+      transition-duration: $duration-moderate-01;
+    }
+    &.#{$block-class}--closing.#{$block-class}--left-placement {
+      /* stylelint-disable-next-line carbon/layout-use */
+      transform: translateX(calc(-1 * var(--panel-transform, 320px)));
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    /* styles to apply if a user's device settings are set to reduced motion */
+    &.#{$block-class}--open {
+      animation: side-panel-entrance-reduced $duration-moderate-01
+        motion(exit, productive) forwards;
+      @starting-style {
+        opacity: 0;
+        transform: translateX(0);
+      }
+    }
+    &.#{$block-class}--closing {
+      animation: side-panel-exit-reduced $duration-moderate-01
+        motion(exit, productive) forwards;
+      @starting-style {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+  }
+
   &.#{$block-class}--animated-title {
     grid-template-rows: 1fr auto; /* titles and content (actions are external to this element) */
   }
@@ -101,21 +179,22 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{$block-class}__actions-container {
-    width: 100%;
+    inline-size: 100%;
   }
   &.#{$block-class}--right-placement {
-    right: 0;
-    border-left: 1px solid $border-subtle-02;
+    border-inline-start: 1px solid $border-subtle-02;
+    inset-inline-end: 0;
   }
   &.#{$block-class}--left-placement {
-    left: 0;
-    border-right: 1px solid $border-subtle-02;
+    border-inline-end: 1px solid $border-subtle-02;
+    inset-inline-start: 0;
   }
   &.#{$block-class}.#{$block-class}--has-slug,
   &.#{$block-class}.#{$block-class}--has-ai-label,
   &.#{$block-class}.#{$block-class}--has-decorator {
     border-color: transparent;
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 10px 2px $ai-drop-shadow;
   }
 
@@ -124,15 +203,17 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
     position: sticky;
     z-index: 4;
-    /* stylelint-disable-next-line carbon/layout-use */
-    top: calc(-1px * var(--#{$block-class}--scroll-animation-distance));
-    min-height: $spacing-08;
     padding: $spacing-05;
-    padding-bottom: 0;
     background-color: $layer-01;
+    /* stylelint-disable-next-line carbon/layout-use */
+    inset-block-start: calc(
+      -1px * var(--#{$block-class}--scroll-animation-distance)
+    );
+    min-block-size: $spacing-08;
+    padding-block-end: 0;
 
     &.#{$block-class}__header--has-title {
-      min-height: auto;
+      min-block-size: auto;
     }
 
     &:has(.#{$block-class}__subtitle-text),
@@ -142,14 +223,14 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
     &:has(.#{$block-class}__navigation-back-button),
     &.#{$block-class}__header--has-navigation-back {
-      padding-top: $spacing-07;
+      padding-block-start: $spacing-07;
     }
 
     &:has(
         .#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
       ),
     &.#{$block-class}__header--has-navigation-back.#{c4p-settings.$carbon-prefix}--btn--md {
-      padding-top: $spacing-08;
+      padding-block-start: $spacing-08;
     }
 
     /* stylelint-disable-next-line max-nesting-depth */
@@ -161,7 +242,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
     &.#{$block-class}__header--no-title-animation {
       position: relative;
-      top: 0;
+      inset-block-start: 0;
     }
 
     &.#{$block-class}__header--no-title-animation::before {
@@ -170,26 +251,26 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
     &.#{$block-class}__header--reduced-motion {
       z-index: 5;
-      border-bottom: 1px solid $border-subtle-02;
-      margin-bottom: $spacing-05;
+      border-block-end: 1px solid $border-subtle-02;
+      margin-block-end: $spacing-05;
     }
 
     &.#{$block-class}__header--reduced-motion.#{$block-class}__header--no-title-animation {
-      border-bottom: 0;
-      margin-bottom: 0;
+      border-block-end: 0;
+      margin-block-end: 0;
     }
 
     &.#{$block-class}__header--on-detail-step
       .#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
       ~ .#{$block-class}__collapsed-title-text {
-      top: $spacing-06;
+      inset-block-start: $spacing-06;
     }
 
     &.#{$block-class}__header--on-detail-step:not(
         .#{$block-class}__header--has-title
       ) {
-      height: calc(#{$spacing-08} + #{$spacing-02});
       padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
+      block-size: calc(#{$spacing-08} + #{$spacing-02});
     }
 
     &:not(.#{$block-class}__header--has-title)::before {
@@ -222,13 +303,13 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   .#{$block-class}__title {
     position: sticky;
     z-index: 4;
-    /* stylelint-disable-next-line carbon/layout-use */
-    top: var(--#{$block-class}--title-stop);
+    background-color: $layer-01;
 
     /* border-bottom used instead of padding which wrapped text shows through */
-    border-bottom: var(--#{$block-class}--title-padding-bottom) solid
+    border-block-end: var(--#{$block-class}--title-padding-bottom) solid
       transparent;
-    background-color: $layer-01;
+    /* stylelint-disable-next-line carbon/layout-use */
+    inset-block-start: var(--#{$block-class}--title-stop);
   }
 
   .#{$block-class}__title-text {
@@ -255,8 +336,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     @include type.type-style('label-01');
 
     overflow: hidden;
-    padding-right: var(--#{$block-class}--title-padding-right);
     opacity: calc(1 - var(--#{$block-class}--scroll-animation-progress));
+    padding-inline-end: var(--#{$block-class}--title-padding-right);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -266,7 +347,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     @include setCommonTitleStyles();
 
     position: absolute;
-    top: 0;
+    inset-block-start: 0;
     opacity: var(--#{$block-class}--scroll-animation-progress);
   }
 
@@ -283,12 +364,13 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     @include type.type-style('body-compact-01');
 
     overflow: hidden;
-    padding-right: var(--#{$block-class}--title-padding-right);
-    padding-bottom: $spacing-05;
 
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
+    line-clamp: 3;
     opacity: calc(1 - var(--#{$block-class}--scroll-animation-progress));
+    padding-block-end: $spacing-05;
+    padding-inline-end: var(--#{$block-class}--title-padding-right);
   }
 
   .#{$block-class}__header--no-title-animation .#{$block-class}__subtitle-text {
@@ -297,22 +379,21 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{$block-class}__title-text + .#{$block-class}__subtitle-text {
-    padding-top: $spacing-05;
+    padding-block-start: $spacing-05;
   }
   .#{$block-class}__inner-content {
-    padding: $spacing-05;
-    padding-top: 0;
+    padding: 0 $spacing-05 $spacing-05;
   }
 
   .#{$block-class}__inner-content--no-animated-title {
-    padding-top: $spacing-05;
+    padding-block-start: $spacing-05;
   }
 
   .#{$block-class}__header:has(.#{$block-class}__action-toolbar)
     + .#{$block-class}__inner-content,
   .#{$block-class}__header--has-action-toolbar
     + .#{$block-class}__inner-content {
-    padding-top: $spacing-03;
+    padding-block-start: $spacing-03;
   }
 
   &.#{$block-class}--has-slug .#{$block-class}--scrolls,
@@ -320,7 +401,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   &.#{$block-class}--has-decorator .#{$block-class}--scrolls {
     @include utilities.ai-popover-gradient('default', 0, 'layer');
 
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 10px 2px $ai-drop-shadow;
   }
 
@@ -334,26 +416,26 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{$block-class}__action-toolbar-leading-button {
-    margin-right: $spacing-03;
+    margin-inline-end: $spacing-03;
   }
 
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__navigation-back-button {
     position: fixed;
     z-index: 5;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
   }
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__navigation-back-button,
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button {
     display: flex;
-    width: $spacing-07;
-    height: $spacing-07;
     align-items: center;
     justify-content: center;
     padding: 0;
     /* stylelint-disable-next-line declaration-property-value-disallowed-list */
     background-color: unset;
+    block-size: $spacing-07;
     color: $text-primary;
+    inline-size: $spacing-07;
     min-block-size: 0;
 
     /* stylelint-disable-next-line max-nesting-depth */
@@ -367,8 +449,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
   .#{c4p-settings.$carbon-prefix}--btn--md.#{$block-class}__navigation-back-button,
   .#{c4p-settings.$carbon-prefix}--btn--md.#{$block-class}__close-button {
-    width: $spacing-08;
-    height: $spacing-08;
+    block-size: $spacing-08;
+    inline-size: $spacing-08;
   }
 
   .#{$block-class}__slug-and-close,
@@ -376,9 +458,9 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   .#{$block-class}__decorator-and-close {
     position: absolute;
     z-index: 10; /* must be higher than title container border bottom */
-    top: 0;
-    right: 0;
     display: flex;
+    inset-block-start: 0;
+    inset-inline-end: 0;
 
     /* stylelint-disable-next-line max-nesting-depth */
     @media (prefers-reduced-motion) {
@@ -388,20 +470,20 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
   .#{$block-class}__actions-container {
     position: sticky; // stick to bottom
-    bottom: 0;
-    border-top: 1px solid $border-subtle-02;
     background-color: $layer-01;
+    border-block-start: 1px solid $border-subtle-02;
+    inset-block-end: 0;
 
     &.#{$action-set-block-class}--2xl {
       .#{$action-set-block-class}__action-button {
-        width: 100%;
-        max-width: 100%;
+        inline-size: 100%;
+        max-inline-size: 100%;
       }
 
       @include breakpoint(md) {
         flex-direction: row;
         .#{$action-set-block-class}__action-button {
-          width: 25%;
+          inline-size: 25%;
         }
       }
 
@@ -410,7 +492,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
     .#{$action-set-block-class}__action-button.#{$action-set-block-class}__action-button {
       // extra class needed to override default size
-      height: var(--#{$block-class}--actions-height);
+      block-size: var(--#{$block-class}--actions-height);
     }
   }
   &.#{$block-class}.#{$block-class}--xs
@@ -455,13 +537,13 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 .#{$block-class}__visually-hidden {
   position: absolute;
   overflow: hidden;
-  width: 1px;
-  height: 1px;
   padding: 0;
   border: 0;
   // stylelint-disable-next-line carbon/layout-use
   margin: -1px;
+  block-size: 1px;
   clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
   visibility: inherit;
   white-space: nowrap;
 }
@@ -469,12 +551,19 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 .#{$block-class}__overlay {
   position: fixed;
   z-index: utilities.z('overlay');
-  width: 100%;
-  height: 100%;
+  animation: side-panel-overlay-entrance $duration-moderate-01
+    motion(entrance, productive) forwards;
   background-color: $overlay;
+  block-size: 100%;
+  inline-size: 100%;
   inset: 0;
 }
 
+.#{$block-class}__overlay--closing {
+  animation: side-panel-overlay-exit $duration-moderate-01
+    motion(exit, productive) forwards;
+}
+
 /* stylelint-disable-next-line carbon/theme-token-use */
 .#{$block-class}--has-slug + .#{$block-class}__overlay,
 .#{$block-class}--has-ai-label + .#{$block-class}__overlay,

package/scss/components/SimpleHeader/_simple-header.scss

@@ -14,10 +14,10 @@
 $block-class: #{$pkg-prefix}--simple-header;
 
 .#{$block-class} {
-  width: 100%;
   padding: $spacing-04 $spacing-07;
-  border-bottom: 1px solid $border-subtle-01;
   background-color: $layer-01;
+  border-block-end: 1px solid $border-subtle-01;
+  inline-size: 100%;
 }
 
 .#{$block-class}__title {
@@ -26,7 +26,7 @@ $block-class: #{$pkg-prefix}--simple-header;
 
 .#{$block-class}__breadcrumbs + .#{$block-class}__title {
   // add margin top to the title if breadcrumbs exist
-  margin-top: $spacing-02;
+  margin-block-start: $spacing-02;
 }
 
 .#{$block-class}__breadcrumbs .#{$carbon-prefix}--breadcrumb-item,

package/scss/components/StatusIcon/_status-icon.scss

@@ -8,7 +8,7 @@
 @use 'sass:map';
 
 // Standard imports.
-@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/colors' as *;
 @use '../../global/styles/project-settings' as *;
 
 $colors: (