@fundamental-styles/theming-preview 0.24.0-rc.75 → 0.24.0-rc.78

package/fundamental-styles.css

@@ -1,7 +1,7 @@
 
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.75
+ * Fundamental Library Styles v0.24.0-rc.78
  * 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)
  */
@@ -4815,12 +4815,36 @@
           box-sizing: inherit;
   font-size: inherit;
 }
+.fd-avatar-group__more-button {
+  outline: none !important;
+}
+.fd-avatar-group__more-button:focus::after, .fd-avatar-group__more-button.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-avatar-group__more-button .fd-avatar-group__button-text {
   font-size: inherit;
 }
 .fd-avatar-group__more-button .fd-avatar-group__button-text bdi {
   font-size: inherit;
 }
+.fd-avatar-group__more-button:focus, .fd-avatar-group__more-button.is-focus {
+  z-index: 5;
+}
+.fd-avatar-group__more-button:focus::after, .fd-avatar-group__more-button.is-focus::after {
+  top: var(--fdAvatarGroup_MoreButton_Vertical_Offset);
+  bottom: var(--fdAvatarGroup_MoreButton_Vertical_Offset);
+  left: -0.25rem;
+  right: -0.25rem;
+}
 .fd-avatar-group__overflow-body {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -4861,12 +4885,6 @@
   border-radius: 25rem;
   border-width: var(--fdAvatarGroup_MoreButton_Border);
 }
-.fd-avatar-group--xs .fd-avatar-group__more-button:focus, .fd-avatar-group--xs .fd-avatar-group__more-button.is-focus {
-  outline-offset: 0.0625rem;
-  outline-width: var(--sapContent_FocusWidth);
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
-}
 .fd-avatar-group--s .fd-avatar-group__more-button {
   height: 3rem;
   max-height: 3rem;
@@ -4876,12 +4894,6 @@
   border-radius: 25rem;
   border-width: var(--fdAvatarGroup_MoreButton_Border);
 }
-.fd-avatar-group--s .fd-avatar-group__more-button:focus, .fd-avatar-group--s .fd-avatar-group__more-button.is-focus {
-  outline-offset: 0.0625rem;
-  outline-width: var(--sapContent_FocusWidth);
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
-}
 .fd-avatar-group--m .fd-avatar-group__more-button {
   height: 4rem;
   max-height: 4rem;
@@ -4891,12 +4903,6 @@
   border-radius: 25rem;
   border-width: var(--fdAvatarGroup_MoreButton_Border);
 }
-.fd-avatar-group--m .fd-avatar-group__more-button:focus, .fd-avatar-group--m .fd-avatar-group__more-button.is-focus {
-  outline-offset: 0.0625rem;
-  outline-width: var(--sapContent_FocusWidth);
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
-}
 .fd-avatar-group--l .fd-avatar-group__more-button {
   height: 5rem;
   max-height: 5rem;
@@ -4906,12 +4912,6 @@
   border-radius: 25rem;
   border-width: var(--fdAvatarGroup_MoreButton_Border);
 }
-.fd-avatar-group--l .fd-avatar-group__more-button:focus, .fd-avatar-group--l .fd-avatar-group__more-button.is-focus {
-  outline-offset: 0.0625rem;
-  outline-width: var(--sapContent_FocusWidth);
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
-}
 .fd-avatar-group--xl .fd-avatar-group__more-button {
   height: 7rem;
   max-height: 7rem;
@@ -4921,12 +4921,6 @@
   border-radius: 25rem;
   border-width: var(--fdAvatarGroup_MoreButton_Border);
 }
-.fd-avatar-group--xl .fd-avatar-group__more-button:focus, .fd-avatar-group--xl .fd-avatar-group__more-button.is-focus {
-  outline-offset: 0.0625rem;
-  outline-width: var(--sapContent_FocusWidth);
-  outline-color: var(--sapContent_FocusColor);
-  outline-style: var(--sapContent_FocusStyle);
-}
 .fd-avatar-group--individual-type.fd-avatar-group--xs .fd-avatar-group__item {
   margin-right: 0.0625rem;
   margin-left: 0;
@@ -28073,7 +28067,7 @@ places the element far left of the screen. so it is not visible.
   border-bottom-color: var(--sapGroup_ContentBackground);
   border-left-color: transparent;
   border-right-color: transparent;
-  top: -0.4375rem;
+  top: calc(-0.5rem + var(--fdPopover_Border_Width));
   z-index: 1002;
 }
 .fd-popover__body::after {
@@ -28081,7 +28075,7 @@ places the element far left of the screen. so it is not visible.
   width: 0;
   border-style: solid;
   border-width: 0 0.5rem 0.5rem 0.5rem;
-  border-bottom-color: var(--sapContent_ForegroundBorderColor);
+  border-bottom-color: var(--fdPopover_Border_Color);
   border-left-color: transparent;
   border-right-color: transparent;
   top: -0.5rem;
@@ -28299,7 +28293,7 @@ places the element far left of the screen. so it is not visible.
 .fd-popover__popper .fd-popover__arrow--bottom {
   bottom: -0.5rem;
   border-width: 0.5rem 0.5rem 0 0.5rem;
-  border-top-color: var(--sapContent_ForegroundBorderColor);
+  border-top-color: var(--fdPopover_Border_Color);
 }
 .fd-popover__popper .fd-popover__arrow--bottom::after {
   bottom: 0.0625rem;
@@ -28309,7 +28303,7 @@ places the element far left of the screen. so it is not visible.
 .fd-popover__popper .fd-popover__arrow--top {
   top: -0.5rem;
   border-width: 0 0.5rem 0.5rem 0.5rem;
-  border-bottom-color: var(--sapContent_ForegroundBorderColor);
+  border-bottom-color: var(--fdPopover_Border_Color);
 }
 .fd-popover__popper .fd-popover__arrow--top::after {
   top: 0.0625rem;
@@ -28319,7 +28313,7 @@ places the element far left of the screen. so it is not visible.
 .fd-popover__popper .fd-popover__arrow--end {
   right: -0.5rem;
   border-width: 0.5rem 0 0.5rem 0.5rem;
-  border-left-color: var(--sapContent_ForegroundBorderColor);
+  border-left-color: var(--fdPopover_Border_Color);
 }
 .fd-popover__popper .fd-popover__arrow--end::after {
   right: 0.0625rem;
@@ -28329,7 +28323,7 @@ places the element far left of the screen. so it is not visible.
 .fd-popover__popper .fd-popover__arrow--start {
   left: -0.5rem;
   border-width: 0.5rem 0.5rem 0.5rem 0;
-  border-right-color: var(--sapContent_ForegroundBorderColor);
+  border-right-color: var(--fdPopover_Border_Color);
 }
 .fd-popover__popper .fd-popover__arrow--start::after {
   left: 0.0625rem;

package/package.json

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