@fundamental-styles/theming-preview 0.24.0-rc.52 → 0.24.0-rc.55

package/fundamental-styles.css

@@ -1,7 +1,7 @@
 
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.52
+ * Fundamental Library Styles v0.24.0-rc.55
  * 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)
  */
@@ -7012,15 +7012,15 @@
   left: auto;
   right: 0.0625rem;
 }
-.fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item:active, .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item.is-active {
+.fd-calendar .fd-calendar__item:active, .fd-calendar .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__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item:hover:active, .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item.is-active:hover, .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .is-hover.fd-calendar__item:active, .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .is-hover.fd-calendar__item.is-active {
+.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 {
   background-color: var(--fdCalendar_Item_Active_Background_Hover);
 }
-.fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item:focus:active, .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item.is-active:focus, .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .is-focus.fd-calendar__item:active, .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .is-focus.fd-calendar__item.is-active {
+.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 {
   z-index: 5;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -7033,14 +7033,14 @@
 .fd-calendar .fd-calendar__item--range:hover, .fd-calendar .is-hover.fd-calendar__item--range {
   background-color: var(--sapList_Hover_SelectionBackground);
 }
-.fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item[aria-disabled=true], .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item.is-disabled, .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item:disabled {
+.fd-calendar__item[aria-disabled=true], .fd-calendar__item.is-disabled, .fd-calendar__item:disabled {
   pointer-events: none;
   opacity: 0.4;
 }
-.fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item[aria-disabled=true]:hover, .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item.is-disabled:hover, .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item:hover:disabled {
+.fd-calendar__item[aria-disabled=true]:hover, .fd-calendar__item.is-disabled:hover, .fd-calendar__item:hover:disabled {
   cursor: not-allowed;
 }
-.fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item:focus, .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item.is-focus {
+.fd-calendar__item:focus, .fd-calendar__item.is-focus {
   -webkit-box-shadow: none;
           box-shadow: none;
   outline-offset: -0.1875rem;
@@ -7218,19 +7218,22 @@
   padding-top: 1.875rem;
 }
 .fd-calendar__content--years .fd-calendar__item, .fd-calendar__content--months .fd-calendar__item {
+  background-color: transparent;
   max-height: 2.75rem;
 }
-.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:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item:hover, .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item.is-hover {
-  background-color: var(--sapList_Hover_Background);
+.fd-calendar__content--years .fd-calendar__item-button, .fd-calendar__content--months .fd-calendar__item-button {
+  min-width: 100%;
+  min-height: 100%;
+  padding: 0;
 }
-.fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item:active .fd-calendar__text, .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item.is-active .fd-calendar__text {
-  color: var(--sapContent_Selected_TextColor);
+.fd-calendar__content--years .fd-calendar__item--current .fd-calendar__item-button, .fd-calendar__content--months .fd-calendar__item--current .fd-calendar__item-button {
+  border: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border-radius: 0;
 }
-.fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item:focus, .fd-calendar__content:not(.fd-calendar__content--years):not(.fd-calendar__content--months) .fd-calendar__item.is-focus {
-  z-index: 5;
+.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--screen-reader-only {
   position: absolute;
@@ -7318,9 +7321,18 @@
           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);
@@ -27814,7 +27826,7 @@ places the element far left of the screen. so it is not visible.
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-popover__body::before, .fd-popover__body::after {
+.fd-popover__body::after, .fd-popover__body::before {
   content: "";
   position: absolute;
 }
@@ -27859,6 +27871,29 @@ places the element far left of the screen. so it is not visible.
   border-bottom-right-radius: var(--fdPopover_Border_Radius);
   border-bottom-left-radius: var(--fdPopover_Border_Radius);
 }
+.fd-popover__body--compact.fd-popover__body::after, .fd-popover__body--compact.fd-popover__body::before, .fd-popover__body--compact.fd-popover__body--left::after, .fd-popover__body--compact.fd-popover__body--left::before {
+  left: 0.44rem;
+}
+[dir=rtl] .fd-popover__body--compact.fd-popover__body::after, [dir=rtl] .fd-popover__body--compact.fd-popover__body::before, .fd-popover__body--compact.fd-popover__body[dir=rtl]::after, .fd-popover__body--compact.fd-popover__body[dir=rtl]::before, [dir=rtl] .fd-popover__body--compact.fd-popover__body--left::after, [dir=rtl] .fd-popover__body--compact.fd-popover__body--left::before, .fd-popover__body--compact.fd-popover__body--left[dir=rtl]::after, .fd-popover__body--compact.fd-popover__body--left[dir=rtl]::before {
+  left: auto;
+  right: 0.44rem;
+}
+.fd-popover__body--compact.fd-popover__body--right {
+  right: var(--sapGroup_BorderWidth);
+  left: auto;
+}
+[dir=rtl] .fd-popover__body--compact.fd-popover__body--right, .fd-popover__body--compact.fd-popover__body--right[dir=rtl] {
+  left: var(--sapGroup_BorderWidth);
+  right: auto;
+}
+.fd-popover__body--compact.fd-popover__body--right::after, .fd-popover__body--compact.fd-popover__body--right::before {
+  left: auto;
+  right: 0.44rem;
+}
+[dir=rtl] .fd-popover__body--compact.fd-popover__body--right::after, [dir=rtl] .fd-popover__body--compact.fd-popover__body--right::before, .fd-popover__body--compact.fd-popover__body--right[dir=rtl]::after, .fd-popover__body--compact.fd-popover__body--right[dir=rtl]::before {
+  left: 0.44rem;
+  right: auto;
+}
 .fd-popover__body, .fd-popover__body--left {
   left: var(--sapGroup_BorderWidth);
   right: auto;
@@ -27867,12 +27902,12 @@ places the element far left of the screen. so it is not visible.
   right: var(--sapGroup_BorderWidth);
   left: auto;
 }
-.fd-popover__body::before, .fd-popover__body::after, .fd-popover__body--left::before, .fd-popover__body--left::after {
-  left: var(--fdPopover_Arrow_Offset);
+.fd-popover__body::after, .fd-popover__body::before, .fd-popover__body--left::after, .fd-popover__body--left::before {
+  left: 0.575rem;
 }
-[dir=rtl] .fd-popover__body::before, [dir=rtl] .fd-popover__body::after, .fd-popover__body[dir=rtl]::before, .fd-popover__body[dir=rtl]::after, [dir=rtl] .fd-popover__body--left::before, [dir=rtl] .fd-popover__body--left::after, .fd-popover__body--left[dir=rtl]::before, .fd-popover__body--left[dir=rtl]::after {
+[dir=rtl] .fd-popover__body::after, [dir=rtl] .fd-popover__body::before, .fd-popover__body[dir=rtl]::after, .fd-popover__body[dir=rtl]::before, [dir=rtl] .fd-popover__body--left::after, [dir=rtl] .fd-popover__body--left::before, .fd-popover__body--left[dir=rtl]::after, .fd-popover__body--left[dir=rtl]::before {
   left: auto;
-  right: var(--fdPopover_Arrow_Offset);
+  right: 0.575rem;
 }
 .fd-popover__body--right {
   right: var(--sapGroup_BorderWidth);
@@ -27882,12 +27917,12 @@ places the element far left of the screen. so it is not visible.
   left: var(--sapGroup_BorderWidth);
   right: auto;
 }
-.fd-popover__body--right::before, .fd-popover__body--right::after {
+.fd-popover__body--right::after, .fd-popover__body--right::before {
   left: auto;
-  right: var(--fdPopover_Arrow_Offset);
+  right: 0.575rem;
 }
-[dir=rtl] .fd-popover__body--right::before, [dir=rtl] .fd-popover__body--right::after, .fd-popover__body--right[dir=rtl]::before, .fd-popover__body--right[dir=rtl]::after {
-  left: var(--fdPopover_Arrow_Offset);
+[dir=rtl] .fd-popover__body--right::after, [dir=rtl] .fd-popover__body--right::before, .fd-popover__body--right[dir=rtl]::after, .fd-popover__body--right[dir=rtl]::before {
+  left: 0.575rem;
   right: auto;
 }
 .fd-popover__body--no-arrow {
@@ -27896,7 +27931,7 @@ places the element far left of the screen. so it is not visible.
   top: 100%;
   z-index: 2;
 }
-.fd-popover__body--no-arrow::before, .fd-popover__body--no-arrow::after {
+.fd-popover__body--no-arrow::after, .fd-popover__body--no-arrow::before {
   display: none;
 }
 .fd-popover__body--dropdown {
@@ -27980,6 +28015,18 @@ places the element far left of the screen. so it is not visible.
   border: none;
   margin-top: -0.25rem !important;
 }
+.fd-popover__popper--compact .fd-popover__arrow-x--start {
+  left: 0.44rem;
+}
+.fd-popover__popper--compact .fd-popover__arrow-x--end {
+  right: 0.44rem;
+}
+.fd-popover__popper--compact .fd-popover__arrow-y--top {
+  top: 0.44rem;
+}
+.fd-popover__popper--compact .fd-popover__arrow-y--bottom {
+  bottom: 0.44rem;
+}
 .fd-popover__popper .fd-popover__arrow {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -28055,7 +28102,7 @@ places the element far left of the screen. so it is not visible.
   border-right-color: var(--sapGroup_ContentBackground);
 }
 .fd-popover__popper .fd-popover__arrow-x--start {
-  left: var(--fdPopover_Arrow_Offset);
+  left: 0.575rem;
 }
 .fd-popover__popper .fd-popover__arrow-x--center {
   left: 50%;
@@ -28063,10 +28110,10 @@ places the element far left of the screen. so it is not visible.
           transform: translateX(-50%);
 }
 .fd-popover__popper .fd-popover__arrow-x--end {
-  right: var(--fdPopover_Arrow_Offset);
+  right: 0.575rem;
 }
 .fd-popover__popper .fd-popover__arrow-y--top {
-  top: var(--fdPopover_Arrow_Offset);
+  top: 0.575rem;
 }
 .fd-popover__popper .fd-popover__arrow-y--center {
   top: 50%;
@@ -28074,7 +28121,7 @@ places the element far left of the screen. so it is not visible.
           transform: translateY(-50%);
 }
 .fd-popover__popper .fd-popover__arrow-y--bottom {
-  bottom: var(--fdPopover_Arrow_Offset);
+  bottom: 0.575rem;
 }
 .fd-popover__inline-help {
   padding: 0.75rem;
@@ -30064,10 +30111,15 @@ places the element far left of the screen. so it is not visible.
   background-color: var(--fdScrollbar_Track_Color);
 }
 .fd-scrollbar::-webkit-scrollbar-thumb {
-  background-color: var(--fdScrollbar_Thumb_Color);
+  background-color: transparent;
+  -webkit-box-shadow: inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);
+          box-shadow: inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Color);
+  border: var(--fdScrollbar_Thumb_Offset) solid transparent;
+  border-radius: calc(var(--fdScrollbar_Thumb_Border_Radius) - var(--fdScrollbar_Thumb_Offset));
 }
 .fd-scrollbar::-webkit-scrollbar-thumb:hover, .fd-scrollbar::-webkit-scrollbar-thumb:active {
-  background-color: var(--fdScrollbar_Thumb_Hover_Color);
+  -webkit-box-shadow: inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);
+          box-shadow: inset 0 0 0 var(--fdScrollbar_Dimension) var(--fdScrollbar_Thumb_Hover_Color);
 }
 /* Fully expanded pseudo element. Requires parent to have specified position */
 /* stylelint-disable */

package/package.json

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