@fundamental-styles/theming-preview 0.24.0-rc.49 → 0.24.0-rc.51

package/fundamental-styles.css

@@ -1,7 +1,7 @@
 
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.49
+ * Fundamental Library Styles v0.24.0-rc.51
  * Copyright (c) 2022 SAP SE or an SAP affiliate company.
  * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)
  */
@@ -19810,7 +19810,6 @@ fd-carousel:focus, fd-carousel.is-focus {
   position: relative;
   list-style: none;
   width: 100%;
-  text-shadow: var(--fdListBase_Text_Shadow);
 }
 .fd-list::before, .fd-list::after {
   -webkit-box-sizing: inherit;
@@ -19861,9 +19860,10 @@ fd-carousel:focus, fd-carousel.is-focus {
   right: 0.125rem;
   bottom: 0.125rem;
   pointer-events: none;
+  bottom: 0.0625rem;
 }
 .fd-list__item:focus:active::before, .fd-list__item:focus.is-active::before, .fd-list__item.is-focus:active::before, .fd-list__item.is-focus.is-active::before {
-  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_ContrastFocusColor);
+  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color);
 }
 .fd-list__item--unread .fd-list__title {
   font-weight: bold;
@@ -19954,7 +19954,6 @@ fd-carousel:focus, fd-carousel.is-focus {
   color: var(--sapButton_TextColor);
   pointer-events: all;
   cursor: pointer;
-  text-shadow: var(--fdListBase_Text_Shadow);
   margin: var(--fdList_Item_Action_Button_Spacing);
   border: var(--fdList_Item_Action_Button_Border);
   border-radius: var(--fdList_Item_Action_Button_Border_Radius);
@@ -20032,7 +20031,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   outline-style: var(--sapContent_FocusStyle);
 }
 .fd-list__item--action .fd-list__title:focus:active, .fd-list__item--action .fd-list__title:focus.is-active, .fd-list__item--action .fd-list__title.is-focus:active, .fd-list__item--action .fd-list__title.is-focus.is-active {
-  outline-color: var(--sapContent_ContrastFocusColor);
+  outline-color: var(--fdList_Active_Outline_Color);
 }
 .fd-list__item--action .fd-list__title::-moz-focus-inner {
   border: 0;
@@ -20062,10 +20061,11 @@ fd-carousel:focus, fd-carousel.is-focus {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-left: 0.5rem;
   color: inherit;
   text-shadow: inherit;
   font-size: inherit;
-  margin-left: 0.5rem;
+  font-weight: var(--fdList_Growing_Font_Weight);
 }
 .fd-list__item--growing .fd-list__title-text::before, .fd-list__item--growing .fd-list__title-text::after {
   -webkit-box-sizing: inherit;
@@ -20076,9 +20076,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   margin-right: 0.5rem;
   margin-left: 0;
 }
-.fd-list__item--inactive {
-  pointer-events: none;
-}
+.fd-list__item--inactive,
 .fd-list__item--inactive .fd-list__title,
 .fd-list__item--inactive .fd-list__secondary {
   pointer-events: none;
@@ -20131,18 +20129,20 @@ fd-carousel:focus, fd-carousel.is-focus {
       flex-basis: auto;
 }
 .fd-list__secondary {
+  padding-left: 1rem;
   font-size: var(--sapFontSize);
   -webkit-box-flex: 2;
       -ms-flex: 2 2 10%;
           flex: 2 2 10%;
   text-align: right;
-  padding-left: 1rem;
 }
 [dir=rtl] .fd-list__secondary, .fd-list__secondary[dir=rtl] {
-  text-align: left;
   padding-right: 1rem;
   padding-left: 0;
 }
+[dir=rtl] .fd-list__secondary, .fd-list__secondary[dir=rtl] {
+  text-align: left;
+}
 .fd-list__icon [class*=sap-icon], .fd-list__icon[class*=sap-icon] {
   color: inherit;
   background: inherit;
@@ -20169,16 +20169,16 @@ fd-carousel:focus, fd-carousel.is-focus {
 .fd-list__icon [class*=sap-icon]:first-child, .fd-list__icon[class*=sap-icon]:first-child {
   margin-left: -1rem;
 }
-.fd-list__icon [class*=sap-icon]:last-child, .fd-list__icon[class*=sap-icon]:last-child {
+[dir=rtl] .fd-list__icon [class*=sap-icon]:first-child, .fd-list__icon [class*=sap-icon]:first-child[dir=rtl], [dir=rtl] .fd-list__icon[class*=sap-icon]:first-child, .fd-list__icon[class*=sap-icon]:first-child[dir=rtl] {
   margin-right: -1rem;
+  margin-left: 0;
 }
-[dir=rtl] .fd-list__icon [class*=sap-icon]:first-child, .fd-list__icon [class*=sap-icon][dir=rtl]:first-child, [dir=rtl] .fd-list__icon[class*=sap-icon]:first-child, .fd-list__icon[class*=sap-icon][dir=rtl]:first-child {
+.fd-list__icon [class*=sap-icon]:last-child, .fd-list__icon[class*=sap-icon]:last-child {
   margin-right: -1rem;
-  margin-left: 0;
 }
-[dir=rtl] .fd-list__icon [class*=sap-icon]:last-child, .fd-list__icon [class*=sap-icon][dir=rtl]:last-child, [dir=rtl] .fd-list__icon[class*=sap-icon]:last-child, .fd-list__icon[class*=sap-icon][dir=rtl]:last-child {
-  margin-left: -1rem;
+[dir=rtl] .fd-list__icon [class*=sap-icon]:last-child, .fd-list__icon [class*=sap-icon]:last-child[dir=rtl], [dir=rtl] .fd-list__icon[class*=sap-icon]:last-child, .fd-list__icon[class*=sap-icon]:last-child[dir=rtl] {
   margin-right: 0;
+  margin-left: -1rem;
 }
 .fd-list__link {
   font-size: var(--sapFontSize);
@@ -20191,13 +20191,13 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding: 0;
   margin: 0;
   border: 0;
-  text-decoration: none;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  text-decoration: none;
   width: 100%;
   height: 100%;
   padding: 0 1rem;
@@ -20224,7 +20224,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   pointer-events: none;
 }
 .fd-list__link:focus:active::before, .fd-list__link:focus.is-active::before, .fd-list__link.is-focus:active::before, .fd-list__link.is-focus.is-active::before {
-  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_ContrastFocusColor);
+  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color);
 }
 .fd-list__link:hover, .fd-list__link.is-hover {
   background: var(--sapList_Hover_Background);
@@ -20336,16 +20336,17 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding: 0;
   margin: 0;
   border: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-left: 0.5rem;
   position: absolute;
   line-height: 2rem;
   width: 100%;
   top: 0;
   left: 0;
   height: 2rem;
-  padding-left: 0.5rem;
   font-size: var(--sapFontSmallSize);
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 .fd-list__message::before, .fd-list__message::after {
   -webkit-box-sizing: inherit;
@@ -20353,8 +20354,8 @@ fd-carousel:focus, fd-carousel.is-focus {
   font-size: inherit;
 }
 [dir=rtl] .fd-list__message, .fd-list__message[dir=rtl] {
-  padding-left: 0;
   padding-right: 0.5rem;
+  padding-left: 0;
 }
 .fd-list__message--error {
   background-color: var(--sapErrorBackground);
@@ -20369,11 +20370,11 @@ fd-carousel:focus, fd-carousel.is-focus {
   background-color: var(--sapInformationBackground);
 }
 .fd-list .fd-list__button {
-  margin-left: var(--fdListButtonSpacing);
+  margin-left: var(--fdList_Button_Spacing);
 }
 [dir=rtl] .fd-list .fd-list__button, .fd-list .fd-list__button[dir=rtl] {
+  margin-right: var(--fdList_Button_Spacing);
   margin-left: 0;
-  margin-right: var(--fdListButtonSpacing);
 }
 .fd-list--compact .fd-list__item {
   height: 2rem;
@@ -20491,7 +20492,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding: 0.5rem 1rem;
 }
 .fd-list--multi-input .fd-list__item {
-  padding: 0;
+  padding: 0 1rem 0 0;
   height: auto;
 }
 .fd-list--multi-input .fd-list__item:hover, .fd-list--multi-input .fd-list__item.is-hover {
@@ -20560,6 +20561,9 @@ fd-carousel:focus, fd-carousel.is-focus {
   color: var(--sapList_Active_TextColor);
   text-shadow: none;
 }
+[dir=rtl] .fd-list--multi-input .fd-list__item, .fd-list--multi-input .fd-list__item[dir=rtl] {
+  padding: 0 0 0 1rem;
+}
 .fd-list--multi-input .fd-list__label {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -20598,12 +20602,6 @@ fd-carousel:focus, fd-carousel.is-focus {
   left: 0.0625rem;
   right: 0.0625rem;
 }
-.fd-list--multi-input .fd-list__secondary {
-  padding-right: 1rem;
-}
-[dir=rtl] .fd-list--multi-input .fd-list__secondary, .fd-list--multi-input .fd-list__secondary[dir=rtl] {
-  padding-left: 1rem;
-}
 .fd-list--multi-input .fd-list__footer {
   height: auto;
   text-align: right;
@@ -20719,12 +20717,12 @@ fd-carousel:focus, fd-carousel.is-focus {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
   height: 100%;
   min-width: 2rem;
 }
@@ -20749,6 +20747,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  margin-right: 0.75rem;
   width: 3rem;
   height: 3rem;
   min-width: 3rem;
@@ -20756,7 +20755,6 @@ fd-carousel:focus, fd-carousel.is-focus {
   min-height: 3rem;
   max-height: 3rem;
   border-radius: 0.25rem;
-  margin-right: 0.75rem;
   font-size: 2.5rem;
   color: var(--sapContent_NonInteractiveIconColor);
 }
@@ -20787,7 +20785,6 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding: 0;
   margin: 0;
   border: 0;
-  pointer-events: none;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -20795,6 +20792,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
+  pointer-events: none;
   -ms-flex-line-pack: justify;
       align-content: space-between;
   min-height: 3rem;
@@ -20811,6 +20809,9 @@ fd-carousel:focus, fd-carousel.is-focus {
   font-size: inherit;
 }
 .fd-list--byline .fd-list__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-size: var(--sapFontLargeSize);
   min-height: 1rem;
 }
@@ -20865,9 +20866,9 @@ fd-carousel:focus, fd-carousel.is-focus {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-right: 0.5rem;
   width: 60%;
   color: var(--sapContent_LabelColor);
-  padding-right: 0.5rem;
   line-height: 1rem;
   -ms-flex-item-align: end;
       align-self: flex-end;
@@ -20878,8 +20879,8 @@ fd-carousel:focus, fd-carousel.is-focus {
   font-size: inherit;
 }
 [dir=rtl] .fd-list--byline .fd-list__byline-left, .fd-list--byline .fd-list__byline-left[dir=rtl] {
-  padding-left: 0.5rem;
   padding-right: 0;
+  padding-left: 0.5rem;
 }
 .fd-list--byline .fd-list__byline-right {
   font-size: var(--sapFontSize);
@@ -20895,9 +20896,9 @@ fd-carousel:focus, fd-carousel.is-focus {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-left: 0.5rem;
   width: 40%;
   color: var(--sapContent_LabelColor);
-  padding-left: 0.5rem;
   line-height: 1rem;
   text-align: right;
   -ms-flex-item-align: end;
@@ -20909,8 +20910,10 @@ fd-carousel:focus, fd-carousel.is-focus {
   font-size: inherit;
 }
 [dir=rtl] .fd-list--byline .fd-list__byline-right, .fd-list--byline .fd-list__byline-right[dir=rtl] {
-  padding-left: 0;
   padding-right: 0.5rem;
+  padding-left: 0;
+}
+[dir=rtl] .fd-list--byline .fd-list__byline-right, .fd-list--byline .fd-list__byline-right[dir=rtl] {
   text-align: left;
 }
 .fd-list--byline .fd-list__byline-right--neutral {
@@ -20962,16 +20965,16 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding-right: 1rem;
 }
 [dir=rtl] .fd-list--navigation .fd-list__link, .fd-list--navigation .fd-list__link[dir=rtl] {
-  padding-left: 1rem;
   padding-right: 1rem;
+  padding-left: 1rem;
 }
 .fd-list--navigation.fd-list--navigation-indication .fd-list__link {
   padding-left: 1rem;
   padding-right: 0;
 }
 [dir=rtl] .fd-list--navigation.fd-list--navigation-indication .fd-list__link, .fd-list--navigation.fd-list--navigation-indication .fd-list__link[dir=rtl] {
-  padding-left: 0;
   padding-right: 1rem;
+  padding-left: 0;
 }
 .fd-list--navigation.fd-list--selection .fd-list__item--link {
   padding: 0;
@@ -20981,8 +20984,8 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding-right: 1rem;
 }
 [dir=rtl] .fd-list--navigation.fd-list--selection .fd-list__link, .fd-list--navigation.fd-list--selection .fd-list__link[dir=rtl] {
-  padding-left: 1rem;
   padding-right: 2.75rem;
+  padding-left: 1rem;
 }
 .fd-list--navigation.fd-list--selection.fd-list--navigation-indication .fd-list__item--link {
   padding: 0;
@@ -20992,8 +20995,8 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding-right: 0;
 }
 [dir=rtl] .fd-list--navigation.fd-list--selection.fd-list--navigation-indication .fd-list__link, .fd-list--navigation.fd-list--selection.fd-list--navigation-indication .fd-list__link[dir=rtl] {
-  padding-left: 0;
   padding-right: 2.75rem;
+  padding-left: 0;
 }
 .fd-list--navigation.fd-list--byline .fd-list__item--link, .fd-list--navigation.fd-list--byline.fd-list--compact .fd-list__item--link {
   padding: 0;
@@ -21005,16 +21008,16 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding-bottom: 1rem;
 }
 [dir=rtl] .fd-list--navigation.fd-list--byline .fd-list__link, .fd-list--navigation.fd-list--byline .fd-list__link[dir=rtl], [dir=rtl] .fd-list--navigation.fd-list--byline.fd-list--compact .fd-list__link, .fd-list--navigation.fd-list--byline.fd-list--compact .fd-list__link[dir=rtl] {
-  padding-left: 1rem;
   padding-right: 1rem;
+  padding-left: 1rem;
 }
 .fd-list--navigation.fd-list--byline.fd-list--navigation-indication .fd-list__link {
   padding-left: 1rem;
   padding-right: 0;
 }
 [dir=rtl] .fd-list--navigation.fd-list--byline.fd-list--navigation-indication .fd-list__link, .fd-list--navigation.fd-list--byline.fd-list--navigation-indication .fd-list__link[dir=rtl] {
-  padding-left: 0;
   padding-right: 1rem;
+  padding-left: 0;
 }
 .fd-list--navigation.fd-list--byline.fd-list--no-border .fd-list__item--link .fd-list__link {
   padding-top: 0.5rem;
@@ -21046,8 +21049,8 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding-right: 1rem;
 }
 [dir=rtl] .fd-list--navigation.fd-list--byline.fd-list--selection .fd-list__link, .fd-list--navigation.fd-list--byline.fd-list--selection .fd-list__link[dir=rtl] {
-  padding-left: 1rem;
   padding-right: 2.75rem;
+  padding-left: 1rem;
 }
 .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--compact .fd-list__item--link {
   padding: 0;
@@ -21057,8 +21060,8 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding-right: 1rem;
 }
 [dir=rtl] .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--compact .fd-list__link, .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--compact .fd-list__link[dir=rtl] {
-  padding-left: 1rem;
   padding-right: 2.75rem;
+  padding-left: 1rem;
 }
 .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--no-border .fd-list__item--link {
   padding: 0;
@@ -21093,16 +21096,16 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding-right: 0;
 }
 [dir=rtl] .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--navigation-indication .fd-list__link, .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--navigation-indication .fd-list__link[dir=rtl] {
-  padding-left: 0;
   padding-right: 2.75rem;
+  padding-left: 0;
 }
 .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--navigation-indication.fd-list--compact .fd-list__link {
   padding-left: 2.75rem;
   padding-right: 0;
 }
 [dir=rtl] .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--navigation-indication.fd-list--compact .fd-list__link, .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--navigation-indication.fd-list--compact .fd-list__link[dir=rtl] {
-  padding-left: 0;
   padding-right: 2.75rem;
+  padding-left: 0;
 }
 .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--navigation-indication.fd-list--no-border .fd-list__item--link .fd-list__link {
   padding-top: 0.5rem;
@@ -21139,446 +21142,9 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding-bottom: 1rem;
 }
 [dir=rtl] .fd-list--navigation.fd-list--navigation-object .fd-list__link, .fd-list--navigation.fd-list--navigation-object .fd-list__link[dir=rtl] {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-.fd-list .fd-list__navigation-item-indicator {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-.fd-list .fd-list__navigation-item-indicator::before, .fd-list .fd-list__navigation-item-indicator::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-.fd-list .fd-list__navigation-item-indicator::after {
-  content: "";
-  width: 0.1875rem;
-  display: inline-block;
-  position: absolute;
-  right: 0;
-  top: 0.5625rem;
-  height: 1.625rem;
-  background-color: var(--sapSelectedColor);
-  color: var(--sapSelectedColor);
-  border-radius: var(--sapField_BorderCornerRadius);
-  margin-right: 0.3125rem;
-}
-[dir=rtl] .fd-list .fd-list__navigation-item-indicator::after, .fd-list .fd-list__navigation-item-indicator[dir=rtl]::after {
-  right: unset;
-  margin-right: 0;
-  left: 0;
-  margin-left: 0.3125rem;
-}
-.fd-list__navigation-item {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  padding-left: 0.5rem;
   padding-right: 1rem;
-  background: transparent;
-  height: 2.75rem;
-  position: relative;
-  cursor: pointer;
-}
-.fd-list__navigation-item::before, .fd-list__navigation-item::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-.fd-list__navigation-item:focus, .fd-list__navigation-item.is-focus {
-  outline-offset: -0.1875rem;
-  outline-width: var(--sapContent_FocusWidth);
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
-}
-[dir=rtl] .fd-list__navigation-item, .fd-list__navigation-item[dir=rtl] {
-  padding-right: 0.5rem;
   padding-left: 1rem;
 }
-.fd-list__navigation-item.fd-list__navigation-item--indicated {
-  color: var(--sapSelectedColor);
-}
-.fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-text,
-.fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-icon,
-.fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-arrow {
-  color: var(--sapSelectedColor);
-}
-.fd-list__navigation-item .fd-list {
-  display: none;
-}
-.fd-list__navigation-item--expandable {
-  margin: 0.25rem 0;
-}
-.fd-list__navigation-item.is-expanded {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-  border-radius: var(--sapElement_BorderCornerRadius);
-  -webkit-box-shadow: var(--sapContent_Shadow0);
-          box-shadow: var(--sapContent_Shadow0);
-  height: 100%;
-  overflow: hidden;
-}
-[dir=rtl] .fd-list__navigation-item.is-expanded, .fd-list__navigation-item.is-expanded[dir=rtl] {
-  margin-right: 0.25rem;
-  margin-left: 0.25rem;
-}
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item {
-  width: 100%;
-}
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated {
-  color: var(--sapSelectedColor);
-}
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-text,
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-icon,
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-arrow {
-  color: var(--sapSelectedColor);
-}
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator::after {
-  margin-right: 0;
-}
-[dir=rtl] .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator::after, .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator[dir=rtl]::after {
-  margin-left: 0;
-}
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  vertical-align: middle;
-  line-height: 2.75rem;
-  color: var(--sapContent_LabelColor);
-  font-size: var(--sapFontSize);
-  margin-left: 2.5rem;
-}
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text::before, .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-[dir=rtl] .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text, .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text[dir=rtl] {
-  margin-right: 2.5rem;
-  margin-left: 0;
-}
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item-text {
-  padding-left: 0;
-}
-[dir=rtl] .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text, .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text[dir=rtl] {
-  padding-right: 0;
-  padding-left: 0;
-}
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon {
-  padding-right: 0.5rem;
-}
-[dir=rtl] .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon, .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon[dir=rtl] {
-  padding-right: 0;
-  padding-left: 0.5rem;
-}
-.fd-list__navigation-item.is-expanded .fd-list {
-  margin-left: -0.5rem;
-  margin-right: -1rem;
-  width: auto;
-  display: block;
-}
-[dir=rtl] .fd-list__navigation-item.is-expanded .fd-list, .fd-list__navigation-item.is-expanded .fd-list[dir=rtl] {
-  margin-right: -0.5rem;
-  margin-left: -1rem;
-}
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator::after {
-  margin-right: 0;
-}
-[dir=rtl] .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator::after, .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator::after[dir=rtl] {
-  margin-right: 0;
-  margin-left: 0;
-}
-.fd-list__navigation-item.is-expanded > .fd-list__navigation-item-indicator::after {
-  display: none;
-}
-.fd-list__navigation-item .fd-list__navigation-item--indicated .fd-list__navigation-item-text {
-  color: var(--sapSelectedColor);
-}
-.fd-list__navigation-item--condensed {
-  padding-left: 0;
-  padding-right: 0;
-  position: relative;
-  width: 3.25rem;
-}
-[dir=rtl] .fd-list__navigation-item--condensed, .fd-list__navigation-item--condensed[dir=rtl] {
-  padding-right: 0;
-  padding-left: 0;
-}
-.fd-list__navigation-item--condensed .fd-list__navigation-item-popover--first-level, .fd-list__navigation-item--condensed .fd-list__navigation-item-popover--second-level {
-  display: none;
-  background: var(--sapList_AlternatingBackground);
-}
-.fd-list__navigation-item--condensed .fd-list__navigation-item-text {
-  display: none;
-}
-.fd-list__navigation-item--condensed .fd-list__navigation-item-icon {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-  height: 2.75rem;
-  line-height: 2.75rem;
-}
-[dir=rtl] .fd-list__navigation-item--condensed .fd-list__navigation-item-icon, .fd-list__navigation-item--condensed .fd-list__navigation-item-icon[dir=rtl] {
-  margin-right: 0.5rem;
-  margin-left: 0.5rem;
-}
-.fd-list__navigation-item--condensed.is-expanded {
-  margin-left: 0;
-  margin-right: 0;
-  height: 2.75rem;
-  overflow: visible;
-  visibility: hidden;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded, .fd-list__navigation-item--condensed.is-expanded[dir=rtl] {
-  margin-right: 0;
-  margin-left: 0;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item {
-  margin-left: 0;
-  margin-right: 0;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item[dir=rtl] {
-  margin-right: 0;
-  margin-left: 0;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon {
-  margin-left: 0;
-  padding-left: 0.875rem;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon[dir=rtl] {
-  margin-right: 0;
-  margin-left: 0.5rem;
-  padding-right: 0.875rem;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level {
-  overflow: hidden;
-  display: block;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list {
-  width: 100%;
-  display: inline-block;
-  margin: 0 auto;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text {
-  margin-left: 0;
-  padding-left: 0;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text[dir=rtl], [dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text[dir=rtl] {
-  margin-right: 0;
-  margin-left: 0;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text[dir=rtl], [dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text[dir=rtl] {
-  padding-right: 0;
-  padding-left: 0;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level {
-  top: 0;
-  left: 0.325rem;
-  width: 14.325rem;
-  border-bottom-right-radius: 0;
-  z-index: 3;
-  height: 100%;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level[dir=rtl] {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: var(--sapElement_BorderCornerRadius);
-  left: unset;
-  right: 0.325rem;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level {
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-  top: 2.75rem;
-  left: 3.25rem;
-  width: 11.4rem;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level[dir=rtl] {
-  left: unset;
-  right: 3.25rem;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text {
-  margin-left: 1rem;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text[dir=rtl] {
-  margin-right: 1rem;
-  margin-left: 0;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator::after {
-  margin-right: 0;
-  display: inline-block;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator::after, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator::after[dir=rtl] {
-  margin-right: 0;
-  margin-left: 0;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-text {
-  display: inline;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-arrow {
-  display: none;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-indicator::after {
-  display: none;
-}
-.fd-list__navigation-item--condensed .fd-list__navigation-item-arrow {
-  width: 100%;
-}
-.fd-list__navigation-item--condensed .fd-list__navigation-item-arrow::before {
-  display: inline-block;
-  content: "";
-  min-width: 0;
-  min-height: 0;
-  margin-right: 0.75rem;
-  margin-bottom: 0.5625rem;
-  border-style: solid;
-  border-width: 0.25rem 0.25rem 0 0;
-  border-color: transparent var(--sapContent_NonInteractiveIconColor) transparent transparent;
-  right: 0;
-  bottom: 0;
-  position: absolute;
-}
-[dir=rtl] .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow::before, .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow::before[dir=rtl] {
-  right: unset;
-  margin-right: 0;
-  margin-left: 0.75rem;
-  left: 0;
-}
-.fd-list__navigation-item-icon {
-  font-size: 1rem;
-  font-family: "SAP-icons";
-  height: 2.75rem;
-  line-height: 2.75rem;
-  width: 2.25rem;
-  color: var(--sapContent_NonInteractiveIconColor);
-  vertical-align: top;
-  text-align: center;
-}
-.fd-list__navigation-item-text {
-  padding-left: 0.25rem;
-  font-size: var(--sapFontLargeSize);
-  font-family: var(--sapFontFamily);
-  color: var(--sapList_TextColor);
-  max-width: 9rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inline-block;
-  line-height: 2.75rem;
-}
-[dir=rtl] .fd-list__navigation-item-text, .fd-list__navigation-item-text[dir=rtl] {
-  padding-right: 0.25rem;
-  padding-left: 0;
-}
-.fd-list__navigation-item-arrow {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  background-image: none;
-  display: inline-block;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  outline: 0;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  vertical-align: middle;
-  white-space: nowrap;
-  background-color: transparent;
-  border-radius: var(--sapButton_BorderCornerRadius);
-  height: 2.75rem;
-  width: 2.75rem;
-  position: absolute;
-  right: 0;
-  line-height: 2.75rem;
-  font-family: "SAP-icons";
-  font-size: 1rem;
-  color: var(--sapContent_NonInteractiveIconColor);
-  background-color: transparent;
-}
-.fd-list__navigation-item-arrow::before, .fd-list__navigation-item-arrow::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-.fd-list__navigation-item-arrow::-moz-focus-inner {
-  border: 0;
-}
-.fd-list__navigation-item-arrow:focus, .fd-list__navigation-item-arrow.is-focus {
-  z-index: 5;
-  outline: none;
-}
-.fd-list__navigation-item-arrow:focus::after, .fd-list__navigation-item-arrow.is-focus::after {
-  content: "";
-  position: absolute;
-  display: block;
-  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-  top: 0.125rem;
-  left: 0.125rem;
-  right: 0.125rem;
-  bottom: 0.125rem;
-}
-.fd-list__navigation-item-arrow:focus:active::after, .fd-list__navigation-item-arrow:focus.is-active::after, .fd-list__navigation-item-arrow.is-focus:active::after, .fd-list__navigation-item-arrow.is-focus.is-active::after {
-  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_ContrastFocusColor);
-}
-[dir=rtl] .fd-list__navigation-item-arrow, .fd-list__navigation-item-arrow[dir=rtl] {
-  right: unset;
-  left: 0;
-  -webkit-transform: scaleX(-1);
-          transform: scaleX(-1);
-}
-.fd-list__navigation-item:hover, .fd-list__navigation-item.is-hover, .fd-list__navigation-item--condensed:hover, .fd-list__navigation-item--condensed.is-hover {
-  background: var(--sapList_Hover_Background);
-}
-.fd-list__navigation-item[aria-pressed=true], .fd-list__navigation-item.is-pressed, .fd-list__navigation-item--condensed[aria-pressed=true], .fd-list__navigation-item--condensed.is-pressed {
-  background: var(--sapList_Active_Background);
-  color: var(--sapContent_ContrastTextColor);
-}
-.fd-list__navigation-item[aria-pressed=true] .fd-list__navigation-item-icon, .fd-list__navigation-item[aria-pressed=true] .fd-list__navigation-item-arrow, .fd-list__navigation-item.is-pressed .fd-list__navigation-item-icon, .fd-list__navigation-item.is-pressed .fd-list__navigation-item-arrow, .fd-list__navigation-item--condensed[aria-pressed=true] .fd-list__navigation-item-icon, .fd-list__navigation-item--condensed[aria-pressed=true] .fd-list__navigation-item-arrow, .fd-list__navigation-item--condensed.is-pressed .fd-list__navigation-item-icon, .fd-list__navigation-item--condensed.is-pressed .fd-list__navigation-item-arrow {
-  color: var(--sapContent_ContrastIconColor);
-}
 /* Fully expanded pseudo element. Requires parent to have specified position */
 /* stylelint-disable */
 /* stylelint-enable */
@@ -21588,84 +21154,22 @@ fd-carousel:focus, fd-carousel.is-focus {
 /* stylelint-enable */
 /* Fully expanded pseudo element. Requires parent to have specified position */
 /* Fully expanded pseudo element. Requires parent to have specified position */
-.fd-vertical-nav--navigation-indication .fd-list__navigation-item::after {
-  min-width: 1.5rem;
+.fd-list--navigation-indication .fd-list::after {
+  min-width: 1.75rem;
   content: "";
 }
-.fd-vertical-nav--navigation-indication .fd-list__navigation-item.fd-list__navigation-item--link {
+.fd-list--navigation-indication fd-list__item.fd-list__item--link {
   padding-right: 0;
 }
-.fd-vertical-nav--navigation-indication .fd-list__navigation-item.fd-list__navigation-item--link::after {
-  content: none;
-}
-[dir=rtl] .fd-vertical-nav--navigation-indication .fd-list__navigation-item.fd-list__navigation-item--link, .fd-vertical-nav--navigation-indication .fd-list__navigation-item.fd-list__navigation-item--link[dir=rtl] {
-  padding-left: 0;
-  padding-right: initial;
-}
-.fd-vertical-nav--navigation-indication .fd-list__link::after {
-  min-width: 2.5rem;
-  content: "";
-}
-.fd-vertical-nav--navigation-indication .fd-list__link--navigation-indicator::after {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  height: 100%;
-  font-family: "SAP-icons";
-  content: "\e1ed";
-  color: var(--sapContent_NonInteractiveIconColor);
-  font-size: var(--sapFontSmallSize);
-  text-decoration: none;
-  text-transform: none;
-}
-[dir=rtl] .fd-vertical-nav--navigation-indication .fd-list__link--navigation-indicator::after, .fd-vertical-nav--navigation-indication .fd-list__link--navigation-indicator[dir=rtl]::after {
-  content: "\e1ee";
-}
-.fd-vertical-nav--navigation-indication .fd-list__icon:last-child {
-  margin: 0;
-}
-[dir=rtl] .fd-vertical-nav--navigation-indication .fd-list__icon:last-child, .fd-vertical-nav--navigation-indication .fd-list__icon[dir=rtl]:last-child {
-  margin: 0;
-}
-.fd-vertical-nav--navigation-indication .is-navigated {
-  -webkit-box-shadow: inset -0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
-          box-shadow: inset -0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
-}
-[dir=rtl] .fd-vertical-nav--navigation-indication .is-navigated, .fd-vertical-nav--navigation-indication .is-navigated[dir=rtl] {
-  -webkit-box-shadow: inset 0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
-          box-shadow: inset 0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
-}
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-.fd-list--navigation-indication .fd-list__item::after {
-  min-width: 1.5rem;
-  content: "";
-}
-.fd-list--navigation-indication .fd-list__item.fd-list__item--link {
+[dir=rtl] .fd-list--navigation-indication fd-list__item.fd-list__item--link, .fd-list--navigation-indication fd-list__item.fd-list__item--link[dir=rtl] {
   padding-right: 0;
+  padding-left: 0;
 }
-.fd-list--navigation-indication .fd-list__item.fd-list__item--link::after {
+.fd-list--navigation-indication fd-list__item.fd-list__item--link::after {
   content: none;
 }
-[dir=rtl] .fd-list--navigation-indication .fd-list__item.fd-list__item--link, .fd-list--navigation-indication .fd-list__item.fd-list__item--link[dir=rtl] {
-  padding-left: 0;
-  padding-right: initial;
-}
 .fd-list--navigation-indication .fd-list__link::after {
-  min-width: 2.5rem;
+  min-width: 2.75rem;
   content: "";
 }
 .fd-list--navigation-indication .fd-list__link--navigation-indicator::after {
@@ -21718,8 +21222,8 @@ fd-carousel:focus, fd-carousel.is-focus {
   cursor: pointer;
 }
 [dir=rtl] .fd-list--selection .fd-list__item, .fd-list--selection .fd-list__item[dir=rtl] {
-  padding-left: 1rem;
   padding-right: 2.75rem;
+  padding-left: 1rem;
 }
 .fd-list--selection .fd-list__item:hover, .fd-list--selection .fd-list__item.is-hover {
   background: var(--sapList_Hover_Background);
@@ -21738,20 +21242,20 @@ fd-carousel:focus, fd-carousel.is-focus {
   background: var(--sapList_Hover_SelectionBackground);
 }
 .fd-list--selection .fd-list__form-item {
+  left: 0;
   position: absolute;
   top: 0;
-  left: 0;
   z-index: 5;
 }
 [dir=rtl] .fd-list--selection .fd-list__form-item, .fd-list--selection .fd-list__form-item[dir=rtl] {
-  left: initial;
+  left: auto;
   right: 0;
 }
 .fd-list--selection.fd-list--compact .fd-list__form-item {
   left: 0.375rem;
 }
 [dir=rtl] .fd-list--selection.fd-list--compact .fd-list__form-item, .fd-list--selection.fd-list--compact .fd-list__form-item[dir=rtl] {
-  left: initial;
+  left: auto;
   right: 0.375rem;
 }
 .fd-list--selection.fd-list--byline .fd-list__item {
@@ -21759,8 +21263,8 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding-right: 1rem;
 }
 [dir=rtl] .fd-list--selection.fd-list--byline .fd-list__item, .fd-list--selection.fd-list--byline .fd-list__item[dir=rtl] {
-  padding-left: 1rem;
   padding-right: 2.75rem;
+  padding-left: 1rem;
 }
 .fd-list--selection.fd-list--byline .fd-list__form-item {
   top: 0.3125rem;
@@ -21770,15 +21274,15 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding-right: 1rem;
 }
 [dir=rtl] .fd-list--selection.fd-list--byline.fd-list--compact .fd-list__item, .fd-list--selection.fd-list--byline.fd-list--compact .fd-list__item[dir=rtl] {
-  padding-left: 1rem;
   padding-right: 2.75rem;
+  padding-left: 1rem;
 }
 .fd-list--selection.fd-list--byline.fd-list--compact .fd-list__form-item {
-  top: 0.5rem;
   left: 0.375rem;
+  top: 0.5rem;
 }
 [dir=rtl] .fd-list--selection.fd-list--byline.fd-list--compact .fd-list__form-item, .fd-list--selection.fd-list--byline.fd-list--compact .fd-list__form-item[dir=rtl] {
-  left: initial;
+  left: auto;
   right: 0.375rem;
 }
 .fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item {
@@ -21788,8 +21292,8 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding-bottom: 0.5rem;
 }
 [dir=rtl] .fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item, .fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item[dir=rtl] {
-  padding-left: 1rem;
   padding-right: 2.75rem;
+  padding-left: 1rem;
 }
 .fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:first-child {
   padding-top: 1rem;
@@ -21838,8 +21342,8 @@ fd-carousel:focus, fd-carousel.is-focus {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--sapContent_MarkerTextColor);
   margin-left: 1rem;
+  color: var(--sapContent_MarkerTextColor);
 }
 .fd-list__item-counter::before, .fd-list__item-counter::after {
   -webkit-box-sizing: inherit;
@@ -21847,8 +21351,8 @@ fd-carousel:focus, fd-carousel.is-focus {
   font-size: inherit;
 }
 [dir=rtl] .fd-list__item-counter, .fd-list__item-counter[dir=rtl] {
-  margin-left: 0;
   margin-right: 1rem;
+  margin-left: 0;
 }
 /* Fully expanded pseudo element. Requires parent to have specified position */
 /* stylelint-disable */
@@ -24671,7 +24175,6 @@ places the element far left of the screen. so it is not visible.
   position: relative;
   list-style: none;
   width: 100%;
-  text-shadow: var(--fdListBase_Text_Shadow);
 }
 .fd-list::before, .fd-list::after {
   -webkit-box-sizing: inherit;
@@ -24722,9 +24225,10 @@ places the element far left of the screen. so it is not visible.
   right: 0.125rem;
   bottom: 0.125rem;
   pointer-events: none;
+  bottom: 0.0625rem;
 }
 .fd-list__item:focus:active::before, .fd-list__item:focus.is-active::before, .fd-list__item.is-focus:active::before, .fd-list__item.is-focus.is-active::before {
-  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_ContrastFocusColor);
+  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color);
 }
 .fd-list__item--unread .fd-list__title {
   font-weight: bold;
@@ -24815,7 +24319,6 @@ places the element far left of the screen. so it is not visible.
   color: var(--sapButton_TextColor);
   pointer-events: all;
   cursor: pointer;
-  text-shadow: var(--fdListBase_Text_Shadow);
   margin: var(--fdList_Item_Action_Button_Spacing);
   border: var(--fdList_Item_Action_Button_Border);
   border-radius: var(--fdList_Item_Action_Button_Border_Radius);
@@ -24893,7 +24396,7 @@ places the element far left of the screen. so it is not visible.
   outline-style: var(--sapContent_FocusStyle);
 }
 .fd-list__item--action .fd-list__title:focus:active, .fd-list__item--action .fd-list__title:focus.is-active, .fd-list__item--action .fd-list__title.is-focus:active, .fd-list__item--action .fd-list__title.is-focus.is-active {
-  outline-color: var(--sapContent_ContrastFocusColor);
+  outline-color: var(--fdList_Active_Outline_Color);
 }
 .fd-list__item--action .fd-list__title::-moz-focus-inner {
   border: 0;
@@ -24923,10 +24426,11 @@ places the element far left of the screen. so it is not visible.
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-left: 0.5rem;
   color: inherit;
   text-shadow: inherit;
   font-size: inherit;
-  margin-left: 0.5rem;
+  font-weight: var(--fdList_Growing_Font_Weight);
 }
 .fd-list__item--growing .fd-list__title-text::before, .fd-list__item--growing .fd-list__title-text::after {
   -webkit-box-sizing: inherit;
@@ -24937,9 +24441,7 @@ places the element far left of the screen. so it is not visible.
   margin-right: 0.5rem;
   margin-left: 0;
 }
-.fd-list__item--inactive {
-  pointer-events: none;
-}
+.fd-list__item--inactive,
 .fd-list__item--inactive .fd-list__title,
 .fd-list__item--inactive .fd-list__secondary {
   pointer-events: none;
@@ -24992,18 +24494,20 @@ places the element far left of the screen. so it is not visible.
       flex-basis: auto;
 }
 .fd-list__secondary {
+  padding-left: 1rem;
   font-size: var(--sapFontSize);
   -webkit-box-flex: 2;
       -ms-flex: 2 2 10%;
           flex: 2 2 10%;
   text-align: right;
-  padding-left: 1rem;
 }
 [dir=rtl] .fd-list__secondary, .fd-list__secondary[dir=rtl] {
-  text-align: left;
   padding-right: 1rem;
   padding-left: 0;
 }
+[dir=rtl] .fd-list__secondary, .fd-list__secondary[dir=rtl] {
+  text-align: left;
+}
 .fd-list__icon [class*=sap-icon], .fd-list__icon[class*=sap-icon] {
   color: inherit;
   background: inherit;
@@ -25030,16 +24534,16 @@ places the element far left of the screen. so it is not visible.
 .fd-list__icon [class*=sap-icon]:first-child, .fd-list__icon[class*=sap-icon]:first-child {
   margin-left: -1rem;
 }
-.fd-list__icon [class*=sap-icon]:last-child, .fd-list__icon[class*=sap-icon]:last-child {
+[dir=rtl] .fd-list__icon [class*=sap-icon]:first-child, .fd-list__icon [class*=sap-icon]:first-child[dir=rtl], [dir=rtl] .fd-list__icon[class*=sap-icon]:first-child, .fd-list__icon[class*=sap-icon]:first-child[dir=rtl] {
   margin-right: -1rem;
+  margin-left: 0;
 }
-[dir=rtl] .fd-list__icon [class*=sap-icon]:first-child, .fd-list__icon [class*=sap-icon][dir=rtl]:first-child, [dir=rtl] .fd-list__icon[class*=sap-icon]:first-child, .fd-list__icon[class*=sap-icon][dir=rtl]:first-child {
+.fd-list__icon [class*=sap-icon]:last-child, .fd-list__icon[class*=sap-icon]:last-child {
   margin-right: -1rem;
-  margin-left: 0;
 }
-[dir=rtl] .fd-list__icon [class*=sap-icon]:last-child, .fd-list__icon [class*=sap-icon][dir=rtl]:last-child, [dir=rtl] .fd-list__icon[class*=sap-icon]:last-child, .fd-list__icon[class*=sap-icon][dir=rtl]:last-child {
-  margin-left: -1rem;
+[dir=rtl] .fd-list__icon [class*=sap-icon]:last-child, .fd-list__icon [class*=sap-icon]:last-child[dir=rtl], [dir=rtl] .fd-list__icon[class*=sap-icon]:last-child, .fd-list__icon[class*=sap-icon]:last-child[dir=rtl] {
   margin-right: 0;
+  margin-left: -1rem;
 }
 .fd-list__link {
   font-size: var(--sapFontSize);
@@ -25052,13 +24556,13 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  text-decoration: none;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  text-decoration: none;
   width: 100%;
   height: 100%;
   padding: 0 1rem;
@@ -25085,7 +24589,7 @@ places the element far left of the screen. so it is not visible.
   pointer-events: none;
 }
 .fd-list__link:focus:active::before, .fd-list__link:focus.is-active::before, .fd-list__link.is-focus:active::before, .fd-list__link.is-focus.is-active::before {
-  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_ContrastFocusColor);
+  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdList_Active_Outline_Color);
 }
 .fd-list__link:hover, .fd-list__link.is-hover {
   background: var(--sapList_Hover_Background);
@@ -25197,16 +24701,17 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-left: 0.5rem;
   position: absolute;
   line-height: 2rem;
   width: 100%;
   top: 0;
   left: 0;
   height: 2rem;
-  padding-left: 0.5rem;
   font-size: var(--sapFontSmallSize);
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 .fd-list__message::before, .fd-list__message::after {
   -webkit-box-sizing: inherit;
@@ -25214,8 +24719,8 @@ places the element far left of the screen. so it is not visible.
   font-size: inherit;
 }
 [dir=rtl] .fd-list__message, .fd-list__message[dir=rtl] {
-  padding-left: 0;
   padding-right: 0.5rem;
+  padding-left: 0;
 }
 .fd-list__message--error {
   background-color: var(--sapErrorBackground);
@@ -25230,11 +24735,11 @@ places the element far left of the screen. so it is not visible.
   background-color: var(--sapInformationBackground);
 }
 .fd-list .fd-list__button {
-  margin-left: var(--fdListButtonSpacing);
+  margin-left: var(--fdList_Button_Spacing);
 }
 [dir=rtl] .fd-list .fd-list__button, .fd-list .fd-list__button[dir=rtl] {
+  margin-right: var(--fdList_Button_Spacing);
   margin-left: 0;
-  margin-right: var(--fdListButtonSpacing);
 }
 .fd-list--compact .fd-list__item {
   height: 2rem;
@@ -25352,7 +24857,7 @@ places the element far left of the screen. so it is not visible.
   padding: 0.5rem 1rem;
 }
 .fd-list--multi-input .fd-list__item {
-  padding: 0;
+  padding: 0 1rem 0 0;
   height: auto;
 }
 .fd-list--multi-input .fd-list__item:hover, .fd-list--multi-input .fd-list__item.is-hover {
@@ -25421,6 +24926,9 @@ places the element far left of the screen. so it is not visible.
   color: var(--sapList_Active_TextColor);
   text-shadow: none;
 }
+[dir=rtl] .fd-list--multi-input .fd-list__item, .fd-list--multi-input .fd-list__item[dir=rtl] {
+  padding: 0 0 0 1rem;
+}
 .fd-list--multi-input .fd-list__label {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -25459,12 +24967,6 @@ places the element far left of the screen. so it is not visible.
   left: 0.0625rem;
   right: 0.0625rem;
 }
-.fd-list--multi-input .fd-list__secondary {
-  padding-right: 1rem;
-}
-[dir=rtl] .fd-list--multi-input .fd-list__secondary, .fd-list--multi-input .fd-list__secondary[dir=rtl] {
-  padding-left: 1rem;
-}
 .fd-list--multi-input .fd-list__footer {
   height: auto;
   text-align: right;
@@ -25580,12 +25082,12 @@ places the element far left of the screen. so it is not visible.
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
   height: 100%;
   min-width: 2rem;
 }
@@ -25610,6 +25112,7 @@ places the element far left of the screen. so it is not visible.
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  margin-right: 0.75rem;
   width: 3rem;
   height: 3rem;
   min-width: 3rem;
@@ -25617,7 +25120,6 @@ places the element far left of the screen. so it is not visible.
   min-height: 3rem;
   max-height: 3rem;
   border-radius: 0.25rem;
-  margin-right: 0.75rem;
   font-size: 2.5rem;
   color: var(--sapContent_NonInteractiveIconColor);
 }
@@ -25648,7 +25150,6 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  pointer-events: none;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -25656,6 +25157,7 @@ places the element far left of the screen. so it is not visible.
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
+  pointer-events: none;
   -ms-flex-line-pack: justify;
       align-content: space-between;
   min-height: 3rem;
@@ -25672,6 +25174,9 @@ places the element far left of the screen. so it is not visible.
   font-size: inherit;
 }
 .fd-list--byline .fd-list__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-size: var(--sapFontLargeSize);
   min-height: 1rem;
 }
@@ -25726,9 +25231,9 @@ places the element far left of the screen. so it is not visible.
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-right: 0.5rem;
   width: 60%;
   color: var(--sapContent_LabelColor);
-  padding-right: 0.5rem;
   line-height: 1rem;
   -ms-flex-item-align: end;
       align-self: flex-end;
@@ -25739,8 +25244,8 @@ places the element far left of the screen. so it is not visible.
   font-size: inherit;
 }
 [dir=rtl] .fd-list--byline .fd-list__byline-left, .fd-list--byline .fd-list__byline-left[dir=rtl] {
-  padding-left: 0.5rem;
   padding-right: 0;
+  padding-left: 0.5rem;
 }
 .fd-list--byline .fd-list__byline-right {
   font-size: var(--sapFontSize);
@@ -25756,9 +25261,9 @@ places the element far left of the screen. so it is not visible.
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-left: 0.5rem;
   width: 40%;
   color: var(--sapContent_LabelColor);
-  padding-left: 0.5rem;
   line-height: 1rem;
   text-align: right;
   -ms-flex-item-align: end;
@@ -25770,8 +25275,10 @@ places the element far left of the screen. so it is not visible.
   font-size: inherit;
 }
 [dir=rtl] .fd-list--byline .fd-list__byline-right, .fd-list--byline .fd-list__byline-right[dir=rtl] {
-  padding-left: 0;
   padding-right: 0.5rem;
+  padding-left: 0;
+}
+[dir=rtl] .fd-list--byline .fd-list__byline-right, .fd-list--byline .fd-list__byline-right[dir=rtl] {
   text-align: left;
 }
 .fd-list--byline .fd-list__byline-right--neutral {
@@ -25823,16 +25330,16 @@ places the element far left of the screen. so it is not visible.
   padding-right: 1rem;
 }
 [dir=rtl] .fd-list--navigation .fd-list__link, .fd-list--navigation .fd-list__link[dir=rtl] {
-  padding-left: 1rem;
   padding-right: 1rem;
+  padding-left: 1rem;
 }
 .fd-list--navigation.fd-list--navigation-indication .fd-list__link {
   padding-left: 1rem;
   padding-right: 0;
 }
 [dir=rtl] .fd-list--navigation.fd-list--navigation-indication .fd-list__link, .fd-list--navigation.fd-list--navigation-indication .fd-list__link[dir=rtl] {
-  padding-left: 0;
   padding-right: 1rem;
+  padding-left: 0;
 }
 .fd-list--navigation.fd-list--selection .fd-list__item--link {
   padding: 0;
@@ -25842,8 +25349,8 @@ places the element far left of the screen. so it is not visible.
   padding-right: 1rem;
 }
 [dir=rtl] .fd-list--navigation.fd-list--selection .fd-list__link, .fd-list--navigation.fd-list--selection .fd-list__link[dir=rtl] {
-  padding-left: 1rem;
   padding-right: 2.75rem;
+  padding-left: 1rem;
 }
 .fd-list--navigation.fd-list--selection.fd-list--navigation-indication .fd-list__item--link {
   padding: 0;
@@ -25853,8 +25360,8 @@ places the element far left of the screen. so it is not visible.
   padding-right: 0;
 }
 [dir=rtl] .fd-list--navigation.fd-list--selection.fd-list--navigation-indication .fd-list__link, .fd-list--navigation.fd-list--selection.fd-list--navigation-indication .fd-list__link[dir=rtl] {
-  padding-left: 0;
   padding-right: 2.75rem;
+  padding-left: 0;
 }
 .fd-list--navigation.fd-list--byline .fd-list__item--link, .fd-list--navigation.fd-list--byline.fd-list--compact .fd-list__item--link {
   padding: 0;
@@ -25866,16 +25373,16 @@ places the element far left of the screen. so it is not visible.
   padding-bottom: 1rem;
 }
 [dir=rtl] .fd-list--navigation.fd-list--byline .fd-list__link, .fd-list--navigation.fd-list--byline .fd-list__link[dir=rtl], [dir=rtl] .fd-list--navigation.fd-list--byline.fd-list--compact .fd-list__link, .fd-list--navigation.fd-list--byline.fd-list--compact .fd-list__link[dir=rtl] {
-  padding-left: 1rem;
   padding-right: 1rem;
+  padding-left: 1rem;
 }
 .fd-list--navigation.fd-list--byline.fd-list--navigation-indication .fd-list__link {
   padding-left: 1rem;
   padding-right: 0;
 }
 [dir=rtl] .fd-list--navigation.fd-list--byline.fd-list--navigation-indication .fd-list__link, .fd-list--navigation.fd-list--byline.fd-list--navigation-indication .fd-list__link[dir=rtl] {
-  padding-left: 0;
   padding-right: 1rem;
+  padding-left: 0;
 }
 .fd-list--navigation.fd-list--byline.fd-list--no-border .fd-list__item--link .fd-list__link {
   padding-top: 0.5rem;
@@ -25907,8 +25414,8 @@ places the element far left of the screen. so it is not visible.
   padding-right: 1rem;
 }
 [dir=rtl] .fd-list--navigation.fd-list--byline.fd-list--selection .fd-list__link, .fd-list--navigation.fd-list--byline.fd-list--selection .fd-list__link[dir=rtl] {
-  padding-left: 1rem;
   padding-right: 2.75rem;
+  padding-left: 1rem;
 }
 .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--compact .fd-list__item--link {
   padding: 0;
@@ -25918,8 +25425,8 @@ places the element far left of the screen. so it is not visible.
   padding-right: 1rem;
 }
 [dir=rtl] .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--compact .fd-list__link, .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--compact .fd-list__link[dir=rtl] {
-  padding-left: 1rem;
   padding-right: 2.75rem;
+  padding-left: 1rem;
 }
 .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--no-border .fd-list__item--link {
   padding: 0;
@@ -25954,16 +25461,16 @@ places the element far left of the screen. so it is not visible.
   padding-right: 0;
 }
 [dir=rtl] .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--navigation-indication .fd-list__link, .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--navigation-indication .fd-list__link[dir=rtl] {
-  padding-left: 0;
   padding-right: 2.75rem;
+  padding-left: 0;
 }
 .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--navigation-indication.fd-list--compact .fd-list__link {
   padding-left: 2.75rem;
   padding-right: 0;
 }
 [dir=rtl] .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--navigation-indication.fd-list--compact .fd-list__link, .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--navigation-indication.fd-list--compact .fd-list__link[dir=rtl] {
-  padding-left: 0;
   padding-right: 2.75rem;
+  padding-left: 0;
 }
 .fd-list--navigation.fd-list--byline.fd-list--selection.fd-list--navigation-indication.fd-list--no-border .fd-list__item--link .fd-list__link {
   padding-top: 0.5rem;
@@ -26000,7 +25507,181 @@ places the element far left of the screen. so it is not visible.
   padding-bottom: 1rem;
 }
 [dir=rtl] .fd-list--navigation.fd-list--navigation-object .fd-list__link, .fd-list--navigation.fd-list--navigation-object .fd-list__link[dir=rtl] {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+.fd-list--navigation-indication .fd-list::after {
+  min-width: 1.75rem;
+  content: "";
+}
+.fd-list--navigation-indication fd-list__item.fd-list__item--link {
+  padding-right: 0;
+}
+[dir=rtl] .fd-list--navigation-indication fd-list__item.fd-list__item--link, .fd-list--navigation-indication fd-list__item.fd-list__item--link[dir=rtl] {
+  padding-right: 0;
+  padding-left: 0;
+}
+.fd-list--navigation-indication fd-list__item.fd-list__item--link::after {
+  content: none;
+}
+.fd-list--navigation-indication .fd-list__link::after {
+  min-width: 2.75rem;
+  content: "";
+}
+.fd-list--navigation-indication .fd-list__link--navigation-indicator::after {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 100%;
+  font-family: "SAP-icons";
+  content: "\e1ed";
+  color: var(--sapContent_NonInteractiveIconColor);
+  font-size: var(--sapFontSmallSize);
+  text-decoration: none;
+  text-transform: none;
+}
+[dir=rtl] .fd-list--navigation-indication .fd-list__link--navigation-indicator::after, .fd-list--navigation-indication .fd-list__link--navigation-indicator[dir=rtl]::after {
+  content: "\e1ee";
+}
+.fd-list--navigation-indication .fd-list__icon:last-child {
+  margin: 0;
+}
+[dir=rtl] .fd-list--navigation-indication .fd-list__icon:last-child, .fd-list--navigation-indication .fd-list__icon[dir=rtl]:last-child {
+  margin: 0;
+}
+.fd-list--navigation-indication .is-navigated {
+  -webkit-box-shadow: inset -0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
+          box-shadow: inset -0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
+}
+[dir=rtl] .fd-list--navigation-indication .is-navigated, .fd-list--navigation-indication .is-navigated[dir=rtl] {
+  -webkit-box-shadow: inset 0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
+          box-shadow: inset 0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
+}
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+.fd-list--selection .fd-list__item {
+  padding-left: 2.75rem;
+  padding-right: 1rem;
+  cursor: pointer;
+}
+[dir=rtl] .fd-list--selection .fd-list__item, .fd-list--selection .fd-list__item[dir=rtl] {
+  padding-right: 2.75rem;
+  padding-left: 1rem;
+}
+.fd-list--selection .fd-list__item:hover, .fd-list--selection .fd-list__item.is-hover {
+  background: var(--sapList_Hover_Background);
+}
+.fd-list--selection .fd-list__item[aria-selected=true], .fd-list--selection .fd-list__item.is-selected {
+  background: var(--sapList_SelectionBackgroundColor);
+  border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor);
+}
+.fd-list--selection .fd-list__item[aria-selected=true] .fd-list__link, .fd-list--selection .fd-list__item.is-selected .fd-list__link {
+  background: inherit;
+}
+.fd-list--selection .fd-list__item[aria-selected=true] .fd-list__link:active, .fd-list--selection .fd-list__item[aria-selected=true] .fd-list__link.is-active, .fd-list--selection .fd-list__item.is-selected .fd-list__link:active, .fd-list--selection .fd-list__item.is-selected .fd-list__link.is-active {
+  background: var(--sapList_Active_Background);
+}
+.fd-list--selection .fd-list__item[aria-selected=true]:hover, .fd-list--selection .fd-list__item[aria-selected=true].is-hover, .fd-list--selection .fd-list__item.is-selected:hover, .fd-list--selection .fd-list__item.is-selected.is-hover {
+  background: var(--sapList_Hover_SelectionBackground);
+}
+.fd-list--selection .fd-list__form-item {
+  left: 0;
+  position: absolute;
+  top: 0;
+  z-index: 5;
+}
+[dir=rtl] .fd-list--selection .fd-list__form-item, .fd-list--selection .fd-list__form-item[dir=rtl] {
+  left: auto;
+  right: 0;
+}
+.fd-list--selection.fd-list--compact .fd-list__form-item {
+  left: 0.375rem;
+}
+[dir=rtl] .fd-list--selection.fd-list--compact .fd-list__form-item, .fd-list--selection.fd-list--compact .fd-list__form-item[dir=rtl] {
+  left: auto;
+  right: 0.375rem;
+}
+.fd-list--selection.fd-list--byline .fd-list__item {
+  padding-left: 2.75rem;
+  padding-right: 1rem;
+}
+[dir=rtl] .fd-list--selection.fd-list--byline .fd-list__item, .fd-list--selection.fd-list--byline .fd-list__item[dir=rtl] {
+  padding-right: 2.75rem;
+  padding-left: 1rem;
+}
+.fd-list--selection.fd-list--byline .fd-list__form-item {
+  top: 0.3125rem;
+}
+.fd-list--selection.fd-list--byline.fd-list--compact .fd-list__item {
+  padding-left: 2.75rem;
+  padding-right: 1rem;
+}
+[dir=rtl] .fd-list--selection.fd-list--byline.fd-list--compact .fd-list__item, .fd-list--selection.fd-list--byline.fd-list--compact .fd-list__item[dir=rtl] {
+  padding-right: 2.75rem;
+  padding-left: 1rem;
+}
+.fd-list--selection.fd-list--byline.fd-list--compact .fd-list__form-item {
+  left: 0.375rem;
+  top: 0.5rem;
+}
+[dir=rtl] .fd-list--selection.fd-list--byline.fd-list--compact .fd-list__form-item, .fd-list--selection.fd-list--byline.fd-list--compact .fd-list__form-item[dir=rtl] {
+  left: auto;
+  right: 0.375rem;
+}
+.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item {
+  padding-left: 2.75rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+[dir=rtl] .fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item, .fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item[dir=rtl] {
+  padding-right: 2.75rem;
+  padding-left: 1rem;
+}
+.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:first-child {
+  padding-top: 1rem;
+}
+.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:last-child {
+  padding-bottom: 1rem;
+}
+.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:not(:first-child) .fd-list__form-item,
+.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:not(:first-child) .fd-list__form-item.fd-form-item {
+  top: 0;
+}
+.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:not(:first-child) .fd-list__form-item label,
+.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:not(:first-child) .fd-list__form-item.fd-form-item label {
+  padding-top: 0.5rem;
+}
+.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:not(:first-child) .fd-list__form-item label::after,
+.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:not(:first-child) .fd-list__form-item.fd-form-item label::after {
+  top: 0.375rem;
+}
+.fd-list--selection.fd-list--selection-row .fd-list__item {
   padding-left: 1rem;
+}
+[dir=rtl] .fd-list--selection.fd-list--selection-row .fd-list__item, .fd-list--selection.fd-list--selection-row .fd-list__item[dir=rtl] {
   padding-right: 1rem;
 }
 /* Fully expanded pseudo element. Requires parent to have specified position */
@@ -26012,7 +25693,7 @@ places the element far left of the screen. so it is not visible.
 /* stylelint-enable */
 /* Fully expanded pseudo element. Requires parent to have specified position */
 /* Fully expanded pseudo element. Requires parent to have specified position */
-.fd-list .fd-list__navigation-item-indicator {
+.fd-list__item-counter {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
   color: var(--sapTextColor);
@@ -26023,32 +25704,49 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-left: 1rem;
+  color: var(--sapContent_MarkerTextColor);
 }
-.fd-list .fd-list__navigation-item-indicator::before, .fd-list .fd-list__navigation-item-indicator::after {
+.fd-list__item-counter::before, .fd-list__item-counter::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-list .fd-list__navigation-item-indicator::after {
-  content: "";
-  width: 0.1875rem;
-  display: inline-block;
-  position: absolute;
-  right: 0;
-  top: 0.5625rem;
-  height: 1.625rem;
-  background-color: var(--sapSelectedColor);
-  color: var(--sapSelectedColor);
-  border-radius: var(--sapField_BorderCornerRadius);
-  margin-right: 0.3125rem;
+[dir=rtl] .fd-list__item-counter, .fd-list__item-counter[dir=rtl] {
+  margin-right: 1rem;
+  margin-left: 0;
 }
-[dir=rtl] .fd-list .fd-list__navigation-item-indicator::after, .fd-list .fd-list__navigation-item-indicator[dir=rtl]::after {
-  right: unset;
-  margin-right: 0;
-  left: 0;
-  margin-left: 0.3125rem;
+.fd-object-list__item {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  height: 100%;
+}
+.fd-object-list__item .fd-list__link:active .fd-object-list__intro,
+.fd-object-list__item .fd-list__link:active .fd-object-list__object-attribute,
+.fd-object-list__item .fd-list__link:active .fd-avatar,
+.fd-object-list__item .fd-list__link:active .fd-object-identifier__title,
+.fd-object-list__item .fd-list__link:active .fd-object-marker__text,
+.fd-object-list__item .fd-list__link:active .fd-object-marker__icon,
+.fd-object-list__item .fd-list__link:active .fd-object-number__text,
+.fd-object-list__item .fd-list__link:active .fd-object-number__unit,
+.fd-object-list__item .fd-list__link:active .fd-object-status__text,
+.fd-object-list__item .fd-list__link:active .fd-object-status__icon, .fd-object-list__item .fd-list__link.is-active .fd-object-list__intro,
+.fd-object-list__item .fd-list__link.is-active .fd-object-list__object-attribute,
+.fd-object-list__item .fd-list__link.is-active .fd-avatar,
+.fd-object-list__item .fd-list__link.is-active .fd-object-identifier__title,
+.fd-object-list__item .fd-list__link.is-active .fd-object-marker__text,
+.fd-object-list__item .fd-list__link.is-active .fd-object-marker__icon,
+.fd-object-list__item .fd-list__link.is-active .fd-object-number__text,
+.fd-object-list__item .fd-list__link.is-active .fd-object-number__unit,
+.fd-object-list__item .fd-list__link.is-active .fd-object-status__text,
+.fd-object-list__item .fd-list__link.is-active .fd-object-status__icon {
+  color: var(--sapList_Active_TextColor);
+  text-shadow: none;
 }
-.fd-list__navigation-item {
+.fd-object-list__intro {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
   color: var(--sapTextColor);
@@ -26059,73 +25757,122 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  padding-left: 0.5rem;
-  padding-right: 1rem;
-  background: transparent;
-  height: 2.75rem;
-  position: relative;
-  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  max-width: 100%;
+  color: var(--sapContent_LabelColor);
+  padding-bottom: 0.75rem;
 }
-.fd-list__navigation-item::before, .fd-list__navigation-item::after {
+.fd-object-list__intro::before, .fd-object-list__intro::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-list__navigation-item:focus, .fd-list__navigation-item.is-focus {
-  outline-offset: -0.1875rem;
-  outline-width: var(--sapContent_FocusWidth);
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
+.fd-object-list__container {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  height: 100%;
+  width: 100%;
 }
-[dir=rtl] .fd-list__navigation-item, .fd-list__navigation-item[dir=rtl] {
-  padding-right: 0.5rem;
-  padding-left: 1rem;
+.fd-object-list__container::before, .fd-object-list__container::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
 }
-.fd-list__navigation-item.fd-list__navigation-item--indicated {
-  color: var(--sapSelectedColor);
+.fd-object-list__header {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
-.fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-text,
-.fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-icon,
-.fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-arrow {
-  color: var(--sapSelectedColor);
+.fd-object-list__header::before, .fd-object-list__header::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
 }
-.fd-list__navigation-item .fd-list {
-  display: none;
+.fd-object-list__header-left:not(:first-child) {
+  margin-left: 0.75rem;
 }
-.fd-list__navigation-item--expandable {
-  margin: 0.25rem 0;
+[dir=rtl] .fd-object-list__header-left:not(:first-child), .fd-object-list__header-left:not(:first-child)[dir=rtl] {
+  margin-right: 0.75rem;
+  margin-left: 0;
 }
-.fd-list__navigation-item.is-expanded {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-  border-radius: var(--sapElement_BorderCornerRadius);
-  -webkit-box-shadow: var(--sapContent_Shadow0);
-          box-shadow: var(--sapContent_Shadow0);
-  height: 100%;
-  overflow: hidden;
+.fd-object-list__header-left {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  text-align: left;
+  width: 60%;
 }
-[dir=rtl] .fd-list__navigation-item.is-expanded, .fd-list__navigation-item.is-expanded[dir=rtl] {
-  margin-right: 0.25rem;
-  margin-left: 0.25rem;
+.fd-object-list__header-left::before, .fd-object-list__header-left::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
 }
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item {
-  width: 100%;
+[dir=rtl] .fd-object-list__header-left, .fd-object-list__header-left[dir=rtl] {
+  text-align: right;
 }
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated {
-  color: var(--sapSelectedColor);
+.fd-object-list__header-right {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  padding-left: 1rem;
+  text-align: right;
+  width: 40%;
 }
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-text,
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-icon,
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-arrow {
-  color: var(--sapSelectedColor);
+.fd-object-list__header-right::before, .fd-object-list__header-right::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
 }
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator::after {
-  margin-right: 0;
+[dir=rtl] .fd-object-list__header-right, .fd-object-list__header-right[dir=rtl] {
+  padding-right: 1rem;
+  padding-left: 0;
 }
-[dir=rtl] .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator::after, .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator[dir=rtl]::after {
-  margin-left: 0;
+[dir=rtl] .fd-object-list__header-right, .fd-object-list__header-right[dir=rtl] {
+  text-align: left;
 }
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text {
+.fd-object-list__row {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
   color: var(--sapTextColor);
@@ -26136,806 +25883,67 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  vertical-align: middle;
-  line-height: 2.75rem;
-  color: var(--sapContent_LabelColor);
-  font-size: var(--sapFontSize);
-  margin-left: 2.5rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
 }
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text::before, .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text::after {
+.fd-object-list__row::before, .fd-object-list__row::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
   font-size: inherit;
 }
-[dir=rtl] .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text, .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text[dir=rtl] {
-  margin-right: 2.5rem;
-  margin-left: 0;
+.fd-object-list__row > *:only-child {
+  width: 100%;
+}
+.fd-object-list__row-left, .fd-object-list__row-right {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 50%;
+  padding: 0.5rem 0.5rem 0 0.5rem;
+}
+.fd-object-list__row-left::before, .fd-object-list__row-left::after, .fd-object-list__row-right::before, .fd-object-list__row-right::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
 }
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item-text {
+.fd-object-list__row-left {
+  text-align: left;
   padding-left: 0;
 }
-[dir=rtl] .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text, .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text[dir=rtl] {
+[dir=rtl] .fd-object-list__row-left, .fd-object-list__row-left[dir=rtl] {
+  text-align: right;
+}
+[dir=rtl] .fd-object-list__row-left, .fd-object-list__row-left[dir=rtl] {
   padding-right: 0;
   padding-left: 0;
 }
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon {
-  padding-right: 0.5rem;
+.fd-object-list__row-right {
+  text-align: right;
+  padding-right: 0;
+}
+[dir=rtl] .fd-object-list__row-right, .fd-object-list__row-right[dir=rtl] {
+  text-align: left;
 }
-[dir=rtl] .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon, .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon[dir=rtl] {
+[dir=rtl] .fd-object-list__row-right, .fd-object-list__row-right[dir=rtl] {
   padding-right: 0;
-  padding-left: 0.5rem;
-}
-.fd-list__navigation-item.is-expanded .fd-list {
-  margin-left: -0.5rem;
-  margin-right: -1rem;
-  width: auto;
-  display: block;
-}
-[dir=rtl] .fd-list__navigation-item.is-expanded .fd-list, .fd-list__navigation-item.is-expanded .fd-list[dir=rtl] {
-  margin-right: -0.5rem;
-  margin-left: -1rem;
-}
-.fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator::after {
-  margin-right: 0;
-}
-[dir=rtl] .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator::after, .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator::after[dir=rtl] {
-  margin-right: 0;
-  margin-left: 0;
-}
-.fd-list__navigation-item.is-expanded > .fd-list__navigation-item-indicator::after {
-  display: none;
-}
-.fd-list__navigation-item .fd-list__navigation-item--indicated .fd-list__navigation-item-text {
-  color: var(--sapSelectedColor);
-}
-.fd-list__navigation-item--condensed {
-  padding-left: 0;
-  padding-right: 0;
-  position: relative;
-  width: 3.25rem;
-}
-[dir=rtl] .fd-list__navigation-item--condensed, .fd-list__navigation-item--condensed[dir=rtl] {
-  padding-right: 0;
-  padding-left: 0;
-}
-.fd-list__navigation-item--condensed .fd-list__navigation-item-popover--first-level, .fd-list__navigation-item--condensed .fd-list__navigation-item-popover--second-level {
-  display: none;
-  background: var(--sapList_AlternatingBackground);
-}
-.fd-list__navigation-item--condensed .fd-list__navigation-item-text {
-  display: none;
-}
-.fd-list__navigation-item--condensed .fd-list__navigation-item-icon {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-  height: 2.75rem;
-  line-height: 2.75rem;
-}
-[dir=rtl] .fd-list__navigation-item--condensed .fd-list__navigation-item-icon, .fd-list__navigation-item--condensed .fd-list__navigation-item-icon[dir=rtl] {
-  margin-right: 0.5rem;
-  margin-left: 0.5rem;
-}
-.fd-list__navigation-item--condensed.is-expanded {
-  margin-left: 0;
-  margin-right: 0;
-  height: 2.75rem;
-  overflow: visible;
-  visibility: hidden;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded, .fd-list__navigation-item--condensed.is-expanded[dir=rtl] {
-  margin-right: 0;
-  margin-left: 0;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item {
-  margin-left: 0;
-  margin-right: 0;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item[dir=rtl] {
-  margin-right: 0;
-  margin-left: 0;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon {
-  margin-left: 0;
-  padding-left: 0.875rem;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon[dir=rtl] {
-  margin-right: 0;
-  margin-left: 0.5rem;
-  padding-right: 0.875rem;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level {
-  overflow: hidden;
-  display: block;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list {
-  width: 100%;
-  display: inline-block;
-  margin: 0 auto;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text {
-  margin-left: 0;
-  padding-left: 0;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text[dir=rtl], [dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text[dir=rtl] {
-  margin-right: 0;
-  margin-left: 0;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text[dir=rtl], [dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text[dir=rtl] {
-  padding-right: 0;
-  padding-left: 0;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level {
-  top: 0;
-  left: 0.325rem;
-  width: 14.325rem;
-  border-bottom-right-radius: 0;
-  z-index: 3;
-  height: 100%;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level[dir=rtl] {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: var(--sapElement_BorderCornerRadius);
-  left: unset;
-  right: 0.325rem;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level {
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-  top: 2.75rem;
-  left: 3.25rem;
-  width: 11.4rem;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level[dir=rtl] {
-  left: unset;
-  right: 3.25rem;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text {
-  margin-left: 1rem;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text[dir=rtl] {
-  margin-right: 1rem;
-  margin-left: 0;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator::after {
-  margin-right: 0;
-  display: inline-block;
-}
-[dir=rtl] .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator::after, .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator::after[dir=rtl] {
-  margin-right: 0;
-  margin-left: 0;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-text {
-  display: inline;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-arrow {
-  display: none;
-}
-.fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-indicator::after {
-  display: none;
-}
-.fd-list__navigation-item--condensed .fd-list__navigation-item-arrow {
-  width: 100%;
-}
-.fd-list__navigation-item--condensed .fd-list__navigation-item-arrow::before {
-  display: inline-block;
-  content: "";
-  min-width: 0;
-  min-height: 0;
-  margin-right: 0.75rem;
-  margin-bottom: 0.5625rem;
-  border-style: solid;
-  border-width: 0.25rem 0.25rem 0 0;
-  border-color: transparent var(--sapContent_NonInteractiveIconColor) transparent transparent;
-  right: 0;
-  bottom: 0;
-  position: absolute;
-}
-[dir=rtl] .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow::before, .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow::before[dir=rtl] {
-  right: unset;
-  margin-right: 0;
-  margin-left: 0.75rem;
-  left: 0;
-}
-.fd-list__navigation-item-icon {
-  font-size: 1rem;
-  font-family: "SAP-icons";
-  height: 2.75rem;
-  line-height: 2.75rem;
-  width: 2.25rem;
-  color: var(--sapContent_NonInteractiveIconColor);
-  vertical-align: top;
-  text-align: center;
-}
-.fd-list__navigation-item-text {
-  padding-left: 0.25rem;
-  font-size: var(--sapFontLargeSize);
-  font-family: var(--sapFontFamily);
-  color: var(--sapList_TextColor);
-  max-width: 9rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inline-block;
-  line-height: 2.75rem;
-}
-[dir=rtl] .fd-list__navigation-item-text, .fd-list__navigation-item-text[dir=rtl] {
-  padding-right: 0.25rem;
-  padding-left: 0;
-}
-.fd-list__navigation-item-arrow {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  background-image: none;
-  display: inline-block;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  outline: 0;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  vertical-align: middle;
-  white-space: nowrap;
-  background-color: transparent;
-  border-radius: var(--sapButton_BorderCornerRadius);
-  height: 2.75rem;
-  width: 2.75rem;
-  position: absolute;
-  right: 0;
-  line-height: 2.75rem;
-  font-family: "SAP-icons";
-  font-size: 1rem;
-  color: var(--sapContent_NonInteractiveIconColor);
-  background-color: transparent;
-}
-.fd-list__navigation-item-arrow::before, .fd-list__navigation-item-arrow::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-.fd-list__navigation-item-arrow::-moz-focus-inner {
-  border: 0;
-}
-.fd-list__navigation-item-arrow:focus, .fd-list__navigation-item-arrow.is-focus {
-  z-index: 5;
-  outline: none;
-}
-.fd-list__navigation-item-arrow:focus::after, .fd-list__navigation-item-arrow.is-focus::after {
-  content: "";
-  position: absolute;
-  display: block;
-  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-  top: 0.125rem;
-  left: 0.125rem;
-  right: 0.125rem;
-  bottom: 0.125rem;
-}
-.fd-list__navigation-item-arrow:focus:active::after, .fd-list__navigation-item-arrow:focus.is-active::after, .fd-list__navigation-item-arrow.is-focus:active::after, .fd-list__navigation-item-arrow.is-focus.is-active::after {
-  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_ContrastFocusColor);
-}
-[dir=rtl] .fd-list__navigation-item-arrow, .fd-list__navigation-item-arrow[dir=rtl] {
-  right: unset;
-  left: 0;
-  -webkit-transform: scaleX(-1);
-          transform: scaleX(-1);
-}
-.fd-list__navigation-item:hover, .fd-list__navigation-item.is-hover, .fd-list__navigation-item--condensed:hover, .fd-list__navigation-item--condensed.is-hover {
-  background: var(--sapList_Hover_Background);
-}
-.fd-list__navigation-item[aria-pressed=true], .fd-list__navigation-item.is-pressed, .fd-list__navigation-item--condensed[aria-pressed=true], .fd-list__navigation-item--condensed.is-pressed {
-  background: var(--sapList_Active_Background);
-  color: var(--sapContent_ContrastTextColor);
-}
-.fd-list__navigation-item[aria-pressed=true] .fd-list__navigation-item-icon, .fd-list__navigation-item[aria-pressed=true] .fd-list__navigation-item-arrow, .fd-list__navigation-item.is-pressed .fd-list__navigation-item-icon, .fd-list__navigation-item.is-pressed .fd-list__navigation-item-arrow, .fd-list__navigation-item--condensed[aria-pressed=true] .fd-list__navigation-item-icon, .fd-list__navigation-item--condensed[aria-pressed=true] .fd-list__navigation-item-arrow, .fd-list__navigation-item--condensed.is-pressed .fd-list__navigation-item-icon, .fd-list__navigation-item--condensed.is-pressed .fd-list__navigation-item-arrow {
-  color: var(--sapContent_ContrastIconColor);
-}
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-.fd-vertical-nav--navigation-indication .fd-list__navigation-item::after {
-  min-width: 1.5rem;
-  content: "";
-}
-.fd-vertical-nav--navigation-indication .fd-list__navigation-item.fd-list__navigation-item--link {
-  padding-right: 0;
-}
-.fd-vertical-nav--navigation-indication .fd-list__navigation-item.fd-list__navigation-item--link::after {
-  content: none;
-}
-[dir=rtl] .fd-vertical-nav--navigation-indication .fd-list__navigation-item.fd-list__navigation-item--link, .fd-vertical-nav--navigation-indication .fd-list__navigation-item.fd-list__navigation-item--link[dir=rtl] {
-  padding-left: 0;
-  padding-right: initial;
-}
-.fd-vertical-nav--navigation-indication .fd-list__link::after {
-  min-width: 2.5rem;
-  content: "";
-}
-.fd-vertical-nav--navigation-indication .fd-list__link--navigation-indicator::after {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  height: 100%;
-  font-family: "SAP-icons";
-  content: "\e1ed";
-  color: var(--sapContent_NonInteractiveIconColor);
-  font-size: var(--sapFontSmallSize);
-  text-decoration: none;
-  text-transform: none;
-}
-[dir=rtl] .fd-vertical-nav--navigation-indication .fd-list__link--navigation-indicator::after, .fd-vertical-nav--navigation-indication .fd-list__link--navigation-indicator[dir=rtl]::after {
-  content: "\e1ee";
-}
-.fd-vertical-nav--navigation-indication .fd-list__icon:last-child {
-  margin: 0;
-}
-[dir=rtl] .fd-vertical-nav--navigation-indication .fd-list__icon:last-child, .fd-vertical-nav--navigation-indication .fd-list__icon[dir=rtl]:last-child {
-  margin: 0;
-}
-.fd-vertical-nav--navigation-indication .is-navigated {
-  -webkit-box-shadow: inset -0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
-          box-shadow: inset -0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
-}
-[dir=rtl] .fd-vertical-nav--navigation-indication .is-navigated, .fd-vertical-nav--navigation-indication .is-navigated[dir=rtl] {
-  -webkit-box-shadow: inset 0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
-          box-shadow: inset 0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
-}
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-.fd-list--navigation-indication .fd-list__item::after {
-  min-width: 1.5rem;
-  content: "";
-}
-.fd-list--navigation-indication .fd-list__item.fd-list__item--link {
-  padding-right: 0;
-}
-.fd-list--navigation-indication .fd-list__item.fd-list__item--link::after {
-  content: none;
-}
-[dir=rtl] .fd-list--navigation-indication .fd-list__item.fd-list__item--link, .fd-list--navigation-indication .fd-list__item.fd-list__item--link[dir=rtl] {
-  padding-left: 0;
-  padding-right: initial;
-}
-.fd-list--navigation-indication .fd-list__link::after {
-  min-width: 2.5rem;
-  content: "";
-}
-.fd-list--navigation-indication .fd-list__link--navigation-indicator::after {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  height: 100%;
-  font-family: "SAP-icons";
-  content: "\e1ed";
-  color: var(--sapContent_NonInteractiveIconColor);
-  font-size: var(--sapFontSmallSize);
-  text-decoration: none;
-  text-transform: none;
-}
-[dir=rtl] .fd-list--navigation-indication .fd-list__link--navigation-indicator::after, .fd-list--navigation-indication .fd-list__link--navigation-indicator[dir=rtl]::after {
-  content: "\e1ee";
-}
-.fd-list--navigation-indication .fd-list__icon:last-child {
-  margin: 0;
-}
-[dir=rtl] .fd-list--navigation-indication .fd-list__icon:last-child, .fd-list--navigation-indication .fd-list__icon[dir=rtl]:last-child {
-  margin: 0;
-}
-.fd-list--navigation-indication .is-navigated {
-  -webkit-box-shadow: inset -0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
-          box-shadow: inset -0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
-}
-[dir=rtl] .fd-list--navigation-indication .is-navigated, .fd-list--navigation-indication .is-navigated[dir=rtl] {
-  -webkit-box-shadow: inset 0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
-          box-shadow: inset 0.1875rem 0 0 0 var(--sapList_SelectionBorderColor);
-}
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-.fd-list--selection .fd-list__item {
-  padding-left: 2.75rem;
-  padding-right: 1rem;
-  cursor: pointer;
-}
-[dir=rtl] .fd-list--selection .fd-list__item, .fd-list--selection .fd-list__item[dir=rtl] {
-  padding-left: 1rem;
-  padding-right: 2.75rem;
-}
-.fd-list--selection .fd-list__item:hover, .fd-list--selection .fd-list__item.is-hover {
-  background: var(--sapList_Hover_Background);
-}
-.fd-list--selection .fd-list__item[aria-selected=true], .fd-list--selection .fd-list__item.is-selected {
-  background: var(--sapList_SelectionBackgroundColor);
-  border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor);
-}
-.fd-list--selection .fd-list__item[aria-selected=true] .fd-list__link, .fd-list--selection .fd-list__item.is-selected .fd-list__link {
-  background: inherit;
-}
-.fd-list--selection .fd-list__item[aria-selected=true] .fd-list__link:active, .fd-list--selection .fd-list__item[aria-selected=true] .fd-list__link.is-active, .fd-list--selection .fd-list__item.is-selected .fd-list__link:active, .fd-list--selection .fd-list__item.is-selected .fd-list__link.is-active {
-  background: var(--sapList_Active_Background);
-}
-.fd-list--selection .fd-list__item[aria-selected=true]:hover, .fd-list--selection .fd-list__item[aria-selected=true].is-hover, .fd-list--selection .fd-list__item.is-selected:hover, .fd-list--selection .fd-list__item.is-selected.is-hover {
-  background: var(--sapList_Hover_SelectionBackground);
-}
-.fd-list--selection .fd-list__form-item {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 5;
-}
-[dir=rtl] .fd-list--selection .fd-list__form-item, .fd-list--selection .fd-list__form-item[dir=rtl] {
-  left: initial;
-  right: 0;
-}
-.fd-list--selection.fd-list--compact .fd-list__form-item {
-  left: 0.375rem;
-}
-[dir=rtl] .fd-list--selection.fd-list--compact .fd-list__form-item, .fd-list--selection.fd-list--compact .fd-list__form-item[dir=rtl] {
-  left: initial;
-  right: 0.375rem;
-}
-.fd-list--selection.fd-list--byline .fd-list__item {
-  padding-left: 2.75rem;
-  padding-right: 1rem;
-}
-[dir=rtl] .fd-list--selection.fd-list--byline .fd-list__item, .fd-list--selection.fd-list--byline .fd-list__item[dir=rtl] {
-  padding-left: 1rem;
-  padding-right: 2.75rem;
-}
-.fd-list--selection.fd-list--byline .fd-list__form-item {
-  top: 0.3125rem;
-}
-.fd-list--selection.fd-list--byline.fd-list--compact .fd-list__item {
-  padding-left: 2.75rem;
-  padding-right: 1rem;
-}
-[dir=rtl] .fd-list--selection.fd-list--byline.fd-list--compact .fd-list__item, .fd-list--selection.fd-list--byline.fd-list--compact .fd-list__item[dir=rtl] {
-  padding-left: 1rem;
-  padding-right: 2.75rem;
-}
-.fd-list--selection.fd-list--byline.fd-list--compact .fd-list__form-item {
-  top: 0.5rem;
-  left: 0.375rem;
-}
-[dir=rtl] .fd-list--selection.fd-list--byline.fd-list--compact .fd-list__form-item, .fd-list--selection.fd-list--byline.fd-list--compact .fd-list__form-item[dir=rtl] {
-  left: initial;
-  right: 0.375rem;
-}
-.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item {
-  padding-left: 2.75rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-[dir=rtl] .fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item, .fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item[dir=rtl] {
-  padding-left: 1rem;
-  padding-right: 2.75rem;
-}
-.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:first-child {
-  padding-top: 1rem;
-}
-.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:last-child {
-  padding-bottom: 1rem;
-}
-.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:not(:first-child) .fd-list__form-item,
-.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:not(:first-child) .fd-list__form-item.fd-form-item {
-  top: 0;
-}
-.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:not(:first-child) .fd-list__form-item label,
-.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:not(:first-child) .fd-list__form-item.fd-form-item label {
-  padding-top: 0.5rem;
-}
-.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:not(:first-child) .fd-list__form-item label::after,
-.fd-list--selection.fd-list--byline.fd-list--no-border .fd-list__item:not(:first-child) .fd-list__form-item.fd-form-item label::after {
-  top: 0.375rem;
-}
-.fd-list--selection.fd-list--selection-row .fd-list__item {
-  padding-left: 1rem;
-}
-[dir=rtl] .fd-list--selection.fd-list--selection-row .fd-list__item, .fd-list--selection.fd-list--selection-row .fd-list__item[dir=rtl] {
-  padding-right: 1rem;
-}
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-.fd-list__item-counter {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--sapContent_MarkerTextColor);
-  margin-left: 1rem;
-}
-.fd-list__item-counter::before, .fd-list__item-counter::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-[dir=rtl] .fd-list__item-counter, .fd-list__item-counter[dir=rtl] {
-  margin-left: 0;
-  margin-right: 1rem;
-}
-.fd-object-list__item {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  height: 100%;
-}
-.fd-object-list__item .fd-list__link:active .fd-object-list__intro,
-.fd-object-list__item .fd-list__link:active .fd-object-list__object-attribute,
-.fd-object-list__item .fd-list__link:active .fd-avatar,
-.fd-object-list__item .fd-list__link:active .fd-object-identifier__title,
-.fd-object-list__item .fd-list__link:active .fd-object-marker__text,
-.fd-object-list__item .fd-list__link:active .fd-object-marker__icon,
-.fd-object-list__item .fd-list__link:active .fd-object-number__text,
-.fd-object-list__item .fd-list__link:active .fd-object-number__unit,
-.fd-object-list__item .fd-list__link:active .fd-object-status__text,
-.fd-object-list__item .fd-list__link:active .fd-object-status__icon, .fd-object-list__item .fd-list__link.is-active .fd-object-list__intro,
-.fd-object-list__item .fd-list__link.is-active .fd-object-list__object-attribute,
-.fd-object-list__item .fd-list__link.is-active .fd-avatar,
-.fd-object-list__item .fd-list__link.is-active .fd-object-identifier__title,
-.fd-object-list__item .fd-list__link.is-active .fd-object-marker__text,
-.fd-object-list__item .fd-list__link.is-active .fd-object-marker__icon,
-.fd-object-list__item .fd-list__link.is-active .fd-object-number__text,
-.fd-object-list__item .fd-list__link.is-active .fd-object-number__unit,
-.fd-object-list__item .fd-list__link.is-active .fd-object-status__text,
-.fd-object-list__item .fd-list__link.is-active .fd-object-status__icon {
-  color: var(--sapList_Active_TextColor);
-  text-shadow: none;
-}
-.fd-object-list__intro {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-  max-width: 100%;
-  color: var(--sapContent_LabelColor);
-  padding-bottom: 0.75rem;
-}
-.fd-object-list__intro::before, .fd-object-list__intro::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-.fd-object-list__container {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
-.fd-object-list__container::before, .fd-object-list__container::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-.fd-object-list__header {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-.fd-object-list__header::before, .fd-object-list__header::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-.fd-object-list__header-left:not(:first-child) {
-  margin-left: 0.75rem;
-}
-[dir=rtl] .fd-object-list__header-left:not(:first-child), .fd-object-list__header-left:not(:first-child)[dir=rtl] {
-  margin-right: 0.75rem;
-  margin-left: 0;
-}
-.fd-object-list__header-left {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  text-align: left;
-  width: 60%;
-}
-.fd-object-list__header-left::before, .fd-object-list__header-left::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-[dir=rtl] .fd-object-list__header-left, .fd-object-list__header-left[dir=rtl] {
-  text-align: right;
-}
-.fd-object-list__header-right {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  padding-left: 1rem;
-  text-align: right;
-  width: 40%;
-}
-.fd-object-list__header-right::before, .fd-object-list__header-right::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-[dir=rtl] .fd-object-list__header-right, .fd-object-list__header-right[dir=rtl] {
-  padding-right: 1rem;
-  padding-left: 0;
-}
-[dir=rtl] .fd-object-list__header-right, .fd-object-list__header-right[dir=rtl] {
-  text-align: left;
-}
-.fd-object-list__row {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: end;
-      -ms-flex-align: end;
-          align-items: flex-end;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
-}
-.fd-object-list__row::before, .fd-object-list__row::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-.fd-object-list__row > *:only-child {
-  width: 100%;
-}
-.fd-object-list__row-left, .fd-object-list__row-right {
-  font-size: var(--sapFontSize);
-  line-height: var(--sapContent_LineHeight);
-  color: var(--sapTextColor);
-  font-family: var(--sapFontFamily);
-  font-weight: normal;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 50%;
-  padding: 0.5rem 0.5rem 0 0.5rem;
-}
-.fd-object-list__row-left::before, .fd-object-list__row-left::after, .fd-object-list__row-right::before, .fd-object-list__row-right::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-.fd-object-list__row-left {
-  text-align: left;
-  padding-left: 0;
-}
-[dir=rtl] .fd-object-list__row-left, .fd-object-list__row-left[dir=rtl] {
-  text-align: right;
-}
-[dir=rtl] .fd-object-list__row-left, .fd-object-list__row-left[dir=rtl] {
-  padding-right: 0;
-  padding-left: 0;
-}
-.fd-object-list__row-right {
-  text-align: right;
-  padding-right: 0;
-}
-[dir=rtl] .fd-object-list__row-right, .fd-object-list__row-right[dir=rtl] {
-  text-align: left;
-}
-[dir=rtl] .fd-object-list__row-right, .fd-object-list__row-right[dir=rtl] {
-  padding-right: 0;
-  padding-left: 0;
+  padding-left: 0;
 }
 .fd-object-list__row-right .fd-object-status__text, .fd-object-list__row-right .fd-object-status__icon {
   white-space: nowrap;
@@ -41694,91 +40702,339 @@ places the element far left of the screen. so it is not visible.
   z-index: 5;
   outline-color: var(--sapContent_ContrastFocusColor);
 }
-.fd-tree--no-data .fd-tree__text {
-  text-align: center;
+.fd-tree--no-data .fd-tree__text {
+  text-align: center;
+}
+.fd-tree .has-highlight-indicator {
+  -webkit-box-shadow: inset 0.375rem 0 0 0 var(--sapInformationBorderColor);
+          box-shadow: inset 0.375rem 0 0 0 var(--sapInformationBorderColor);
+}
+[dir=rtl] .fd-tree .has-highlight-indicator, .fd-tree .has-highlight-indicator[dir=rtl] {
+  -webkit-box-shadow: inset -0.375rem 0 0 0 var(--sapInformationBorderColor);
+          box-shadow: inset -0.375rem 0 0 0 var(--sapInformationBorderColor);
+}
+.fd-tree .has-highlight-indicator.is-navigated {
+  -webkit-box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapInformationBorderColor);
+          box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapInformationBorderColor);
+}
+[dir=rtl] .fd-tree .has-highlight-indicator.is-navigated, .fd-tree .has-highlight-indicator.is-navigated[dir=rtl] {
+  -webkit-box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapInformationBorderColor);
+          box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapInformationBorderColor);
+}
+.fd-tree .has-highlight-indicator--error {
+  -webkit-box-shadow: inset 0.375rem 0 0 0 var(--sapErrorBorderColor);
+          box-shadow: inset 0.375rem 0 0 0 var(--sapErrorBorderColor);
+}
+[dir=rtl] .fd-tree .has-highlight-indicator--error, .fd-tree .has-highlight-indicator--error[dir=rtl] {
+  -webkit-box-shadow: inset -0.375rem 0 0 0 var(--sapErrorBorderColor);
+          box-shadow: inset -0.375rem 0 0 0 var(--sapErrorBorderColor);
+}
+.fd-tree .has-highlight-indicator--error.is-navigated {
+  -webkit-box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapErrorBorderColor);
+          box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapErrorBorderColor);
+}
+[dir=rtl] .fd-tree .has-highlight-indicator--error.is-navigated, .fd-tree .has-highlight-indicator--error.is-navigated[dir=rtl] {
+  -webkit-box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapErrorBorderColor);
+          box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapErrorBorderColor);
+}
+.fd-tree .has-highlight-indicator--warning {
+  -webkit-box-shadow: inset 0.375rem 0 0 0 var(--sapWarningBorderColor);
+          box-shadow: inset 0.375rem 0 0 0 var(--sapWarningBorderColor);
+}
+[dir=rtl] .fd-tree .has-highlight-indicator--warning, .fd-tree .has-highlight-indicator--warning[dir=rtl] {
+  -webkit-box-shadow: inset -0.375rem 0 0 0 var(--sapWarningBorderColor);
+          box-shadow: inset -0.375rem 0 0 0 var(--sapWarningBorderColor);
+}
+.fd-tree .has-highlight-indicator--warning.is-navigated {
+  -webkit-box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapWarningBorderColor);
+          box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapWarningBorderColor);
+}
+[dir=rtl] .fd-tree .has-highlight-indicator--warning.is-navigated, .fd-tree .has-highlight-indicator--warning.is-navigated[dir=rtl] {
+  -webkit-box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapWarningBorderColor);
+          box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapWarningBorderColor);
+}
+.fd-tree .has-highlight-indicator--success {
+  -webkit-box-shadow: inset 0.375rem 0 0 0 var(--sapSuccessBorderColor);
+          box-shadow: inset 0.375rem 0 0 0 var(--sapSuccessBorderColor);
+}
+[dir=rtl] .fd-tree .has-highlight-indicator--success, .fd-tree .has-highlight-indicator--success[dir=rtl] {
+  -webkit-box-shadow: inset -0.375rem 0 0 0 var(--sapSuccessBorderColor);
+          box-shadow: inset -0.375rem 0 0 0 var(--sapSuccessBorderColor);
+}
+.fd-tree .has-highlight-indicator--success.is-navigated {
+  -webkit-box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapSuccessBorderColor);
+          box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapSuccessBorderColor);
+}
+[dir=rtl] .fd-tree .has-highlight-indicator--success.is-navigated, .fd-tree .has-highlight-indicator--success.is-navigated[dir=rtl] {
+  -webkit-box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapSuccessBorderColor);
+          box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapSuccessBorderColor);
+}
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+.fd-list--byline .fd-list__item {
+  width: 100%;
+  min-height: 5rem;
+  height: auto;
+  padding: 1rem 1rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.fd-list--byline .fd-list__item:focus, .fd-list--byline .fd-list__item.is-focus {
+  z-index: 5;
+  pointer-events: all;
+}
+.fd-list--byline .fd-list__item .fd-list__item-counter {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  height: 100%;
+  min-width: 2rem;
+}
+.fd-list--byline .fd-list__thumbnail {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  pointer-events: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-right: 0.75rem;
+  width: 3rem;
+  height: 3rem;
+  min-width: 3rem;
+  max-width: 3rem;
+  min-height: 3rem;
+  max-height: 3rem;
+  border-radius: 0.25rem;
+  font-size: 2.5rem;
+  color: var(--sapContent_NonInteractiveIconColor);
+}
+.fd-list--byline .fd-list__thumbnail::before, .fd-list--byline .fd-list__thumbnail::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+.fd-list--byline .fd-list__thumbnail [class*=sap-icon], .fd-list--byline .fd-list__thumbnail[class*=sap-icon] {
+  color: inherit;
+  background: inherit;
+  font-size: inherit;
+  border-radius: inherit;
+  line-height: 1;
+}
+[dir=rtl] .fd-list--byline .fd-list__thumbnail, .fd-list--byline .fd-list__thumbnail[dir=rtl] {
+  margin-right: 0;
+  margin-left: 0.75rem;
+}
+.fd-list--byline .fd-list__content {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  pointer-events: none;
+  -ms-flex-line-pack: justify;
+      align-content: space-between;
+  min-height: 3rem;
+  min-width: 3rem;
+  height: 100%;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  padding: 0.125rem 0;
+}
+.fd-list--byline .fd-list__content::before, .fd-list--byline .fd-list__content::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+.fd-list--byline .fd-list__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--sapFontLargeSize);
+  min-height: 1rem;
+}
+.fd-list--byline .fd-list__byline {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--sapFontSize);
+  color: var(--sapContent_LabelColor);
+  line-height: 1rem;
+  padding-top: 0.75rem;
+}
+.fd-list--byline .fd-list__byline::before, .fd-list--byline .fd-list__byline::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+.fd-list--byline .fd-list__byline--2-col {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  pointer-events: all;
+}
+.fd-list--byline .fd-list__link--more {
+  text-transform: uppercase;
+  pointer-events: all;
+}
+.fd-list--byline .fd-list__title--wrap, .fd-list--byline .fd-list__byline--wrap {
+  white-space: normal;
 }
-.fd-tree .has-highlight-indicator {
-  -webkit-box-shadow: inset 0.375rem 0 0 0 var(--sapInformationBorderColor);
-          box-shadow: inset 0.375rem 0 0 0 var(--sapInformationBorderColor);
+.fd-list--byline .fd-list__byline-left {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 0.5rem;
+  width: 60%;
+  color: var(--sapContent_LabelColor);
+  line-height: 1rem;
+  -ms-flex-item-align: end;
+      align-self: flex-end;
 }
-[dir=rtl] .fd-tree .has-highlight-indicator, .fd-tree .has-highlight-indicator[dir=rtl] {
-  -webkit-box-shadow: inset -0.375rem 0 0 0 var(--sapInformationBorderColor);
-          box-shadow: inset -0.375rem 0 0 0 var(--sapInformationBorderColor);
+.fd-list--byline .fd-list__byline-left::before, .fd-list--byline .fd-list__byline-left::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
 }
-.fd-tree .has-highlight-indicator.is-navigated {
-  -webkit-box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapInformationBorderColor);
-          box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapInformationBorderColor);
+[dir=rtl] .fd-list--byline .fd-list__byline-left, .fd-list--byline .fd-list__byline-left[dir=rtl] {
+  padding-right: 0;
+  padding-left: 0.5rem;
 }
-[dir=rtl] .fd-tree .has-highlight-indicator.is-navigated, .fd-tree .has-highlight-indicator.is-navigated[dir=rtl] {
-  -webkit-box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapInformationBorderColor);
-          box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapInformationBorderColor);
+.fd-list--byline .fd-list__byline-right {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-left: 0.5rem;
+  width: 40%;
+  color: var(--sapContent_LabelColor);
+  line-height: 1rem;
+  text-align: right;
+  -ms-flex-item-align: end;
+      align-self: flex-end;
 }
-.fd-tree .has-highlight-indicator--error {
-  -webkit-box-shadow: inset 0.375rem 0 0 0 var(--sapErrorBorderColor);
-          box-shadow: inset 0.375rem 0 0 0 var(--sapErrorBorderColor);
+.fd-list--byline .fd-list__byline-right::before, .fd-list--byline .fd-list__byline-right::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
 }
-[dir=rtl] .fd-tree .has-highlight-indicator--error, .fd-tree .has-highlight-indicator--error[dir=rtl] {
-  -webkit-box-shadow: inset -0.375rem 0 0 0 var(--sapErrorBorderColor);
-          box-shadow: inset -0.375rem 0 0 0 var(--sapErrorBorderColor);
+[dir=rtl] .fd-list--byline .fd-list__byline-right, .fd-list--byline .fd-list__byline-right[dir=rtl] {
+  padding-right: 0.5rem;
+  padding-left: 0;
 }
-.fd-tree .has-highlight-indicator--error.is-navigated {
-  -webkit-box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapErrorBorderColor);
-          box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapErrorBorderColor);
+[dir=rtl] .fd-list--byline .fd-list__byline-right, .fd-list--byline .fd-list__byline-right[dir=rtl] {
+  text-align: left;
 }
-[dir=rtl] .fd-tree .has-highlight-indicator--error.is-navigated, .fd-tree .has-highlight-indicator--error.is-navigated[dir=rtl] {
-  -webkit-box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapErrorBorderColor);
-          box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapErrorBorderColor);
+.fd-list--byline .fd-list__byline-right--neutral {
+  color: var(--sapNeutralTextColor);
 }
-.fd-tree .has-highlight-indicator--warning {
-  -webkit-box-shadow: inset 0.375rem 0 0 0 var(--sapWarningBorderColor);
-          box-shadow: inset 0.375rem 0 0 0 var(--sapWarningBorderColor);
+.fd-list--byline .fd-list__byline-right--positive {
+  color: var(--sapPositiveTextColor);
 }
-[dir=rtl] .fd-tree .has-highlight-indicator--warning, .fd-tree .has-highlight-indicator--warning[dir=rtl] {
-  -webkit-box-shadow: inset -0.375rem 0 0 0 var(--sapWarningBorderColor);
-          box-shadow: inset -0.375rem 0 0 0 var(--sapWarningBorderColor);
+.fd-list--byline .fd-list__byline-right--critical {
+  color: var(--sapCriticalTextColor);
 }
-.fd-tree .has-highlight-indicator--warning.is-navigated {
-  -webkit-box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapWarningBorderColor);
-          box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapWarningBorderColor);
+.fd-list--byline .fd-list__byline-right--negative {
+  color: var(--sapNegativeTextColor);
 }
-[dir=rtl] .fd-tree .has-highlight-indicator--warning.is-navigated, .fd-tree .has-highlight-indicator--warning.is-navigated[dir=rtl] {
-  -webkit-box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapWarningBorderColor);
-          box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapWarningBorderColor);
+.fd-list--byline .fd-list__byline-right--informative {
+  color: var(--sapInformativeTextColor);
 }
-.fd-tree .has-highlight-indicator--success {
-  -webkit-box-shadow: inset 0.375rem 0 0 0 var(--sapSuccessBorderColor);
-          box-shadow: inset 0.375rem 0 0 0 var(--sapSuccessBorderColor);
+.fd-list--byline .fd-list__byline-left--wrap, .fd-list--byline .fd-list__byline-right--wrap {
+  white-space: normal;
 }
-[dir=rtl] .fd-tree .has-highlight-indicator--success, .fd-tree .has-highlight-indicator--success[dir=rtl] {
-  -webkit-box-shadow: inset -0.375rem 0 0 0 var(--sapSuccessBorderColor);
-          box-shadow: inset -0.375rem 0 0 0 var(--sapSuccessBorderColor);
+.fd-list--byline.fd-list--compact .fd-list__title {
+  font-size: var(--sapFontSize);
 }
-.fd-tree .has-highlight-indicator--success.is-navigated {
-  -webkit-box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapSuccessBorderColor);
-          box-shadow: inset -0.1875rem 0 0 0 var(--sapSelectedColor), inset 0.375rem 0 0 0 var(--sapSuccessBorderColor);
+.fd-list--byline.fd-list--no-border .fd-list__item {
+  padding: 0.5rem 1rem;
+  max-height: 5rem;
+  height: 100%;
 }
-[dir=rtl] .fd-tree .has-highlight-indicator--success.is-navigated, .fd-tree .has-highlight-indicator--success.is-navigated[dir=rtl] {
-  -webkit-box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapSuccessBorderColor);
-          box-shadow: inset 0.1875rem 0 0 0 var(--sapSelectedColor), inset -0.375rem 0 0 0 var(--sapSuccessBorderColor);
+.fd-list--byline.fd-list--no-border .fd-list__item:first-child {
+  padding-top: 1rem;
+}
+.fd-list--byline.fd-list--no-border .fd-list__item:last-child {
+  padding-bottom: 1rem;
 }
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-/* Fully expanded pseudo element. Requires parent to have specified position */
 .fd-upload-collection .fd-upload-collection__item {
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
@@ -41840,14 +41096,16 @@ places the element far left of the screen. so it is not visible.
   font-size: inherit;
 }
 .fd-upload-collection__title-container .fd-upload-collection__title {
-  margin-right: 0.5rem;
   -webkit-box-flex: 0;
       -ms-flex: none;
           flex: none;
   -ms-flex-negative: 1;
       flex-shrink: 1;
 }
-[dir=rtl] .fd-upload-collection__title-container .fd-upload-collection__title, .fd-upload-collection__title-container .fd-upload-collection__title[dir=rtl] {
+.fd-upload-collection .fd-upload-collection__title-container .fd-upload-collection__title {
+  margin-right: 0.5rem;
+}
+[dir=rtl] .fd-upload-collection .fd-upload-collection__title-container .fd-upload-collection__title, .fd-upload-collection .fd-upload-collection__title-container .fd-upload-collection__title[dir=rtl] {
   margin-right: 0;
   margin-left: 0.5rem;
 }
@@ -42113,6 +41371,8 @@ places the element far left of the screen. so it is not visible.
 /* stylelint-enable */
 /* Fully expanded pseudo element. Requires parent to have specified position */
 /* Fully expanded pseudo element. Requires parent to have specified position */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* === INTERNAL FOR THIS FILE === */
 .fd-vertical-nav {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -42135,10 +41395,10 @@ places the element far left of the screen. so it is not visible.
       -ms-flex-pack: justify;
           justify-content: space-between;
   background-color: var(--sapList_AlternatingBackground);
-  width: 15rem;
   text-shadow: var(--fdVerticalNav_Text_Shadow);
   -webkit-box-shadow: var(--sapContent_Shadow0);
           box-shadow: var(--sapContent_Shadow0);
+  width: 15rem;
   height: 100%;
 }
 .fd-vertical-nav::before, .fd-vertical-nav::after {
@@ -42146,9 +41406,442 @@ places the element far left of the screen. so it is not visible.
           box-sizing: inherit;
   font-size: inherit;
 }
+.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator::before, .fd-vertical-nav .fd-list .fd-list__navigation-item-indicator::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator::after {
+  content: "";
+  width: 0.1875rem;
+  display: inline-block;
+  position: absolute;
+  right: 0;
+  top: 0.5625rem;
+  height: 1.625rem;
+  background-color: var(--sapSelectedColor);
+  color: var(--sapSelectedColor);
+  border-radius: var(--sapField_BorderCornerRadius);
+  margin-right: 0.3125rem;
+}
+[dir=rtl] .fd-vertical-nav .fd-list .fd-list__navigation-item-indicator::after, .fd-vertical-nav .fd-list .fd-list__navigation-item-indicator[dir=rtl]::after {
+  right: unset;
+  margin-right: 0;
+  left: 0;
+  margin-left: 0.3125rem;
+}
+.fd-vertical-nav .fd-list__navigation-item {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+  background: transparent;
+  height: 2.75rem;
+  position: relative;
+  cursor: pointer;
+}
+.fd-vertical-nav .fd-list__navigation-item::before, .fd-vertical-nav .fd-list__navigation-item::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+.fd-vertical-nav .fd-list__navigation-item:focus, .fd-vertical-nav .fd-list__navigation-item.is-focus {
+  outline-offset: -0.1875rem;
+  outline-width: var(--sapContent_FocusWidth);
+  outline-color: var(--sapContent_FocusColor);
+  outline-style: var(--sapContent_FocusStyle);
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item, .fd-vertical-nav .fd-list__navigation-item[dir=rtl] {
+  padding-right: 0.5rem;
+  padding-left: 1rem;
+}
+.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated {
+  color: var(--sapSelectedColor);
+}
+.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-text,
+.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-icon,
+.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-arrow {
+  color: var(--sapSelectedColor);
+}
+.fd-vertical-nav .fd-list__navigation-item .fd-list {
+  display: none;
+}
+.fd-vertical-nav .fd-list__navigation-item--expandable {
+  margin: 0.25rem 0;
+}
+.fd-vertical-nav .fd-list__navigation-item.is-expanded {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+  border-radius: var(--sapElement_BorderCornerRadius);
+  -webkit-box-shadow: var(--sapContent_Shadow0);
+          box-shadow: var(--sapContent_Shadow0);
+  height: 100%;
+  overflow: hidden;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded, .fd-vertical-nav .fd-list__navigation-item.is-expanded[dir=rtl] {
+  margin-right: 0.25rem;
+  margin-left: 0.25rem;
+}
+.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item {
+  width: 100%;
+}
+.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated {
+  color: var(--sapSelectedColor);
+}
+.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-text,
+.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-icon,
+.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-arrow {
+  color: var(--sapSelectedColor);
+}
+.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator::after {
+  margin-right: 0;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator::after, .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator[dir=rtl]::after {
+  margin-left: 0;
+}
+.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  margin-left: 2.5rem;
+  vertical-align: middle;
+  line-height: 2.75rem;
+  color: var(--sapContent_LabelColor);
+  font-size: var(--sapFontSize);
+}
+.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text::before, .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text, .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text[dir=rtl] {
+  margin-right: 2.5rem;
+  margin-left: 0;
+}
+.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text {
+  padding-left: 0;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text, .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text[dir=rtl] {
+  padding-right: 0;
+  padding-left: 0;
+}
+.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon {
+  padding-right: 0.5rem;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon, .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon[dir=rtl] {
+  padding-right: 0;
+  padding-left: 0.5rem;
+}
+.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list {
+  margin-left: -0.5rem;
+  margin-right: -1rem;
+  width: auto;
+  display: block;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list, .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list[dir=rtl] {
+  margin-right: -0.5rem;
+  margin-left: -1rem;
+}
+.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator::after {
+  margin-right: 0;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator::after, .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator::after[dir=rtl] {
+  margin-right: 0;
+  margin-left: 0;
+}
+.fd-vertical-nav .fd-list__navigation-item.is-expanded > .fd-list__navigation-item-indicator::after {
+  display: none;
+}
+.fd-vertical-nav .fd-list__navigation-item .fd-list__navigation-item--indicated .fd-list__navigation-item-text {
+  color: var(--sapSelectedColor);
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed {
+  padding-left: 0;
+  padding-right: 0;
+  position: relative;
+  width: 3.25rem;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed, .fd-vertical-nav .fd-list__navigation-item--condensed[dir=rtl] {
+  padding-right: 0;
+  padding-left: 0;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-popover--first-level, .fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-popover--second-level {
+  display: none;
+  background: var(--sapList_AlternatingBackground);
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-text {
+  display: none;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  height: 2.75rem;
+  line-height: 2.75rem;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon, .fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon[dir=rtl] {
+  margin-right: 0.5rem;
+  margin-left: 0.5rem;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded {
+  margin-left: 0;
+  margin-right: 0;
+  height: 2.75rem;
+  overflow: visible;
+  visibility: hidden;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded, .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded[dir=rtl] {
+  margin-right: 0;
+  margin-left: 0;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item {
+  margin-left: 0;
+  margin-right: 0;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item, .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item[dir=rtl] {
+  margin-right: 0;
+  margin-left: 0;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon {
+  margin-left: 0;
+  padding-left: 0.875rem;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon, .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon[dir=rtl] {
+  margin-right: 0;
+  margin-left: 0.5rem;
+  padding-right: 0.875rem;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level, .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level {
+  overflow: hidden;
+  display: block;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list, .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list {
+  width: 100%;
+  display: inline-block;
+  margin: 0 auto;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text, .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text {
+  margin-left: 0;
+  padding-left: 0;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text, .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text[dir=rtl], [dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text, .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text[dir=rtl] {
+  margin-right: 0;
+  margin-left: 0;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text, .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text[dir=rtl], [dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text, .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text[dir=rtl] {
+  padding-right: 0;
+  padding-left: 0;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level {
+  top: 0;
+  left: 0.325rem;
+  width: 14.325rem;
+  border-bottom-right-radius: 0;
+  z-index: 3;
+  height: 100%;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level, .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level[dir=rtl] {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: var(--sapElement_BorderCornerRadius);
+  left: unset;
+  right: 0.325rem;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level {
+  left: 3.25rem;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  top: 2.75rem;
+  width: 11.4rem;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level, .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level[dir=rtl] {
+  left: auto;
+  right: 3.25rem;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text {
+  margin-left: 1rem;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text, .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text[dir=rtl] {
+  margin-right: 1rem;
+  margin-left: 0;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator::after {
+  margin-right: 0;
+  display: inline-block;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator::after, .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator::after[dir=rtl] {
+  margin-right: 0;
+  margin-left: 0;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-text {
+  display: inline;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-arrow {
+  display: none;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-indicator::after {
+  display: none;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow {
+  width: 100%;
+}
+.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow::before {
+  display: inline-block;
+  content: "";
+  min-width: 0;
+  min-height: 0;
+  margin-right: 0.75rem;
+  margin-bottom: 0.5625rem;
+  border-style: solid;
+  border-width: 0.25rem 0.25rem 0 0;
+  border-color: transparent var(--sapContent_NonInteractiveIconColor) transparent transparent;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow::before, .fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow::before[dir=rtl] {
+  right: unset;
+  margin-right: 0;
+  margin-left: 0.75rem;
+  left: 0;
+}
+.fd-vertical-nav .fd-list__navigation-item-icon {
+  font-size: 1rem;
+  font-family: "SAP-icons";
+  height: 2.75rem;
+  line-height: 2.75rem;
+  width: 2.25rem;
+  color: var(--sapContent_NonInteractiveIconColor);
+  vertical-align: top;
+  text-align: center;
+}
+.fd-vertical-nav .fd-list__navigation-item-text {
+  padding-left: 0.25rem;
+  font-size: var(--sapFontLargeSize);
+  font-family: var(--sapFontFamily);
+  color: var(--sapList_TextColor);
+  max-width: 9rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  line-height: 2.75rem;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-text, .fd-vertical-nav .fd-list__navigation-item-text[dir=rtl] {
+  padding-right: 0.25rem;
+  padding-left: 0;
+}
+.fd-vertical-nav .fd-list__navigation-item-arrow {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-image: none;
+  display: inline-block;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  outline: 0;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: var(--sapButton_BorderCornerRadius);
+  right: 0;
+  height: 2.75rem;
+  width: 2.75rem;
+  position: absolute;
+  line-height: 2.75rem;
+  font-family: "SAP-icons";
+  font-size: 1rem;
+  color: var(--sapContent_NonInteractiveIconColor);
+  background-color: transparent;
+}
+.fd-vertical-nav .fd-list__navigation-item-arrow::before, .fd-vertical-nav .fd-list__navigation-item-arrow::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+.fd-vertical-nav .fd-list__navigation-item-arrow::-moz-focus-inner {
+  border: 0;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-arrow, .fd-vertical-nav .fd-list__navigation-item-arrow[dir=rtl] {
+  right: auto;
+  left: 0;
+}
+[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-arrow, .fd-vertical-nav .fd-list__navigation-item-arrow[dir=rtl] {
+  -webkit-transform: scaleX(-1);
+          transform: scaleX(-1);
+}
+.fd-vertical-nav .fd-list__navigation-item-arrow:focus, .fd-vertical-nav .fd-list__navigation-item-arrow.is-focus {
+  z-index: 5;
+  outline: none;
+}
+.fd-vertical-nav .fd-list__navigation-item-arrow:focus::after, .fd-vertical-nav .fd-list__navigation-item-arrow.is-focus::after {
+  content: "";
+  position: absolute;
+  display: block;
+  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+  top: 0.125rem;
+  left: 0.125rem;
+  right: 0.125rem;
+  bottom: 0.125rem;
+}
+.fd-vertical-nav .fd-list__navigation-item-arrow:focus:active::after, .fd-vertical-nav .fd-list__navigation-item-arrow:focus.is-active::after, .fd-vertical-nav .fd-list__navigation-item-arrow.is-focus:active::after, .fd-vertical-nav .fd-list__navigation-item-arrow.is-focus.is-active::after {
+  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_ContrastFocusColor);
+}
+.fd-vertical-nav .fd-list__navigation-item:hover, .fd-vertical-nav .fd-list__navigation-item.is-hover, .fd-vertical-nav .fd-list__navigation-item--condensed:hover, .fd-vertical-nav .fd-list__navigation-item--condensed.is-hover {
+  background: var(--sapList_Hover_Background);
+}
+.fd-vertical-nav .fd-list__navigation-item[aria-pressed=true], .fd-vertical-nav .fd-list__navigation-item.is-pressed, .fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true], .fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed {
+  background: var(--sapList_Active_Background);
+  color: var(--sapContent_ContrastTextColor);
+}
+.fd-vertical-nav .fd-list__navigation-item[aria-pressed=true] .fd-list__navigation-item-icon, .fd-vertical-nav .fd-list__navigation-item[aria-pressed=true] .fd-list__navigation-item-arrow, .fd-vertical-nav .fd-list__navigation-item.is-pressed .fd-list__navigation-item-icon, .fd-vertical-nav .fd-list__navigation-item.is-pressed .fd-list__navigation-item-arrow, .fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true] .fd-list__navigation-item-icon, .fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true] .fd-list__navigation-item-arrow, .fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed .fd-list__navigation-item-icon, .fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed .fd-list__navigation-item-arrow {
+  color: var(--sapContent_ContrastIconColor);
+}
 .fd-vertical-nav--overflow {
   overflow-y: scroll;
 }
+.fd-vertical-nav--condensed {
+  width: 3.25rem;
+}
 .fd-vertical-nav__main-navigation {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -42166,9 +41859,6 @@ places the element far left of the screen. so it is not visible.
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-vertical-nav--condensed {
-  width: 3.25rem;
-}
 .fd-vertical-nav .fd-vertical-nav__group-header {
   background: var(--sapList_AlternatingBackground);
 }