@viasat/beam-styles 2.8.0 → 2.10.0

package/components/actionList.module.scss

@@ -39,6 +39,7 @@
   color: tokens.$bm-comp-actionlist-color-text;
   cursor: pointer;
   isolation: isolate;
+  text-decoration: none;
 
   &[hidden] {
     display: none;
@@ -193,7 +194,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    padding-top: tokens.$bm-comp-actionlist-space-y;
+    // Intentional: using semantic token for symmetric vertical padding (design decision).
+    padding: tokens.$bm-sem-space-25 0;
     color: tokens.$bm-comp-actionlist-color-group-heading;
     font: tokens.$bm-comp-actionlist-typo-heading-group;
   }

package/components/panel.module.scss

@@ -6,12 +6,14 @@
 @import '@viasat/beam-tokens/components/Panel';
 
 $panelBaseClass: '#{constants.$prefix}panel';
+$panel-transition-duration: 0.4s;
+$panel-width: 20rem; // TO DO: Temporary fixed width, to be mapped to spec props later
 
 .#{$panelBaseClass} {
   display: flex;
   flex-direction: column;
 
-  width: 20rem; // TO DO: Temporary fixed width, to be mapped to spec props later
+  width: $panel-width;
 
   background-color: tokens.$bm-sem-color-surface-01;
 
@@ -24,16 +26,35 @@ $panelBaseClass: '#{constants.$prefix}panel';
   &--overlay {
     position: fixed;
     box-shadow: tokens.$bm-comp-panel-shadow;
+
+    &.#{$panelBaseClass}--position-start {
+      left: 0;
+      top: 0;
+      bottom: 0;
+    }
+
+    &.#{$panelBaseClass}--position-end {
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
+
+    &.#{$panelBaseClass}--position-bottom {
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: auto;
+    }
+
+    &.#{$panelBaseClass}--position-full {
+      inset: 0;
+    }
   }
 
   &--size-full {
     width: 100%;
   }
 
-  &--position-bottom {
-    height: auto;
-  }
-
   &--padding-sm {
     .#{$panelBaseClass}__header {
       padding-left: tokens.$bm-comp-panel-space-x-sm;
@@ -156,4 +177,90 @@ $panelBaseClass: '#{constants.$prefix}panel';
       }
     }
   }
+
+  &__overlay-divider {
+    position: absolute;
+
+    &--start {
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
+
+    &--end {
+      left: 0;
+      top: 0;
+      bottom: 0;
+    }
+
+    &--bottom {
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+}
+
+@mixin panel-slide($prop, $hidden, $visible, $duration: $panel-transition-duration) {
+  #{$prop}: $hidden;
+  &[data-status='open'] {
+    transition: $prop $duration ease-out;
+    #{$prop}: $visible;
+  }
+  &[data-status='close'] {
+    transition: $prop $duration ease-in;
+  }
+}
+
+.#{$panelBaseClass}--overlay[data-position='start'] {
+  @include panel-slide(transform, translateX(-100%), translateX(0));
+}
+
+.#{$panelBaseClass}--overlay[data-position='end'] {
+  @include panel-slide(transform, translateX(100%), translateX(0));
+}
+
+.#{$panelBaseClass}--overlay[data-position='bottom'] {
+  @include panel-slide(transform, translateY(100%), translateY(0));
+}
+
+.#{$panelBaseClass}--overlay[data-position='full'] {
+  @include panel-slide(opacity, 0, 1, $panel-transition-duration);
+}
+
+.#{$panelBaseClass}__inline-wrapper {
+  overflow: hidden;
+  flex-shrink: 0;
+
+  &[data-status] {
+    width: 0;
+    transition: width $panel-transition-duration ease-in;
+  }
+
+  &[data-status='open'] {
+    width: $panel-width;
+    transition: width $panel-transition-duration ease-out;
+  }
+
+  &[data-position='bottom'][data-status] {
+    width: 100%;
+  }
+
+  &[data-position='bottom'][data-status] .#{$panelBaseClass}__inline-wrapper-content {
+    transform: translateY(100%);
+    transition: transform $panel-transition-duration ease-in;
+  }
+
+  &[data-position='bottom'][data-status='open'] .#{$panelBaseClass}__inline-wrapper-content {
+    transform: translateY(0);
+    transition: transform $panel-transition-duration ease-out;
+  }
+
+  &--full[data-status='open'] {
+    width: 100%;
+  }
+}
+
+.#{$panelBaseClass}__inline-wrapper-content {
+  height: 100%;
 }

package/components/search.module.scss

@@ -4,6 +4,7 @@
 @use '../utils/mixins.scss' as mixins;
 @use '../utils/cursors.scss' as cursors;
 @use './icon.vars.scss' as iconVars;
+@use './actionList.vars.scss' as actionListVars;
 
 @import '@viasat/beam-tokens/components/Input';
 
@@ -173,4 +174,22 @@ $stateStyleTokens: (
       height: tokens.$bm-comp-input-size-field-icon;
     }
   }
+
+  &__results__view-all {
+    // Base = global variant: ActionList.Item defaults handle height, padding, font.
+    color: tokens.$bm-sem-color-link-primary;
+
+    // Target content-before directly — ActionList.Item sets iconColor on that child
+    // element itself, so a parent-level value would be overridden by inheritance.
+    .#{actionListVars.$actionListItemBaseClass}__content-before {
+      #{iconVars.$iconColor}: tokens.$bm-sem-color-link-primary;
+    }
+
+    // Semantic tokens used intentionally — no dedicated component tokens exist yet.
+    &--group {
+      min-height: unset;
+      padding: tokens.$bm-sem-space-25 0;
+      font: tokens.$bm-sem-typo-body-xs;
+    }
+  }
 }

package/package.json

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

package/styles.css

@@ -478,6 +478,7 @@
   color: var(--bm-comp-actionlist-color-text);
   cursor: pointer;
   isolation: isolate;
+  text-decoration: none;
 }
 .bm-action-list__item[hidden] {
   display: none;
@@ -598,7 +599,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding-top: var(--bm-comp-actionlist-space-y);
+  padding: var(--bm-sem-space-25) 0;
   color: var(--bm-comp-actionlist-color-group-heading);
   font: var(--bm-comp-actionlist-typo-heading-group);
 }
@@ -10406,6 +10407,17 @@ textarea:focus-visible,
   width: var(--bm-comp-input-size-field-icon);
   height: var(--bm-comp-input-size-field-icon);
 }
+.bm-search__results__view-all {
+  color: var(--bm-sem-color-link-primary);
+}
+.bm-search__results__view-all .bm-action-list__item__content-before {
+  --bm-comp-icon-color: var(--bm-sem-color-link-primary);
+}
+.bm-search__results__view-all--group {
+  min-height: unset;
+  padding: var(--bm-sem-space-25) 0;
+  font: var(--bm-sem-typo-body-xs);
+}
 
 :root,
 :host,