@viasat/beam-styles 2.0.0

package/components/label.module.scss

@@ -0,0 +1,67 @@
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/Label';
+
+$labelBaseClass: '#{constants.$prefix}label';
+
+$labelCursor: '--#{constants.$prefix}comp-label-cursor';
+$labelSpaceBottom: '--#{constants.$prefix}comp-label-space-bottom';
+$labelPointerEvents: '--#{constants.$prefix}comp-label-pointer-events';
+
+.#{$labelBaseClass} {
+  color: tokens.$bm-comp-label-color-text;
+  font: tokens.$bm-comp-label-typo-default;
+  margin-bottom: var(#{$labelSpaceBottom}, tokens.$bm-sem-space-0);
+
+  label {
+    cursor: var(#{$labelCursor}, default);
+    pointer-events: var(#{$labelPointerEvents}, inherit);
+  }
+
+  &--disabled label {
+    opacity: tokens.$bm-sem-opacity-disabled;
+  }
+
+  &--required label {
+    &:after {
+      content: '*';
+      color: tokens.$bm-sem-color-text-negative;
+    }
+
+    &:has(:last-child) {
+      &:after {
+        content: '';
+      }
+
+      & > *:last-child:after {
+        content: '*';
+        color: tokens.$bm-sem-color-text-negative;
+      }
+    }
+  }
+
+  &__optional {
+    font: tokens.$bm-comp-label-typo-optional;
+    margin-left: tokens.$bm-comp-label-space-gap;
+  }
+
+  &__tooltip {
+    vertical-align: top;
+    display: inline-block;
+    margin-inline-start: tokens.$bm-comp-label-space-gap;
+
+    button {
+      color: tokens.$bm-comp-tooltip-color-icon-trigger;
+    }
+
+    svg {
+      height: tokens.$bm-comp-label-size-icon;
+      width: tokens.$bm-comp-label-size-icon;
+    }
+  }
+
+  &--no-box {
+    display: contents;
+  }
+}

package/components/link.module.scss

@@ -0,0 +1,118 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/Link';
+
+$linkBaseClass: '#{constants.$prefix}link';
+
+$appearances: (
+  'primary': (
+    'color': tokens.$bm-sem-color-link-primary,
+    'hover-color': tokens.$bm-comp-link-color-primary-hover,
+    'active-color': tokens.$bm-comp-link-color-primary-active,
+  ),
+  'secondary': (
+    'color': tokens.$bm-sem-color-link-secondary,
+    'hover-color': tokens.$bm-comp-link-color-secondary-hover,
+    'active-color': tokens.$bm-comp-link-color-secondary-active,
+  ),
+);
+
+$sizes: (
+  sm: (
+    text: tokens.$bm-comp-link-typo-sm,
+    icon: tokens.$bm-comp-link-size-sm-icon,
+  ),
+  md: (
+    text: tokens.$bm-comp-link-typo-md,
+    icon: tokens.$bm-comp-link-size-md-icon,
+  ),
+  lg: (
+    text: tokens.$bm-comp-link-typo-lg,
+    icon: tokens.$bm-comp-link-size-lg-icon,
+  ),
+  xl: (
+    text: tokens.$bm-comp-link-typo-xl,
+    icon: tokens.$bm-comp-link-size-xl-icon,
+  ),
+);
+
+.#{$linkBaseClass} {
+  outline: none;
+  width: fit-content;
+  display: inline-flex;
+  align-items: center;
+  border: tokens.$bm-sem-border-width-focus solid transparent;
+  margin: calc(#{tokens.$bm-sem-border-width-focus} * -1);
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    border-radius: tokens.$bm-sem-radius-focus-md;
+    border: tokens.$bm-sem-border-width-focus solid tokens.$bm-sem-color-border-focus;
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    opacity: tokens.$bm-sem-opacity-disabled;
+    text-decoration: none !important;
+
+    &:focus,
+    &:focus-visible {
+      border: tokens.$bm-sem-border-width-focus solid transparent;
+    }
+  }
+
+  &--hide-underline {
+    text-decoration: none;
+  }
+
+  @each $size, $sizeValue in $sizes {
+    $textSize: map.get($sizeValue, 'text');
+    $iconSize: map.get($sizeValue, 'icon');
+
+    &--#{$size} {
+      font: $textSize;
+
+      // Gap only needed when we have size
+      // otherwise it's an inhered link
+      // shouldn't  render with an icon or gap
+      gap: tokens.$bm-comp-link-space-gap;
+    }
+
+    &--#{$size} &__icon,
+    &--#{$size} ::slotted([slot='iconBefore']),
+    &--#{$size} ::slotted([slot='iconAfter']) {
+      flex-shrink: 0;
+      width: $iconSize;
+      height: $iconSize;
+    }
+  }
+
+  @each $state, $colors in $appearances {
+    $defaultColor: map.get($colors, 'color');
+    $hoverColor: map.get($colors, 'hover-color');
+    $activeColor: map.get($colors, 'active-color');
+
+    &--#{$state} {
+      color: $defaultColor;
+
+      &:not(&--disabled):hover {
+        color: $hoverColor;
+      }
+
+      &:not(&--disabled):active {
+        color: $activeColor;
+      }
+    }
+  }
+
+  &--body-bold {
+    font-weight: tokens.$bm-sem-font-weight-body-bold;
+  }
+}

package/components/list.module.scss

@@ -0,0 +1,204 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/List';
+
+$listBaseClass: '#{constants.$prefix}list';
+$listItemBaseClass: '#{constants.$prefix}list__item';
+
+$ol-list-styles: decimal, lower-alpha, lower-roman;
+$ul-list-styles: disc, circle;
+
+$sizes: (
+  sm: (
+    text: tokens.$bm-sem-typo-body-sm,
+    icon: tokens.$bm-sem-size-icon-md,
+  ),
+  md: (
+    text: tokens.$bm-sem-typo-body-md,
+    icon: tokens.$bm-sem-size-icon-lg,
+  ),
+  lg: (
+    text: tokens.$bm-sem-typo-body-lg,
+    icon: tokens.$bm-sem-size-icon-xl,
+  ),
+  xl: (
+    text: tokens.$bm-sem-typo-body-xl,
+    icon: tokens.$bm-sem-size-icon-2xl,
+  ),
+);
+
+$densities: (
+  density-md: tokens.$bm-comp-list-space-bottom-md,
+  density-lg: tokens.$bm-comp-list-space-bottom-lg,
+);
+
+// Recursive mixins to handle nested list ordering for child lists of the same type
+@mixin nested-ol-list-styles($depth: 0) {
+  list-style-type: nth($ol-list-styles, ($depth % length($ol-list-styles)) + 1);
+
+  li {
+    padding-inline-start: tokens.$bm-comp-list-space-marker;
+  }
+
+  @if $depth < 10 {
+    // support both sublists nested in li and regular sub lists of lists
+    & > li .#{$listBaseClass}--ordered {
+      @include nested-ol-list-styles($depth + 1);
+    }
+  }
+}
+
+@mixin nested-ul-list-styles($depth: 0) {
+  list-style-type: nth($ul-list-styles, ($depth % length($ul-list-styles)) + 1);
+
+  li {
+    padding-inline-start: tokens.$bm-comp-list-space-marker;
+  }
+
+  @if $depth < 10 {
+    // support both sublists nested in li and regular sub lists of lists
+    & > li .#{$listBaseClass}--unordered {
+      @include nested-ul-list-styles($depth + 1);
+    }
+  }
+}
+
+.#{$listBaseClass} {
+  list-style: none;
+  color: tokens.$bm-sem-color-text-primary;
+  padding-inline-start: tokens.$bm-comp-list-space-indent;
+  margin-block-start: 0;
+  margin-block-end: 0;
+
+  &--ordered {
+    @include nested-ol-list-styles();
+  }
+
+  &--unordered {
+    @include nested-ul-list-styles();
+  }
+
+  &--unstyled {
+    list-style-type: none;
+    padding-inline-start: 0;
+  }
+
+  &--withIcons {
+    list-style-type: none;
+    padding-inline-start: 0;
+  }
+
+  &--withIcons &__content {
+    display: flex;
+  }
+
+  &--indent {
+    padding-inline-start: tokens.$bm-comp-list-space-indent;
+  }
+
+  @each $size, $sizeValue in $sizes {
+    &--#{$size} {
+      &.#{$listBaseClass}--wcWithIcons {
+        // negative margin to counteract withIcons flexbox layout (wc)
+        margin-inline-start: calc(
+          -1 * (map.get($sizeValue, 'icon') + tokens.$bm-comp-list-space-icon)
+        );
+      }
+
+      li,
+      &,
+      ::slotted(bm-list-item) {
+        font: map.get($sizeValue, 'text');
+      }
+    }
+
+    &--#{$size} &__icon {
+      color: tokens.$bm-sem-color-icon-primary;
+
+      svg {
+        vertical-align: bottom;
+        margin-inline-end: tokens.$bm-comp-list-space-icon;
+        width: map.get($sizeValue, 'icon');
+        height: map.get($sizeValue, 'icon');
+      }
+    }
+
+    &--#{$size} &--withIcons {
+      // negative margin to counteract withIcons flexbox layout (react)
+      margin-inline-start: calc(
+        -1 * (map.get($sizeValue, 'icon') + tokens.$bm-comp-list-space-icon)
+      );
+    }
+  }
+
+  @each $density, $densityValue in $densities {
+    &--#{$density} {
+      li:not(:has(> ol, > ul)) {
+        padding-bottom: $densityValue;
+      }
+
+      ol,
+      ul,
+      &--nested {
+        padding-top: $densityValue;
+      }
+    }
+  }
+}
+
+.#{$listItemBaseClass} {
+  display: list-item;
+
+  &--decimal {
+    list-style-type: decimal;
+    padding-inline-start: tokens.$bm-comp-list-space-marker;
+  }
+
+  &--lower-alpha {
+    list-style: lower-alpha;
+    padding-inline-start: tokens.$bm-comp-list-space-marker;
+  }
+
+  &--lower-roman {
+    list-style-type: lower-roman;
+    padding-inline-start: tokens.$bm-comp-list-space-marker;
+  }
+
+  &--disc {
+    list-style-type: disc;
+    padding-inline-start: tokens.$bm-comp-list-space-marker;
+  }
+
+  &--circle {
+    list-style-type: circle;
+    padding-inline-start: tokens.$bm-comp-list-space-marker;
+  }
+
+  &__content {
+    display: flex;
+  }
+
+  @each $density, $densityValue in $densities {
+    &--#{$density} {
+      padding-bottom: $densityValue;
+    }
+  }
+
+  @each $size, $sizeValue in $sizes {
+    &--#{$size} {
+      &__icon svg,
+      ::slotted([slot='icon']) {
+        flex-shrink: 0;
+        color: tokens.$bm-sem-color-icon-primary;
+        display: inline-block;
+        vertical-align: bottom;
+        margin-inline-end: tokens.$bm-comp-list-space-icon;
+        width: map.get($sizeValue, 'icon');
+        height: map.get($sizeValue, 'icon');
+      }
+    }
+  }
+}

package/components/logo.module.scss

@@ -0,0 +1,11 @@
+@use '../utils/constants.scss';
+
+$logoBaseClass: '#{constants.$prefix}logo';
+
+.#{$logoBaseClass} {
+  &--clickable { cursor: pointer; }
+  &--inline { display: inline; }
+  &--inline-block { display: inline-block; }
+  &--block { display: block; }
+  &--none { display: none; }
+}

package/components/menu.module.scss

@@ -0,0 +1,13 @@
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/Menu';
+
+$menuBaseClass: '#{constants.$prefix}menu';
+$menuPopoverContentClass: '#{constants.$prefix}menu__popover-content';
+
+.#{$menuPopoverContentClass} {
+  padding: tokens.$bm-sem-space-50 tokens.$bm-sem-space-100;
+  overflow-y: auto;
+}

package/components/nativeSelect.module.scss

@@ -0,0 +1,139 @@
+@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;
+
+@import '../../../../tokens/src/lib/components/Input';
+
+$nativeSelectBaseClass: '#{constants.$prefix}native-select';
+
+$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';
+
+$selectCursor: '--#{constants.$prefix}text-field-cursor';
+$selectInputCursor: '--#{constants.$prefix}text-field-input-cursor';
+
+$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,
+  ),
+);
+
+.#{$nativeSelectBaseClass} {
+  @include cursors.applyTextCursors();
+  max-width: tokens.$bm-comp-input-size-field-width;
+
+  #{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
+  #{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
+
+  &--fluid {
+    max-width: 100%;
+  }
+
+  &--ellipsis &__field &__input {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__field {
+    position: relative;
+    cursor: var(#{$selectCursor}, default);
+
+    &:after {
+      content: '';
+      position: absolute;
+      pointer-events: none;
+      width: $expandIconWidth;
+      height: $expandIconHeight;
+
+      @include mixins.svg-icon($expandIcon);
+      background-color: tokens.$bm-comp-input-color-icon;
+      inset-inline-end: tokens.$bm-comp-input-space-field-x;
+      inset-block-start: calc(
+        #{tokens.$bm-comp-input-space-field-x} + #{$expandIconHeight} / 2
+      );
+    }
+  }
+
+  @each $state, $styleTokens in $stateStyleTokens {
+    &--#{$state} &__field:after {
+      background-color: map.get($styleTokens, expandIconColor);
+    }
+
+    &--#{$state} &__field &__input {
+      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})
+        );
+      }
+    }
+  }
+
+  &__field &__input {
+    width: 100%;
+    display: block;
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+
+    border-style: solid;
+    border-color: tokens.$bm-comp-input-color-border;
+    border-radius: tokens.$bm-comp-input-radius-field;
+    border-width: tokens.$bm-comp-input-border-width-field-default;
+
+    color: tokens.$bm-comp-input-color-text;
+    font: tokens.$bm-comp-input-typo-default;
+    cursor: var(#{$selectInputCursor}, pointer);
+    box-shadow: tokens.$bm-comp-input-shadow-field;
+    background-color: tokens.$bm-comp-input-color-bg;
+    height: tokens.$bm-comp-input-size-field-md-height;
+    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}
+      );
+
+    &:focus {
+      @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})
+      );
+    }
+  }
+}

package/components/navigation.module.scss

@@ -0,0 +1,156 @@
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+
+$navBaseClass: '#{constants.$prefix}navigation';
+$transitionDuration: 0.2s;
+
+@mixin nav-item-indicator {
+  display: block;
+  position: absolute;
+  background: tokens.$bm-comp-header-color-nav-item-indicator;
+  content: '';
+}
+
+.#{$navBaseClass} {
+  display: flex;
+  align-items: center;
+
+  &__list {
+    display: flex;
+    gap: tokens.$bm-comp-header-space-nav-gap;
+    margin: unset;
+    padding-inline-start: unset;
+  }
+
+  &--vertical &__list {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  &__item {
+    display: flex;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    height: tokens.$bm-comp-header-size-height;
+    cursor: pointer;
+
+    .bm-state-layer {
+      --bm-state-layer-left: 0;
+      --bm-state-layer-right: 0;
+      --bm-state-layer-outline-offset: 0;
+      --bm-state-layer-top: calc(
+        (100% - #{tokens.$bm-comp-header-size-nav-item-height}) / 2
+      );
+      --bm-state-layer-bottom: calc(
+        (100% - #{tokens.$bm-comp-header-size-nav-item-height}) / 2
+      );
+      border-radius: tokens.$bm-comp-header-radius-nav-item;
+    }
+
+    &--disabled {
+      opacity: tokens.$bm-sem-opacity-disabled;
+    }
+
+    &--selected::after {
+      @include nav-item-indicator;
+
+      bottom: 0;
+      transition: width $transitionDuration ease;
+      margin-inline: tokens.$bm-comp-header-space-nav-item-x;
+      border-start-start-radius: tokens.$bm-comp-header-radius-indicator;
+      border-start-end-radius: tokens.$bm-comp-header-radius-indicator;
+      width: calc(100% - tokens.$bm-comp-header-space-nav-item-x * 2);
+      height: tokens.$bm-comp-header-size-nav-item-indicator;
+    }
+
+    &--selected &-link {
+      color: tokens.$bm-comp-header-color-nav-item-fg-selected;
+      font: tokens.$bm-comp-header-nav-item-typo-selected;
+    }
+
+    &-link {
+      display: flex;
+      position: relative;
+      align-items: center;
+      gap: tokens.$bm-comp-header-space-nav-item-gap;
+
+      border-radius: tokens.$bm-comp-header-radius-nav-item;
+      padding-inline: tokens.$bm-comp-header-space-nav-item-x;
+      min-width: 100%;
+      height: tokens.$bm-comp-header-size-nav-item-height;
+      color: tokens.$bm-comp-header-color-nav-item-fg;
+
+      font: tokens.$bm-comp-header-nav-item-typo-default;
+      text-decoration: none;
+      z-index: 1;
+    }
+
+    &-link:focus-within {
+      outline: none;
+    }
+
+    &--disabled &-link {
+      cursor: not-allowed;
+    }
+
+    &-icon-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      aspect-ratio: 1;
+      width: tokens.$bm-comp-header-size-nav-item-icon;
+    }
+  }
+
+  &--vertical &__item {
+    height: tokens.$bm-comp-header-size-nav-item-height;
+    justify-content: flex-start;
+    align-items: center;
+
+    .bm-state-layer {
+      --bm-state-layer-left: calc(-1 * var(--bm-comp-actionlist-size-state-offset));
+      --bm-state-layer-right: calc(-1 * var(--bm-comp-actionlist-size-state-offset));
+      --bm-state-layer-outline-offset: calc(
+        -1 * var(--bm-state-layer-outline-width)
+      );
+      --bm-state-layer-top: 0;
+      --bm-state-layer-bottom: 0;
+      border-radius: var(--bm-comp-actionlist-radius);
+      z-index: -1;
+    }
+
+    &--selected {
+      &::before {
+        @include nav-item-indicator;
+
+        inset-inline-start: 0;
+        transform: translateX(-50%);
+        transition: height $transitionDuration ease;
+
+        margin-block: tokens.$bm-comp-header-space-nav-item-x;
+        border-radius: tokens.$bm-comp-header-radius-indicator;
+
+        width: tokens.$bm-comp-actionlist-size-indicator-width;
+        height: calc(100% - tokens.$bm-comp-header-space-nav-item-x * 2);
+      }
+    }
+
+    &--selected::after {
+      display: none;
+    }
+
+    &-link {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      line-clamp: 1;
+      align-self: stretch;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      line-height: tokens.$bm-comp-header-size-nav-item-height;
+    }
+  }
+}