@viasat/beam-styles 2.42.0 → 2.43.0

package/components/floatingui.module.scss

@@ -51,7 +51,8 @@ $dialog-motion-duration: 0.25s;
     // below. Keep duration in sync with transitionConfig in Dialog.tsx.
     &:has(.#{constants.$prefix}dialog) {
       background-color: transparent;
-      transition: background-color $dialog-motion-duration cubic-bezier(0.33, 0, 0.67, 1);
+      transition: background-color $dialog-motion-duration
+        cubic-bezier(0.33, 0, 0.67, 1);
 
       @media (prefers-reduced-motion: reduce) {
         transition: none;
@@ -62,6 +63,21 @@ $dialog-motion-duration: 0.25s;
       background-color: tokens.$bm-comp-dialog-color-overlay;
     }
 
+    // Scrim fade for modal Panel (isModal), same timing as Dialog scrim.
+    &:has(.#{constants.$prefix}panel--overlay[aria-modal]) {
+      background-color: transparent;
+      transition: background-color $dialog-motion-duration
+        cubic-bezier(0.33, 0, 0.67, 1);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+
+    &:has(.#{constants.$prefix}panel--overlay[aria-modal][data-status='open']) {
+      background-color: tokens.$bm-comp-dialog-color-overlay;
+    }
+
     // FloatingUI applies position:fixed as an inline style; !important is required to
     // override it when the backdrop is scoped inside a container (contained Panel).
     // Targets the Panel `--contained` modifier. If that modifier is renamed in
@@ -72,5 +88,20 @@ $dialog-motion-duration: 0.25s;
       // Clip slide transforms without creating a scroll container.
       overflow: clip !important;
     }
+
+    // Non-modal Panel: the overlay is required only as a clip/scroll-isolation layer
+    // (its `overflow: clip` keeps the off-screen slide from inflating — and scrolling —
+    // the consumer's container). It must NOT dim or block the page. Keyed off the Panel
+    // lacking `aria-modal`, which is only set for isModal/alert.
+    &:has(.#{constants.$prefix}panel--overlay:not([aria-modal])) {
+      background: transparent;
+      pointer-events: none;
+      overflow: clip;
+
+      // Re-enable interaction on the panel itself (the rest of the page stays clickable).
+      .#{constants.$prefix}panel--overlay {
+        pointer-events: auto;
+      }
+    }
   }
 }

package/components/panel.module.scss

@@ -8,11 +8,12 @@
 $panelBaseClass: '#{constants.$prefix}panel';
 $panelOffsetXVar: '--#{constants.$prefix}comp-panel-offset-x';
 $panelOffsetYVar: '--#{constants.$prefix}comp-panel-offset-y';
-$panelSizeVar: '--#{constants.$prefix}comp-panel-size';
+$panelWidthVar: '--#{constants.$prefix}comp-panel-width';
+$panelHeightVar: '--#{constants.$prefix}comp-panel-height';
 $panel-transition-duration: 0.4s;
 $panel-max-height: 90dvh;
 
-$panel-sizes: (
+$panel-widths: (
   'sm': tokens.$bm-comp-panel-size-sm,
   'md': tokens.$bm-comp-panel-size-md,
   'lg': tokens.$bm-comp-panel-size-lg,
@@ -41,24 +42,24 @@ $panel-sizes: (
       left: 0;
       top: 0;
       bottom: 0;
-      // Cap to the viewport so the panel never bleeds off a screen narrower than its size.
-      width: min(var(#{$panelSizeVar}, #{tokens.$bm-comp-panel-size-md}), 100dvw);
+      // Cap to the viewport so the panel never bleeds off a screen narrower than its width.
+      width: min(var(#{$panelWidthVar}, #{tokens.$bm-comp-panel-size-md}), 100dvw);
     }
 
     &.#{$panelBaseClass}--position-end {
       right: 0;
       top: 0;
       bottom: 0;
-      // Cap to the viewport so the panel never bleeds off a screen narrower than its size.
-      width: min(var(#{$panelSizeVar}, #{tokens.$bm-comp-panel-size-md}), 100dvw);
+      // Cap to the viewport so the panel never bleeds off a screen narrower than its width.
+      width: min(var(#{$panelWidthVar}, #{tokens.$bm-comp-panel-size-md}), 100dvw);
     }
 
     &.#{$panelBaseClass}--position-bottom {
       bottom: 0;
       left: 0;
       right: 0;
-      height: var(#{$panelSizeVar}, auto);
-      max-height: var(#{$panelSizeVar}, #{$panel-max-height});
+      height: var(#{$panelHeightVar}, auto);
+      max-height: var(#{$panelHeightVar}, #{$panel-max-height});
     }
 
     &.#{$panelBaseClass}--contained {
@@ -112,9 +113,9 @@ $panel-sizes: (
             width: auto;
           } @else {
             // Floating start/end sit inset by the offset; cap to the viewport minus both
-            // offsets so the panel still fits (with its gap) on screens narrower than its size.
+            // offsets so the panel still fits (with its gap) on screens narrower than its width.
             width: min(
-              var(#{$panelSizeVar}, #{tokens.$bm-comp-panel-size-md}),
+              var(#{$panelWidthVar}, #{tokens.$bm-comp-panel-size-md}),
               100dvw - 2 * var(#{$panelOffsetXVar}, 1rem)
             );
           }
@@ -123,9 +124,9 @@ $panel-sizes: (
     }
   }
 
-  @each $size, $width in $panel-sizes {
-    &--size-#{$size} {
-      #{$panelSizeVar}: $width;
+  @each $name, $value in $panel-widths {
+    &--width-#{$name} {
+      #{$panelWidthVar}: $value;
     }
   }
 
@@ -225,8 +226,8 @@ $panel-sizes: (
     flex: 1;
     overflow: auto;
 
-    font: tokens.$bm-comp-panel-typo-description;
-    color: tokens.$bm-comp-panel-color-description;
+    font: tokens.$bm-sem-typo-body-sm;
+    color: tokens.$bm-sem-color-text-primary;
   }
 
   &__footer {
@@ -307,16 +308,16 @@ $panel-sizes: (
     width: 100%;
   }
 
-  // Inline bottom: let --bm-comp-panel-size drive height (overrides shared height: auto).
+  // Inline bottom: let --bm-comp-panel-height drive height (overrides shared height: auto).
   // No max-height cap here — inline panels are bounded by their flex container, not the viewport
   // (unlike overlay bottom which applies a 90dvh soft cap via $panel-max-height).
   &--inline#{&}--position-bottom {
-    height: var(#{$panelSizeVar}, auto);
+    height: var(#{$panelHeightVar}, auto);
   }
 
   // Pin start/end inline content while the wrapper animates width.
   &--inline:not(#{&}--resizable):not(#{&}--position-bottom) {
-    width: var(#{$panelSizeVar}, #{tokens.$bm-comp-panel-size-md});
+    width: var(#{$panelWidthVar}, #{tokens.$bm-comp-panel-size-md});
   }
 }
 
@@ -394,13 +395,26 @@ $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;
 
-  @each $size, $token in $panel-sizes {
-    &--size-#{$size} {
-      #{$panelSizeVar}: $token;
+  @each $name, $value in $panel-widths {
+    &--width-#{$name} {
+      #{$panelWidthVar}: $value;
     }
   }
 
@@ -413,7 +427,7 @@ $resize-handle-positions: (
   }
 
   &[data-status='open'] {
-    width: var(#{$panelSizeVar}, #{tokens.$bm-comp-panel-size-md});
+    width: var(#{$panelWidthVar}, #{tokens.$bm-comp-panel-size-md});
     transition: width $panel-transition-duration ease-out;
     @media (prefers-reduced-motion: reduce) {
       transition: none;

package/package.json

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

package/styles.css

@@ -7899,11 +7899,31 @@ textarea:focus-visible,
 .bm-floatingui__overlay:has(.bm-dialog[data-status=open]) {
   background-color: var(--bm-comp-dialog-color-overlay);
 }
+.bm-floatingui__overlay:has(.bm-panel--overlay[aria-modal]) {
+  background-color: transparent;
+  transition: background-color 0.25s cubic-bezier(0.33, 0, 0.67, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .bm-floatingui__overlay:has(.bm-panel--overlay[aria-modal]) {
+    transition: none;
+  }
+}
+.bm-floatingui__overlay:has(.bm-panel--overlay[aria-modal][data-status=open]) {
+  background-color: var(--bm-comp-dialog-color-overlay);
+}
 .bm-floatingui__overlay:has(.bm-panel--contained) {
   position: absolute !important;
   inset: 0;
   overflow: clip !important;
 }
+.bm-floatingui__overlay:has(.bm-panel--overlay:not([aria-modal])) {
+  background: transparent;
+  pointer-events: none;
+  overflow: clip;
+}
+.bm-floatingui__overlay:has(.bm-panel--overlay:not([aria-modal])) .bm-panel--overlay {
+  pointer-events: auto;
+}
 
 :root,
 :host,