@viasat/beam-styles 2.0.0

package/components/checkbox.module.scss

@@ -0,0 +1,123 @@
+@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';
+
+$checkboxBaseClass: '#{constants.$prefix}checkbox';
+
+$inputChoiceCursor: '--#{constants.$prefix}input-choice-cursor';
+$inputChoiceLabelCursor: '--#{constants.$prefix}input-choice-label-cursor';
+$inputChoiceLabelPointerEvents: '--#{constants.$prefix}input-choice-label-pointer-events';
+
+$checkboxStates: (
+  error: (
+    labelColor: tokens.$bm-comp-input-color-text,
+    backgroundColor: tokens.$bm-comp-input-color-bg,
+    selectedColor: tokens.$bm-comp-input-color-choice-checkbox-selected-bg-error,
+    borderColor: tokens.$bm-comp-input-color-border-error,
+  ),
+  read-only: (
+    labelColor: tokens.$bm-comp-input-color-text,
+    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
+    selectedColor: tokens.$bm-comp-input-color-icon,
+    borderColor: tokens.$bm-comp-input-color-border-disabled,
+  ),
+  disabled: (
+    labelColor: tokens.$bm-comp-input-color-text-disabled,
+    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
+    selectedColor: tokens.$bm-comp-input-color-icon-disabled,
+    borderColor: tokens.$bm-comp-input-color-border-disabled,
+  ),
+);
+
+$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();
+
+  &__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);
+  }
+
+  &--with-label &__label &__input {
+    margin: tokens.$bm-comp-input-space-choice-nudge tokens.$bm-sem-space-0;
+  }
+
+  @each $state, $values in $checkboxStates {
+    &--#{$state} &__label {
+      color: map.get($values, labelColor);
+    }
+
+    &--#{$state} &__label &__input {
+      border-color: map.get($values, borderColor);
+      background-color: map.get($values, backgroundColor);
+    }
+
+    &--#{$state} &__label &__input:checked {
+      background-color: map.get($values, selectedColor);
+    }
+  }
+
+  &__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;
+    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;
+
+    &: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);
+      }
+    }
+  }
+
+  &--indeterminate &__input:checked {
+    &::after {
+      height: 2px;
+      width: 50%;
+
+      border-radius: tokens.$bm-comp-input-size-choice-checkbox;
+
+      -webkit-mask-image: none;
+      mask-image: none;
+    }
+  }
+}

package/components/chip.module.scss

@@ -0,0 +1,173 @@
+@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/Chip';
+
+$chipBaseClass: '#{constants.$prefix}chip';
+
+$sizes: (
+  'sm': (
+    'height': tokens.$bm-comp-chip-size-sm-height,
+    'icon-size': tokens.$bm-comp-chip-size-sm-icon,
+    'gap': tokens.$bm-comp-chip-space-sm-gap,
+    'padding-inline': tokens.$bm-comp-chip-space-sm-x,
+    'font': tokens.$bm-comp-chip-typo-sm,
+  ),
+  'md': (
+    'height': tokens.$bm-comp-chip-size-md-height,
+    'icon-size': tokens.$bm-comp-chip-size-md-icon,
+    'gap': 0,
+    'padding-inline': tokens.$bm-comp-chip-space-md-x,
+    'font': tokens.$bm-comp-chip-typo-md,
+  ),
+  'lg': (
+    'height': tokens.$bm-comp-chip-size-lg-height,
+    'icon-size': tokens.$bm-comp-chip-size-lg-icon,
+    'gap': 0,
+    'padding-inline': tokens.$bm-comp-chip-space-lg-x,
+    'font': tokens.$bm-comp-chip-typo-lg,
+  ),
+);
+
+.#{$chipBaseClass} {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  box-shadow: tokens.$bm-comp-chip-shadow;
+  color: tokens.$bm-comp-chip-color-fg;
+  background-color: tokens.$bm-comp-chip-color-bg;
+  border-color: tokens.$bm-comp-chip-color-border;
+  border-style: solid;
+  border-radius: tokens.$bm-comp-chip-radius-container;
+  border-width: tokens.$bm-comp-chip-border-width;
+  cursor: pointer;
+  user-select: none;
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    cursor: inherit;
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    cursor: inherit;
+
+    .#{$chipBaseClass}--ellipsis & > span {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      line-clamp: 1;
+      flex: 1;
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    color: tokens.$bm-comp-chip-color-fg;
+  }
+
+  &:has(input:checked) {
+    color: tokens.$bm-comp-chip-color-fg-selected;
+    background-color: tokens.$bm-comp-chip-color-bg-selected;
+    border-color: tokens.$bm-comp-chip-color-border-selected;
+    .#{$chipBaseClass}__icon {
+      color: tokens.$bm-comp-chip-color-fg-selected;
+    }
+    --bm-comp-close-btn-color-default: tokens.$bm-comp-chip-color-fg-selected;
+  }
+
+  &:has(input[type='radio']:checked) {
+    color: tokens.$bm-comp-chip-color-fg-selected;
+    background-color: tokens.$bm-comp-chip-color-bg-selected;
+    border-color: tokens.$bm-comp-chip-color-border-selected;
+  }
+
+  &__state-layer {
+    pointer-events: none;
+    #{state-layer.$opacity}: 0;
+    #{state-layer.$outline-width}: 0;
+  }
+
+  // Show state layer only when component got this class
+  &--has-focus .#{state-layer.$stateLayerBaseClass} {
+    #{state-layer.$opacity}: 1;
+    #{state-layer.$outline-width}: tokens.$bm-sem-border-width-focus;
+  }
+
+  // When the input is focused, hide the state layer outline
+  &:focus-within:has(input:focus) .#{state-layer.$stateLayerBaseClass} {
+    #{state-layer.$outline-width}: 0px;
+  }
+
+  // When the input is key board focus, show the state layer outline
+  &:focus-within:has(input:focus-visible) .#{state-layer.$stateLayerBaseClass} {
+    #{state-layer.$outline-width}: tokens.$bm-sem-border-width-focus;
+  }
+
+  &--disabled {
+    opacity: tokens.$bm-sem-opacity-disabled;
+    cursor: not-allowed !important;
+    pointer-events: none;
+  }
+
+  &--fluid {
+    width: 100%;
+  }
+
+  &--non-selectable {
+    cursor: text;
+    user-select: text;
+  }
+
+  @each $size, $properties in $sizes {
+    &--#{$size} {
+      height: map.get($properties, 'height');
+      padding-inline: map.get($properties, 'padding-inline');
+      font: map.get($properties, 'font');
+      gap: map.get($properties, 'gap');
+
+      .#{$chipBaseClass}__label {
+        gap: map.get($properties, 'gap');
+      }
+
+      .#{$chipBaseClass}__icon {
+        width: map.get($properties, 'icon-size');
+        height: map.get($properties, 'icon-size');
+      }
+
+      @if $size == 'md' or $size == 'lg' {
+        .#{$chipBaseClass}__label > span:not(.#{$chipBaseClass}__icon) {
+          padding-inline: tokens.$bm-comp-chip-space-text;
+        }
+      }
+    }
+  }
+
+  &__label {
+    flex-direction: row;
+  }
+
+  &__icon {
+    order: -1;
+  }
+
+  &__dismiss-button {
+    order: 1;
+    margin-inline-start: auto;
+  }
+}

package/components/chipsGroup.module.scss

@@ -0,0 +1,13 @@
+@use '../utils/constants.scss';
+
+@import '../../../../tokens/src/lib/components/Chip';
+
+$chipBaseClass: '#{constants.$prefix}chips-group';
+
+.#{$chipBaseClass} {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  width: fit-content;
+  align-items: center;
+}

package/components/closeButton.module.scss

@@ -0,0 +1,52 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss';
+@use '../utils/tokens.scss';
+@use '../utils/stateLayerVars.scss' as state-layer;
+
+@import '../../../../tokens/src/lib/components/CloseButton';
+
+$closeButtonBaseClass: '#{constants.$prefix}close-button';
+
+$sizes: (
+  xs: tokens.$bm-comp-close-btn-size-xs,
+  sm: tokens.$bm-comp-close-btn-size-sm,
+  md: tokens.$bm-comp-close-btn-size-md,
+  lg: tokens.$bm-comp-close-btn-size-lg,
+  xl: tokens.$bm-comp-close-btn-size-xl,
+);
+
+.#{$closeButtonBaseClass} {
+  display: inline-flex;
+  padding: tokens.$bm-comp-close-btn-space-y tokens.$bm-comp-close-btn-space-x;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  outline: none;
+  cursor: pointer;
+  border: unset;
+  border-radius: tokens.$bm-comp-close-btn-radius;
+  background-color: unset;
+  color: tokens.$bm-comp-close-btn-color-default;
+
+  .#{state-layer.$stateLayerBaseClass} {
+    #{state-layer.$outline-offset}: calc(0px - tokens.$bm-sem-size-focus-offset);
+  }
+
+  @each $size, $sizeValue in $sizes {
+    &--#{$size} {
+      height: calc($sizeValue + tokens.$bm-comp-close-btn-space-y * 2);
+      width: calc($sizeValue + tokens.$bm-comp-close-btn-space-x * 2);
+    }
+
+    &--#{$size} &__icon {
+      height: $sizeValue;
+      width: $sizeValue;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: tokens.$bm-sem-opacity-disabled;
+  }
+}

package/components/combobox.module.scss

@@ -0,0 +1,243 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/cursors.scss' as cursors;
+@use './icon.vars.scss' as iconVars;
+
+@import '../../../../tokens/src/lib/components/Input.css';
+
+$comboboxBaseClass: '#{constants.$prefix}combobox';
+
+$expandIconWidth: 0.625rem;
+$expandIconHeight: 0.3125rem;
+$expandIcon: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNSIgdmlld0JveD0iMCAwIDEwIDUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjE4MjgzMiAwLjMxMjQ2NEMwLjExNDQwOSAwLjM5NzkxNSAwLjA2MzQ5MzEgMC40OTYwMSAwLjAzMjk5NCAwLjYwMTE0NUMwLjAwMjQ5NDk0IDAuNzA2MjggLTAuMDA2OTg5NjIgMC44MTYzOTUgMC4wMDUwODIyOCAwLjkyNTE5NkMwLjAxNzE1NDIgMS4wMzQgMC4wNTA1NDU5IDEuMTM5MzYgMC4xMDMzNSAxLjIzNTI1QzAuMTU2MTUzIDEuMzMxMTQgMC4yMjczMzQgMS40MTU2OSAwLjMxMjgyNSAxLjQ4NDA2TDQuNDc5MjUgNC44MTcyQzQuNjI3MDQgNC45MzU1MyA0LjgxMDcyIDUgNS4wMDAwNSA1QzUuMTg5MzcgNSA1LjM3MzA2IDQuOTM1NTMgNS41MjA4NSA0LjgxNzJMOS42ODcyNyAxLjQ4NDA2QzkuODU5ODcgMS4zNDU5NCA5Ljk3MDU0IDEuMTQ0OSA5Ljk5NDkxIDAuOTI1MTg1QzEwLjAxOTMgMC43MDU0NjggOS45NTUzOSAwLjQ4NTA2NiA5LjgxNzI2IDAuMzEyNDY0QzkuNjc5MTQgMC4xMzk4NjMgOS40NzgxIDAuMDI5MjAwNyA5LjI1ODM5IDAuMDA0ODIyNDJDOS4wMzg2NyAtMC4wMTk1NTU5IDguODE4MjcgMC4wNDQzNDY1IDguNjQ1NjcgMC4xODI0NzJMNS4wMDAwNSAzLjA5ODk3TDEuMzU0NDMgMC4xODI0NzJDMS4yNjg5OCAwLjExNDA0OCAxLjE3MDg4IDAuMDYzMTMzIDEuMDY1NzUgMC4wMzI2MzM5QzAuOTYwNjE0IDAuMDAyMTM0ODEgMC44NTA1IC0wLjAwNzM1MDQgMC43NDE2OTggMC4wMDQ3MjE1QzAuNjMyODk2IDAuMDE2NzkzNCAwLjUyNzUzOSAwLjA1MDE4NTggMC40MzE2NDYgMC4xMDI5ODlDMC4zMzU3NTQgMC4xNTU3OTMgMC4yNTEyMDYgMC4yMjY5NzQgMC4xODI4MzIgMC4zMTI0NjRWMC4zMTI0NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K');
+
+$labelSpaceBottom: '--#{constants.$prefix}label-space-bottom';
+$helperTextSpaceTop: '--#{constants.$prefix}helper-text-space-top';
+
+$comboboxCursor: '--#{constants.$prefix}text-field-cursor';
+$comboboxInputCursor: '--#{constants.$prefix}text-field-input-cursor';
+
+$comboboxDropdownMaxItemsVar: '--#{constants.$prefix}combobox-dropdown-max-items';
+
+$stateStyleTokens: (
+  error: (
+    textColor: tokens.$bm-comp-input-color-text,
+    backgroundColor: tokens.$bm-comp-input-color-bg,
+    borderColor: tokens.$bm-comp-input-color-border-error,
+    expandIconColor: tokens.$bm-comp-input-color-icon,
+  ),
+  read-only: (
+    textColor: tokens.$bm-comp-input-color-text,
+    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
+    borderColor: tokens.$bm-comp-input-color-border-disabled,
+    expandIconColor: tokens.$bm-comp-input-color-icon-disabled,
+  ),
+  disabled: (
+    textColor: tokens.$bm-comp-input-color-text-disabled,
+    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
+    borderColor: tokens.$bm-comp-input-color-border-disabled,
+    expandIconColor: tokens.$bm-comp-input-color-icon-disabled,
+  ),
+);
+
+.#{$comboboxBaseClass} {
+  @include cursors.applyTextCursors();
+  max-width: tokens.$bm-comp-input-size-field-width;
+  position: relative;
+
+  #{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
+  #{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
+
+  &--fluid {
+    max-width: 100%;
+  }
+
+  &--autocomplete &__field {
+    #{$comboboxInputCursor}: text;
+  }
+
+  &--disabled, &--disabled &__field {
+    #{$comboboxCursor}: not-allowed;
+    #{$comboboxInputCursor}: not-allowed;
+  }
+
+  &--multiple:not(&--autocomplete):not(&--empty) &__field__input {
+    display: none;
+  }
+
+  &:not(&--autocomplete) &__field::selection {
+    background-color: transparent;
+  }
+
+  &__field {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    position: relative;
+    cursor: var(#{$comboboxCursor}, pointer);
+    user-select: none;
+    font: tokens.$bm-comp-input-typo-default;
+    min-height: tokens.$bm-comp-input-size-field-md-height;
+    gap: tokens.$bm-comp-input-space-field-gap;
+    #{iconVars.$iconColor}: tokens.$bm-comp-input-color-icon;
+    #{iconVars.$iconSize}: tokens.$bm-comp-input-size-field-icon;
+
+    &__chevron {
+      position: absolute;
+      cursor: var(#{$comboboxCursor}, pointer);
+      width: var(#{iconVars.$iconSize});
+      height: var(#{iconVars.$iconSize});
+
+      @include mixins.svg-icon($expandIcon, $expandIconWidth $expandIconHeight);
+      background-color: tokens.$bm-comp-input-color-icon;
+      inset-inline-end: calc(tokens.$bm-comp-input-space-field-x - (var(#{iconVars.$iconSize}) - $expandIconWidth) / 2);
+      inset-block-start: calc(tokens.$bm-comp-input-size-field-md-height / 2 - var(#{iconVars.$iconSize}) / 2);
+
+      transition: transform 0.2s ease;
+
+      .#{$comboboxBaseClass}--dropdown-open & {
+        transform: rotate(180deg) translateY(tokens.$bm-comp-input-border-width-field-default);
+      }
+    }
+
+    &__before,
+    &__chips,
+    &__input,
+    &__after {
+      display: flex;
+      align-items: center;
+      flex: 0 0 auto;
+      gap: tokens.$bm-comp-input-space-field-gap;
+      min-height: calc(
+        tokens.$bm-comp-input-size-field-md-height - 2 *
+          tokens.$bm-comp-input-border-width-field-default - 2 *
+          tokens.$bm-comp-input-space-field-y
+      );
+      line-height: calc(
+        tokens.$bm-comp-input-size-field-md-height - 2 *
+          tokens.$bm-comp-input-border-width-field-default - 2 *
+          tokens.$bm-comp-input-space-field-y
+      );
+    }
+
+    &__input {
+      background: transparent;
+      min-height: calc(tokens.$bm-comp-input-size-field-md-height - 2 * tokens.$bm-comp-input-space-field-y);
+      line-height: calc(tokens.$bm-comp-input-size-field-md-height - 2 * tokens.$bm-comp-input-space-field-y);
+
+      &::placeholder {
+        color: tokens.$bm-comp-input-color-text-placeholder;
+      }
+    }
+
+    &__content-before, &__content-after {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: tokens.$bm-comp-input-space-field-gap;
+      color: tokens.$bm-comp-input-color-text-placeholder;
+    }
+
+    &__content-before,
+    &__content-after {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: tokens.$bm-comp-input-space-field-gap;
+      color: tokens.$bm-comp-input-color-text-placeholder;
+    }
+
+    &__chips {
+      flex: 1;
+      gap: tokens.$bm-sem-space-25;
+      flex-wrap: wrap;
+      margin-block: calc(-1 * tokens.$bm-comp-input-border-width-field-default);
+    }
+
+    &__input {
+      flex: 1;
+      cursor: var(#{$comboboxInputCursor}, pointer);
+
+      text-overflow: ellipsis;
+
+      border: 0;
+      outline: 0;
+      margin: 0;
+      padding: 0;
+      font: tokens.$bm-comp-input-typo-default;
+
+      width: 100%;
+      min-width: 3rem;
+    }
+  }
+
+  @each $state, $styleTokens in $stateStyleTokens {
+    &--#{$state} &__field__chevron {
+      background-color: map.get($styleTokens, expandIconColor);
+    }
+
+    &--#{$state} &__field {
+      color: map.get($styleTokens, textColor);
+      border-color: map.get($styleTokens, borderColor);
+      background-color: map.get($styleTokens, backgroundColor);
+
+      @if ($state == error) {
+        @include mixins.simulated-inset-outline(
+          tokens.$bm-comp-input-border-width-field-error,
+          solid,
+          map.get($styleTokens, borderColor),
+          calc(0px - #{tokens.$bm-comp-input-border-width-field-error})
+        );
+      }
+    }
+  }
+
+  &--disabled &__field &__field__input {
+    color: tokens.$bm-comp-input-color-text-disabled;
+
+    &::placeholder {
+      color: tokens.$bm-comp-input-color-text-disabled;
+    }
+  }
+
+  &__field {
+    border: tokens.$bm-comp-input-border-width-field-default solid
+      tokens.$bm-comp-input-color-border;
+    border-radius: tokens.$bm-comp-input-radius-field;
+
+    cursor: var(#{$comboboxInputCursor}, pointer);
+    box-shadow: tokens.$bm-comp-input-shadow-field;
+    background-color: tokens.$bm-comp-input-color-bg;
+    transform: translate3d(
+      tokens.$bm-sem-space-0,
+      tokens.$bm-sem-space-0,
+      tokens.$bm-sem-space-0
+    );
+
+    padding-block: tokens.$bm-comp-input-space-field-y;
+    padding-inline: tokens.$bm-comp-input-space-field-x
+      calc(
+        #{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} + #{tokens.$bm-comp-input-space-field-x}
+      );
+
+    min-height: tokens.$bm-comp-input-size-field-md-height;
+
+    &:focus-within {
+      @include mixins.simulated-inset-outline(
+        tokens.$bm-sem-border-width-focus,
+        solid,
+        tokens.$bm-sem-color-border-focus,
+        calc(0px - #{tokens.$bm-sem-size-focus-offset})
+      );
+    }
+  }
+
+  &__dropdown {
+    padding: tokens.$bm-sem-space-50 tokens.$bm-sem-space-100 !important;
+
+    max-height: calc(var(#{$comboboxDropdownMaxItemsVar}, 8) * #{tokens.$bm-comp-actionlist-size-height} + 2 * #{tokens.$bm-sem-space-50});
+    overflow-y: auto;
+  }
+}