@fundamental-styles/theming-preview 0.24.0-rc.113 → 0.24.0-rc.116

package/fundamental-styles.css

@@ -1,7 +1,7 @@
 
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.113
+ * Fundamental Library Styles v0.24.0-rc.116
  * 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)
  */
@@ -19459,6 +19459,7 @@
   height: 100%;
   position: relative;
   overflow: hidden;
+  outline: none;
 }
 .fd-grid-list .fd-grid-list__item::before, .fd-grid-list .fd-grid-list__item::after {
   -webkit-box-sizing: inherit;
@@ -19477,7 +19478,7 @@
   -webkit-box-shadow: var(--fdGrid_List_Item_Focus_Box_Shadow);
           box-shadow: var(--fdGrid_List_Item_Focus_Box_Shadow);
   border: var(--fdGrid_List_Item_Focus_Border);
-  border-radius: var(--fdGrid_List_Item_Focus_Border_Radius);
+  border-radius: var(--fdGrid_List_Item_Border_Radius);
   z-index: 1;
 }
 .fd-grid-list .fd-grid-list__item--height-auto {
@@ -19761,32 +19762,6 @@
 .fd-grid-list__group-header--no-margin {
   margin-top: 0;
 }
-.fd-grid-list__filter,
-.fd-grid-list__filter * {
-  color: var(--sapList_TextColor) !important;
-}
-.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__filter[class*=active],
-.fd-grid-list__filter[class*=active] * {
-  color: var(--sapInfobar_TextColor) !important;
-}
-.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__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);
   line-height: var(--sapContent_LineHeight);
@@ -21899,11 +21874,11 @@
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-menu__item:first-child {
+.fd-menu__item:first-child, .fd-menu__item:first-child .fd-menu__link::after {
   border-top-right-radius: var(--fdButton_Menu_Border_Radius);
   border-top-left-radius: var(--fdButton_Menu_Border_Radius);
 }
-.fd-menu__item:last-child {
+.fd-menu__item:last-child, .fd-menu__item:last-child .fd-menu__link::after {
   border-bottom-right-radius: var(--fdButton_Menu_Border_Radius);
   border-bottom-left-radius: var(--fdButton_Menu_Border_Radius);
 }
@@ -21930,17 +21905,24 @@
   border-radius: inherit;
   height: 2.75rem;
   padding: 0.75rem 1rem 0.75rem 0.75rem;
+  outline: none;
 }
 .fd-menu__link::before, .fd-menu__link::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-menu__link:focus, .fd-menu__link.is-focus {
-  outline-offset: -0.1875rem;
-  outline-width: var(--sapContent_FocusWidth);
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
+.fd-menu__link:focus::after, .fd-menu__link.is-focus::after {
+  border-width: var(--sapContent_FocusWidth);
+  border-color: var(--sapContent_FocusColor);
+  border-style: var(--sapContent_FocusStyle);
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  top: 0.0625rem;
+  bottom: 0.0625rem;
+  left: 0.0625rem;
+  right: 0.0625rem;
 }
 .fd-menu__link:hover, .fd-menu__link.is-hover {
   background-color: var(--sapList_Hover_Background);
@@ -21959,10 +21941,19 @@
 .fd-menu__link[aria-selected=true]:hover:not(:active):not(.is-active), .fd-menu__link[aria-selected=true].is-hover:not(:active):not(.is-active), .fd-menu__link.is-selected:hover:not(:active):not(.is-active), .fd-menu__link.is-selected.is-hover:not(:active):not(.is-active) {
   background-color: var(--sapList_Hover_SelectionBackground);
 }
+.fd-menu__link[aria-selected=true]:focus, .fd-menu__link[aria-selected=true].is-focus, .fd-menu__link.is-selected:focus, .fd-menu__link.is-selected.is-focus {
+  z-index: 5;
+}
+.fd-menu__link[aria-selected=true]:focus::after, .fd-menu__link[aria-selected=true].is-focus::after, .fd-menu__link.is-selected:focus::after, .fd-menu__link.is-selected.is-focus::after {
+  bottom: 0.125rem;
+}
 .fd-menu__link:active, .fd-menu__link.is-active {
   color: var(--sapList_Active_TextColor);
   background-color: var(--sapList_Active_Background);
 }
+.fd-menu__link:active::after, .fd-menu__link.is-active::after {
+  display: none;
+}
 .fd-menu__link:active .fd-menu__title, .fd-menu__link.is-active .fd-menu__title {
   color: var(--sapList_Active_TextColor);
 }
@@ -21995,6 +21986,12 @@
 .fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):hover:not(:active):not(.is-active), .fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-hover:not(:active):not(.is-active), .fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):hover:not(:active):not(.is-active), .fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-hover:not(:active):not(.is-active) {
   background-color: var(--sapList_Hover_SelectionBackground);
 }
+.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):focus, .fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-focus, .fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):focus, .fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-focus {
+  z-index: 5;
+}
+.fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active):focus::after, .fd-menu__link.has-child[aria-expanded=true]:not(:active):not(.is-active).is-focus::after, .fd-menu__link.has-child.is-expanded:not(:active):not(.is-active):focus::after, .fd-menu__link.has-child.is-expanded:not(:active):not(.is-active).is-focus::after {
+  bottom: 0.125rem;
+}
 .fd-menu__title {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -34230,6 +34227,7 @@ places the element far left of the screen. so it is not visible.
           align-items: center;
   cursor: pointer;
   padding: var(--fdSwitch_Padding);
+  --fdSwitch_Track_Offset: translate(calc(var(--fdSwitch_Handle_Offset) * -1), -50%);
 }
 .fd-switch::before, .fd-switch::after {
   -webkit-box-sizing: inherit;
@@ -34265,7 +34263,7 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  background-color: var(--sapButton_Track_Background);
+  background-color: var(--fdSwitch_Track_Background);
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   width: var(--fdSwitch_Width);
@@ -34276,6 +34274,7 @@ places the element far left of the screen. so it is not visible.
   border-radius: var(--fdSwitch_Border_Radius);
   -webkit-box-shadow: var(--fdSwitch_Shadow);
           box-shadow: var(--fdSwitch_Shadow);
+  border-color: var(--fdSwitch_Border_Color);
 }
 .fd-switch__slider::before, .fd-switch__slider::after {
   -webkit-box-sizing: inherit;
@@ -34307,19 +34306,16 @@ places the element far left of the screen. so it is not visible.
   -webkit-transition: all 0.1s;
   transition: all 0.1s;
   min-width: 4.25rem;
+  -webkit-transform: var(--fdSwitch_Track_Offset);
+          transform: var(--fdSwitch_Track_Offset);
 }
 .fd-switch__track::before, .fd-switch__track::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-switch .fd-switch__track {
-  -webkit-transform: translate(calc(var(--fdSwitch_Handle_Offset) * -1), -50%);
-          transform: translate(calc(var(--fdSwitch_Handle_Offset) * -1), -50%);
-}
-.fd-switch .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
-  -webkit-transform: translate(calc(var(--fdSwitch_Active_Handle_Offset) * -1), -50%);
-          transform: translate(calc(var(--fdSwitch_Active_Handle_Offset) * -1), -50%);
+.fd-switch .fd-switch__input:checked + .fd-switch__slider {
+  --fdSwitch_Track_Offset: translate(calc(var(--fdSwitch_Active_Handle_Offset) * -1), -50%);
 }
 .fd-switch__text {
   font-size: var(--sapFontSize);
@@ -34380,11 +34376,11 @@ places the element far left of the screen. so it is not visible.
   transition: visibility 0s ease 0.03s, opacity 0s ease 0.03s;
 }
 .fd-switch__icon--off [class*=sap-icon], .fd-switch__icon--off[class*=sap-icon] {
-  color: var(--sapNegativeElementColor);
+  color: var(--fdSwitch_Semantic_Handle_Error_Color);
   margin: var(--fdSwitch_Icon_Error_Margin);
 }
 .fd-switch__icon--on [class*=sap-icon], .fd-switch__icon--on[class*=sap-icon] {
-  color: var(--sapPositiveElementColor);
+  color: var(--fdSwitch_Semantic_Handle_Success_Color);
   margin: var(--fdSwitch_Icon_Success_Margin);
   visibility: hidden;
   opacity: 0;
@@ -34459,14 +34455,11 @@ places the element far left of the screen. so it is not visible.
   border-radius: var(--fdSwitch_Focus_Outline_Border_Radius);
 }
 .fd-switch__input:checked + .fd-switch__slider {
-  background-color: var(--sapButton_Track_Selected_Background);
-  border-color: var(--sapButton_Selected_BorderColor);
-  -webkit-box-shadow: var(--fdSwitch_Active_Shadow);
-          box-shadow: var(--fdSwitch_Active_Shadow);
-}
-.fd-switch__input:checked + .fd-switch__slider .fd-switch__handle {
-  background-color: var(--sapButton_Selected_Background);
-  border-color: var(--sapButton_Selected_BorderColor);
+  --fdSwitch_Track_Background: var(--sapButton_Track_Selected_Background);
+  --fdSwitch_Shadow: var(--fdSwitch_Active_Shadow);
+  --fdSwitch_Handle_Background: var(--sapButton_Selected_Background);
+  --fdSwitch_Handle_Border_Color: var(--sapButton_Selected_BorderColor);
+  --fdSwitch_Border_Color: var(--sapButton_Selected_BorderColor);
 }
 .fd-switch__input:checked + .fd-switch__slider .fd-switch__icon--off [class*=sap-icon], .fd-switch__input:checked + .fd-switch__slider .fd-switch__icon--off[class*=sap-icon] {
   opacity: 0;
@@ -34476,147 +34469,108 @@ places the element far left of the screen. so it is not visible.
   opacity: 1;
   visibility: visible;
 }
+[dir=rtl] .fd-switch, .fd-switch[dir=rtl] {
+  --fdSwitch_Track_Offset: translate(var(--fdSwitch_Handle_Offset), -50%);
+}
 [dir=rtl] .fd-switch .fd-switch__icon--on, .fd-switch[dir=rtl] .fd-switch__icon--on {
   margin: var(--fdSwitch_Icon_Error_Margin);
 }
 [dir=rtl] .fd-switch .fd-switch__icon--off, .fd-switch[dir=rtl] .fd-switch__icon--off {
   margin: var(--fdSwitch_Icon_Success_Margin);
 }
-[dir=rtl] .fd-switch .fd-switch__track, .fd-switch[dir=rtl] .fd-switch__track {
-  -webkit-transform: translate(var(--fdSwitch_Handle_Offset), -50%);
-          transform: translate(var(--fdSwitch_Handle_Offset), -50%);
+[dir=rtl] .fd-switch .fd-switch__input:checked + .fd-switch__slider, .fd-switch[dir=rtl] .fd-switch__input:checked + .fd-switch__slider {
+  --fdSwitch_Track_Offset: translate(var(--fdSwitch_Active_Handle_Offset), -50%);
 }
-[dir=rtl] .fd-switch .fd-switch__input:checked + .fd-switch__slider .fd-switch__track, .fd-switch[dir=rtl] .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
-  -webkit-transform: translate(var(--fdSwitch_Active_Handle_Offset), -50%);
-          transform: translate(var(--fdSwitch_Active_Handle_Offset), -50%);
-}
-.fd-switch:hover .fd-switch__slider, .fd-switch.is-hover .fd-switch__slider {
-  border-color: var(--fdSwitch_Handle_Hover_Border_Color);
-}
-.fd-switch:hover .fd-switch__handle, .fd-switch.is-hover .fd-switch__handle {
-  border-color: var(--fdSwitch_Handle_Hover_Border_Color);
-  background-color: var(--sapButton_Hover_Background);
+.fd-switch:hover, .fd-switch.is-hover {
+  --fdSwitch_Track_Background: var(--fdSwitch_On_Hover_Slider_Background);
+  --fdSwitch_Shadow: var(--fdSwitch_On_Hover_Slider_Shadow);
+  --fdSwitch_Handle_Border_Color: var(--fdSwitch_Handle_Hover_Border_Color);
+  --fdSwitch_Handle_Background: var(--fdSwitch_Hover_Handle_Background);
+  --fdSwitch_Border_Color: var(--fdSwitch_On_Hover_Slider_Border);
 }
 .fd-switch:hover .fd-switch__input:checked + .fd-switch__slider, .fd-switch.is-hover .fd-switch__input:checked + .fd-switch__slider {
-  background-color: var(--fdSwitch_On_Hover_Slider_Background);
-}
-.fd-switch:hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle, .fd-switch.is-hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle {
-  border-color: var(--fdSwitch_Handle_Selected_Hover_Border_Color);
-  background-color: var(--sapButton_Selected_Hover_Background);
+  --fdSwitch_Track_Background: var(--fdSwitch_On_Hover_Slider_Active_Background);
+  --fdSwitch_Shadow: var(--fdSwitch_On_Hover_Slider_Active_Shadow);
+  --fdSwitch_Handle_Background: var(--fdSwitch_Hover_Handle_Active_Background);
+  --fdSwitch_Handle_Border_Color: var(--fdSwitch_Handle_Selected_Hover_Border_Color);
 }
 .fd-switch--compact {
-  padding: var(--fdSwitch_Compact_Padding);
-}
-.fd-switch--compact .fd-switch__handle {
-  min-width: var(--fdSwitch_Compact_Handle_Width);
-  min-height: var(--fdSwitch_Compact_Handle_Height);
+  --fdSwitch_Padding: var(--fdSwitch_Compact_Padding);
+  --fdSwitch_Handle_Width: var(--fdSwitch_Compact_Handle_Width);
+  --fdSwitch_Handle_Height: var(--fdSwitch_Compact_Handle_Height);
+  --fdSwitch_Width: var(--fdSwitch_Compact_Width);
+  --fdSwitch_Height: var(--fdSwitch_Compact_Height);
+  --fdSwitch_Icon_Size: var(--fdSwitch_Compact_Icon_Size);
+  --fdSwitch_Track_Offset: translate(-0.8125rem, -50%);
 }
 .fd-switch--compact .fd-switch__track {
   min-width: 3.125rem;
 }
-.fd-switch--compact .fd-switch__slider {
-  width: var(--fdSwitch_Compact_Width);
-  height: var(--fdSwitch_Compact_Height);
-}
-.fd-switch--compact .fd-switch__track {
-  -webkit-transform: translate(-0.8125rem, -50%);
-          transform: translate(-0.8125rem, -50%);
-}
-.fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
-  -webkit-transform: translate(calc(var(--fdSwitch_Compact_Active_Handle_Offset) * -1), -50%);
-          transform: translate(calc(var(--fdSwitch_Compact_Active_Handle_Offset) * -1), -50%);
-}
-[dir=rtl] .fd-switch--compact .fd-switch__track, .fd-switch--compact[dir=rtl] .fd-switch__track {
-  -webkit-transform: translate(0.8125rem, -50%);
-          transform: translate(0.8125rem, -50%);
-}
-[dir=rtl] .fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track, .fd-switch--compact[dir=rtl] .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
-  -webkit-transform: translate(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset_Rtl), -50%);
-          transform: translate(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset_Rtl), -50%);
+.fd-switch--compact .fd-switch__input:checked + .fd-switch__slider {
+  --fdSwitch_Track_Offset: translate(calc(var(--fdSwitch_Compact_Active_Handle_Offset) * -1), -50%);
 }
-.fd-switch--semantic .fd-switch__slider {
-  width: var(--fdSwitch_Semantic_Width);
-  height: var(--fdSwitch_Semantic_Height);
-  border-color: var(--sapErrorBorderColor);
-  background-color: var(--fdSwitch_Semantic_Error_Background_Color);
-  -webkit-box-shadow: var(--fdSwitch_Semantic_Error_Box_Shadow);
-          box-shadow: var(--fdSwitch_Semantic_Error_Box_Shadow);
-}
-.fd-switch--semantic .fd-switch__track {
-  -webkit-transform: translate(calc(var(--fdSwitch_Semantic_Handle_Offset) * -1), -50%);
-          transform: translate(calc(var(--fdSwitch_Semantic_Handle_Offset) * -1), -50%);
+[dir=rtl] .fd-switch--compact, .fd-switch--compact[dir=rtl] {
+  --fdSwitch_Track_Offset: translate(0.8125rem, -50%);
 }
-.fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
-  -webkit-transform: translate(calc(var(--fdSwitch_Semantic_Handle_Active_Offset) * -1), -50%);
-          transform: translate(calc(var(--fdSwitch_Semantic_Handle_Active_Offset) * -1), -50%);
+[dir=rtl] .fd-switch--compact .fd-switch__input:checked + .fd-switch__slider, .fd-switch--compact[dir=rtl] .fd-switch__input:checked + .fd-switch__slider {
+  --fdSwitch_Track_Offset: translate(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset_Rtl), -50%);
 }
-.fd-switch--semantic .fd-switch__handle {
-  background-color: var(--fdSwitch_Handle_Background);
-  background-color: var(--fdSwitch_Semantic_Error_Handle_Background_Color);
-  border-color: var(--fdSwitch_Semantic_Error_Handle_Border_Color);
+.fd-switch--semantic {
+  --fdSwitch_Width: var(--fdSwitch_Semantic_Width);
+  --fdSwitch_Height: var(--fdSwitch_Semantic_Height);
+  --fdSwitch_Track_Background: var(--fdSwitch_Semantic_Error_Background_Color);
+  --fdSwitch_Shadow: var(--fdSwitch_Semantic_Error_Box_Shadow);
+  --fdSwitch_Handle_Background: var(--fdSwitch_Semantic_Error_Handle_Background_Color);
+  --fdSwitch_Handle_Border_Color: var(--fdSwitch_Semantic_Error_Handle_Border_Color);
+  --fdSwitch_Border_Color: var(--sapErrorBorderColor);
+  --fdSwitch_Track_Offset: translate(calc(var(--fdSwitch_Semantic_Handle_Offset) * -1), -50%);
 }
 .fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider {
-  background-color: var(--fdSwitch_Semantic_Success_Background_Color);
-  border-color: var(--sapSuccessBorderColor);
-  -webkit-box-shadow: var(--fdSwitch_Semantic_Success_Box_Shadow);
-          box-shadow: var(--fdSwitch_Semantic_Success_Box_Shadow);
+  --fdSwitch_Track_Offset: translate(calc(var(--fdSwitch_Semantic_Handle_Active_Offset) * -1), -50%);
 }
-.fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle {
-  border-color: var(--fdSwitch_Semantic_Success_Handle_Border_Color);
-  background-color: var(--fdSwitch_Handle_Background);
-  background-color: var(--fdSwitch_Semantic_Success_Handle_Background_Color);
+.fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider {
+  --fdSwitch_Track_Background: var(--fdSwitch_Semantic_Success_Background_Color);
+  --fdSwitch_Shadow: var(--fdSwitch_Semantic_Success_Box_Shadow);
+  --fdSwitch_Handle_Border_Color: var(--fdSwitch_Semantic_Success_Handle_Border_Color);
+  --fdSwitch_Handle_Background: var(--fdSwitch_Semantic_Success_Handle_Background_Color);
+  --fdSwitch_Border_Color: var(--fdSwitch_Semantic_Success_Handle_Border_Color);
 }
 .fd-switch--semantic.fd-switch--compact {
+  --fdSwitch_Width: var(--fdSwitch_Compact_Semantic_Width);
+  --fdSwitch_Height: var(--fdSwitch_Compact_Semantic_Height);
   padding: 0.1875rem 0;
+  --fdSwitch_Track_Offset: translate(var(--fdSwitch_Compact_Semantic_Handle_Offset), -50%);
 }
-.fd-switch--semantic.fd-switch--compact .fd-switch__slider {
-  width: var(--fdSwitch_Compact_Semantic_Width);
-  height: var(--fdSwitch_Compact_Semantic_Height);
-}
-.fd-switch--semantic.fd-switch--compact .fd-switch__track {
-  -webkit-transform: translate(var(--fdSwitch_Compact_Semantic_Handle_Offset), -50%);
-          transform: translate(var(--fdSwitch_Compact_Semantic_Handle_Offset), -50%);
+.fd-switch--semantic.fd-switch--compact .fd-switch__input:checked + .fd-switch__slider {
+  --fdSwitch_Track_Offset: translate(calc(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset) * -1), -50%);
 }
-.fd-switch--semantic.fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
-  -webkit-transform: translate(calc(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset) * -1), -50%);
-          transform: translate(calc(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset) * -1), -50%);
-}
-.fd-switch--semantic:hover .fd-switch__icon, .fd-switch--semantic.is-hover .fd-switch__icon {
-  color: var(--fdSwitch_Semantic_Icon_Error_Color);
-}
-.fd-switch--semantic:hover .fd-switch__slider, .fd-switch--semantic.is-hover .fd-switch__slider {
-  border-color: var(--fdSwitch_Semantic_Error_Color);
-}
-.fd-switch--semantic:hover .fd-switch__handle, .fd-switch--semantic.is-hover .fd-switch__handle {
-  background-color: var(--fdSwitch_Semantic_Error_Handle_Hover_Background_Color);
-  border-color: var(--fdSwitch_Semantic_Error_Handle_Hover_Border_Color);
+.fd-switch--semantic:hover, .fd-switch--semantic.is-hover {
+  --fdSwitch_Track_Background: var(--fdSwitch_Semantic_Hover_Error_Background_Color);
+  --fdSwitch_Shadow: var(--fdSwitch_Semantic_Hover_Error_Box_Shadow);
+  --fdSwitch_Handle_Background: var(--fdSwitch_Semantic_Error_Handle_Hover_Background_Color);
+  --fdSwitch_Handle_Border_Color: var(--fdSwitch_Semantic_Error_Handle_Hover_Border_Color);
+  --fdSwitch_Semantic_Handle_Error_Color: var(--fdSwitch_Semantic_Hover_Error_Color);
+  --fdSwitch_Semantic_Handle_Success_Color: var(--fdSwitch_Semantic_Hover_Success_Color);
+  --fdSwitch_Border_Color: var(--fdSwitch_Semantic_Hover_Error_Border_Color);
 }
 .fd-switch--semantic:hover .fd-switch__input:checked + .fd-switch__slider, .fd-switch--semantic.is-hover .fd-switch__input:checked + .fd-switch__slider {
-  background-color: var(--fdSwitch_Semantic_Success_Background_Color);
-  border-color: var(--fdSwitch_Semantic_Success_Border_Color);
+  --fdSwitch_Track_Background: var(--fdSwitch_Semantic_Hover_Success_Background_Color);
+  --fdSwitch_Shadow: var(--fdSwitch_Semantic_Hover_Success_Box_Shadow);
+  --fdSwitch_Handle_Background: var(--fdSwitch_Semantic_Success_Handle_Hover_Background_Color);
+  --fdSwitch_Handle_Border_Color: var(--fdSwitch_Semantic_Success_Handle_Hover_Border_Color);
+  --fdSwitch_Border_Color: var(--fdSwitch_Semantic_Hover_Success_Border_Color);
 }
-.fd-switch--semantic:hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle, .fd-switch--semantic.is-hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle {
-  background-color: var(--fdSwitch_Semantic_Success_Handle_Hover_Background_Color);
-  border-color: var(--fdSwitch_Semantic_Success_Handle_Hover_Border_Color);
+[dir=rtl] .fd-switch--semantic, .fd-switch--semantic[dir=rtl] {
+  --fdSwitch_Track_Offset: translate(var(--fdSwitch_Semantic_Handle_Offset), -50%);
 }
-.fd-switch--semantic:hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__icon, .fd-switch--semantic.is-hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__icon {
-  color: var(--fdSwitch_Semantic_Icon_Success_Color);
+[dir=rtl] .fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider, .fd-switch--semantic[dir=rtl] .fd-switch__input:checked + .fd-switch__slider {
+  --fdSwitch_Track_Offset: translate(var(--fdSwitch_Semantic_Handle_Active_Offset), -50%);
 }
-[dir=rtl] .fd-switch--semantic .fd-switch__track, .fd-switch--semantic[dir=rtl] .fd-switch__track {
-  -webkit-transform: translate(var(--fdSwitch_Semantic_Handle_Offset), -50%);
-          transform: translate(var(--fdSwitch_Semantic_Handle_Offset), -50%);
+[dir=rtl] .fd-switch--semantic.fd-switch--compact, .fd-switch--semantic[dir=rtl].fd-switch--compact {
+  --fdSwitch_Track_Offset: translate(calc(var(--fdSwitch_Compact_Semantic_Handle_Offset) * -1), -50%);
 }
-[dir=rtl] .fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider .fd-switch__track, .fd-switch--semantic[dir=rtl] .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
-  -webkit-transform: translate(var(--fdSwitch_Semantic_Handle_Active_Offset), -50%);
-          transform: translate(var(--fdSwitch_Semantic_Handle_Active_Offset), -50%);
-}
-[dir=rtl] .fd-switch--semantic.fd-switch--compact .fd-switch__track, .fd-switch--semantic[dir=rtl].fd-switch--compact .fd-switch__track {
-  -webkit-transform: translate(calc(var(--fdSwitch_Compact_Semantic_Handle_Offset) * -1), -50%);
-          transform: translate(calc(var(--fdSwitch_Compact_Semantic_Handle_Offset) * -1), -50%);
-}
-[dir=rtl] .fd-switch--semantic.fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track, .fd-switch--semantic[dir=rtl].fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
-  -webkit-transform: translate(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset), -50%);
-          transform: translate(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset), -50%);
+[dir=rtl] .fd-switch--semantic.fd-switch--compact .fd-switch__input:checked + .fd-switch__slider, .fd-switch--semantic[dir=rtl].fd-switch--compact .fd-switch__input:checked + .fd-switch__slider {
+  --fdSwitch_Track_Offset: translate(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset), -50%);
 }
 /* Fully expanded pseudo element. Requires parent to have specified position */
 /* stylelint-disable */
@@ -39482,6 +39436,10 @@ places the element far left of the screen. so it is not visible.
 .fd-toolbar--info {
   background-color: var(--sapInfobar_NonInteractive_Background);
   color: var(--sapList_TextColor);
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+  position: relative;
+  outline: none;
 }
 .fd-toolbar--info.fd-toolbar--active {
   background-color: var(--sapInfobar_Background);
@@ -39493,6 +39451,34 @@ places the element far left of the screen. so it is not visible.
 .fd-toolbar--info.fd-toolbar--active:active, .fd-toolbar--info.fd-toolbar--active.is-active {
   background-color: var(--sapInfobar_Active_Background);
 }
+[dir=rtl] .fd-toolbar--info, .fd-toolbar--info[dir=rtl] {
+  padding-right: 0.5rem;
+  padding-left: 1rem;
+}
+.fd-toolbar--info:focus::after, .fd-toolbar--info.is-focus::after {
+  border-width: var(--sapContent_FocusWidth);
+  border-color: var(--sapContent_FocusColor);
+  border-style: var(--sapContent_FocusStyle);
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  top: 0.0625rem;
+  bottom: 0.0625rem;
+  left: 0.0625rem;
+  right: 0.0625rem;
+}
+.fd-toolbar--info:focus, .fd-toolbar--info.is-focus {
+  z-index: 5;
+}
+.fd-toolbar--info:focus::after, .fd-toolbar--info.is-focus::after {
+  border-color: var(--fdToolbar_Info_Outline_Color);
+}
+.fd-toolbar--info [class*=sap-icon] {
+  font-size: 1rem;
+  height: 1rem;
+  line-height: 1rem;
+  color: var(--sapInfobar_TextColor);
+}
 .fd-toolbar__spacer {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);

package/package.json

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