@fundamental-styles/theming-preview 0.23.0-rc.6 → 0.23.0-rc.7

package/fundamental-styles.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.23.0-rc.6
+ * Fundamental Library Styles v0.23.0-rc.7
  * 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)
  */
@@ -29292,11 +29292,11 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-popover__body[dir=rtl]::before,
 [dir=rtl] .fd-popover__body::before {
-  right: .5rem
+  right: .65rem
 }
 .fd-popover__body[dir=rtl]::after,
 [dir=rtl] .fd-popover__body::after {
-  right: .5rem
+  right: .65rem
 }
 .fd-popover__body::before {
   height: 0;
@@ -29309,7 +29309,7 @@ places the element far left of the screen. so it is not visible.
   content: "";
   position: absolute;
   top: calc(-.5rem + 1px);
-  left: .5rem;
+  left: .65rem;
   z-index: 1002
 }
 .fd-popover__body::after {
@@ -29323,7 +29323,7 @@ places the element far left of the screen. so it is not visible.
   content: "";
   position: absolute;
   top: -.5rem;
-  left: .5rem;
+  left: .65rem;
   z-index: 1001
 }
 .fd-popover__body > :not(.fd-popover__wrapper) {
@@ -29358,12 +29358,12 @@ places the element far left of the screen. so it is not visible.
 .fd-popover__body--left[dir=rtl]::before,
 [dir=rtl] .fd-popover__body--left::after,
 [dir=rtl] .fd-popover__body--left::before {
-  right: .5rem;
+  right: .65rem;
   left: unset
 }
 .fd-popover__body--left::after,
 .fd-popover__body--left::before {
-  left: .5rem
+  left: .65rem
 }
 .fd-popover__body--right {
   right: var(--sapGroup_BorderWidth);
@@ -29378,13 +29378,13 @@ places the element far left of the screen. so it is not visible.
 .fd-popover__body--right[dir=rtl]::before,
 [dir=rtl] .fd-popover__body--right::after,
 [dir=rtl] .fd-popover__body--right::before {
-  left: .5rem;
+  left: .65rem;
   right: unset
 }
 .fd-popover__body--right::after,
 .fd-popover__body--right::before {
   left: auto;
-  right: .5rem
+  right: .65rem
 }
 .fd-popover__body--no-arrow {
   -webkit-box-shadow: var(--sapContent_Shadow1);
@@ -29437,6 +29437,9 @@ places the element far left of the screen. so it is not visible.
   opacity: 0;
   visibility: hidden
 }
+.fd-popover__body--hidden {
+  display: none
+}
 .fd-popover--input-message-group .fd-popover__body,
 .fd-popover--input-message-group .fd-popover__body--no-arrow,
 .fd-popover--input-message-group .fd-popover__popper,
@@ -29461,7 +29464,8 @@ places the element far left of the screen. so it is not visible.
   margin: 0;
   border: 0;
   border: none;
-  position: absolute;
+  position: relative;
+  width: 100%;
   white-space: nowrap;
   -webkit-box-shadow: var(--sapContent_Shadow2);
   box-shadow: var(--sapContent_Shadow2);
@@ -29522,69 +29526,86 @@ places the element far left of the screen. so it is not visible.
   border-style: solid;
   border-color: transparent
 }
-.fd-popover__popper[x-out-of-boundaries] {
-  display: none
+.fd-popover__popper .fd-popover__arrow--bottom::after,
+.fd-popover__popper .fd-popover__arrow--top::after {
+  margin: 0 -.5rem
 }
-.fd-popover__popper[x-placement^=top] {
-  margin-bottom: .5rem
+.fd-popover__popper .fd-popover__arrow--end::after,
+.fd-popover__popper .fd-popover__arrow--start::after {
+  margin: -.5rem 0
 }
-.fd-popover__popper[x-placement^=top] .fd-popover__arrow {
+.fd-popover__popper .fd-popover__arrow--bottom {
   bottom: -.5rem;
-  margin: 0 .5rem;
   border-width: .5rem .5rem 0 .5rem;
   border-top-color: var(--sapContent_ForegroundBorderColor)
 }
-.fd-popover__popper[x-placement^=top] .fd-popover__arrow::after {
+.fd-popover__popper .fd-popover__arrow--bottom::after {
   bottom: 1px;
-  margin: 0 -.5rem;
   border-width: .5rem .5rem 0 .5rem;
   border-top-color: var(--sapGroup_ContentBackground)
 }
-.fd-popover__popper[x-placement^=bottom] {
-  margin-top: .5rem
-}
-.fd-popover__popper[x-placement^=bottom] .fd-popover__arrow {
+.fd-popover__popper .fd-popover__arrow--top {
   top: -.5rem;
-  margin: 0 .5rem;
   border-width: 0 .5rem .5rem .5rem;
   border-bottom-color: var(--sapContent_ForegroundBorderColor)
 }
-.fd-popover__popper[x-placement^=bottom] .fd-popover__arrow::after {
+.fd-popover__popper .fd-popover__arrow--top::after {
   top: 1px;
-  margin: 0 -.5rem;
   border-width: 0 .5rem .5rem .5rem;
   border-bottom-color: var(--sapGroup_ContentBackground)
 }
-.fd-popover__popper[x-placement^=left] {
-  margin-right: .5rem
-}
-.fd-popover__popper[x-placement^=left] .fd-popover__arrow {
+.fd-popover__popper .fd-popover__arrow--end {
   right: -.5rem;
-  margin: .5rem 0;
   border-width: .5rem 0 .5rem .5rem;
   border-left-color: var(--sapContent_ForegroundBorderColor)
 }
-.fd-popover__popper[x-placement^=left] .fd-popover__arrow::after {
+.fd-popover__popper .fd-popover__arrow--end::after {
   right: 1px;
-  margin: -.5rem 0;
   border-width: .5rem 0 .5rem .5rem;
   border-left-color: var(--sapGroup_ContentBackground)
 }
-.fd-popover__popper[x-placement^=right] {
-  margin-left: .5rem
-}
-.fd-popover__popper[x-placement^=right] .fd-popover__arrow {
+.fd-popover__popper .fd-popover__arrow--start {
   left: -.5rem;
-  margin: .5rem 0;
   border-width: .5rem .5rem .5rem 0;
   border-right-color: var(--sapContent_ForegroundBorderColor)
 }
-.fd-popover__popper[x-placement^=right] .fd-popover__arrow::after {
+.fd-popover__popper .fd-popover__arrow--start::after {
   left: 1px;
-  margin: -.5rem 0;
   border-width: .5rem .5rem .5rem 0;
   border-right-color: var(--sapGroup_ContentBackground)
 }
+.fd-popover__popper .fd-popover__arrow-x--start {
+  left: .65rem
+}
+.fd-popover__popper .fd-popover__arrow-x--center {
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%)
+}
+.fd-popover__popper .fd-popover__arrow-x--end {
+  right: .65rem
+}
+.fd-popover__popper .fd-popover__arrow-y--top {
+  top: .65rem
+}
+.fd-popover__popper .fd-popover__arrow-y--center {
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%)
+}
+.fd-popover__popper .fd-popover__arrow-y--bottom {
+  bottom: .65rem
+}
+.fd-popover__inline-help {
+  padding: .75rem;
+  font-size: var(--sapFontSmallSize)
+}
+.fd-popover__inline-help--icon .fd-popover__arrow-x--start {
+  left: .25rem
+}
+.fd-popover__inline-help--icon .fd-popover__arrow-x--end {
+  right: .25rem
+}
 .drag-placeholder {
   position: absolute;
   opacity: .3

package/package.json

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