@fundamental-styles/theming-preview 0.24.0-rc.70 → 0.24.0-rc.73

package/fundamental-styles.css

@@ -1,7 +1,7 @@
 
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.70
+ * Fundamental Library Styles v0.24.0-rc.73
  * 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)
  */
@@ -6754,41 +6754,59 @@
                 .fd-calendar__text
 */
 .fd-calendar .fd-calendar__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;
   overflow: hidden;
   position: relative;
   height: 2.75rem;
   margin: 0.0625rem;
   min-width: 2.125rem;
-  border-radius: var(--fdCalendar_BorderCornerRadius);
+  border-radius: var(--fdCalendar_Border_Radius);
   background-color: var(--sapLegend_WorkingBackground);
   -webkit-box-flex: 1;
       -ms-flex: 1 1 0.375rem;
           flex: 1 1 0.375rem;
   cursor: pointer;
 }
-.fd-calendar .fd-calendar__item--side-helper {
+.fd-calendar .fd-calendar__item::before, .fd-calendar .fd-calendar__item::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+.fd-calendar .fd-calendar__item:hover, .fd-calendar .is-hover.fd-calendar__item {
+  background-color: var(--sapList_Hover_Background);
+}
+.fd-calendar__content--dates .fd-calendar__item--side-helper {
   -ms-flex-item-align: center;
       align-self: center;
   pointer-events: none;
   height: 1.875rem;
   background-color: var(--sapList_Background);
 }
-.fd-calendar .fd-calendar__item--other-month {
+.fd-calendar__content--dates .fd-calendar__item--other-month {
   background-color: var(--sapList_Background);
 }
-.fd-calendar .fd-calendar__item--other-month:hover, .fd-calendar .is-hover.fd-calendar__item--other-month {
+.fd-calendar__content--dates .fd-calendar__item--other-month:hover, .fd-calendar__content--dates .is-hover.fd-calendar__item--other-month {
   background-color: var(--sapList_Hover_Background);
 }
-.fd-calendar .fd-calendar__item--weekend {
+.fd-calendar__content--dates .fd-calendar__item--weekend {
   background-color: var(--sapLegend_NonWorkingBackground);
 }
-.fd-calendar .fd-calendar__item--weekend:hover, .fd-calendar .is-hover.fd-calendar__item--weekend {
+.fd-calendar__content--dates .fd-calendar__item--weekend:hover, .fd-calendar__content--dates .is-hover.fd-calendar__item--weekend {
   background-color: var(--sapList_Hover_Background);
 }
-.fd-calendar .fd-calendar__item--range.fd-calendar__item--current, .fd-calendar .fd-calendar__item--current {
+.fd-calendar .fd-calendar__item--current, .fd-calendar__content--dates .fd-calendar__item--range.fd-calendar__item--current {
   border: solid medium var(--sapLegend_CurrentDateTime) !important;
 }
-.fd-calendar .fd-calendar__item--current:active::after, .fd-calendar .is-active.fd-calendar__item--current::after {
+.fd-calendar .fd-calendar__item--current:active::after, .fd-calendar__content--dates .fd-calendar__item--range.fd-calendar__item--current:active::after, .fd-calendar .is-active.fd-calendar__item--current::after, .fd-calendar__content--dates .is-active.fd-calendar__item--range.fd-calendar__item--current::after {
   border: var(--fdCalendar_Active_Item_Border);
   content: " ";
   position: absolute;
@@ -6797,41 +6815,41 @@
   right: auto;
   width: calc(100% - 0.125rem);
   height: calc(100% - 0.125rem);
-  border-radius: calc(var(--fdCalendar_BorderCornerRadius) / 2);
+  border-radius: calc(var(--fdCalendar_Border_Radius) / 2);
 }
-[dir=rtl] .fd-calendar .fd-calendar__item--current:active::after, .fd-calendar [dir=rtl] .fd-calendar__item--current:active::after, .fd-calendar .fd-calendar__item--current:active::after[dir=rtl], [dir=rtl] .fd-calendar .is-active.fd-calendar__item--current::after, .fd-calendar [dir=rtl] .is-active.fd-calendar__item--current::after, .fd-calendar .is-active.fd-calendar__item--current::after[dir=rtl] {
+[dir=rtl] .fd-calendar .fd-calendar__item--current:active::after, .fd-calendar [dir=rtl] .fd-calendar__item--current:active::after, [dir=rtl] .fd-calendar__content--dates .fd-calendar__item--range.fd-calendar__item--current:active::after, .fd-calendar__content--dates [dir=rtl] .fd-calendar__item--range.fd-calendar__item--current:active::after, .fd-calendar .fd-calendar__item--current:active::after[dir=rtl], .fd-calendar__content--dates .fd-calendar__item--range.fd-calendar__item--current:active::after[dir=rtl], [dir=rtl] .fd-calendar .is-active.fd-calendar__item--current::after, .fd-calendar [dir=rtl] .is-active.fd-calendar__item--current::after, [dir=rtl] .fd-calendar__content--dates .is-active.fd-calendar__item--range.fd-calendar__item--current::after, .fd-calendar__content--dates [dir=rtl] .is-active.fd-calendar__item--range.fd-calendar__item--current::after, .fd-calendar .is-active.fd-calendar__item--current::after[dir=rtl], .fd-calendar__content--dates .is-active.fd-calendar__item--range.fd-calendar__item--current::after[dir=rtl] {
   left: auto;
   right: 0.0625rem;
 }
-.fd-calendar .fd-calendar__item:active, .fd-calendar .fd-calendar__item.is-active {
+.fd-calendar__content--dates .fd-calendar__item:active, .fd-calendar__content--dates .fd-calendar__item.is-active {
   background-color: var(--sapContent_Selected_Background);
   border: var(--fdCalendar_Active_Item_Border);
   font-weight: var(--fdCalendar_Active_Item_Font_Weight);
 }
-.fd-calendar .fd-calendar__item:hover:active, .fd-calendar .fd-calendar__item.is-active:hover, .fd-calendar .is-hover.fd-calendar__item:active, .fd-calendar .is-hover.fd-calendar__item.is-active {
+.fd-calendar__content--dates .fd-calendar__item:hover:active, .fd-calendar__content--dates .fd-calendar__item.is-active:hover, .fd-calendar__content--dates .is-hover.fd-calendar__item:active, .fd-calendar__content--dates .is-hover.fd-calendar__item.is-active {
   background-color: var(--fdCalendar_Item_Active_Background_Hover);
 }
-.fd-calendar .fd-calendar__item:focus:active, .fd-calendar .fd-calendar__item.is-active:focus, .fd-calendar .is-focus.fd-calendar__item:active, .fd-calendar .is-focus.fd-calendar__item.is-active {
+.fd-calendar__content--dates .fd-calendar__item:focus:active, .fd-calendar__content--dates .fd-calendar__item.is-active:focus, .fd-calendar__content--dates .is-focus.fd-calendar__item:active, .fd-calendar__content--dates .is-focus.fd-calendar__item.is-active {
   z-index: 5;
   -webkit-box-shadow: none;
           box-shadow: none;
   outline-color: var(--fdCalendar_Active_Focus_Item_Outline_Color);
 }
-.fd-calendar .fd-calendar__item--range {
+.fd-calendar__content--dates .fd-calendar__item--range {
   border: solid 0.0625rem var(--sapList_SelectionBorderColor);
   background-color: var(--sapList_SelectionBackgroundColor);
 }
-.fd-calendar .fd-calendar__item--range:hover, .fd-calendar .is-hover.fd-calendar__item--range {
+.fd-calendar__content--dates .fd-calendar__item--range:hover, .fd-calendar__content--dates .is-hover.fd-calendar__item--range {
   background-color: var(--sapList_Hover_SelectionBackground);
 }
-.fd-calendar__item[aria-disabled=true], .fd-calendar__item.is-disabled, .fd-calendar__item:disabled {
+.fd-calendar__content--dates .fd-calendar__item[aria-disabled=true], .fd-calendar__content--dates .fd-calendar__item.is-disabled, .fd-calendar__content--dates .fd-calendar__item:disabled {
   pointer-events: none;
   opacity: 0.4;
 }
-.fd-calendar__item[aria-disabled=true]:hover, .fd-calendar__item.is-disabled:hover, .fd-calendar__item:hover:disabled {
+.fd-calendar__content--dates .fd-calendar__item[aria-disabled=true]:hover, .fd-calendar__content--dates .fd-calendar__item.is-disabled:hover, .fd-calendar__content--dates .fd-calendar__item:hover:disabled {
   cursor: not-allowed;
 }
-.fd-calendar__item:focus, .fd-calendar__item.is-focus {
+.fd-calendar__content--dates .fd-calendar__item:focus, .fd-calendar__content--dates .fd-calendar__item.is-focus {
   -webkit-box-shadow: none;
           box-shadow: none;
   outline-offset: -0.1875rem;
@@ -6881,7 +6899,7 @@
   width: 20rem;
   padding: 1rem;
   background-color: var(--sapList_Background);
-  border-radius: var(--fdCalendar_BorderCornerRadius);
+  border-radius: var(--fdCalendar_Border_Radius);
 }
 .fd-calendar::before, .fd-calendar::after {
   -webkit-box-sizing: inherit;
@@ -7021,11 +7039,24 @@
   border: none;
   -webkit-box-shadow: none;
           box-shadow: none;
-  border-radius: 0;
+  border-radius: var(--fdCalendar_Month_Year_Item_Border_Radius);
 }
 .fd-calendar__content--years .fd-calendar__item .fd-calendar__text, .fd-calendar__content--months .fd-calendar__item .fd-calendar__text {
   color: inherit;
 }
+.fd-calendar__content--dates .fd-calendar__item:focus, .fd-calendar__content--dates .fd-calendar__item.is-focus {
+  z-index: 5;
+}
+.fd-calendar__content--dates .fd-calendar__item:active .fd-calendar__text, .fd-calendar__content--dates .fd-calendar__item.is-active .fd-calendar__text {
+  color: var(--sapContent_Selected_TextColor);
+}
+.fd-calendar__content--dates .fd-calendar__item--side-helper .fd-calendar__text {
+  color: var(--sapContent_LabelColor);
+  font-size: var(--sapFontSmallSize);
+}
+.fd-calendar__content--dates .fd-calendar__item--other-month .fd-calendar__text {
+  color: var(--sapContent_LabelColor);
+}
 .fd-calendar__content--screen-reader-only {
   position: absolute;
   clip: rect(0 0 0 0);
@@ -7095,42 +7126,9 @@
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-calendar__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;
-}
-.fd-calendar__item::before, .fd-calendar__item::after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-  font-size: inherit;
-}
-.fd-calendar__item:hover, .fd-calendar__item.is-hover {
-  background-color: var(--sapList_Hover_Background);
-}
-.fd-calendar__item:focus, .fd-calendar__item.is-focus {
-  z-index: 5;
-}
 .fd-calendar .fd-calendar__item {
   display: inline-block;
 }
-.fd-calendar .fd-calendar__item:active .fd-calendar__text, .fd-calendar .fd-calendar__item.is-active .fd-calendar__text {
-  color: var(--sapContent_Selected_TextColor);
-}
-.fd-calendar .fd-calendar__item--side-helper .fd-calendar__text {
-  color: var(--sapContent_LabelColor);
-  font-size: var(--sapFontSmallSize);
-}
-.fd-calendar .fd-calendar__item--other-month .fd-calendar__text {
-  color: var(--sapContent_LabelColor);
-}
 .fd-calendar .fd-calendar__item--current .fd-calendar__text::before {
   content: "";
   position: absolute;
@@ -8453,11 +8451,6 @@
 /* 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 */
-fd-carousel:focus, fd-carousel.is-focus {
-  z-index: 5;
-  outline: 0.0625rem var(--sapContent_FocusStyle);
-}
 .fd-carousel {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -8477,9 +8470,9 @@ fd-carousel:focus, fd-carousel.is-focus {
       -ms-flex-direction: column;
           flex-direction: column;
   width: 100%;
-  min-width: 11rem;
-  max-width: 100%;
+  min-width: 15.5rem;
   height: 100%;
+  max-width: 100%;
 }
 .fd-carousel::before, .fd-carousel::after {
   -webkit-box-sizing: inherit;
@@ -8489,7 +8482,11 @@ fd-carousel:focus, fd-carousel.is-focus {
 .fd-carousel:hover .fd-carousel__content .fd-carousel__button, .fd-carousel.is-hover .fd-carousel__content .fd-carousel__button {
   display: block;
 }
-.fd-carousel__content {
+.fd-carousel:focus, .fd-carousel.is-focus {
+  z-index: 5;
+  outline: 0.0625rem var(--sapContent_FocusStyle);
+}
+.fd-carousel .fd-carousel__content {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
   color: var(--sapTextColor);
@@ -8500,19 +8497,16 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding: 0;
   margin: 0;
   border: 0;
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
-  width: 100%;
-  background: var(--sapBackgroundColor);
+  background: var(--fdCarousel_Content_Background);
   position: relative;
+  overflow: hidden;
 }
-.fd-carousel__content::before, .fd-carousel__content::after {
+.fd-carousel .fd-carousel__content::before, .fd-carousel .fd-carousel__content::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-carousel__content .fd-carousel__button.fd-button {
+.fd-carousel .fd-carousel__content .fd-carousel__button {
   -webkit-box-shadow: var(--sapContent_Shadow1);
           box-shadow: var(--sapContent_Shadow1);
   position: absolute;
@@ -8522,24 +8516,21 @@ fd-carousel:focus, fd-carousel.is-focus {
           transform: translateY(-50%);
   display: none;
 }
-.fd-carousel__content .fd-carousel__button.fd-button.fd-carousel__button--left {
+.fd-carousel .fd-carousel__content .fd-carousel__button--left {
   left: 0.5rem;
 }
-[dir=rtl] .fd-carousel__content .fd-carousel__button.fd-button.fd-carousel__button--left, .fd-carousel__content .fd-carousel__button.fd-button.fd-carousel__button--left[dir=rtl] {
-  left: initial;
+[dir=rtl] .fd-carousel .fd-carousel__content .fd-carousel__button--left, .fd-carousel .fd-carousel__content .fd-carousel__button--left[dir=rtl] {
+  left: auto;
   right: 0.5rem;
 }
-.fd-carousel__content .fd-carousel__button.fd-button.fd-carousel__button--right {
+.fd-carousel .fd-carousel__content .fd-carousel__button--right {
   right: 0.5rem;
 }
-[dir=rtl] .fd-carousel__content .fd-carousel__button.fd-button.fd-carousel__button--right, .fd-carousel__content .fd-carousel__button.fd-button.fd-carousel__button--right[dir=rtl] {
-  right: initial;
+[dir=rtl] .fd-carousel .fd-carousel__content .fd-carousel__button--right, .fd-carousel .fd-carousel__content .fd-carousel__button--right[dir=rtl] {
+  right: auto;
   left: 0.5rem;
 }
-.fd-carousel__content--display {
-  overflow: hidden;
-}
-.fd-carousel__content--horizontal {
+.fd-carousel .fd-carousel__content--horizontal .fd-carousel__slides {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8547,6 +8538,29 @@ fd-carousel:focus, fd-carousel.is-focus {
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
+  width: 100%;
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  -ms-touch-action: pan-y;
+      touch-action: pan-y;
+}
+.fd-carousel__slides {
+  min-height: -webkit-fit-content;
+  min-height: -moz-fit-content;
+  min-height: fit-content;
+  -ms-touch-action: pan-x;
+      touch-action: pan-x;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-user-drag: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.fd-carousel__slides-wrapper {
+  overflow: hidden;
+  margin: 0 auto;
 }
 .fd-carousel__item {
   font-size: var(--sapFontSize);
@@ -8600,13 +8614,11 @@ fd-carousel:focus, fd-carousel.is-focus {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  width: 100%;
-  height: 100%;
   min-height: 2.75rem;
   max-height: 3.5rem;
-  background: var(--sapPageFooter_Background);
   padding: 0.375rem 0.5rem;
-  border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
+  background: var(--sapPageFooter_Background);
+  border-top: var(--fdCarousel_Pagination_Border);
 }
 .fd-carousel__page-indicator-container::before, .fd-carousel__page-indicator-container::after {
   -webkit-box-sizing: inherit;
@@ -8615,7 +8627,7 @@ fd-carousel:focus, fd-carousel.is-focus {
 }
 .fd-carousel__page-indicator-container:first-child {
   border-top: none;
-  border-bottom: 0.0625rem solid var(--sapPageFooter_BorderColor);
+  border-bottom: var(--fdCarousel_Pagination_Border);
 }
 .fd-carousel__page-indicators {
   font-size: var(--sapFontSize);
@@ -8637,10 +8649,10 @@ fd-carousel:focus, fd-carousel.is-focus {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  min-width: 9rem;
+  padding: 0.5rem;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
-  min-width: 7rem;
-  padding: 0.5rem 0;
 }
 .fd-carousel__page-indicators::before, .fd-carousel__page-indicators::after {
   -webkit-box-sizing: inherit;
@@ -8663,7 +8675,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   width: var(--fdCarousel_Dot_Size);
   height: var(--fdCarousel_Dot_Size);
   border-radius: 50%;
-  background-color: var(--sapContent_NonInteractiveIconColor);
+  background-color: var(--fdCarousel_Dot_Background);
   border: var(--fdCarousel_Dot_Border);
 }
 .fd-carousel__page-indicator::before, .fd-carousel__page-indicator::after {
@@ -8675,7 +8687,8 @@ fd-carousel:focus, fd-carousel.is-focus {
   margin: 0 0.25rem;
   width: 0.5rem;
   height: 0.5rem;
-  background-color: var(--sapSelectedColor);
+  background-color: var(--fdCarousel_Dot_Selected_Background);
+  border: var(--fdCarousel_Dot_Selected_Border);
 }
 .fd-carousel__text {
   font-size: var(--sapFontSize);
@@ -8699,7 +8712,7 @@ fd-carousel:focus, fd-carousel.is-focus {
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-carousel__button.fd-button {
+.fd-carousel .fd-carousel__button {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8717,37 +8730,24 @@ fd-carousel:focus, fd-carousel.is-focus {
   max-height: 2.125rem;
   border-radius: 50%;
   padding: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
   margin: 0.25rem;
 }
-.fd-carousel__button.fd-button::before {
+.fd-carousel .fd-carousel__button::before {
   left: -0.25rem;
   right: -0.25rem;
-  height: 2.625rem;
-  width: 2.625rem;
+  bottom: -0.25rem;
+  top: -0.25rem;
+  width: auto;
 }
-[dir=rtl] .fd-carousel__button.fd-button > [class*=sap-icon], .fd-carousel__button.fd-button[dir=rtl] > [class*=sap-icon] {
+[dir=rtl] .fd-carousel .fd-carousel__button > [class*=sap-icon], .fd-carousel .fd-carousel__button[dir=rtl] > [class*=sap-icon] {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
-.fd-carousel__button.fd-button:focus, .fd-carousel__button.fd-button.is-focus {
-  z-index: 5;
-  outline-offset: 0.0625rem;
-}
-.fd-carousel__button.fd-button:hover, .fd-carousel__button.fd-button.is-hover {
+.fd-carousel .fd-carousel__button:hover, .fd-carousel .fd-carousel__button.is-hover {
   -webkit-box-shadow: var(--sapContent_Shadow1);
           box-shadow: var(--sapContent_Shadow1);
 }
-.fd-carousel__button.fd-button:active, .fd-carousel__button.fd-button.is-active {
-  outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-  outline-offset: -0.1875rem;
-  outline-offset: 0.0625rem;
-}
-.fd-carousel__button.fd-button:active.fd-button--toggled, .fd-carousel__button.fd-button:active.is-selected, .fd-carousel__button.fd-button.is-active.fd-button--toggled, .fd-carousel__button.fd-button.is-active.is-selected {
-  outline-color: var(--fdButton_Outline_Contrast);
-}
-.fd-carousel--no-navigation .fd-carousel__button.fd-button {
+.fd-carousel--no-navigation .fd-carousel__button {
   display: none;
 }
 .fd-carousel--no-navigation:hover .fd-carousel__content .fd-carousel__button, .fd-carousel--no-navigation.is-hover .fd-carousel__content .fd-carousel__button {
@@ -19442,31 +19442,17 @@ fd-carousel:focus, fd-carousel.is-focus {
   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);
@@ -19512,6 +19498,9 @@ fd-carousel:focus, fd-carousel.is-focus {
   bottom: var(--fdGrid_List_Highlight_Offset);
   top: var(--fdGrid_List_Highlight_Offset);
 }
+.fd-grid-list .fd-grid-list__item--height-auto {
+  height: auto;
+}
 .fd-grid-list .fd-grid-list__item--unread .fd-grid-list__item-body * {
   font-weight: bold;
 }
@@ -19636,16 +19625,18 @@ fd-carousel:focus, fd-carousel.is-focus {
   -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;
+      -ms-flex: 0 0 100%;
+          flex: 0 0 100%;
 }
 .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-header + .fd-grid-list__item-content {
+  padding-top: 1rem;
+}
 .fd-grid-list .fd-grid-list__item-image {
   margin-right: 0.75rem;
 }
@@ -19653,6 +19644,10 @@ fd-carousel:focus, fd-carousel.is-focus {
   margin-right: 0;
   margin-left: 0.75rem;
 }
+.fd-grid-list .fd-grid-list__item-image + .fd-grid-list__item-header,
+.fd-grid-list .fd-grid-list__item-image + .fd-grid-list__item-content {
+  max-width: calc(100% - 3rem - 0.75rem);
+}
 .fd-grid-list .fd-grid-list__item-title {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -19707,7 +19702,6 @@ fd-carousel:focus, fd-carousel.is-focus {
   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;
@@ -19963,6 +19957,31 @@ fd-carousel:focus, fd-carousel.is-focus {
           flex-direction: row;
   color: var(--sapContent_LabelColor);
 }
+.fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__checkbox-label:empty, .fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__checkbox-label.is-empty,
+.fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label:empty,
+.fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label.is-empty, .fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__checkbox-label:empty, .fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__checkbox-label.is-empty,
+.fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__radio-label:empty,
+.fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__radio-label.is-empty, .fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__checkbox-label:empty, .fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__checkbox-label.is-empty,
+.fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__radio-label:empty,
+.fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__radio-label.is-empty {
+  margin-left: -0.5rem;
+}
+[dir=rtl] .fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__checkbox-label:empty, .fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__checkbox-label:empty[dir=rtl], [dir=rtl] .fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__checkbox-label.is-empty, .fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__checkbox-label.is-empty[dir=rtl],
+[dir=rtl] .fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label:empty,
+.fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label:empty[dir=rtl],
+[dir=rtl] .fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label.is-empty,
+.fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label.is-empty[dir=rtl], [dir=rtl] .fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__checkbox-label:empty, .fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__checkbox-label:empty[dir=rtl], [dir=rtl] .fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__checkbox-label.is-empty, .fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__checkbox-label.is-empty[dir=rtl],
+[dir=rtl] .fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__radio-label:empty,
+.fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__radio-label:empty[dir=rtl],
+[dir=rtl] .fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__radio-label.is-empty,
+.fd-grid-list--mode-single-select-left .fd-grid-list__item .fd-grid-list__radio-label.is-empty[dir=rtl], [dir=rtl] .fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__checkbox-label:empty, .fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__checkbox-label:empty[dir=rtl], [dir=rtl] .fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__checkbox-label.is-empty, .fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__checkbox-label.is-empty[dir=rtl],
+[dir=rtl] .fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__radio-label:empty,
+.fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__radio-label:empty[dir=rtl],
+[dir=rtl] .fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__radio-label.is-empty,
+.fd-grid-list--mode-multi-select .fd-grid-list__item .fd-grid-list__radio-label.is-empty[dir=rtl] {
+  margin-right: -0.5rem;
+  margin-left: 0;
+}
 .fd-grid-list--mode-single-select .fd-grid-list__item {
   cursor: pointer;
 }
@@ -19987,18 +20006,21 @@ fd-carousel:focus, fd-carousel.is-focus {
 .fd-grid-list--mode-single-select .fd-grid-list__item .fd-grid-list__radio-label {
   display: none;
 }
-.fd-grid-list--mode-single-select-right .fd-grid-list__radio-input {
+.fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-input {
   right: 1rem;
 }
-.fd-grid-list--mode-single-select-right .fd-grid-list__radio-label {
-  margin-left: 0.5rem !important;
+.fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label {
   -webkit-box-ordinal-group: 2;
       -ms-flex-order: 1;
           order: 1;
 }
-[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;
+.fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label:empty, .fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label.is-empty {
+  margin-left: 0.5rem;
+  margin-right: -0.5rem;
+}
+[dir=rtl] .fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label:empty, .fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label:empty[dir=rtl], [dir=rtl] .fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label.is-empty, .fd-grid-list--mode-single-select-right .fd-grid-list__item .fd-grid-list__radio-label.is-empty[dir=rtl] {
+  margin-right: 0.5rem;
+  margin-left: -0.5rem;
 }
 /* Fully expanded pseudo element. Requires parent to have specified position */
 /* stylelint-disable */
@@ -22525,8 +22547,6 @@ fd-carousel:focus, fd-carousel.is-focus {
       -ms-flex-align: center;
           align-items: center;
   padding: 1rem;
-  -webkit-transform: translateY(-1rem);
-          transform: translateY(-1rem);
   background: var(--fdMessage_Page_Container_Background);
   border-radius: var(--fdMessage_Page_Container_Corner_Radius);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fundamental-styles/theming-preview",
-    "version": "0.24.0-rc.70",
+    "version": "0.24.0-rc.73",
     "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.70"
+        "fundamental-styles": "0.24.0-rc.73"
     }
   }