@viasat/beam-styles 2.2.0 → 2.8.0

package/components/actionList.module.scss

@@ -198,6 +198,16 @@
     font: tokens.$bm-comp-actionlist-typo-heading-group;
   }
 
+  &__no-results {
+    display: flex;
+    min-height: tokens.$bm-comp-actionlist-size-height;
+    padding: tokens.$bm-comp-actionlist-space-y 0;
+    justify-content: flex-start;
+    align-items: center;
+    color: tokens.$bm-sem-color-text-primary;
+    font: tokens.$bm-sem-typo-body-sm;
+  }
+
   &__divider {
     margin: tokens.$bm-comp-actionlist-space-y 0;
   }

package/components/card.module.scss

@@ -3,10 +3,15 @@
 @use '../utils/mixins.scss' as mixins;
 @use '../utils/tokens.scss' as tokens;
 @use '../utils/stateLayerVars.scss' as state-layer;
+@use '../utils/inputChoiceMixins.scss' as choiceMixins;
 
-@import '../../../../tokens/src/lib/components/Card';
+@import '@viasat/beam-tokens/components/Card';
+@import '@viasat/beam-tokens/components/Input';
 
 $cardBaseClass: '#{constants.$prefix}card';
+$cardRadiusOuterVarName: '--#{constants.$prefix}card-radius-outer';
+$selectionIndicatorTopVarName: '--#{constants.$prefix}card-selection-indicator-top';
+$selectionIndicatorRightVarName: '--#{constants.$prefix}card-selection-indicator-right';
 
 @mixin backdrop-overlay($color) {
   position: relative;
@@ -69,10 +74,12 @@ $cardDensity: (
 
 // Main Card component
 .#{$cardBaseClass} {
+  #{$cardRadiusOuterVarName}: #{tokens.$bm-comp-card-radius-outer};
+
   display: flex;
   flex-direction: column;
-  overflow: hidden;
   outline: none;
+  border-radius: var(#{$cardRadiusOuterVarName});
 
   &--default-background {
     background: tokens.$bm-comp-card-color-bg;
@@ -83,9 +90,6 @@ $cardDensity: (
   &--default-border {
     border-color: tokens.$bm-comp-card-color-border;
   }
-  &--default-border-radius {
-    border-radius: tokens.$bm-comp-card-radius-outer;
-  }
 
   // Interactive card styles (clickable/selectable)
   &--interactive {
@@ -108,30 +112,27 @@ $cardDensity: (
     // Extend to cover the border area so overlay matches full card surface
     > .#{state-layer.$stateLayerBaseClass} {
       pointer-events: none;
-      z-index: 1;
+      z-index: 3;
 
       $border-offset: calc(0px - tokens.$bm-sem-border-width-md);
       #{state-layer.$top}: $border-offset;
       #{state-layer.$right}: $border-offset;
       #{state-layer.$bottom}: $border-offset;
       #{state-layer.$left}: $border-offset;
-    }
 
-    // Focus outline
-    &:focus-visible {
-      @include mixins.simulated-inset-outline(
-        tokens.$bm-sem-border-width-focus,
-        solid,
-        tokens.$bm-sem-color-border-focus,
-        calc(tokens.$bm-sem-border-width-md + tokens.$bm-sem-size-focus-offset)
+      // Adjust outline-offset to account for state layer's negative positioning
+      // This ensures the focus ring appears at the correct distance from the card's outer edge
+      #{state-layer.$outline-offset}: calc(
+        tokens.$bm-sem-border-width-md + tokens.$bm-sem-size-focus-offset
       );
     }
 
     // Suppress state layer when hovering interactive children
+    // Note: Excludes the card's own hidden input
     &:has(
         button:hover,
         a:hover,
-        input:hover,
+        input:not([data-card-input]):hover,
         select:hover,
         textarea:hover,
         [role='button']:hover,
@@ -144,10 +145,11 @@ $cardDensity: (
     }
 
     // Suppress state layer when clicking (active) interactive children
+    // Note: Excludes the card's own hidden input 
     &:has(
         button:active,
         a:active,
-        input:active,
+        input:not([data-card-input]):active,
         select:active,
         textarea:active,
         [role='button']:active,
@@ -158,6 +160,22 @@ $cardDensity: (
       #{state-layer.$opacity}: 0 !important;
       #{state-layer.$background}: transparent !important;
     }
+
+    // Suppress state layer focus outline when interactive children have focus
+    // Note: Excludes the card's own hidden input 
+    &:has(
+        button:focus-visible,
+        a:focus-visible,
+        input:not([data-card-input]):focus-visible,
+        select:focus-visible,
+        textarea:focus-visible,
+        [role='button']:focus-visible,
+        [role='link']:focus-visible,
+        [tabindex]:not([tabindex='-1']):focus-visible
+      )
+      > .#{state-layer.$stateLayerBaseClass} {
+      #{state-layer.$outline-color}: transparent !important;
+    }
   }
 
 
@@ -167,30 +185,124 @@ $cardDensity: (
     cursor: not-allowed;
   }
 
-  // Selected state (for future selectable implementation)
+  // Hidden input for selectable cards (provides accessibility and form integration)
+  &__hidden-input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 1; // Above card background, below content
+    border: none;
+    appearance: none;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  // Selectable card styles
+  &--selectable {
+    // Reserve space in header to prevent overlap with selection indicator
+    // Only apply when card doesn't have media-above
+    &:not(:has(.#{$cardBaseClass}__media-above)) .#{$cardBaseClass}__header::after {
+      content: '';
+      order: 999; // Position at end of flex container
+      width: tokens.$bm-comp-input-size-choice-checkbox;
+      flex-shrink: 0;
+    }
+
+    // Focus styles via :has() - show focus ring when hidden input is focused
+    &:has(.#{$cardBaseClass}__hidden-input:focus-visible) > .#{state-layer.$stateLayerBaseClass} {
+      #{state-layer.$outline-width}: tokens.$bm-sem-border-width-focus;
+      #{state-layer.$outline-color}: tokens.$bm-sem-color-border-focus;
+    }
+  }
+
+  // Card-specific selection indicator (visual-only, divorced from Checkbox/RadioButton components)
+  &__selection-indicator {
+    position: absolute;
+    top: var(#{$selectionIndicatorTopVarName}, #{tokens.$bm-sem-space-100});
+    right: var(#{$selectionIndicatorRightVarName}, #{tokens.$bm-sem-space-100});
+    z-index: 4;
+    pointer-events: none;
+    display: block;
+
+    // Checkbox variant
+    &--checkbox {
+      @include choiceMixins.choice-checkbox-base();
+    }
+
+    // Radio variant
+    &--radio {
+      @include choiceMixins.choice-radio-base();
+    }
+
+    // Checked state - checkbox
+    &--checkbox#{&}--checked {
+      @include choiceMixins.choice-checkbox-checked();
+    }
+
+    // Checked state - radio
+    &--radio#{&}--checked {
+      @include choiceMixins.choice-radio-checked();
+    }
+
+    // Disabled state
+    &--disabled {
+      border-color: tokens.$bm-comp-input-color-border-disabled;
+      background-color: tokens.$bm-comp-input-color-bg-disabled;
+    }
+
+    &--checkbox#{&}--checked#{&}--disabled {
+      background-color: tokens.$bm-comp-input-color-icon-disabled;
+    }
+
+    &--radio#{&}--checked#{&}--disabled::after {
+      background-color: tokens.$bm-comp-input-color-icon-disabled;
+    }
+  }
+
   &--selected {
     border-color: tokens.$bm-comp-card-color-border-selected;
-  }
-}
 
-// Card.Content
-.#{$cardBaseClass}__content {
-  display: flex;
-  flex-direction: column;
+    outline: tokens.$bm-sem-border-width-selected
+      solid tokens.$bm-comp-card-color-border-selected;
+    outline-offset: calc(0px - tokens.$bm-sem-border-width-md);
+  }
 
+  // Density modifiers apply positioning for selection indicator and styling for content
   @each $density, $values in $cardDensity {
     &--#{$density} {
-      gap: map.get($values, gap);
-      padding: map.get($values, inset);
+      #{$selectionIndicatorTopVarName}: #{map.get($values, inset)};
+      #{$selectionIndicatorRightVarName}: #{map.get($values, inset)};
+
+      > .#{$cardBaseClass}__content {
+        gap: map.get($values, gap);
+        padding: map.get($values, inset);
+      }
     }
   }
 }
 
+// Card.Content - sits above hidden input for selectable cards
+.#{$cardBaseClass}__content {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 2;
+}
+
 // Card.Header
 .#{$cardBaseClass}__header {
   display: flex;
   flex-direction: row;
   gap: tokens.$bm-comp-card-space-header-gap;
+  position: relative;
+  z-index: 2;
 
   &__content-before {
     order: 1;
@@ -250,16 +362,33 @@ $cardDensity: (
   }
 }
 
+.#{$cardBaseClass}__media-above {
+  // Calculate inner radius from outer: inner = outer - border-width
+  $inner-radius: calc(var(#{$cardRadiusOuterVarName}) - #{tokens.$bm-sem-border-width-md});
+  border-top-left-radius: $inner-radius;
+  border-top-right-radius: $inner-radius;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+
+  &:last-child {
+    border-bottom-left-radius: $inner-radius;
+    border-bottom-right-radius: $inner-radius;
+  }
+}
+
 .#{$cardBaseClass}__media-below {
   border-radius: tokens.$bm-comp-card-radius-inner;
 }
 
+// Media sections sit above hidden input for selectable cards
 .#{$cardBaseClass}__media-above,
 .#{$cardBaseClass}__media-below {
   display: flex;
   overflow: hidden;
   width: 100%;
   isolation: isolate;
+  position: relative;
+  z-index: 2;
 
   @each $color in black, white {
     @each $opacity in 10, 20, 30, 40 {
@@ -281,6 +410,8 @@ $cardDensity: (
   color: tokens.$bm-comp-card-color-body;
   font: tokens.$bm-comp-card-typo-body;
   gap: tokens.$bm-sem-space-100;
+  position: relative;
+  z-index: 2;
 }
 
 // Card.Footer
@@ -288,6 +419,8 @@ $cardDensity: (
   display: flex;
   gap: tokens.$bm-sem-space-50;
   flex-direction: column;
+  position: relative;
+  z-index: 2;
 
   &__actions {
     display: flex;

package/components/checkbox.module.scss

@@ -3,6 +3,7 @@
 @use '../utils/mixins.scss' as mixins;
 @use '../utils/tokens.scss' as tokens;
 @use '../utils/cursors.scss' as cursors;
+@use '../utils/inputChoiceMixins.scss' as choiceMixins;
 
 @import '@viasat/beam-tokens/components/Input';
 
@@ -33,8 +34,6 @@ $checkboxStates: (
   ),
 );
 
-$check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.178 7.363.808 4.697 0 5.598l3.178 3.573L10 1.501 9.198.6l-6.02 6.763Z' fill='%23fff'/%3E%3C/svg%3E");
-
 .#{$checkboxBaseClass} {
   display: inline-flex;
   @include cursors.applyChoiceCursors();
@@ -75,37 +74,16 @@ $check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' v
     position: relative;
     margin: tokens.$bm-sem-space-0;
     flex-shrink: tokens.$bm-sem-space-0;
-    width: tokens.$bm-comp-input-size-choice-checkbox;
-    height: tokens.$bm-comp-input-size-choice-checkbox;
-    background-color: tokens.$bm-comp-input-color-bg;
     cursor: var(#{$inputChoiceCursor}, pointer);
 
-    box-sizing: border-box;
-
-    border-style: solid;
-    border-color: tokens.$bm-comp-input-color-border;
-    border-radius: tokens.$bm-comp-input-radius-choice-checkbox;
-    border-width: tokens.$bm-comp-input-border-width-field-default;
+    @include choiceMixins.choice-checkbox-base();
 
     &:focus-visible {
       @include mixins.simulated-inset-outline();
     }
 
     &:checked {
-      background-color: tokens.$bm-comp-input-color-choice-checkbox-selected-bg;
-      border-color: tokens.$bm-comp-input-color-choice-checkbox-selected-border;
-
-      &::after {
-        @include mixins.svg-icon($check-mask);
-        content: '';
-        background-color: tokens.$bm-comp-input-color-choice-checkbox-selected-icon;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: calc(#{tokens.$bm-comp-input-size-choice-checkbox} * 5 / 8);
-        height: calc(#{tokens.$bm-comp-input-size-choice-checkbox} * 5 / 8);
-      }
+      @include choiceMixins.choice-checkbox-checked();
     }
   }
 

package/components/index.scss

@@ -2,39 +2,56 @@
 @use './accordion.module.scss';
 @use './actionList.module.scss';
 @use './alert.module.scss';
+@use './aspectRatio.module.scss';
+@use './avatar.module.scss';
 @use './badge.module.scss';
 @use './badgeDot.module.scss';
 @use './box.module.scss';
-@use './button.module';
-@use './breadcrumbs.module';
+@use './breadcrumbs.module.scss';
+@use './button.module.scss';
+@use './card.module.scss';
 @use './checkbox.module.scss';
 @use './chip.module.scss';
-@use './chipsGroup.module';
+@use './chipsGroup.module.scss';
 @use './closeButton.module.scss';
+@use './combobox.module.scss';
 @use './dialog.module.scss';
 @use './divider.module.scss';
 @use './emptyState.module.scss';
 @use './fileUpload.module.scss';
 @use './flag.module.scss';
+@use './floatingui.module.scss';
+@use './header.module.scss';
 @use './helperText.module.scss';
-@use './inputChoiceGroup.module';
+@use './icon.module.scss';
+@use './inputChoiceGroup.module.scss';
 @use './label.module.scss';
 @use './link.module.scss';
+@use './list.module.scss';
 @use './logo.module.scss';
+@use './menu.module.scss';
+@use './nativeSelect.module.scss';
+@use './navigation.module.scss';
+@use './pageHeader.module.scss';
 @use './pageLayout.module.scss';
+@use './pagination.module.scss';
 @use './popover.module.scss';
-@use './progressBar.module';
+@use './progressBar.module.scss';
 @use './radioButton.module.scss';
-@use './segmentedControl.module';
-@use './nativeSelect.module';
+@use './search.module.scss';
+@use './segmentedControl.module.scss';
 @use './sideNav.module.scss';
+@use './slider.module.scss';
+@use './spinner.module.scss';
+@use './stepper.module.scss';
 @use './switch.module.scss';
+@use './tabs.module.scss';
 @use './text.module.scss';
+@use './textArea.module.scss';
 @use './textField.module.scss';
 @use './toast.module.scss';
 @use './toastContainer.module.scss';
 @use './tooltip.module.scss';
-@use './tabs.module';
 
 // State Layer Styles
 @use '../utils/stateLayer.module.scss';

package/components/panel.module.scss

@@ -0,0 +1,159 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+
+@import '@viasat/beam-tokens/components/Panel';
+
+$panelBaseClass: '#{constants.$prefix}panel';
+
+.#{$panelBaseClass} {
+  display: flex;
+  flex-direction: column;
+
+  width: 20rem; // TO DO: Temporary fixed width, to be mapped to spec props later
+
+  background-color: tokens.$bm-sem-color-surface-01;
+
+  &--inline {
+    position: relative;
+    height: 100%;
+    box-shadow: tokens.$bm-sem-shadow-none;
+  }
+
+  &--overlay {
+    position: fixed;
+    box-shadow: tokens.$bm-comp-panel-shadow;
+  }
+
+  &--size-full {
+    width: 100%;
+  }
+
+  &--position-bottom {
+    height: auto;
+  }
+
+  &--padding-sm {
+    .#{$panelBaseClass}__header {
+      padding-left: tokens.$bm-comp-panel-space-x-sm;
+      padding-right: tokens.$bm-comp-panel-space-x-sm;
+    }
+
+    .#{$panelBaseClass}__body {
+      padding-left: tokens.$bm-comp-panel-space-x-sm;
+      padding-right: tokens.$bm-comp-panel-space-x-sm;
+    }
+
+    .#{$panelBaseClass}__footer {
+      padding-left: tokens.$bm-comp-panel-space-x-sm;
+      padding-right: tokens.$bm-comp-panel-space-x-sm;
+    }
+  }
+
+  &--padding-md {
+    .#{$panelBaseClass}__header {
+      padding-left: tokens.$bm-comp-panel-space-x-md;
+      padding-right: tokens.$bm-comp-panel-space-x-md;
+    }
+
+    .#{$panelBaseClass}__body {
+      padding-left: tokens.$bm-comp-panel-space-x-md;
+      padding-right: tokens.$bm-comp-panel-space-x-md;
+    }
+
+    .#{$panelBaseClass}__footer {
+      padding-left: tokens.$bm-comp-panel-space-x-md;
+      padding-right: tokens.$bm-comp-panel-space-x-md;
+    }
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: tokens.$bm-comp-panel-space-header-gap-y;
+
+    padding-top: tokens.$bm-comp-panel-space-header-pad-top;
+    padding-bottom: tokens.$bm-comp-panel-space-header-pad-bottom;
+
+    &__row {
+      display: flex;
+      gap: tokens.$bm-comp-panel-space-header-gap-x;
+      align-items: flex-start;
+    }
+
+    &__content-before {
+      display: flex;
+      flex-direction: row;
+      gap: tokens.$bm-comp-panel-space-header-gap-x;
+    }
+
+    &__content-after {
+      display: flex;
+      gap: tokens.$bm-comp-panel-space-header-gap-x;
+      align-items: flex-start;
+    }
+
+    &__heading {
+      flex: 1;
+
+      font: tokens.$bm-comp-panel-typo-heading;
+      color: tokens.$bm-comp-panel-color-heading;
+    }
+
+    &__description {
+      color: tokens.$bm-comp-panel-color-description;
+    }
+
+    &__close-button {
+      width: tokens.$bm-sem-size-icon-lg;
+      height: tokens.$bm-sem-size-icon-lg;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &__body {
+    flex: 1;
+    overflow: auto;
+
+    font: tokens.$bm-comp-panel-typo-description;
+    color: tokens.$bm-comp-panel-color-description;
+  }
+
+  &__footer {
+    display: flex;
+    gap: tokens.$bm-comp-panel-space-footer-gap-actions;
+    flex-direction: column;
+    padding-top: tokens.$bm-comp-panel-space-footer-pad-top;
+    padding-bottom: tokens.$bm-comp-panel-space-footer-pad-bottom;
+
+    &__actions {
+      display: flex;
+      gap: tokens.$bm-comp-panel-space-footer-gap-actions;
+      flex-shrink: 0;
+      flex-wrap: wrap;
+      align-items: center;
+      align-content: center;
+
+      &--start {
+        justify-content: flex-start;
+      }
+
+      &--end {
+        justify-content: flex-end;
+      }
+
+      &--spaceBetween {
+        justify-content: space-between;
+      }
+
+      &--stacked {
+        justify-content: center;
+        flex-direction: column;
+        gap: tokens.$bm-comp-panel-space-footer-gap-actions-stack;
+      }
+    }
+  }
+}

package/components/radioButton.module.scss

@@ -3,6 +3,7 @@
 @use '../utils/mixins.scss' as mixins;
 @use '../utils/tokens.scss' as tokens;
 @use '../utils/cursors.scss' as cursors;
+@use '../utils/inputChoiceMixins.scss' as choiceMixins;
 
 @import '@viasat/beam-tokens/components/Input';
 
@@ -80,36 +81,14 @@ $radioButtonStates: (
     margin: tokens.$bm-sem-space-0;
     flex-shrink: tokens.$bm-sem-space-0;
     cursor: var(#{$inputChoiceCursor}, pointer);
-    width: tokens.$bm-comp-input-size-choice-radio;
-    height: tokens.$bm-comp-input-size-choice-radio;
-    background-color: tokens.$bm-comp-input-color-bg;
-
-    border-style: solid;
-    border-color: tokens.$bm-comp-input-color-border;
-    border-radius: tokens.$bm-comp-input-radius-choice-radio;
-    border-width: tokens.$bm-comp-input-border-width-field-default;
+    @include choiceMixins.choice-radio-base();
 
     &:focus-visible {
       @include mixins.simulated-inset-outline();
     }
 
     &:checked {
-      border-color: tokens.$bm-comp-input-color-choice-radio-selected-border;
-      background-color: tokens.$bm-comp-input-color-choice-radio-selected-bg;
-
-      &:after {
-        background-color: tokens.$bm-comp-input-color-choice-radio-selected-inner-circle;
-      }
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      width: tokens.$bm-comp-input-size-choice-radio-inside;
-      height: tokens.$bm-comp-input-size-choice-radio-inside;
-      border-radius: tokens.$bm-comp-input-radius-choice-radio;
-      top: calc(50% - #{tokens.$bm-comp-input-size-choice-radio-inside} / 2);
-      left: calc(50% - #{tokens.$bm-comp-input-size-choice-radio-inside} / 2);
+      @include choiceMixins.choice-radio-checked();
     }
   }
 }