@fundamental-styles/theming-preview 0.24.0-rc.32 → 0.24.0-rc.35

package/fundamental-styles.css

@@ -1,7 +1,7 @@
 
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.32
+ * Fundamental Library Styles v0.24.0-rc.35
  * 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)
  */
@@ -11990,6 +11990,15 @@ fd-carousel:focus, fd-carousel.is-focus {
   position: relative;
   padding: 0 0.25rem;
 }
+.fd-container > .fd-row {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+  min-width: calc(100% + 0.25rem * 2);
+}
+.fd-container > .fd-row > .fd-col {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
 .fd-container.fd-container--no-horizontal-gap .fd-row, .fd-container.fd-container--no-gap .fd-row {
   margin-left: 0;
   margin-right: 0;
@@ -11998,7 +12007,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding-left: 0;
   padding-right: 0;
 }
-.fd-container.fd-container--no-vertical-gap .fd-row .fd-col, .fd-container.fd-container--no-gap .fd-row .fd-col {
+.fd-container.fd-container--no-vertical-gap > .fd-row > .fd-col, .fd-container.fd-container--no-gap > .fd-row > .fd-col {
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -12006,8 +12015,6 @@ fd-carousel:focus, fd-carousel.is-focus {
   direction: rtl;
 }
 .fd-row {
-  margin-left: -0.25rem;
-  margin-right: -0.25rem;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -12017,14 +12024,11 @@ fd-carousel:focus, fd-carousel.is-focus {
       -ms-flex: 0 0 100%;
           flex: 0 0 100%;
   position: relative;
-  min-width: calc(100% + 0.25rem * 2);
-}
-.fd-row .fd-col {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  min-width: 100%;
 }
 .fd-col {
-  padding: 0 0.25rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
   min-width: 100%;
   max-width: 100%;
 }
@@ -12277,19 +12281,19 @@ fd-carousel:focus, fd-carousel.is-focus {
   .fd-container {
     padding: 0 0.5rem;
   }
-
-  .fd-row {
+  .fd-container > .fd-row {
     margin-left: -0.5rem;
     margin-right: -0.5rem;
     min-width: calc(100% + 0.5rem * 2);
   }
-  .fd-row .fd-col {
+  .fd-container > .fd-row > .fd-col {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
 
   .fd-col {
-    padding: 0 0.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
   }
   .fd-col-md--0 {
     min-width: 0%;
@@ -14571,13 +14575,6 @@ fd-carousel:focus, fd-carousel.is-focus {
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-icon-tab-bar__header--left-offset {
-  padding-left: 3.5rem;
-}
-[dir=rtl] .fd-icon-tab-bar__header--left-offset, .fd-icon-tab-bar__header--left-offset[dir=rtl] {
-  padding-right: 3.5rem;
-  padding-left: 0;
-}
 .fd-icon-tab-bar__panel {
   background: var(--sapBackgroundColor);
 }
@@ -14806,9 +14803,17 @@ fd-carousel:focus, fd-carousel.is-focus {
   z-index: 5;
 }
 .fd-icon-tab-bar__item--single-click .fd-icon-tab-bar__tab:focus .fd-icon-tab-bar__tab-container, .fd-icon-tab-bar__item--single-click .fd-icon-tab-bar__tab.is-focus .fd-icon-tab-bar__tab-container {
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
-  outline-width: var(--sapContent_FocusWidth);
+  position: relative;
+}
+.fd-icon-tab-bar__item--single-click .fd-icon-tab-bar__tab:focus .fd-icon-tab-bar__tab-container::after, .fd-icon-tab-bar__item--single-click .fd-icon-tab-bar__tab.is-focus .fd-icon-tab-bar__tab-container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: block;
+  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 .fd-icon-tab-bar__item--single-click .fd-icon-tab-bar__tab:focus .fd-icon-tab-bar__tag, .fd-icon-tab-bar__item--single-click .fd-icon-tab-bar__tab.is-focus .fd-icon-tab-bar__tag {
   outline: none;
@@ -14847,31 +14852,6 @@ fd-carousel:focus, fd-carousel.is-focus {
   right: auto;
   left: 1.625rem;
 }
-.fd-icon-tab-bar__item.fd-icon-tab-bar__item--overflow {
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  margin: 0;
-}
-.fd-icon-tab-bar__item.fd-icon-tab-bar__item--overflow-left {
-  left: 0;
-}
-[dir=rtl] .fd-icon-tab-bar__item.fd-icon-tab-bar__item--overflow-left, .fd-icon-tab-bar__item.fd-icon-tab-bar__item--overflow-left[dir=rtl] {
-  left: auto;
-  right: 0;
-}
-.fd-icon-tab-bar__item.fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover {
-  position: relative;
-}
-.fd-icon-tab-bar__item.fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body {
-  margin-right: -0.25rem;
-  margin-top: 0.375rem;
-}
-[dir=rtl] .fd-icon-tab-bar__item.fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body, .fd-icon-tab-bar__item.fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body[dir=rtl] {
-  margin-right: 0;
-  margin-left: -0.25rem;
-}
 .fd-icon-tab-bar__item--dnd-preview {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -15101,20 +15081,63 @@ fd-carousel:focus, fd-carousel.is-focus {
 .fd-icon-tab-bar__tab[aria-selected=true] .fd-icon-tab-bar__icon [class*=sap-icon], .fd-icon-tab-bar__tab[aria-selected=true] .fd-icon-tab-bar__icon[class*=sap-icon], .fd-icon-tab-bar__tab.is-selected .fd-icon-tab-bar__icon [class*=sap-icon], .fd-icon-tab-bar__tab.is-selected .fd-icon-tab-bar__icon[class*=sap-icon] {
   color: var(--sapContent_ContrastIconColor);
 }
+.fd-icon-tab-bar__tab:hover .fd-icon-tab-bar__tag, .fd-icon-tab-bar__tab.is-hover .fd-icon-tab-bar__tag {
+  color: var(--fdIcon_Tab_Bar_Label_Hover_Color);
+}
 .fd-icon-tab-bar__tab:focus, .fd-icon-tab-bar__tab.is-focus {
   z-index: 5;
   -webkit-box-shadow: none;
           box-shadow: none;
   outline: none;
 }
-.fd-icon-tab-bar__tab:focus .fd-icon-tab-bar__tag,
-.fd-icon-tab-bar__tab:focus .fd-icon-tab-bar__icon,
-.fd-icon-tab-bar__tab:focus .fd-icon-tab-bar__container--filter, .fd-icon-tab-bar__tab.is-focus .fd-icon-tab-bar__tag,
-.fd-icon-tab-bar__tab.is-focus .fd-icon-tab-bar__icon,
-.fd-icon-tab-bar__tab.is-focus .fd-icon-tab-bar__container--filter {
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
-  outline-width: var(--sapContent_FocusWidth);
+.fd-icon-tab-bar__tab:focus .fd-icon-tab-bar__icon::after, .fd-icon-tab-bar__tab.is-focus .fd-icon-tab-bar__icon::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: block;
+  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+  top: var(--fdIcon_Tab_Bar_Focus_Offset);
+  right: var(--fdIcon_Tab_Bar_Focus_Offset);
+  bottom: var(--fdIcon_Tab_Bar_Focus_Offset);
+  left: var(--fdIcon_Tab_Bar_Focus_Offset);
+  border-radius: var(--fdIcon_Tab_Bar_Icon_Focus_Radius);
+  top: var(--fdIcon_Tab_Bar_Icon_Focus_Offset);
+  right: var(--fdIcon_Tab_Bar_Icon_Focus_Offset);
+  bottom: var(--fdIcon_Tab_Bar_Icon_Focus_Offset);
+  left: var(--fdIcon_Tab_Bar_Icon_Focus_Offset);
+}
+.fd-icon-tab-bar__tab:focus .fd-icon-tab-bar__tag::after, .fd-icon-tab-bar__tab.is-focus .fd-icon-tab-bar__tag::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: block;
+  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+  top: var(--fdIcon_Tab_Bar_Focus_Offset);
+  right: var(--fdIcon_Tab_Bar_Focus_Offset);
+  bottom: var(--fdIcon_Tab_Bar_Focus_Offset);
+  left: var(--fdIcon_Tab_Bar_Focus_Offset);
+  border-radius: var(--fdIcon_Tab_Bar_Text_Focus_Radius);
+}
+.fd-icon-tab-bar__tab:focus .fd-icon-tab-bar__container--filter::before, .fd-icon-tab-bar__tab.is-focus .fd-icon-tab-bar__container--filter::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: block;
+  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+  top: var(--fdIcon_Tab_Bar_Focus_Offset);
+  right: var(--fdIcon_Tab_Bar_Focus_Offset);
+  bottom: var(--fdIcon_Tab_Bar_Focus_Offset);
+  left: var(--fdIcon_Tab_Bar_Focus_Offset);
+  border-radius: var(--fdIcon_Tab_Bar_Text_Focus_Radius);
 }
 .fd-icon-tab-bar__tab-container {
   font-size: var(--sapFontSize);
@@ -15174,6 +15197,12 @@ fd-carousel:focus, fd-carousel.is-focus {
   margin-right: 0.375rem;
   margin-left: 0;
 }
+.fd-icon-tab-bar__tag {
+  position: relative;
+  font-weight: var(--fdIcon_Tab_Bar_Label_Font_Weight);
+  color: var(--fdIcon_Tab_Bar_Label_Color);
+  font-size: var(--fdIcon_Tab_Bar_Label_Font_Size);
+}
 .fd-icon-tab-bar__counter {
   margin-bottom: 0.125rem;
 }
@@ -15202,8 +15231,9 @@ fd-carousel:focus, fd-carousel.is-focus {
   width: 2.75rem;
   height: 2.75rem;
   border-radius: 50%;
+  position: relative;
   border-radius: 50%;
-  border: 0.0625rem solid var(--fdIcon_Tab_Bar_Icon_Border_Color);
+  border: var(--fdIcon_Tab_Bar_Icon_Border_Weight) solid var(--fdIcon_Tab_Bar_Icon_Border_Color);
 }
 .fd-icon-tab-bar__icon::before, .fd-icon-tab-bar__icon::after {
   -webkit-box-sizing: inherit;
@@ -15212,7 +15242,16 @@ fd-carousel:focus, fd-carousel.is-focus {
 }
 .fd-icon-tab-bar__icon [class*=sap-icon], .fd-icon-tab-bar__icon[class*=sap-icon] {
   font-size: 1.25rem;
-  color: var(--sapContent_IconColor);
+  color: var(--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .fd-icon-tab-bar__details {
   font-size: var(--sapFontSize);
@@ -15269,8 +15308,9 @@ fd-carousel:focus, fd-carousel.is-focus {
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 0.875rem;
-  font-size: var(--sapFontSmallSize);
-  color: var(--sapContent_LabelColor);
+  font-weight: var(--fdIcon_Tab_Bar_Label_Font_Weight);
+  font-size: var(--fdIcon_Tab_Bar_Label_Font_Size);
+  color: var(--fdIcon_Tab_Bar_Label_Color);
 }
 .fd-icon-tab-bar__label::before, .fd-icon-tab-bar__label::after {
   -webkit-box-sizing: inherit;
@@ -15416,7 +15456,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   height: 1.5rem;
   cursor: pointer;
   position: relative;
-  border-radius: 0.75rem;
+  border-radius: var(--fdIcon_Tab_Bar_Overflow_Button_Border_Radius);
 }
 .fd-icon-tab-bar__overflow::before, .fd-icon-tab-bar__overflow::after {
   -webkit-box-sizing: inherit;
@@ -15433,6 +15473,8 @@ fd-carousel:focus, fd-carousel.is-focus {
 .fd-icon-tab-bar__overflow:hover, .fd-icon-tab-bar__overflow.is-hover {
   background: var(--sapButton_Hover_Background);
   border: 0.0625rem solid var(--sapButton_Hover_BorderColor);
+  -webkit-box-shadow: var(--fdIcon_Tab_Bar_Overflow_Button_Hover_Box_Shadow);
+          box-shadow: var(--fdIcon_Tab_Bar_Overflow_Button_Hover_Box_Shadow);
 }
 .fd-icon-tab-bar__overflow:hover .fd-icon-tab-bar__overflow-text, .fd-icon-tab-bar__overflow.is-hover .fd-icon-tab-bar__overflow-text {
   color: var(--sapButton_Hover_TextColor);
@@ -15460,11 +15502,11 @@ fd-carousel:focus, fd-carousel.is-focus {
   content: "";
   display: block;
   position: absolute;
-  top: 0.125rem;
-  left: 0.125rem;
-  right: 0.125rem;
-  bottom: 0.125rem;
-  border-radius: 0.75rem;
+  top: var(--fdIcon_Tab_Bar_Overflow_Button_Focus_Offset);
+  left: var(--fdIcon_Tab_Bar_Overflow_Button_Focus_Offset);
+  right: var(--fdIcon_Tab_Bar_Overflow_Button_Focus_Offset);
+  bottom: var(--fdIcon_Tab_Bar_Overflow_Button_Focus_Offset);
+  border-radius: var(--fdIcon_Tab_Bar_Overflow_Button_Border_Radius);
   border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 .fd-icon-tab-bar__overflow:focus:active::after, .fd-icon-tab-bar__overflow:focus.is-active::after, .fd-icon-tab-bar__overflow.is-focus:active::after, .fd-icon-tab-bar__overflow.is-focus.is-active::after {
@@ -15747,6 +15789,7 @@ fd-carousel:focus, fd-carousel.is-focus {
       -ms-flex-pack: center;
           justify-content: center;
   height: 1rem;
+  padding: 0 0.5rem;
 }
 .fd-icon-tab-bar__icon-separator::before, .fd-icon-tab-bar__icon-separator::after {
   -webkit-box-sizing: inherit;
@@ -16142,9 +16185,6 @@ fd-carousel:focus, fd-carousel.is-focus {
   margin: 0;
   content: none;
 }
-.fd-icon-tab-bar--icon .fd-icon-tab-bar__item--negative .fd-icon-tab-bar__label {
-  color: var(--fdIcon_Tab_Bar_Semantic_Color_Negative);
-}
 .fd-icon-tab-bar--icon .fd-icon-tab-bar__item--negative .fd-icon-tab-bar__label::before {
   margin-right: 0.5rem;
   content: "\e1ec";
@@ -16167,9 +16207,6 @@ fd-carousel:focus, fd-carousel.is-focus {
   margin: 0;
   content: none;
 }
-.fd-icon-tab-bar--icon .fd-icon-tab-bar__item--positive .fd-icon-tab-bar__label {
-  color: var(--fdIcon_Tab_Bar_Semantic_Color_Positive);
-}
 .fd-icon-tab-bar--icon .fd-icon-tab-bar__item--positive .fd-icon-tab-bar__label::before {
   margin-right: 0.5rem;
   content: "\e1c1";
@@ -16192,9 +16229,6 @@ fd-carousel:focus, fd-carousel.is-focus {
   margin: 0;
   content: none;
 }
-.fd-icon-tab-bar--icon .fd-icon-tab-bar__item--critical .fd-icon-tab-bar__label {
-  color: var(--fdIcon_Tab_Bar_Semantic_Color_Critical);
-}
 .fd-icon-tab-bar--icon .fd-icon-tab-bar__item--critical .fd-icon-tab-bar__label::before {
   margin-right: 0.5rem;
   content: "\e053";
@@ -16217,9 +16251,6 @@ fd-carousel:focus, fd-carousel.is-focus {
   margin: 0;
   content: none;
 }
-.fd-icon-tab-bar--icon .fd-icon-tab-bar__item--informative .fd-icon-tab-bar__label {
-  color: var(--fdIcon_Tab_Bar_Semantic_Color_Informative);
-}
 .fd-icon-tab-bar--icon .fd-icon-tab-bar__item--informative .fd-icon-tab-bar__label::before {
   margin-right: 0.5rem;
   content: "\e289";
@@ -16334,6 +16365,9 @@ fd-carousel:focus, fd-carousel.is-focus {
 .fd-icon-tab-bar--navigation .fd-icon-tab-bar__item {
   color: var(--sapShell_Navigation_TextColor);
 }
+.fd-icon-tab-bar--navigation .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__overflow {
+  border-color: transparent;
+}
 .fd-icon-tab-bar--navigation .fd-icon-tab-bar__tab [class*=sap-icon] {
   color: var(--sapShell_Navigation_TextColor);
   margin-right: 0.5rem;
@@ -16367,19 +16401,38 @@ fd-carousel:focus, fd-carousel.is-focus {
   z-index: 5;
 }
 .fd-icon-tab-bar--navigation .fd-icon-tab-bar__tab:focus .fd-icon-tab-bar__tab-container, .fd-icon-tab-bar--navigation .fd-icon-tab-bar__tab.is-focus .fd-icon-tab-bar__tab-container {
-  outline-color: var(--sapShell_Navigation_TextColor);
-  outline-style: var(--sapContent_FocusStyle);
-  outline-width: var(--sapContent_FocusWidth);
-  outline-offset: 0.0625rem;
+  position: relative;
+}
+.fd-icon-tab-bar--navigation .fd-icon-tab-bar__tab:focus .fd-icon-tab-bar__tab-container::after, .fd-icon-tab-bar--navigation .fd-icon-tab-bar__tab.is-focus .fd-icon-tab-bar__tab-container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: block;
+  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapShell_Navigation_TextColor);
+  top: var(--fdIcon_Tab_Bar_Focus_Offset);
+  right: var(--fdIcon_Tab_Bar_Focus_Offset);
+  bottom: var(--fdIcon_Tab_Bar_Focus_Offset);
+  left: var(--fdIcon_Tab_Bar_Focus_Offset);
 }
 .fd-icon-tab-bar--navigation .fd-icon-tab-bar__tab:focus .fd-icon-tab-bar__tab-container .fd-icon-tab-bar__tag, .fd-icon-tab-bar--navigation .fd-icon-tab-bar__tab.is-focus .fd-icon-tab-bar__tab-container .fd-icon-tab-bar__tag {
   outline: none;
 }
-.fd-icon-tab-bar--navigation .fd-icon-tab-bar__tab:focus .fd-icon-tab-bar__tag, .fd-icon-tab-bar--navigation .fd-icon-tab-bar__tab.is-focus .fd-icon-tab-bar__tag {
-  outline-color: var(--sapShell_Navigation_TextColor);
-  outline-style: var(--sapContent_FocusStyle);
-  outline-width: var(--sapContent_FocusWidth);
-  outline-offset: 0.0625rem;
+.fd-icon-tab-bar--navigation .fd-icon-tab-bar__tab:focus .fd-icon-tab-bar__tag::after, .fd-icon-tab-bar--navigation .fd-icon-tab-bar__tab.is-focus .fd-icon-tab-bar__tag::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: block;
+  border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapShell_Navigation_TextColor);
+  top: var(--fdIcon_Tab_Bar_Focus_Offset);
+  right: var(--fdIcon_Tab_Bar_Focus_Offset);
+  bottom: var(--fdIcon_Tab_Bar_Focus_Offset);
+  left: var(--fdIcon_Tab_Bar_Focus_Offset);
 }
 .fd-icon-tab-bar--navigation .fd-icon-tab-bar__tab .fd-icon-tab-bar__arrow [class*=sap-icon] {
   margin: 0;
@@ -16523,6 +16576,75 @@ fd-carousel:focus, fd-carousel.is-focus {
     padding-right: 3rem;
   }
 }
+.fd-icon-tab-bar .fd-icon-tab-bar__item--overflow,
+.fd-icon-tab-bar--filter .fd-icon-tab-bar__item--overflow,
+.fd-icon-tab-bar--icon .fd-icon-tab-bar__item--overflow,
+.fd-icon-tab-bar--icon-only .fd-icon-tab-bar__item--overflow,
+.fd-icon-tab-bar--navigation .fd-icon-tab-bar__item--overflow,
+.fd-icon-tab-bar--navigation-flat .fd-icon-tab-bar__item--overflow,
+.fd-icon-tab-bar--process .fd-icon-tab-bar__item--overflow {
+  margin: 0;
+}
+.fd-icon-tab-bar .fd-icon-tab-bar__item--overflow:last-of-type,
+.fd-icon-tab-bar--filter .fd-icon-tab-bar__item--overflow:last-of-type,
+.fd-icon-tab-bar--icon .fd-icon-tab-bar__item--overflow:last-of-type,
+.fd-icon-tab-bar--icon-only .fd-icon-tab-bar__item--overflow:last-of-type,
+.fd-icon-tab-bar--navigation .fd-icon-tab-bar__item--overflow:last-of-type,
+.fd-icon-tab-bar--navigation-flat .fd-icon-tab-bar__item--overflow:last-of-type,
+.fd-icon-tab-bar--process .fd-icon-tab-bar__item--overflow:last-of-type {
+  margin-left: auto;
+}
+[dir=rtl] .fd-icon-tab-bar .fd-icon-tab-bar__item--overflow:last-of-type, .fd-icon-tab-bar .fd-icon-tab-bar__item--overflow:last-of-type[dir=rtl],
+[dir=rtl] .fd-icon-tab-bar--filter .fd-icon-tab-bar__item--overflow:last-of-type,
+.fd-icon-tab-bar--filter .fd-icon-tab-bar__item--overflow:last-of-type[dir=rtl],
+[dir=rtl] .fd-icon-tab-bar--icon .fd-icon-tab-bar__item--overflow:last-of-type,
+.fd-icon-tab-bar--icon .fd-icon-tab-bar__item--overflow:last-of-type[dir=rtl],
+[dir=rtl] .fd-icon-tab-bar--icon-only .fd-icon-tab-bar__item--overflow:last-of-type,
+.fd-icon-tab-bar--icon-only .fd-icon-tab-bar__item--overflow:last-of-type[dir=rtl],
+[dir=rtl] .fd-icon-tab-bar--navigation .fd-icon-tab-bar__item--overflow:last-of-type,
+.fd-icon-tab-bar--navigation .fd-icon-tab-bar__item--overflow:last-of-type[dir=rtl],
+[dir=rtl] .fd-icon-tab-bar--navigation-flat .fd-icon-tab-bar__item--overflow:last-of-type,
+.fd-icon-tab-bar--navigation-flat .fd-icon-tab-bar__item--overflow:last-of-type[dir=rtl],
+[dir=rtl] .fd-icon-tab-bar--process .fd-icon-tab-bar__item--overflow:last-of-type,
+.fd-icon-tab-bar--process .fd-icon-tab-bar__item--overflow:last-of-type[dir=rtl] {
+  margin-right: auto;
+  margin-left: 0;
+}
+.fd-icon-tab-bar .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover,
+.fd-icon-tab-bar--filter .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover,
+.fd-icon-tab-bar--icon .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover,
+.fd-icon-tab-bar--icon-only .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover,
+.fd-icon-tab-bar--navigation .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover,
+.fd-icon-tab-bar--navigation-flat .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover,
+.fd-icon-tab-bar--process .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover {
+  position: relative;
+}
+.fd-icon-tab-bar .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body,
+.fd-icon-tab-bar--filter .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body,
+.fd-icon-tab-bar--icon .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body,
+.fd-icon-tab-bar--icon-only .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body,
+.fd-icon-tab-bar--navigation .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body,
+.fd-icon-tab-bar--navigation-flat .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body,
+.fd-icon-tab-bar--process .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body {
+  margin-right: -0.25rem;
+  margin-top: 0.375rem;
+}
+[dir=rtl] .fd-icon-tab-bar .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body, .fd-icon-tab-bar .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body[dir=rtl],
+[dir=rtl] .fd-icon-tab-bar--filter .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body,
+.fd-icon-tab-bar--filter .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body[dir=rtl],
+[dir=rtl] .fd-icon-tab-bar--icon .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body,
+.fd-icon-tab-bar--icon .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body[dir=rtl],
+[dir=rtl] .fd-icon-tab-bar--icon-only .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body,
+.fd-icon-tab-bar--icon-only .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body[dir=rtl],
+[dir=rtl] .fd-icon-tab-bar--navigation .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body,
+.fd-icon-tab-bar--navigation .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body[dir=rtl],
+[dir=rtl] .fd-icon-tab-bar--navigation-flat .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body,
+.fd-icon-tab-bar--navigation-flat .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body[dir=rtl],
+[dir=rtl] .fd-icon-tab-bar--process .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body,
+.fd-icon-tab-bar--process .fd-icon-tab-bar__item--overflow .fd-icon-tab-bar__popover-body[dir=rtl] {
+  margin-right: 0;
+  margin-left: -0.25rem;
+}
 /* Fully expanded pseudo element. Requires parent to have specified position */
 .fd-illustrated-message {
   font-size: var(--sapFontSize);
@@ -17565,6 +17687,15 @@ fd-carousel:focus, fd-carousel.is-focus {
   position: relative;
   padding: 0 0.25rem;
 }
+.fd-container > .fd-row {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+  min-width: calc(100% + 0.25rem * 2);
+}
+.fd-container > .fd-row > .fd-col {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
 .fd-container.fd-container--no-horizontal-gap .fd-row, .fd-container.fd-container--no-gap .fd-row {
   margin-left: 0;
   margin-right: 0;
@@ -17573,7 +17704,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding-left: 0;
   padding-right: 0;
 }
-.fd-container.fd-container--no-vertical-gap .fd-row .fd-col, .fd-container.fd-container--no-gap .fd-row .fd-col {
+.fd-container.fd-container--no-vertical-gap > .fd-row > .fd-col, .fd-container.fd-container--no-gap > .fd-row > .fd-col {
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -17581,8 +17712,6 @@ fd-carousel:focus, fd-carousel.is-focus {
   direction: rtl;
 }
 .fd-row {
-  margin-left: -0.25rem;
-  margin-right: -0.25rem;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -17592,14 +17721,11 @@ fd-carousel:focus, fd-carousel.is-focus {
       -ms-flex: 0 0 100%;
           flex: 0 0 100%;
   position: relative;
-  min-width: calc(100% + 0.25rem * 2);
-}
-.fd-row .fd-col {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  min-width: 100%;
 }
 .fd-col {
-  padding: 0 0.25rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
   min-width: 100%;
   max-width: 100%;
 }
@@ -17852,19 +17978,19 @@ fd-carousel:focus, fd-carousel.is-focus {
   .fd-container {
     padding: 0 0.5rem;
   }
-
-  .fd-row {
+  .fd-container > .fd-row {
     margin-left: -0.5rem;
     margin-right: -0.5rem;
     min-width: calc(100% + 0.5rem * 2);
   }
-  .fd-row .fd-col {
+  .fd-container > .fd-row > .fd-col {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
 
   .fd-col {
-    padding: 0 0.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
   }
   .fd-col-md--0 {
     min-width: 0%;

package/package.json

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