@viasat/beam-styles 2.43.2 → 2.45.0

package/components/panel.module.scss

@@ -369,14 +369,20 @@ $resize-handle-positions: (
 @mixin panel-slide($prop, $hidden, $visible, $duration: $panel-transition-duration) {
   #{$prop}: $hidden;
   &[data-status='open'] {
-    transition: $prop $duration ease-out;
+    transition: $prop $duration ease-out, box-shadow $duration ease-out;
     #{$prop}: $visible;
+    box-shadow: tokens.$bm-comp-panel-shadow;
     @media (prefers-reduced-motion: reduce) {
       transition: none;
     }
   }
+  // Fade the shadow out in sync with the slide-out so it doesn't snap off instantly
+  // while the panel is still animating away. The box-shadow must live in this same
+  // (higher-specificity) rule as the transform transition, otherwise the transform
+  // shorthand resets transition-property and the shadow stops animating.
   &[data-status='close'] {
-    transition: $prop $duration ease-in;
+    transition: $prop $duration ease-in, box-shadow $duration ease-in;
+    box-shadow: tokens.$bm-sem-shadow-none;
     @media (prefers-reduced-motion: reduce) {
       transition: none;
     }
@@ -395,19 +401,6 @@ $resize-handle-positions: (
   @include panel-slide(transform, translateY(100%), translateY(0));
 }
 
-// Fade the shadow out in sync with the slide-out animation so it doesn't linger
-// after the panel has moved off-screen.
-.#{$panelBaseClass}--overlay[data-status='close'] {
-  box-shadow: tokens.$bm-sem-shadow-none;
-  transition-property: transform, box-shadow;
-  transition-duration: $panel-transition-duration;
-  transition-timing-function: ease-in;
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
 .#{$panelBaseClass}__inline-wrapper {
   overflow: hidden;
   flex-shrink: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-styles",
-  "version": "2.43.2",
+  "version": "2.45.0",
   "description": "SCSS modules and component styles for the Beam Design System",
   "license": "MIT",
   "author": "Viasat",