@fundamental-styles/theming-preview 0.24.0-rc.86 → 0.24.0-rc.89

package/fundamental-styles.css

@@ -1,7 +1,7 @@
 
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.86
+ * Fundamental Library Styles v0.24.0-rc.89
  * 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)
  */
@@ -17658,6 +17658,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  border-left: var(--sapButton_BorderWidth) solid transparent;
   border: none;
   z-index: auto !important;
   position: static !important;
@@ -17665,21 +17666,35 @@
   background: var(--fdInput_Group_Button_Background);
   color: var(--fdInput_Group_Button_Text_Color);
 }
+[dir=rtl] .fd-input-group .fd-input-group__button, .fd-input-group .fd-input-group__button[dir=rtl] {
+  border-left: none;
+  border-right: var(--sapButton_BorderWidth) solid transparent;
+}
 .fd-input-group .fd-input-group__button::before {
   display: none !important;
 }
 .fd-input-group .fd-input-group__button:hover, .fd-input-group .fd-input-group__button.is-hover {
+  border-left: var(--fdInputGroup_ControlButton_SideBorder);
   background: var(--fdInput_Group_Button_Hover_Background);
   color: var(--fdInput_Group_Button_Hover_Text_Color);
   -webkit-box-shadow: var(--fdInput_Group_Button_Box_Shadow);
           box-shadow: var(--fdInput_Group_Button_Box_Shadow);
 }
+[dir=rtl] .fd-input-group .fd-input-group__button:hover, .fd-input-group .fd-input-group__button:hover[dir=rtl], [dir=rtl] .fd-input-group .fd-input-group__button.is-hover, .fd-input-group .fd-input-group__button.is-hover[dir=rtl] {
+  border-left: none;
+  border-right: var(--fdInputGroup_ControlButton_SideBorder);
+}
 .fd-input-group .fd-input-group__button:active, .fd-input-group .fd-input-group__button.is-active {
+  border-left: var(--fdInputGroup_ControlButton_SideBorder);
   background: var(--fdInput_Group_Button_Active_Background);
   color: var(--fdInput_Group_Button_Active_Text_Color);
   -webkit-box-shadow: var(--fdInput_Group_Button_Box_Shadow);
           box-shadow: var(--fdInput_Group_Button_Box_Shadow);
 }
+[dir=rtl] .fd-input-group .fd-input-group__button:active, .fd-input-group .fd-input-group__button:active[dir=rtl], [dir=rtl] .fd-input-group .fd-input-group__button.is-active, .fd-input-group .fd-input-group__button.is-active[dir=rtl] {
+  border-left: none;
+  border-right: var(--fdInputGroup_ControlButton_SideBorder);
+}
 .fd-input-group.is-success .fd-input-group__button:hover, .fd-input-group.is-success .fd-input-group__button.is-hover {
   -webkit-box-shadow: var(--fdInput_Group_Button_Success_Active_Box_Shadow);
           box-shadow: var(--fdInput_Group_Button_Success_Active_Box_Shadow);
@@ -21962,7 +21977,7 @@
 }
 .fd-menu__link:active:focus, .fd-menu__link:active.is-focus, .fd-menu__link.is-active:focus, .fd-menu__link.is-active.is-focus {
   z-index: 5;
-  outline-color: var(--sapContent_ContrastFocusColor);
+  outline-color: var(--fdMenu_Active_State_Focus);
 }
 .fd-menu__link[aria-disabled=true], .fd-menu__link.is-disabled, .fd-menu__link:disabled {
   pointer-events: none;
@@ -31005,6 +31020,7 @@ places the element far left of the screen. so it is not visible.
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  border-left: var(--sapButton_BorderWidth) solid transparent;
   border: none;
   z-index: auto !important;
   position: static !important;
@@ -31012,21 +31028,35 @@ places the element far left of the screen. so it is not visible.
   background: var(--fdInput_Group_Button_Background);
   color: var(--fdInput_Group_Button_Text_Color);
 }
+[dir=rtl] .fd-select__control .fd-select__button, .fd-select__control .fd-select__button[dir=rtl] {
+  border-left: none;
+  border-right: var(--sapButton_BorderWidth) solid transparent;
+}
 .fd-select__control .fd-select__button::before {
   display: none !important;
 }
 .fd-select__control .fd-select__button:hover, .fd-select__control .fd-select__button.is-hover {
+  border-left: var(--fdInputGroup_ControlButton_SideBorder);
   background: var(--fdInput_Group_Button_Hover_Background);
   color: var(--fdInput_Group_Button_Hover_Text_Color);
   -webkit-box-shadow: var(--fdInput_Group_Button_Box_Shadow);
           box-shadow: var(--fdInput_Group_Button_Box_Shadow);
 }
+[dir=rtl] .fd-select__control .fd-select__button:hover, .fd-select__control .fd-select__button:hover[dir=rtl], [dir=rtl] .fd-select__control .fd-select__button.is-hover, .fd-select__control .fd-select__button.is-hover[dir=rtl] {
+  border-left: none;
+  border-right: var(--fdInputGroup_ControlButton_SideBorder);
+}
 .fd-select__control .fd-select__button:active, .fd-select__control .fd-select__button.is-active {
+  border-left: var(--fdInputGroup_ControlButton_SideBorder);
   background: var(--fdInput_Group_Button_Active_Background);
   color: var(--fdInput_Group_Button_Active_Text_Color);
   -webkit-box-shadow: var(--fdInput_Group_Button_Box_Shadow);
           box-shadow: var(--fdInput_Group_Button_Box_Shadow);
 }
+[dir=rtl] .fd-select__control .fd-select__button:active, .fd-select__control .fd-select__button:active[dir=rtl], [dir=rtl] .fd-select__control .fd-select__button.is-active, .fd-select__control .fd-select__button.is-active[dir=rtl] {
+  border-left: none;
+  border-right: var(--fdInputGroup_ControlButton_SideBorder);
+}
 .fd-select__control.is-success .fd-select__button:hover, .fd-select__control.is-success .fd-select__button.is-hover {
   -webkit-box-shadow: var(--fdInput_Group_Button_Success_Active_Box_Shadow);
           box-shadow: var(--fdInput_Group_Button_Success_Active_Box_Shadow);
@@ -31300,7 +31330,7 @@ places the element far left of the screen. so it is not visible.
   width: 3rem;
   height: 1.5rem;
 }
-.fd-shellbar__action {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__action {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
   color: var(--sapTextColor);
@@ -31313,95 +31343,95 @@ places the element far left of the screen. so it is not visible.
   border: 0;
   margin-left: 0.5rem;
 }
-.fd-shellbar__action::before, .fd-shellbar__action::after {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__action::before, .fd-shellbar .fd-shellbar__group .fd-shellbar__action::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
   font-size: inherit;
 }
-[dir=rtl] .fd-shellbar__action, .fd-shellbar__action[dir=rtl] {
+[dir=rtl] .fd-shellbar .fd-shellbar__group .fd-shellbar__action, .fd-shellbar .fd-shellbar__group .fd-shellbar__action[dir=rtl] {
   margin-right: 0.5rem;
   margin-left: 0;
 }
-.fd-shellbar__action > * {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__action > * {
   vertical-align: middle;
 }
-.fd-shellbar__action .fd-shellbar__input-group {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__input-group {
   background: transparent;
   background-color: var(--fdShellbar_Input_Background);
   border: var(--fdShellbar_Input_Border);
   border-radius: var(--fdShellbar_Input_Border_Radius);
   cursor: text;
 }
-.fd-shellbar__action .fd-shellbar__input-group:hover, .fd-shellbar__action .fd-shellbar__input-group.is-hover {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__input-group:hover, .fd-shellbar .fd-shellbar__group .fd-shellbar__input-group.is-hover {
   border-color: var(--fdShellbar_Input_Hover_Border_Color);
   -webkit-box-shadow: var(--sapContent_Interaction_Shadow);
           box-shadow: var(--sapContent_Interaction_Shadow);
 }
-.fd-shellbar__action .fd-shellbar__input-group-input {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__input-group-input {
   border: none;
   color: var(--fdShellbar_Input_Color);
   position: relative;
 }
-.fd-shellbar__action .fd-shellbar__input-group-input:hover, .fd-shellbar__action .fd-shellbar__input-group-input:hover + .fd-shellbar__input-group-addon, .fd-shellbar__action .fd-shellbar__input-group-input.is-hover, .fd-shellbar__action .fd-shellbar__input-group-input.is-hover + .fd-shellbar__input-group-addon {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__input-group-input:hover, .fd-shellbar .fd-shellbar__group .fd-shellbar__input-group-input:hover + .fd-shellbar__input-group-addon, .fd-shellbar .fd-shellbar__group .fd-shellbar__input-group-input.is-hover, .fd-shellbar .fd-shellbar__group .fd-shellbar__input-group-input.is-hover + .fd-shellbar__input-group-addon {
   background: transparent;
   background-color: var(--fdShellbar_Input_Hover_Background) !important;
 }
-.fd-shellbar__action .fd-shellbar__input-group-input::-webkit-input-placeholder {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__input-group-input::-webkit-input-placeholder {
   color: var(--fdShellbar_Input_Placeholder_Color);
   font-style: italic;
 }
-.fd-shellbar__action .fd-shellbar__input-group-input::-moz-placeholder {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__input-group-input::-moz-placeholder {
   color: var(--fdShellbar_Input_Placeholder_Color);
   font-style: italic;
 }
-.fd-shellbar__action .fd-shellbar__input-group-input:-ms-input-placeholder {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__input-group-input:-ms-input-placeholder {
   color: var(--fdShellbar_Input_Placeholder_Color);
   font-style: italic;
 }
-.fd-shellbar__action .fd-shellbar__input-group-input::-ms-input-placeholder {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__input-group-input::-ms-input-placeholder {
   color: var(--fdShellbar_Input_Placeholder_Color);
   font-style: italic;
 }
-.fd-shellbar__action .fd-shellbar__input-group-input::placeholder {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__input-group-input::placeholder {
   color: var(--fdShellbar_Input_Placeholder_Color);
   font-style: italic;
 }
-.fd-shellbar__action .fd-shellbar__input-group-input--select {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__input-group-input--select {
   font-style: normal;
 }
-.fd-shellbar__action .fd-shellbar__input-group-addon .fd-shellbar__button {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__input-group-addon .fd-shellbar__button {
   height: var(--fdShellbar_Input_Addon_Dimension);
   min-width: var(--fdShellbar_Input_Addon_Dimension);
   border-radius: var(--fdShellbar_Input_Border_Radius);
   border-width: var(--fdShellbar_Input_Addon_Border_Width);
 }
-.fd-shellbar .fd-shellbar__button {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__button {
   outline-color: var(--fdShellbar_Button_Outline_Color);
-  color: var(--sapShell_InteractiveTextColor);
+  color: var(--sapShell_InteractiveTextColor) !important;
 }
-.fd-shellbar .fd-shellbar__button:not(.fd-shellbar .fd-shellbar__button--menu) {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__button:not(.fd-shellbar .fd-shellbar__group .fd-shellbar__button--menu) {
   padding: 0;
 }
-.fd-shellbar .fd-shellbar__button:hover, .fd-shellbar .fd-shellbar__button.is-hover {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__button:hover, .fd-shellbar .fd-shellbar__group .fd-shellbar__button.is-hover {
   border-color: var(--fdShellbar_Button_Hover_Border_Color);
   background-color: var(--sapShell_Hover_Background);
 }
-.fd-shellbar .fd-shellbar__button:hover[aria-disabled=true], .fd-shellbar .fd-shellbar__button:hover.is-disabled, .fd-shellbar .fd-shellbar__button:hover:disabled, .fd-shellbar .fd-shellbar__button.is-hover[aria-disabled=true], .fd-shellbar .fd-shellbar__button.is-hover.is-disabled, .fd-shellbar .fd-shellbar__button.is-hover:disabled {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__button:hover[aria-disabled=true], .fd-shellbar .fd-shellbar__group .fd-shellbar__button:hover.is-disabled, .fd-shellbar .fd-shellbar__group .fd-shellbar__button:hover:disabled, .fd-shellbar .fd-shellbar__group .fd-shellbar__button.is-hover[aria-disabled=true], .fd-shellbar .fd-shellbar__group .fd-shellbar__button.is-hover.is-disabled, .fd-shellbar .fd-shellbar__group .fd-shellbar__button.is-hover:disabled {
   background: transparent;
 }
-.fd-shellbar .fd-shellbar__button:active, .fd-shellbar .fd-shellbar__button.is-active {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__button:active, .fd-shellbar .fd-shellbar__group .fd-shellbar__button.is-active {
   border-color: var(--fdShellbar_Button_Active_Border_Color);
   background: var(--sapShell_Active_Background);
-  color: var(--sapShell_Active_TextColor);
+  color: var(--sapShell_Active_TextColor) !important;
 }
-.fd-shellbar .fd-shellbar__button--menu {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__button--menu {
   margin-left: 0.5rem;
 }
-[dir=rtl] .fd-shellbar .fd-shellbar__button--menu, .fd-shellbar .fd-shellbar__button--menu[dir=rtl] {
+[dir=rtl] .fd-shellbar .fd-shellbar__group .fd-shellbar__button--menu, .fd-shellbar .fd-shellbar__group .fd-shellbar__button--menu[dir=rtl] {
   margin-right: 0.5rem;
   margin-left: 0;
 }
-.fd-shellbar .fd-shellbar__button--menu .fd-shellbar__title {
+.fd-shellbar .fd-shellbar__group .fd-shellbar__button--menu .fd-shellbar__title {
   margin: 0;
 }
 .fd-shellbar--s .fd-shellbar__subtitle,
@@ -31420,9 +31450,6 @@ places the element far left of the screen. so it is not visible.
 .fd-shellbar--m, .fd-shellbar--l {
   padding: 0 2rem;
 }
-.fd-shellbar--xl {
-  padding: 0 3rem;
-}
 .fd-shellbar--m .fd-shellbar__subtitle,
 .fd-shellbar--m .fd-shellbar__title, .fd-shellbar--l .fd-shellbar__subtitle,
 .fd-shellbar--l .fd-shellbar__title, .fd-shellbar--xl .fd-shellbar__subtitle,
@@ -31435,6 +31462,17 @@ places the element far left of the screen. so it is not visible.
 .fd-shellbar--m .fd-shellbar__action--desktop, .fd-shellbar--l .fd-shellbar__action--desktop, .fd-shellbar--xl .fd-shellbar__action--desktop {
   display: inline-block;
 }
+.fd-shellbar--xl {
+  padding: 0 3rem;
+}
+.fd-shellbar--side-nav.fd-shellbar--s, .fd-shellbar--side-nav.fd-shellbar--m, .fd-shellbar--side-nav.fd-shellbar--l, .fd-shellbar--side-nav.fd-shellbar--xl {
+  padding-right: 0.5rem;
+  padding: 0;
+}
+[dir=rtl] .fd-shellbar--side-nav.fd-shellbar--s, .fd-shellbar--side-nav.fd-shellbar--s[dir=rtl], [dir=rtl] .fd-shellbar--side-nav.fd-shellbar--m, .fd-shellbar--side-nav.fd-shellbar--m[dir=rtl], [dir=rtl] .fd-shellbar--side-nav.fd-shellbar--l, .fd-shellbar--side-nav.fd-shellbar--l[dir=rtl], [dir=rtl] .fd-shellbar--side-nav.fd-shellbar--xl, .fd-shellbar--side-nav.fd-shellbar--xl[dir=rtl] {
+  padding-right: 0;
+  padding-left: 0.5rem;
+}
 /* Fully expanded pseudo element. Requires parent to have specified position */
 /* stylelint-disable */
 /* stylelint-enable */
@@ -34160,6 +34198,7 @@ places the element far left of the screen. so it is not visible.
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  border-left: var(--sapButton_BorderWidth) solid transparent;
   border: none;
   z-index: auto !important;
   position: static !important;
@@ -34167,21 +34206,35 @@ places the element far left of the screen. so it is not visible.
   background: var(--fdInput_Group_Button_Background);
   color: var(--fdInput_Group_Button_Text_Color);
 }
+[dir=rtl] .fd-step-input .fd-step-input__button, .fd-step-input .fd-step-input__button[dir=rtl] {
+  border-left: none;
+  border-right: var(--sapButton_BorderWidth) solid transparent;
+}
 .fd-step-input .fd-step-input__button::before {
   display: none !important;
 }
 .fd-step-input .fd-step-input__button:hover, .fd-step-input .fd-step-input__button.is-hover {
+  border-left: var(--fdInputGroup_ControlButton_SideBorder);
   background: var(--fdInput_Group_Button_Hover_Background);
   color: var(--fdInput_Group_Button_Hover_Text_Color);
   -webkit-box-shadow: var(--fdInput_Group_Button_Box_Shadow);
           box-shadow: var(--fdInput_Group_Button_Box_Shadow);
 }
+[dir=rtl] .fd-step-input .fd-step-input__button:hover, .fd-step-input .fd-step-input__button:hover[dir=rtl], [dir=rtl] .fd-step-input .fd-step-input__button.is-hover, .fd-step-input .fd-step-input__button.is-hover[dir=rtl] {
+  border-left: none;
+  border-right: var(--fdInputGroup_ControlButton_SideBorder);
+}
 .fd-step-input .fd-step-input__button:active, .fd-step-input .fd-step-input__button.is-active {
+  border-left: var(--fdInputGroup_ControlButton_SideBorder);
   background: var(--fdInput_Group_Button_Active_Background);
   color: var(--fdInput_Group_Button_Active_Text_Color);
   -webkit-box-shadow: var(--fdInput_Group_Button_Box_Shadow);
           box-shadow: var(--fdInput_Group_Button_Box_Shadow);
 }
+[dir=rtl] .fd-step-input .fd-step-input__button:active, .fd-step-input .fd-step-input__button:active[dir=rtl], [dir=rtl] .fd-step-input .fd-step-input__button.is-active, .fd-step-input .fd-step-input__button.is-active[dir=rtl] {
+  border-left: none;
+  border-right: var(--fdInputGroup_ControlButton_SideBorder);
+}
 .fd-step-input.is-success .fd-step-input__button:hover, .fd-step-input.is-success .fd-step-input__button.is-hover {
   -webkit-box-shadow: var(--fdInput_Group_Button_Success_Active_Box_Shadow);
           box-shadow: var(--fdInput_Group_Button_Success_Active_Box_Shadow);

package/package.json

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