@carbon/ibm-products 2.99.0 → 2.100.0

package/scss/components/Tearsheet/_tearsheet_next.scss

@@ -31,6 +31,10 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
       motion(entrance, expressive);
     opacity: 1;
 
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+
     // extra specificity to ensure this transition overrides the carbon default
     &.#{$block-class__next}.#{$block-class__next}
       .#{$block-class__next}__container {
@@ -51,6 +55,10 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
       animation: #{$block-class__next}--presence-tearsheet__exit
         $motion-duration motion(exit, expressive) forwards;
 
+      @media screen and (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+
       &.#{$block-class__next}.#{$block-class__next}
         .#{$block-class__next}__container {
         animation: #{$block-class__next}--presence-tearsheet--container__exit
@@ -261,6 +269,10 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
         opacity $motion-duration motion(entrance, expressive),
         margin $motion-duration motion(entrance, expressive),
         padding $motion-duration motion(entrance, expressive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     .#{$block-class__next}__header-actions,
@@ -274,11 +286,19 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
       transition:
         all $motion-duration motion(entrance, expressive),
         opacity $motion-duration motion(entrance, expressive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 
   .#{$carbon-prefix}--modal-close {
     transition: all $motion-duration ease;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   // COLLAPSED STATE
@@ -286,6 +306,10 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
     padding-block-start: 0;
     transition: padding $motion-duration motion(entrance, expressive);
 
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
     // Collapse everything except core elements
     > *:not(
         .#{$block-class__next}__navigation-bar,
@@ -318,8 +342,16 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
       max-block-size: 0;
       opacity: 0;
       pointer-events: none;
-      transition: all $motion-duration motion(entrance, expressive);
+      transition:
+        opacity $motion-duration motion(entrance, expressive),
+        max-block-size $motion-duration motion(entrance, expressive),
+        padding $motion-duration motion(entrance, expressive),
+        margin $motion-duration motion(entrance, expressive);
       visibility: hidden;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     // Header title
@@ -331,6 +363,10 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
       margin-block-start: $spacing-02;
       transition: all $motion-duration motion(entrance, expressive);
 
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
       > span {
         display: flex;
         align-items: center;
@@ -357,6 +393,10 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
       block-size: $spacing-08;
       inline-size: $spacing-08;
       transition: all $motion-duration ease;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
     .#{$block-class__next}__decorator {
       inset-block-start: $spacing-03;
@@ -369,6 +409,10 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
       block-size: $spacing-06;
       margin-block-start: $spacing-03;
       transition: all $motion-duration ease;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     // Hide header actions on small screens
@@ -386,6 +430,10 @@ $transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
     .#{$block-class__next}__header-title {
       margin-block: 0;
       transition: margin-block $motion-duration ease;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     .#{$block-class__next}__header-content-wrapper {