@fundamental-styles/theming-preview 0.24.0-rc.44 → 0.24.0-rc.47

package/fundamental-styles.css

@@ -1,7 +1,7 @@
 
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.44
+ * Fundamental Library Styles v0.24.0-rc.47
  * 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)
  */
@@ -17271,6 +17271,9 @@ fd-carousel:focus, fd-carousel.is-focus {
 .fd-input[aria-readonly=true]::placeholder, .fd-input.is-readonly::placeholder, .fd-input[readonly]::placeholder {
   color: transparent;
 }
+.fd-input[type=search]::-webkit-search-decoration, .fd-input[type=search]::-webkit-search-cancel-button, .fd-input[type=search]::-webkit-search-results-button, .fd-input[type=search]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
 .fd-input::-ms-clear {
   display: none;
 }
@@ -19216,21 +19219,43 @@ fd-carousel:focus, fd-carousel.is-focus {
   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;
-  display: block;
 }
 .fd-grid-list::before, .fd-grid-list::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-grid-list__item {
+.fd-grid-list .fd-grid-list__radio-input {
+  height: 1rem;
+  width: 1rem;
+}
+.fd-grid-list .fd-grid-list__radio-input:focus, .fd-grid-list .fd-grid-list__radio-input.is-focus {
+  z-index: 5;
+}
+.fd-grid-list .fd-grid-list__radio-input:focus + .fd-grid-list__radio-label, .fd-grid-list .fd-grid-list__radio-input.is-focus + .fd-grid-list__radio-label {
+  outline-offset: 0;
+}
+.fd-grid-list .fd-grid-list__radio-input + .fd-grid-list__radio-label:empty, .fd-grid-list .fd-grid-list__radio-input + .fd-grid-list__radio-label.is-empty {
+  -ms-flex-item-align: center;
+      align-self: center;
+  padding: 0;
+}
+.fd-grid-list .fd-grid-list__checkbox-input {
+  height: 1rem;
+  width: 1rem;
+}
+.fd-grid-list .fd-grid-list__checkbox-input:focus, .fd-grid-list .fd-grid-list__checkbox-input.is-focus {
+  z-index: 5;
+}
+.fd-grid-list .fd-grid-list__checkbox-input:focus + .fd-grid-list__checkbox-label, .fd-grid-list .fd-grid-list__checkbox-input.is-focus + .fd-grid-list__checkbox-label {
+  outline-offset: 0;
+}
+.fd-grid-list .fd-grid-list__checkbox-input + .fd-grid-list__checkbox-label:empty, .fd-grid-list .fd-grid-list__checkbox-input + .fd-grid-list__checkbox-label.is-empty {
+  -ms-flex-item-align: center;
+      align-self: center;
+  padding: 0;
+}
+.fd-grid-list .fd-grid-list__item {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
   color: var(--sapTextColor);
@@ -19248,94 +19273,59 @@ fd-carousel:focus, fd-carousel.is-focus {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
+  color: var(--sapList_TextColor);
   background-color: var(--sapList_Background);
-  border-radius: var(--sapElement_BorderCornerRadius);
+  border-radius: var(--fdGrid_List_Item_Border_Radius);
   -webkit-box-shadow: var(--sapContent_Shadow0);
           box-shadow: var(--sapContent_Shadow0);
   height: 100%;
   position: relative;
   overflow: hidden;
 }
-.fd-grid-list__item::before, .fd-grid-list__item::after {
+.fd-grid-list .fd-grid-list__item::before, .fd-grid-list .fd-grid-list__item::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-grid-list__item:focus, .fd-grid-list__item.is-focus {
+.fd-grid-list .fd-grid-list__item:focus, .fd-grid-list .fd-grid-list__item.is-focus {
   outline-offset: -0.1875rem;
   outline-width: var(--sapContent_FocusWidth);
   outline-color: var(--sapContent_FocusColor);
   outline-style: var(--sapContent_FocusStyle);
 }
-.fd-grid-list__item:focus .fd-grid-list__highlight, .fd-grid-list__item.is-focus .fd-grid-list__highlight {
+.fd-grid-list .fd-grid-list__item:focus .fd-grid-list__highlight, .fd-grid-list .fd-grid-list__item.is-focus .fd-grid-list__highlight {
   width: 0.25rem;
   left: 0.1875rem;
-  bottom: 0.1875rem;
-  top: 0.1875rem;
-}
-.fd-grid-list__item .fd-grid-list__radio-input {
-  height: 1rem;
-  width: 1rem;
-}
-.fd-grid-list__item .fd-grid-list__radio-input:focus, .fd-grid-list__item .fd-grid-list__radio-input.is-focus {
-  z-index: 5;
-}
-.fd-grid-list__item .fd-grid-list__radio-input:focus + .fd-grid-list__radio-label, .fd-grid-list__item .fd-grid-list__radio-input.is-focus + .fd-grid-list__radio-label {
-  outline-offset: 0;
-  outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-}
-.fd-grid-list__item .fd-grid-list__radio-input + .fd-grid-list__radio-label:empty, .fd-grid-list__item .fd-grid-list__radio-input + .fd-grid-list__radio-label.is-empty {
-  padding: 0;
-}
-.fd-grid-list__item .fd-grid-list__radio-input + .fd-grid-list__radio-label::after {
-  top: 0;
-  right: 0 !important;
-  bottom: 0;
-  left: 0;
-  margin: auto !important;
+  bottom: var(--fdGrid_List_Highlight_Offset);
+  top: var(--fdGrid_List_Highlight_Offset);
 }
-.fd-grid-list__item .fd-grid-list__checkbox-input {
-  height: 1rem;
-  width: 1rem;
-}
-.fd-grid-list__item .fd-grid-list__checkbox-input:focus, .fd-grid-list__item .fd-grid-list__checkbox-input.is-focus {
-  z-index: 5;
-}
-.fd-grid-list__item .fd-grid-list__checkbox-input:focus + .fd-grid-list__checkbox-label, .fd-grid-list__item .fd-grid-list__checkbox-input.is-focus + .fd-grid-list__checkbox-label {
-  outline-offset: 0;
-}
-.fd-grid-list__item .fd-grid-list__checkbox-input + .fd-grid-list__checkbox-label:empty, .fd-grid-list__item .fd-grid-list__checkbox-input + .fd-grid-list__checkbox-label.is-empty {
-  padding: 0;
-}
-.fd-grid-list__item .fd-grid-list__checkbox-label,
-.fd-grid-list__item .fd-grid-list__radio-label {
-  display: none;
-}
-.fd-grid-list__item--unread .fd-grid-list__item-body * {
+.fd-grid-list .fd-grid-list__item--unread .fd-grid-list__item-body * {
   font-weight: bold;
 }
-.fd-grid-list__item--link {
+.fd-grid-list .fd-grid-list__item--link {
   cursor: pointer;
 }
-.fd-grid-list__item--link:hover, .fd-grid-list__item--link.is-hover {
+.fd-grid-list .fd-grid-list__item--link:hover, .fd-grid-list .fd-grid-list__item--link.is-hover {
   -webkit-box-shadow: 0 0 0 0.0625rem var(--fdGrid_List_Item_Hover_Border_Color);
           box-shadow: 0 0 0 0.0625rem var(--fdGrid_List_Item_Hover_Border_Color);
   background-color: var(--sapList_Hover_Background);
 }
-.fd-grid-list__item--link:active, .fd-grid-list__item--link.is-active {
-  background-color: var(--sapList_Active_Background) !important;
+.fd-grid-list .fd-grid-list__item--link:active:not([aria-selected=true], .is-selected), .fd-grid-list .fd-grid-list__item--link.is-active:not([aria-selected=true], .is-selected) {
+  background-color: var(--sapList_Active_Background);
 }
-.fd-grid-list__item--link:active *, .fd-grid-list__item--link.is-active * {
+.fd-grid-list .fd-grid-list__item--link:active:not([aria-selected=true], .is-selected) *, .fd-grid-list .fd-grid-list__item--link.is-active:not([aria-selected=true], .is-selected) * {
   color: var(--sapList_Active_TextColor) !important;
+  text-shadow: none !important;
 }
-.fd-grid-list__item--link:active:focus, .fd-grid-list__item--link:active.is-focus, .fd-grid-list__item--link.is-active:focus, .fd-grid-list__item--link.is-active.is-focus {
-  outline-offset: -0.1875rem;
-  outline-width: var(--sapContent_FocusWidth);
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
-  outline-color: var(--sapContent_ContrastFocusColor);
+.fd-grid-list .fd-grid-list__item--link[aria-selected=true], .fd-grid-list .fd-grid-list__item--link.is-selected {
+  -webkit-box-shadow: 0 0 0 0.125rem var(--sapList_SelectionBorderColor);
+          box-shadow: 0 0 0 0.125rem var(--sapList_SelectionBorderColor);
+  background-color: var(--sapList_SelectionBackgroundColor);
+}
+.fd-grid-list .fd-grid-list__item--link[aria-selected=true]:hover, .fd-grid-list .fd-grid-list__item--link[aria-selected=true].is-hover, .fd-grid-list .fd-grid-list__item--link.is-selected:hover, .fd-grid-list .fd-grid-list__item--link.is-selected.is-hover {
+  background-color: var(--sapList_Hover_SelectionBackground);
 }
-.fd-grid-list__item--link.is-navigated::after {
+.fd-grid-list .fd-grid-list__item--link.is-navigated::after {
   content: "";
   position: absolute;
   top: 0;
@@ -19343,19 +19333,24 @@ fd-carousel:focus, fd-carousel.is-focus {
   height: 100%;
   width: 0.1875rem;
   display: block;
-  border-radius: 0 var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius) 0;
+  border-radius: 0 var(--fdGrid_List_Item_Border_Radius) var(--fdGrid_List_Item_Border_Radius) 0;
   background-color: var(--sapList_SelectionBorderColor);
 }
-.fd-grid-list__item .fd-grid-list__item-toolbar {
+.fd-grid-list .fd-grid-list__item-toolbar {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   padding: 0 1rem;
+  border: none;
+  -webkit-box-shadow: var(--fdGrid_List_Item_Toolbar_Shadow);
+          box-shadow: var(--fdGrid_List_Item_Toolbar_Shadow);
 }
-.fd-grid-list__item-body {
+.fd-grid-list .fd-grid-list__item-body {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
   color: var(--sapTextColor);
@@ -19369,35 +19364,171 @@ fd-carousel:focus, fd-carousel.is-focus {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
+  -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+      -ms-flex-direction: row;
+          flex-direction: row;
   height: 100%;
   padding: 1rem;
   word-break: break-word;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
 }
-.fd-grid-list__item-body::before, .fd-grid-list__item-body::after {
+.fd-grid-list .fd-grid-list__item-body::before, .fd-grid-list .fd-grid-list__item-body::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-grid-list__item-body--no-padding {
+.fd-grid-list .fd-grid-list__item-body--no-padding {
   padding: 0;
 }
-.fd-grid-list__item-body-actions {
+.fd-grid-list .fd-grid-list__item-body-actions {
+  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;
+  -ms-flex-preferred-size: 100%;
+      flex-basis: 100%;
   margin-top: 1rem;
   -webkit-box-ordinal-group: 2;
       -ms-flex-order: 1;
           order: 1;
 }
-.fd-grid-list__item-counter {
+.fd-grid-list .fd-grid-list__item-body-actions::before, .fd-grid-list .fd-grid-list__item-body-actions::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+.fd-grid-list .fd-grid-list__item-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;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  width: calc(100% - 3rem - 0.75rem);
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+}
+.fd-grid-list .fd-grid-list__item-header::before, .fd-grid-list .fd-grid-list__item-header::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+.fd-grid-list .fd-grid-list__item-image {
+  margin-right: 0.75rem;
+}
+[dir=rtl] .fd-grid-list .fd-grid-list__item-image, .fd-grid-list .fd-grid-list__item-image[dir=rtl] {
+  margin-right: 0;
+  margin-left: 0.75rem;
+}
+.fd-grid-list .fd-grid-list__item-title {
+  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: normal;
+  font-size: var(--sapFontLargeSize);
+  color: var(--sapList_TextColor);
+  margin-top: 0.125rem;
+}
+.fd-grid-list .fd-grid-list__item-title::before, .fd-grid-list .fd-grid-list__item-title::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+.fd-grid-list .fd-grid-list__item-subtitle {
+  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: inline-block;
+  color: var(--sapContent_LabelColor);
+  margin-top: 0.5rem;
+  margin-bottom: 0.125rem;
+}
+.fd-grid-list .fd-grid-list__item-subtitle::before, .fd-grid-list .fd-grid-list__item-subtitle::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+.fd-grid-list .fd-grid-list__item-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;
+  color: var(--sapList_TextColor);
+  padding-top: 1rem;
+}
+.fd-grid-list .fd-grid-list__item-content::before, .fd-grid-list .fd-grid-list__item-content::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+.fd-grid-list .fd-grid-list__item-counter {
   color: var(--sapContent_MarkerTextColor);
 }
-.fd-grid-list .fd-grid-list__group-header {
+.fd-grid-list .fd-grid-list__item .fd-grid-list__item-navigation-indicator {
+  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: -1rem;
+  margin-left: 0;
+  width: 2.5rem;
+  color: var(--sapContent_NonInteractiveIconColor);
+}
+[dir=rtl] .fd-grid-list .fd-grid-list__item .fd-grid-list__item-navigation-indicator, .fd-grid-list .fd-grid-list__item .fd-grid-list__item-navigation-indicator[dir=rtl] {
+  margin-right: 0;
+  margin-left: -1rem;
+}
+[dir=rtl] .fd-grid-list .fd-grid-list__item .fd-grid-list__item-navigation-indicator, .fd-grid-list .fd-grid-list__item .fd-grid-list__item-navigation-indicator[dir=rtl] {
+  margin-right: 0;
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.fd-grid-list__group-header {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
   color: var(--sapTextColor);
@@ -19417,98 +19548,52 @@ fd-carousel:focus, fd-carousel.is-focus {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: var(--sapFontHeader5Size);
-  margin-top: 0.75rem;
   height: 2rem;
+  margin-top: 0.75rem;
   color: var(--sapList_GroupHeaderTextColo);
+  font-size: var(--sapFontHeader5Size);
   font-weight: bold;
   line-height: 2rem;
 }
-.fd-grid-list .fd-grid-list__group-header::before, .fd-grid-list .fd-grid-list__group-header::after {
+.fd-grid-list__group-header::before, .fd-grid-list__group-header::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-grid-list .fd-grid-list__group-header:focus, .fd-grid-list .fd-grid-list__group-header.is-focus {
+.fd-grid-list__group-header:focus, .fd-grid-list__group-header.is-focus {
   outline-offset: -0.1875rem;
   outline-width: var(--sapContent_FocusWidth);
   outline-color: var(--sapContent_FocusColor);
   outline-style: var(--sapContent_FocusStyle);
 }
-.fd-grid-list .fd-grid-list__group-header--no-margin {
+.fd-grid-list__group-header--no-margin {
   margin-top: 0;
 }
-.fd-grid-list--mode-single-select .fd-grid-list__item {
-  cursor: pointer;
-}
-.fd-grid-list--mode-single-select .fd-grid-list__item:hover:not(.fd-grid-list__item--link, [aria-selected=true], .is-selected), .fd-grid-list--mode-single-select .fd-grid-list__item.is-hover:not(.fd-grid-list__item--link, [aria-selected=true], .is-selected) {
-  -webkit-box-shadow: 0 0 0 0.0625rem var(--fdGrid_List_Item_Hover_Border_Color);
-          box-shadow: 0 0 0 0.0625rem var(--fdGrid_List_Item_Hover_Border_Color);
-  background-color: var(--sapList_Hover_Background);
-}
-.fd-grid-list--mode-single-select .fd-grid-list__item .fd-grid-list__radio-input {
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-}
-.fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__checkbox-label,
-.fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label, .fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__checkbox-label,
-.fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__radio-label, .fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__checkbox-label,
-.fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__radio-label {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -ms-flex-item-align: inherit;
-      align-self: inherit;
-  color: var(--sapContent_LabelColor);
-}
-.fd-grid-list--mode-single-select .fd-grid-list__item[aria-selected=true], .fd-grid-list--mode-single-select .fd-grid-list__item.is-selected, .fd-grid-list--mode-multi-select .fd-grid-list__item[aria-selected=true], .fd-grid-list--mode-multi-select .fd-grid-list__item.is-selected, .fd-grid-list--mode-single-select-left .fd-grid-list__item[aria-selected=true], .fd-grid-list--mode-single-select-left .fd-grid-list__item.is-selected, .fd-grid-list--mode-single-select-right .fd-grid-list__item[aria-selected=true], .fd-grid-list--mode-single-select-right .fd-grid-list__item.is-selected {
-  -webkit-box-shadow: 0 0 0 0.125rem var(--sapList_SelectionBorderColor);
-          box-shadow: 0 0 0 0.125rem var(--sapList_SelectionBorderColor);
-  background-color: var(--sapList_SelectionBackgroundColor);
-}
-.fd-grid-list--mode-single-select .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link:hover, .fd-grid-list--mode-single-select .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link.is-hover, .fd-grid-list--mode-single-select .fd-grid-list__item.is-selected.fd-grid-list__item--link:hover, .fd-grid-list--mode-single-select .fd-grid-list__item.is-selected.fd-grid-list__item--link.is-hover, .fd-grid-list--mode-multi-select .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link:hover, .fd-grid-list--mode-multi-select .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link.is-hover, .fd-grid-list--mode-multi-select .fd-grid-list__item.is-selected.fd-grid-list__item--link:hover, .fd-grid-list--mode-multi-select .fd-grid-list__item.is-selected.fd-grid-list__item--link.is-hover, .fd-grid-list--mode-single-select-left .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link:hover, .fd-grid-list--mode-single-select-left .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link.is-hover, .fd-grid-list--mode-single-select-left .fd-grid-list__item.is-selected.fd-grid-list__item--link:hover, .fd-grid-list--mode-single-select-left .fd-grid-list__item.is-selected.fd-grid-list__item--link.is-hover, .fd-grid-list--mode-single-select-right .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link:hover, .fd-grid-list--mode-single-select-right .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link.is-hover, .fd-grid-list--mode-single-select-right .fd-grid-list__item.is-selected.fd-grid-list__item--link:hover, .fd-grid-list--mode-single-select-right .fd-grid-list__item.is-selected.fd-grid-list__item--link.is-hover {
-  -webkit-box-shadow: 0 0 0 0.125rem var(--sapList_SelectionBorderColor);
-          box-shadow: 0 0 0 0.125rem var(--sapList_SelectionBorderColor);
-  background-color: var(--sapList_SelectionBackgroundColor);
+.fd-grid-list__filter,
+.fd-grid-list__filter * {
+  color: var(--sapList_TextColor) !important;
 }
-.fd-grid-list--mode-single-select .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link:active, .fd-grid-list--mode-single-select .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link.is-active, .fd-grid-list--mode-single-select .fd-grid-list__item.is-selected.fd-grid-list__item--link:active, .fd-grid-list--mode-single-select .fd-grid-list__item.is-selected.fd-grid-list__item--link.is-active, .fd-grid-list--mode-multi-select .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link:active, .fd-grid-list--mode-multi-select .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link.is-active, .fd-grid-list--mode-multi-select .fd-grid-list__item.is-selected.fd-grid-list__item--link:active, .fd-grid-list--mode-multi-select .fd-grid-list__item.is-selected.fd-grid-list__item--link.is-active, .fd-grid-list--mode-single-select-left .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link:active, .fd-grid-list--mode-single-select-left .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link.is-active, .fd-grid-list--mode-single-select-left .fd-grid-list__item.is-selected.fd-grid-list__item--link:active, .fd-grid-list--mode-single-select-left .fd-grid-list__item.is-selected.fd-grid-list__item--link.is-active, .fd-grid-list--mode-single-select-right .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link:active, .fd-grid-list--mode-single-select-right .fd-grid-list__item[aria-selected=true].fd-grid-list__item--link.is-active, .fd-grid-list--mode-single-select-right .fd-grid-list__item.is-selected.fd-grid-list__item--link:active, .fd-grid-list--mode-single-select-right .fd-grid-list__item.is-selected.fd-grid-list__item--link.is-active {
-  background-color: var(--sapList_Active_Background);
-}
-.fd-grid-list--mode-single-select-right .fd-grid-list__radio-input {
-  right: 1rem;
-}
-.fd-grid-list--mode-single-select-right .fd-grid-list__radio-label {
-  -webkit-box-ordinal-group: 2;
-      -ms-flex-order: 1;
-          order: 1;
-  margin-left: 0.5rem !important;
-}
-[dir=rtl] .fd-grid-list--mode-single-select-right .fd-grid-list__radio-label, .fd-grid-list--mode-single-select-right .fd-grid-list__radio-label[dir=rtl] {
-  margin-right: 0.5rem !important;
-  margin-left: 0 !important;
-}
-.fd-grid-list .fd-grid-list__filter[class*=active] {
-  color: var(--sapHighlightTextColor);
-}
-.fd-grid-list .fd-grid-list__filter[class*=active]:focus, .fd-grid-list .fd-grid-list__filter[class*=active].is-focus {
+.fd-grid-list__filter[class*=active]:focus, .fd-grid-list__filter[class*=active].is-focus {
   outline-offset: -0.1875rem;
   outline-width: var(--sapContent_FocusWidth);
   outline-color: var(--sapContent_FocusColor);
   outline-style: var(--sapContent_FocusStyle);
 }
-.fd-grid-list .fd-grid-list__filter-button {
-  color: var(--sapHighlightTextColor);
+.fd-grid-list__filter[class*=active],
+.fd-grid-list__filter[class*=active] * {
+  color: var(--sapInfobar_TextColor) !important;
 }
-.fd-grid-list .fd-grid-list__filter-button:hover, .fd-grid-list .fd-grid-list__filter-button.is-hover {
-  color: var(--sapButton_TextColor);
+.fd-grid-list__filter .fd-grid-list__filter-button:hover, .fd-grid-list__filter .fd-grid-list__filter-button.is-hover {
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
 }
-.fd-grid-list .fd-grid-list__filter-button:active:hover, .fd-grid-list .fd-grid-list__filter-button:active.is-hover, .fd-grid-list .fd-grid-list__filter-button.is-active:hover, .fd-grid-list .fd-grid-list__filter-button.is-active.is-hover {
-  color: var(--sapHighlightTextColor);
+.fd-grid-list__filter .fd-grid-list__filter-button:active, .fd-grid-list__filter .fd-grid-list__filter-button.is-active {
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
 }
 .fd-grid-list__more {
   font-size: var(--sapFontSize);
@@ -19524,7 +19609,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   cursor: pointer;
   padding: 0.813rem;
   background-color: var(--sapGroup_ContentBackground);
-  border-radius: var(--sapElement_BorderCornerRadius);
+  border-radius: var(--fdGrid_List_Item_Border_Radius);
   -webkit-box-shadow: var(--sapContent_Shadow0);
           box-shadow: var(--sapContent_Shadow0);
   text-align: center;
@@ -19540,7 +19625,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   outline-color: var(--sapContent_FocusColor);
   outline-style: var(--sapContent_FocusStyle);
 }
-.fd-grid-list__more .fd-grid-list__more-title {
+.fd-grid-list__more-title {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
   color: var(--sapTextColor);
@@ -19553,7 +19638,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   border: 0;
   font-weight: bold;
 }
-.fd-grid-list__more .fd-grid-list__more-title::before, .fd-grid-list__more .fd-grid-list__more-title::after {
+.fd-grid-list__more-title::before, .fd-grid-list__more-title::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
   font-size: inherit;
@@ -19576,17 +19661,16 @@ fd-carousel:focus, fd-carousel.is-focus {
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-grid-list__more .fd-grid-list__more-title, .fd-grid-list__more-description {
+.fd-grid-list__more-title, .fd-grid-list__more-description {
   color: var(--sapLink_Visited_Color);
 }
 .fd-grid-list__more:hover, .fd-grid-list__more.is-hover {
   background-color: var(--sapList_Hover_Background);
 }
-.fd-grid-list__more:active {
+.fd-grid-list__more:active, .fd-grid-list__more.is-active {
   background-color: var(--sapList_Active_Background);
 }
-.fd-grid-list__more:active .fd-grid-list__more-title,
-.fd-grid-list__more:active .fd-grid-list__more-description {
+.fd-grid-list__more:active-title, .fd-grid-list__more:active-description, .fd-grid-list__more.is-active-title, .fd-grid-list__more.is-active-description {
   color: var(--sapList_Active_TextColor);
 }
 .fd-grid-list__footer {
@@ -19600,6 +19684,8 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding: 0;
   margin: 0;
   border: 0;
+  font-size: var(--sapFontSize);
+  font-family: var(--sapFontFamily);
   color: var(--sapList_FooterTextColor);
 }
 .fd-grid-list__footer::before, .fd-grid-list__footer::after {
@@ -19629,7 +19715,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   bottom: 0;
   width: 0.375rem;
   display: block;
-  border-radius: var(--sapElement_BorderCornerRadius) 0 0 var(--sapElement_BorderCornerRadius);
+  border-radius: var(--fdGrid_List_Item_Border_Radius) 0 0 var(--fdGrid_List_Item_Border_Radius);
 }
 .fd-grid-list__highlight::before, .fd-grid-list__highlight::after {
   -webkit-box-sizing: inherit;
@@ -19642,99 +19728,64 @@ fd-carousel:focus, fd-carousel.is-focus {
 .fd-grid-list__highlight--positive {
   background-color: var(--sapSuccessBorderColor);
 }
-.fd-grid-list__highlight {
-  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;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 0.375rem;
-  display: block;
-  border-radius: var(--sapElement_BorderCornerRadius) 0 0 var(--sapElement_BorderCornerRadius);
+.fd-grid-list__highlight--negative {
+  background-color: var(--sapErrorBorderColor);
 }
-.fd-grid-list__highlight::before, .fd-grid-list__highlight::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
+.fd-grid-list__highlight--critical {
+  background-color: var(--sapWarningBorderColor);
 }
-[dir=rtl] .fd-grid-list__highlight, .fd-grid-list__highlight[dir=rtl] {
-  right: 0;
+.fd-grid-list__highlight--neutral {
+  background-color: var(--sapNeutralBorderColor);
 }
-.fd-grid-list__highlight--negative {
-  background-color: var(--sapErrorBorderColor);
+.fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__checkbox-label,
+.fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label, .fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__checkbox-label,
+.fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__radio-label, .fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__checkbox-label,
+.fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__radio-label {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  color: var(--sapContent_LabelColor);
 }
-.fd-grid-list__highlight {
-  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;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 0.375rem;
-  display: block;
-  border-radius: var(--sapElement_BorderCornerRadius) 0 0 var(--sapElement_BorderCornerRadius);
+.fd-grid-list--mode-single-select .fd-grid-list__item {
+  cursor: pointer;
 }
-.fd-grid-list__highlight::before, .fd-grid-list__highlight::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
+.fd-grid-list--mode-single-select .fd-grid-list__item:hover, .fd-grid-list--mode-single-select .fd-grid-list__item.is-hover {
+  -webkit-box-shadow: 0 0 0 0.0625rem var(--fdGrid_List_Item_Hover_Border_Color);
+          box-shadow: 0 0 0 0.0625rem var(--fdGrid_List_Item_Hover_Border_Color);
+  background-color: var(--sapList_Hover_Background);
 }
-[dir=rtl] .fd-grid-list__highlight, .fd-grid-list__highlight[dir=rtl] {
-  right: 0;
+.fd-grid-list--mode-single-select .fd-grid-list__item[aria-selected=true], .fd-grid-list--mode-single-select .fd-grid-list__item.is-selected {
+  -webkit-box-shadow: 0 0 0 0.125rem var(--sapList_SelectionBorderColor);
+          box-shadow: 0 0 0 0.125rem var(--sapList_SelectionBorderColor);
+  background-color: var(--sapList_SelectionBackgroundColor);
 }
-.fd-grid-list__highlight--critical {
-  background-color: var(--sapWarningBorderColor);
+.fd-grid-list--mode-single-select .fd-grid-list__item[aria-selected=true]:hover, .fd-grid-list--mode-single-select .fd-grid-list__item[aria-selected=true].is-hover, .fd-grid-list--mode-single-select .fd-grid-list__item.is-selected:hover, .fd-grid-list--mode-single-select .fd-grid-list__item.is-selected.is-hover {
+  background-color: var(--sapList_Hover_SelectionBackground);
 }
-.fd-grid-list__highlight {
-  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;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 0.375rem;
-  display: block;
-  border-radius: var(--sapElement_BorderCornerRadius) 0 0 var(--sapElement_BorderCornerRadius);
+.fd-grid-list--mode-single-select .fd-grid-list__item .fd-grid-list__radio-input {
+  width: 100%;
+  height: 100%;
+  z-index: -1;
 }
-.fd-grid-list__highlight::before, .fd-grid-list__highlight::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
+.fd-grid-list--mode-single-select .fd-grid-list__item .fd-grid-list__radio-label {
+  display: none;
 }
-[dir=rtl] .fd-grid-list__highlight, .fd-grid-list__highlight[dir=rtl] {
-  right: 0;
+.fd-grid-list--mode-single-select-right .fd-grid-list__radio-input {
+  right: 1rem;
 }
-.fd-grid-list__highlight--neutral {
-  background-color: var(--sapNeutralBorderColor);
+.fd-grid-list--mode-single-select-right .fd-grid-list__radio-label {
+  margin-left: 0.5rem !important;
+  -webkit-box-ordinal-group: 2;
+      -ms-flex-order: 1;
+          order: 1;
 }
-[dir=rtl] .fd-grid-list__btn-navigation, .fd-grid-list__btn-navigation[dir=rtl] {
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
+[dir=rtl] .fd-grid-list--mode-single-select-right .fd-grid-list__radio-label, .fd-grid-list--mode-single-select-right .fd-grid-list__radio-label[dir=rtl] {
+  margin-right: 0.5rem !important;
+  margin-left: 0;
 }
 /* Fully expanded pseudo element. Requires parent to have specified position */
 /* stylelint-disable */
@@ -31845,6 +31896,10 @@ places the element far left of the screen. so it is not visible.
   margin-right: 0.5rem;
   margin-left: 0;
 }
+.fd-shellbar__logo, .fd-shellbar__product, .fd-shellbar__subtitle {
+  display: inline-block;
+  vertical-align: middle;
+}
 .fd-shellbar__title {
   font-weight: bold;
   vertical-align: middle;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fundamental-styles/theming-preview",
-    "version": "0.24.0-rc.44",
+    "version": "0.24.0-rc.47",
     "license": "Apache-2.0",
     "homepage": "https://sap.github.io/fundamental-styles/",
     "description": "Fundamental Library Styles - Theming Package Preview",
@@ -9,7 +9,7 @@
       "url": "https://github.com/SAP/fundamental-styles"
     },
     "dependencies": {
-        "fundamental-styles": "0.24.0-rc.44"
+        "fundamental-styles": "0.24.0-rc.47"
     }
   }