@viasat/beam-styles 2.0.0

package/components/pageHeader.module.scss

@@ -0,0 +1,93 @@
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+
+$pageHeaderBaseClass: '#{constants.$prefix}page-header';
+
+$sizes: (
+  md: tokens.$bm-sem-typo-heading-lg,
+  lg: tokens.$bm-sem-typo-heading-2xl,
+);
+
+.#{$pageHeaderBaseClass} {
+  display: grid;
+  width: 100%;
+  grid-template-areas:
+    'breadcrumb'
+    'heading'
+    'body'
+    'tabs';
+  color: tokens.$bm-sem-color-text-primary;
+
+  &__breadcrumb {
+    grid-area: breadcrumb;
+    padding-bottom: tokens.$bm-sem-space-100;
+  }
+
+  &__heading {
+    grid-area: heading;
+    display: flex;
+    justify-content: space-between;
+    gap: tokens.$bm-sem-space-50;
+    flex-wrap: wrap;
+  }
+
+  &__heading-content {
+    order: 1;
+    display: flex;
+    gap: tokens.$bm-sem-space-50;
+
+    @each $size, $font in $sizes {
+      &--#{$size} {
+        font: $font;
+      }
+    }
+  }
+
+  &__heading-content-before {
+    order: 1;
+    gap: tokens.$bm-sem-space-50;
+    display: flex;
+    align-items: center;
+    height: 1lh;
+  }
+
+  &__heading-action {
+    order: -1;
+  }
+
+  &__heading-title {
+    order: 2;
+    overflow-wrap: break-word;
+  }
+
+  &__heading-content-after {
+    order: 3;
+    display: flex;
+    gap: tokens.$bm-sem-space-50;
+    height: 1lh;
+    align-items: center;
+
+    .#{$pageHeaderBaseClass}__heading-action {
+      order: 999;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    min-width: 0;
+    gap: tokens.$bm-sem-space-50;
+    order: 2;
+  }
+
+  &__body {
+    grid-area: body;
+    padding-top: tokens.$bm-sem-space-25;
+  }
+
+  &__tabs {
+    grid-area: tabs;
+    padding-top: tokens.$bm-sem-space-150;
+    overflow-x: auto;
+  }
+}

package/components/pageLayout.module.scss

@@ -0,0 +1,38 @@
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+
+$pageLayoutBaseClass: '#{constants.$prefix}page-layout';
+
+.#{$pageLayoutBaseClass} {
+  display: grid;
+  grid-template-areas:
+    'header header'
+    'aside main';
+  grid-template-rows: auto 1fr;
+  grid-template-columns: auto 1fr;
+  height: 100%;
+  width: 100%;
+  flex: 1;
+}
+
+.#{$pageLayoutBaseClass}__header {
+  grid-area: header;
+  width: 100%;
+  z-index: 1;
+}
+
+.#{$pageLayoutBaseClass}__aside {
+  grid-area: aside;
+  height: 100%;
+  min-height: 0;
+  z-index: 0;
+  display: flex;
+}
+
+.#{$pageLayoutBaseClass}__main {
+  grid-area: main;
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+  overflow-y: auto;
+}

package/components/pagination.module.scss

@@ -0,0 +1,71 @@
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss';
+@use '../utils/stateLayerVars.scss' as state-layer;
+@use '../utils/mixins.scss';
+
+@import '../../../../tokens/src/lib/components/Pagination';
+
+$paginationBaseClass: '#{constants.$prefix}pagination';
+$buttonBaseClass: '#{constants.$prefix}button';
+
+.#{$paginationBaseClass} {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  &--determinate {
+    gap: tokens.$bm-comp-pagination-space-controls-gap;
+  }
+
+  & &__chevrons {
+    display: flex;
+    flex-wrap: nowrap;
+    color: tokens.$bm-comp-pagination-color-text;
+
+    .#{state-layer.$stateLayerBaseClass} {
+      outline: none;
+    }
+
+    &:dir(rtl) {
+      transform: scale(-1);
+    }
+  }
+
+  & &__buttons {
+    font: tokens.$bm-sem-typo-label-md;
+    border-radius: tokens.$bm-comp-btn-radius-container;
+    color: tokens.$bm-comp-pagination-color-text;
+    background-color: transparent;
+    align-self: stretch;
+    padding: 0;
+    background: unset;
+
+    .#{state-layer.$stateLayerBaseClass} {
+      outline: none;
+    }
+
+    &:focus-visible {
+      @include mixins.simulated-inset-outline;
+    }
+
+    &--active {
+      color: tokens.$bm-comp-pagination-color-fg-selected;
+      border: tokens.$bm-comp-btn-border-width solid
+        tokens.$bm-comp-pagination-color-border-selected;
+      background: tokens.$bm-comp-pagination-color-bg-selected;
+    }
+  }
+
+  & &__truncation {
+    border: none;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    text-align: center;
+    min-width: tokens.$bm-comp-btn-size-sm-width;
+    min-height: tokens.$bm-comp-btn-size-sm-height;
+    cursor: pointer;
+
+    @extend .#{$paginationBaseClass}__buttons;
+  }
+}

package/components/popover.module.scss

@@ -0,0 +1,71 @@
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/Popover';
+
+$popoverBaseClass: '#{constants.$prefix}popover';
+
+$ARROW: url("data:image/svg+xml,%3Csvg width='21.544' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.122 7.93 0 0h21.544l-8.121 7.93c-1.462 1.427-3.84 1.427-5.301 0z' fill='%23fff' style='fill:%231a1a1a;stroke:none'/%3E%3C/svg%3E");
+
+.#{$popoverBaseClass} {
+  background-color: tokens.$bm-comp-popover-color-bg !important;
+  border: tokens.$bm-comp-popover-border-width solid
+    tokens.$bm-comp-popover-color-border;
+  border-radius: tokens.$bm-comp-popover-radius;
+  box-shadow: tokens.$bm-comp-popover-shadow;
+
+  // to prevent this token from being purged
+  offset: tokens.$bm-comp-popover-space-offset;
+
+  // override default Popover API styles
+  width: unset;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  padding: tokens.$bm-sem-space-100;
+
+  // SVG cannot be styled with tokens (unless we inline it in React, but then
+  // we would need to do css lookups, which isn't ideal)
+  // so instead, we use two pseudo-elements to create the arrow
+  // ::before acts as the border (stacked behind), ::after acts as the main arrow
+  &__arrow {
+    $OFFSET: 0.05rem;
+    width: tokens.$bm-comp-popover-size-beak-width;
+    height: tokens.$bm-comp-popover-size-beak-height;
+
+    &::after {
+      position: absolute;
+      content: '';
+      // raise arrow positioning (default arrow position is on the bottom of the popover content, pointing down)
+      // as bugs in some browser/zoom configurations causes the ::before psuedo-element to peek through
+      // the top of the arrow
+      top: -#{$OFFSET};
+      @include mixins.svg-icon($ARROW);
+      width: 100%;
+      height: 100%;
+      background-color: tokens.$bm-comp-popover-color-bg !important;
+    }
+
+    &::before {
+      position: absolute;
+      content: '';
+      right: 50%;
+      transform: translateX(50%);
+      @include mixins.svg-icon($ARROW);
+      background-color: tokens.$bm-comp-popover-color-border;
+
+      // increase the height of the arrow to cover the border. however, we've also moved the arrow (::after) up by $OFFSET
+      // (see comment above for reasoning) so a bit of ::before is already poking out.
+      // therefore we need to subtract that from the height
+      height: calc(
+        #{tokens.$bm-comp-popover-size-beak-height} + #{tokens.$bm-comp-popover-border-width} -
+          #{$OFFSET}
+      );
+      // height and width of the svg; see the $ARROW declaration above
+      aspect-ratio: 17.954 / 7.5;
+    }
+  }
+}

package/components/progressBar.module.scss

@@ -0,0 +1,107 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/ProgressBar';
+
+$progressBarBaseClass: '#{constants.$prefix}progress-bar';
+$progressBarLabelClass: '#{$progressBarBaseClass}__label';
+$progressBarTrackClass: '#{$progressBarBaseClass}__track';
+$progressBarIndicatorClass: '#{$progressBarBaseClass}__indicator';
+$progressBarStatusClass: '#{$progressBarBaseClass}__status';
+
+$indicatorColorByState: (
+  'active': tokens.$bm-comp-progress-bar-color-indicator-default,
+  'success': tokens.$bm-comp-progress-bar-color-indicator-success,
+  'error': tokens.$bm-comp-progress-bar-color-indicator-error,
+);
+
+.#{$progressBarBaseClass} {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+
+  .#{$progressBarLabelClass} {
+    margin-bottom: tokens.$bm-comp-progress-bar-space-label-bottom;
+    font: tokens.$bm-comp-progress-bar-typo-label;
+    color: tokens.$bm-comp-progress-bar-color-label;
+  }
+
+  .#{$progressBarTrackClass} {
+    height: tokens.$bm-comp-progress-bar-size-md-height;
+    border-radius: tokens.$bm-comp-progress-bar-radius;
+    background-color: tokens.$bm-comp-progress-bar-color-track;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .#{$progressBarStatusClass} {
+    margin-top: tokens.$bm-comp-progress-bar-space-status-top;
+  }
+
+  &--sm {
+    .#{$progressBarTrackClass} {
+      height: tokens.$bm-comp-progress-bar-size-sm-height;
+    }
+  }
+
+  &--lg {
+    .#{$progressBarTrackClass} {
+      height: tokens.$bm-comp-progress-bar-size-lg-height;
+    }
+  }
+
+  &--full-width {
+    .#{$progressBarTrackClass} {
+      border-radius: 0;
+    }
+  }
+
+  @each $state, $indicatorColor in $indicatorColorByState {
+    &--#{$state} {
+      .#{$progressBarIndicatorClass} {
+        background-color: $indicatorColor;
+      }
+    }
+  }
+
+  &--determinate {
+    .#{$progressBarIndicatorClass} {
+      transition-property: width;
+      transition-duration: 300ms;
+      transition-timing-function: ease-out;
+    }
+  }
+
+  // Sass simply doesn't like & appearing after the beginning of the selector, but it doesn't mind it wrapped in #{}
+  // https://stackoverflow.com/a/47653943
+  &--indeterminate#{&}--active {
+    .#{$progressBarIndicatorClass} {
+      width: 100%;
+      mask-image: linear-gradient(
+        to right,
+        transparent calc(50% - 100% / 14.4),
+        black 50%,
+        transparent calc(50% + 100% / 14.4)
+      );
+      mask-size: 240%;
+      mask-repeat: no-repeat;
+      mask-position: center;
+      animation: 2s linear infinite bm-progress-bar-indeterminate-indicator-animation;
+
+      &:dir(rtl) {
+        animation-direction: reverse;
+      }
+    }
+  }
+}
+
+@keyframes bm-progress-bar-indeterminate-indicator-animation {
+  0% {
+    mask-position: right;
+  }
+
+  100% {
+    mask-position: left;
+  }
+}

package/components/radioButton.module.scss

@@ -0,0 +1,115 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+@use '../utils/cursors.scss' as cursors;
+
+@import '../../../../tokens/src/lib/components/Input';
+
+$radioButtonBaseClass: '#{constants.$prefix}radio-button';
+
+$inputChoiceCursor: '--#{constants.$prefix}input-choice-cursor';
+$inputChoiceLabelCursor: '--#{constants.$prefix}input-choice-label-cursor';
+$inputChoiceLabelPointerEvents: '--#{constants.$prefix}input-choice-label-pointer-events';
+
+$radioButtonStates: (
+  error: (
+    labelColor: tokens.$bm-comp-input-color-text,
+    borderColor: tokens.$bm-comp-input-color-border-error,
+    backgroundColor: tokens.$bm-comp-input-color-bg,
+    innerColor: tokens.$bm-comp-input-color-choice-radio-selected-inner-circle-error,
+  ),
+  read-only: (
+    labelColor: tokens.$bm-comp-input-color-text,
+    borderColor: tokens.$bm-comp-input-color-border-disabled,
+    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
+    innerColor: tokens.$bm-comp-input-color-icon,
+  ),
+  disabled: (
+    labelColor: tokens.$bm-comp-input-color-text-disabled,
+    borderColor: tokens.$bm-comp-input-color-border-disabled,
+    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
+    innerColor: tokens.$bm-comp-input-color-icon-disabled,
+  ),
+);
+
+.#{$radioButtonBaseClass} {
+  display: inline-flex;
+  @include cursors.applyChoiceCursors();
+
+  &__label {
+    display: inherit;
+    word-break: break-word;
+    color: tokens.$bm-comp-input-color-text;
+    font: tokens.$bm-comp-input-typo-default;
+    gap: tokens.$bm-comp-input-space-choice-gap-inside;
+    cursor: var(#{$inputChoiceLabelCursor}, pointer);
+    pointer-events: var(#{$inputChoiceLabelPointerEvents}, auto);
+  }
+
+  @each $state, $values in $radioButtonStates {
+    &--#{$state} &__label {
+      color: map.get($values, labelColor);
+    }
+
+    &--#{$state} &__label &__input {
+      &,
+      &:checked {
+        border-color: map.get($values, borderColor);
+        background-color: map.get($values, backgroundColor);
+      }
+
+      &:checked {
+        &:after {
+          background-color: map.get($values, innerColor);
+        }
+      }
+    }
+  }
+
+  &--with-label &__label &__input {
+    margin: tokens.$bm-comp-input-space-choice-nudge tokens.$bm-sem-space-0;
+  }
+
+  &__label &__input {
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+
+    position: relative;
+    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;
+
+    &: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);
+    }
+  }
+}

package/components/segmentedControl.module.scss

@@ -0,0 +1,212 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+@use '../utils/stateLayerVars.scss' as state-layer;
+
+@import '../../../../tokens/src/lib/components/SegmentedControl';
+@import '../../../../tokens/src/lib/components/Button';
+
+$scBaseClass: '#{constants.$prefix}segmented-control';
+
+$border: tokens.$bm-comp-btn-border-width solid
+  tokens.$bm-comp-seg-control-color-border;
+
+$sizes: (
+  'sm': (
+    'min-width': tokens.$bm-comp-btn-size-sm-width,
+    'height': tokens.$bm-comp-btn-size-sm-height,
+    'icon': tokens.$bm-comp-btn-size-sm-icon,
+    'font': tokens.$bm-comp-btn-typo-sm,
+    'padding': 0 tokens.$bm-comp-seg-control-space-sm-x,
+  ),
+  'md': (
+    'min-width': tokens.$bm-comp-btn-size-md-width,
+    'height': tokens.$bm-comp-btn-size-md-height,
+    'icon': tokens.$bm-comp-btn-size-md-icon,
+    'font': tokens.$bm-comp-btn-typo-md,
+    'padding': 0 tokens.$bm-comp-seg-control-space-md-x,
+  ),
+  'lg': (
+    'min-width': tokens.$bm-comp-btn-size-lg-width,
+    'height': tokens.$bm-comp-btn-size-lg-height,
+    'icon': tokens.$bm-comp-btn-size-lg-icon,
+    'font': tokens.$bm-comp-btn-typo-lg,
+    'padding': 0 tokens.$bm-comp-seg-control-space-lg-x,
+  ),
+);
+
+.#{$scBaseClass} {
+  box-shadow: tokens.$bm-comp-btn-shadow;
+
+  &--disabled {
+    opacity: tokens.$bm-sem-opacity-disabled;
+    cursor: not-allowed;
+  }
+}
+
+.#{$scBaseClass}__list {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  gap: 0;
+  max-width: 100%;
+  min-width: 0;
+
+  // Ensure direct slotted children/wrappers can shrink and don't overflow
+  // This styles is also mirrored in SegmentedControlItem.ts
+  // to ensure the overflow observer works when a wrapper is used
+  ::slotted(*) {
+    min-width: 0;
+    flex-shrink: 1;
+  }
+
+  &--fluid {
+    width: 100%;
+    display: flex;
+
+    // In fluid mode, let each slotted child grow to fill available space
+    ::slotted(*) {
+      flex: 1 1 auto;
+    }
+  }
+}
+
+.#{$scBaseClass}__item {
+  display: flex;
+  position: relative;
+  border: $border;
+  border-color: tokens.$bm-comp-seg-control-color-border;
+  margin-inline-start: -1px;
+  min-width: 0;
+  outline: none;
+
+  background: tokens.$bm-comp-seg-control-color-bg;
+  color: tokens.$bm-comp-seg-control-color-fg;
+  cursor: pointer;
+  justify-content: center;
+
+  &--fluid {
+    flex: 1 1 auto;
+    min-width: 0;
+
+    .#{$scBaseClass}__item__label {
+      width: 100%;
+      min-width: 0;
+    }
+  }
+
+  &--first {
+    border-radius: tokens.$bm-comp-seg-control-radius 0 0
+      tokens.$bm-comp-seg-control-radius;
+    border-inline-start-color: tokens.$bm-comp-seg-control-color-border;
+    margin-inline-start: 0;
+
+    [dir='rtl'] &,
+    :dir(rtl) & {
+      border-radius: 0 tokens.$bm-comp-seg-control-radius
+        tokens.$bm-comp-seg-control-radius 0;
+    }
+  }
+
+  &--last {
+    border-radius: 0 tokens.$bm-comp-seg-control-radius
+      tokens.$bm-comp-seg-control-radius 0;
+    border-inline-end-color: tokens.$bm-comp-seg-control-color-border;
+    margin-inline-end: 0;
+
+    [dir='rtl'] &,
+    :dir(rtl) & {
+      border-radius: tokens.$bm-comp-seg-control-radius 0 0
+        tokens.$bm-comp-seg-control-radius;
+    }
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: tokens.$bm-comp-btn-space-gap;
+    cursor: inherit;
+    min-width: 0;
+    width: 100%;
+  }
+
+  &__controlText {
+    align-content: center;
+    height: 100%;
+    padding: 0 tokens.$bm-comp-btn-space-label-x;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &__icon,
+  ::slotted([slot='icon']) {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  &--selected {
+    z-index: 1;
+    background: tokens.$bm-comp-seg-control-color-bg-selected;
+    border: tokens.$bm-comp-btn-border-width solid
+      tokens.$bm-comp-seg-control-color-border-selected;
+
+    .#{$scBaseClass}__item__controlText,
+    .#{$scBaseClass}__item__icon,
+    ::slotted([slot='icon']) {
+      color: tokens.$bm-comp-seg-control-color-fg-selected;
+    }
+
+    #{state-layer.getStateLayerSelector('&', 'hover')} {
+      #{state-layer.$background}: unset;
+    }
+  }
+
+  &__state-layer {
+    pointer-events: none;
+    cursor: pointer;
+    z-index: 2;
+  }
+
+  &: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;
+    #{state-layer.$outline-offset}: 0;
+  }
+
+  &--disabled {
+    opacity: tokens.$bm-sem-opacity-disabled;
+    cursor: not-allowed !important;
+  }
+
+  @each $size, $properties in $sizes {
+    &--#{$size} {
+      height: map.get($properties, 'height');
+      font: map.get($properties, 'font');
+      padding: map.get($properties, 'padding');
+
+      .#{$scBaseClass}__item__icon svg,
+      ::slotted([slot='icon']) {
+        width: map.get($properties, 'icon');
+        height: map.get($properties, 'icon');
+      }
+
+      &.#{$scBaseClass}__item--iconOnly {
+        padding: 0 !important;
+        min-width: map.get($properties, 'min-width');
+      }
+    }
+  }
+}
+
+.#{$scBaseClass}__panel {
+  display: none;
+
+  &--selected {
+    display: block;
+  }
+}