@ui5/webcomponents 0.0.0-a3eca7ade → 0.0.0-a7032d86e

package/src/popup-utils/{PopoverRegistry.js → PopoverRegistry.ts}

@@ -1,27 +1,35 @@
 import { isClickInRect } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+import type { Interval } from "@ui5/webcomponents-base/dist/types.js";
+import type Popover from "../Popover.js";
+import { instanceOfPopover } from "../Popover.js";
 import { getOpenedPopups, addOpenedPopup, removeOpenedPopup } from "./OpenedPopupsRegistry.js";
 
-let updateInterval = null;
+type RegisteredPopover = {
+	instance: Popover;
+	parentPopovers: Array<Popover>;
+}
+
+let updateInterval: Interval;
 const intervalTimeout = 300;
-const openedRegistry = [];
+const openedRegistry: Array<RegisteredPopover> = [];
 
-const repositionPopovers = event => {
+const repositionPopovers = () => {
 	openedRegistry.forEach(popover => {
 		popover.instance.reposition();
 	});
 };
 
-const attachGlobalScrollHandler = () => {
-	document.body.addEventListener("scroll", repositionPopovers, true);
-};
-
-const detachGlobalScrollHandler = () => {
-	document.body.removeEventListener("scroll", repositionPopovers, true);
+const closePopoversIfLostFocus = () => {
+	if (document.activeElement!.tagName === "IFRAME") {
+		getRegistry().reverse().forEach(popup => popup.instance.close(false, false, true));
+	}
 };
 
 const runUpdateInterval = () => {
 	updateInterval = setInterval(() => {
 		repositionPopovers();
+
+		closePopoversIfLostFocus();
 	}, intervalTimeout);
 };
 
@@ -29,6 +37,22 @@ const stopUpdateInterval = () => {
 	clearInterval(updateInterval);
 };
 
+const attachGlobalScrollHandler = () => {
+	document.body.addEventListener("scroll", repositionPopovers, { capture: true });
+};
+
+const detachGlobalScrollHandler = () => {
+	document.body.removeEventListener("scroll", repositionPopovers, { capture: true });
+};
+
+const attachScrollHandler = (popover: Popover) => {
+	popover && popover.shadowRoot!.addEventListener("scroll", repositionPopovers, { capture: true });
+};
+
+const detachScrollHandler = (popover: Popover) => {
+	popover && popover.shadowRoot!.removeEventListener("scroll", repositionPopovers, { capture: true });
+};
+
 const attachGlobalClickHandler = () => {
 	document.addEventListener("mousedown", clickHandler);
 };
@@ -37,11 +61,16 @@ const detachGlobalClickHandler = () => {
 	document.removeEventListener("mousedown", clickHandler);
 };
 
-const clickHandler = event => {
+const clickHandler = (event: MouseEvent) => {
 	const openedPopups = getOpenedPopups();
-	const isTopPopupPopover = openedPopups[openedPopups.length - 1].instance.showAt;
 
-	if (openedPopups.length === 0 || !isTopPopupPopover) {
+	if (openedPopups.length === 0) {
+		return;
+	}
+
+	const isTopPopupPopover = instanceOfPopover(openedPopups[openedPopups.length - 1].instance);
+
+	if (!isTopPopupPopover) {
 		return;
 	}
 
@@ -50,7 +79,7 @@ const clickHandler = event => {
 		const popup = openedPopups[i].instance;
 
 		// if popup is modal, opener is clicked, popup is dialog skip closing
-		if (popup.isModal || popup.isOpenerClicked(event)) {
+		if (popup.isModal || (popup as Popover).isOpenerClicked(event)) {
 			return;
 		}
 
@@ -62,15 +91,7 @@ const clickHandler = event => {
 	}
 };
 
-const attachScrollHandler = popover => {
-	popover && popover.shadowRoot.addEventListener("scroll", repositionPopovers, true);
-};
-
-const detachScrollHandler = popover => {
-	popover && popover.shadowRoot.removeEventListener("scroll", repositionPopovers);
-};
-
-const addOpenedPopover = instance => {
+const addOpenedPopover = (instance: Popover) => {
 	const parentPopovers = getParentPopoversIfNested(instance);
 
 	addOpenedPopup(instance, parentPopovers);
@@ -88,7 +109,7 @@ const addOpenedPopover = instance => {
 	}
 };
 
-const removeOpenedPopover = instance => {
+const removeOpenedPopover = (instance: Popover) => {
 	const popoversToClose = [instance];
 
 	for (let i = 0; i < openedRegistry.length; i++) {
@@ -100,7 +121,7 @@ const removeOpenedPopover = instance => {
 
 	for (let i = popoversToClose.length - 1; i >= 0; i--) {
 		for (let j = 0; j < openedRegistry.length; j++) {
-			let indexOfItemToRemove;
+			let indexOfItemToRemove = -1;
 			if (popoversToClose[i] === openedRegistry[j].instance) {
 				indexOfItemToRemove = j;
 			}
@@ -125,14 +146,14 @@ const getRegistry = () => {
 	return openedRegistry;
 };
 
-const getParentPopoversIfNested = instance => {
+const getParentPopoversIfNested = (instance: Popover) => {
 	let currentElement = instance.parentNode;
-	const parentPopovers = [];
+	const parentPopovers: Array<Popover> = [];
 
-	while (currentElement.parentNode) {
+	while (currentElement && currentElement.parentNode) {
 		for (let i = 0; i < openedRegistry.length; i++) {
-			if (currentElement && currentElement === openedRegistry[i].instance) {
-				parentPopovers.push(currentElement);
+			if (currentElement === openedRegistry[i].instance) {
+				parentPopovers.push(currentElement as Popover);
 			}
 		}
 

package/src/themes/Avatar.css

@@ -1,6 +1,7 @@
 :host(:not([hidden])) {
 	display: inline-block;
 	box-sizing: border-box;
+	position: relative;
 }
 
 /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
@@ -26,18 +27,13 @@
 	color: var(--ui5-avatar-initials-color);
 }
 
-/* Shapes */
-:host([shape="Square"]),
-:host([shape="Square"]) ::slotted(*){
-	border-radius: .25rem;
-}
-
-:host([shape="Square"]) .ui5-avatar-root {
-	border-radius: inherit;
-}
-
-:host([shape="Square"]) .ui5-avatar-img {
-	border-radius: inherit;
+.ui5-avatar-root {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	outline: none;
+	height: 100%;
+	width: 100%;
 }
 
 /* Sizes */
@@ -81,45 +77,55 @@
 
 /* Icon */
 :host .ui5-avatar-icon {
-	height: 1.5rem;
-	width: 1.5rem;
+	height: var(--_ui5_avatar_fontsize_S);
+	width: var(--_ui5_avatar_fontsize_S);
 	color: inherit;
 }
 
 :host([_size="XS"]) .ui5-avatar-icon,
 :host([size="XS"]) .ui5-avatar-icon {
-	height: 1rem;
-	width: 1rem;
+	height: var(--_ui5_avatar_icon_XS);
+	width: var(--_ui5_avatar_icon_XS);
 }
 
 :host([_size="S"]) .ui5-avatar-icon,
 :host([size="S"]) .ui5-avatar-icon {
-	height: 1.5rem;
-	width: 1.5rem;
+	height: var(--_ui5_avatar_icon_S);
+	width: var(--_ui5_avatar_icon_S);
 }
 
 :host([_size="M"]) .ui5-avatar-icon,
 :host([size="M"]) .ui5-avatar-icon {
-	height: 2rem;
-	width: 2rem;
+	height: var(--_ui5_avatar_icon_M);
+	width: var(--_ui5_avatar_icon_M);
 }
 
 :host([_size="L"]) .ui5-avatar-icon,
 :host([size="L"]) .ui5-avatar-icon {
-	height: 2.5rem;
-	width: 2.5rem;
+	height: var(--_ui5_avatar_icon_L);
+	width: var(--_ui5_avatar_icon_L);
 }
 
 :host([_size="XL"]) .ui5-avatar-icon,
 :host([size="XL"]) .ui5-avatar-icon {
-	height: 3rem;
-	width: 3rem;
+	height: var(--_ui5_avatar_icon_XL);
+	width: var(--_ui5_avatar_icon_XL);
 }
 
 ::slotted(*) {
 	border-radius: 50%;
     width: 100%;
     height: 100%;
+	pointer-events: none;
+}
+
+/* Shapes */
+:host([shape="Square"]) {
+	border-radius: var(--ui5-avatar-border-radius);
+}
+
+:host([shape="Square"]) ::slotted(*) {
+	border-radius: calc(var(--ui5-avatar-border-radius) - var(--ui5-avatar-border-radius-img-deduction));
 }
 
 :host(:not([color-scheme])),
@@ -128,66 +134,77 @@
 :host([color-scheme="Accent6"]) {
 	background-color: var(--ui5-avatar-accent6);
 	color: var(--ui5-avatar-accent6-color);
+	border-color: var(--ui5-avatar-accent6-border-color);
 }
 
 :host([_color-scheme="Accent1"]),
 :host([color-scheme="Accent1"]) {
 	background-color: var(--ui5-avatar-accent1);
 	color: var(--ui5-avatar-accent1-color);
+	border-color: var(--ui5-avatar-accent1-border-color);
 }
 
 :host([_color-scheme="Accent2"]),
 :host([color-scheme="Accent2"]) {
 	background-color: var(--ui5-avatar-accent2);
 	color: var(--ui5-avatar-accent2-color);
+	border-color: var(--ui5-avatar-accent2-border-color);
 }
 
 :host([_color-scheme="Accent3"]),
 :host([color-scheme="Accent3"]) {
 	background-color: var(--ui5-avatar-accent3);
 	color: var(--ui5-avatar-accent3-color);
+	border-color: var(--ui5-avatar-accent3-border-color);
 }
 
 :host([_color-scheme="Accent4"]),
 :host([color-scheme="Accent4"]) {
 	background-color: var(--ui5-avatar-accent4);
 	color: var(--ui5-avatar-accent4-color);
+	border-color: var(--ui5-avatar-accent4-border-color);
 }
 
 :host([_color-scheme="Accent5"]),
 :host([color-scheme="Accent5"]) {
 	background-color: var(--ui5-avatar-accent5);
 	color: var(--ui5-avatar-accent5-color);
+	border-color: var(--ui5-avatar-accent5-border-color);
 }
 
 :host([_color-scheme="Accent7"]),
 :host([color-scheme="Accent7"]) {
 	background-color: var(--ui5-avatar-accent7);
 	color: var(--ui5-avatar-accent7-color);
+	border-color: var(--ui5-avatar-accent7-border-color);
 }
 
 :host([_color-scheme="Accent8"]),
 :host([color-scheme="Accent8"]) {
 	background-color: var(--ui5-avatar-accent8);
 	color: var(--ui5-avatar-accent8-color);
+	border-color: var(--ui5-avatar-accent8-border-color);
 }
 
 :host([_color-scheme="Accent9"]),
 :host([color-scheme="Accent9"]) {
 	background-color: var(--ui5-avatar-accent9);
 	color: var(--ui5-avatar-accent9-color);
+	border-color: var(--ui5-avatar-accent9-border-color);
 }
 
 :host([_color-scheme="Accent10"]),
 :host([color-scheme="Accent10"]) {
 	background-color: var(--ui5-avatar-accent10);
 	color: var(--ui5-avatar-accent10-color);
+	border-color: var(--ui5-avatar-accent10-border-color);
 }
 
 :host([_color-scheme="Placeholder"]),
 :host([color-scheme="Placeholder"]) {
 	background-color: var(--ui5-avatar-placeholder);
 	color: var(--ui5-avatar-placeholder-color);
+	border-color: var(--ui5-avatar-placeholder-border-color);
 }
 
 :host([_has-image]) {
@@ -195,34 +212,56 @@
 	vertical-align: middle;
 }
 
-:host([image-fit-type="Contain"]) .ui5-avatar-img {
-	background-size: contain;
+.ui5-avatar-initials {
+	color: inherit;
 }
 
-.ui5-avatar-root {
-	display: flex;
-	align-items: center;
+/* Slotted Badge */
+::slotted([slot="badge"]) {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	width: 1.125rem;
+	height: 1.125rem;
+	background: var(--sapButton_Emphasized_Background);
+	border: var(--sapButton_Emphasized_Background);
+	border-radius: 1rem;
+	color: var(--sapContent_BadgeTextColor);
 	justify-content: center;
-	outline: none;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
 }
 
-.ui5-avatar-root,
-.ui5-avatar-img {
-	height: 100%;
-	width: 100%;
-	border-radius: 50%;
+::slotted([ui5-badge][slot="badge"]) {
+	padding: 0.1875rem;
 }
 
-.ui5-avatar-img {
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: cover;
+:host([_size="L"]) ::slotted([slot="badge"]),
+:host([size="L"]) ::slotted([slot="badge"]) {
+	width: 1.25rem;
+	height: 1.25rem;
 }
 
-.ui5-avatar-initials {
-	color: inherit;
+:host([_size="XL"]) ::slotted([slot="badge"]),
+:host([size="XL"]) ::slotted([slot="badge"]) {
+	padding: 0.375rem;
+	width: 1.75rem;
+	height: 1.75rem;
 }
 
-::slotted(*) {
-	pointer-events: none;
+:host([shape="Square"]) ::slotted([slot="badge"]) {
+	bottom: -0.125rem;
+	right: -0.125rem;
+}
+
+:host([_size="L"][shape="Square"]) ::slotted([slot="badge"]),
+:host([size="L"][shape="Square"]) ::slotted([slot="badge"]) {
+	bottom: -0.1875rem;
+	right: -0.1875rem;
+}
+
+:host([_size="XL"][shape="Square"]) ::slotted([slot="badge"]),
+:host([size="XL"][shape="Square"]) ::slotted([slot="badge"]) {
+	bottom: -0.25rem;
+	right: -0.25rem;
 }

package/src/themes/AvatarGroup.css

@@ -10,6 +10,7 @@
 :host([type="Group"]) .ui5-avatar-group-items:focus {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
+	border-radius: var(--_ui5_avatar_group_focus_border_radius);
 }
 
 .ui5-avatar-group-root {
@@ -37,12 +38,13 @@
 	border-radius: 50%;
 	display: inline-flex;
 	text-overflow: initial;
+	z-index: 0; /* prevent last visible avatar from covering half of the button */
 }
 
 ::slotted([ui5-button][focused]),
 .ui5-avatar-group-overflow-btn[focused] {
-	outline: var(--_ui5_button_outline);
-	outline-offset: var(--_ui5_avatar_group_overflow_button_focus_offset);
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_focus_offset);
 }
 
 .ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {

package/src/themes/Badge.css

@@ -2,21 +2,19 @@
 
 :host(:not([hidden])) {
 	display: inline-block;
-	height: var(--_ui5-badge-height);
+	height: 1rem;
 	min-width: 1.125em;
 	max-width: 100%;
 	padding: 0 0.3125em;
 	color: var(--sapAccentColor1);
 	background: var(--sapLegendBackgroundColor1);
-	border: var(--_ui5-badge-border);
-	border-inline-start: var(--_ui5-badge-left-border);
-	border-radius: var(--_ui5-badge-border-radius);
+	border: 0.0625em solid;
+	border-radius: 0.5rem;
 	box-sizing: border-box;
 	font-family: "72override", var(--sapFontFamily);
-	font-weight: var(--_ui5-badge-font-weight);
+	font-weight: bold;
 	text-align: center;
 	letter-spacing: 0.0125em;
-	transition: all .2s ease-in-out;
 }
 
 :host([color-scheme]:hover),
@@ -30,7 +28,7 @@
 	width: 100%;
 	height: 100%;
 	box-sizing: border-box;
-	pointer-events: var(--_ui5_badge_pointer_events);
+	pointer-events: none;
 }
 
 .ui5-badge-text {
@@ -40,9 +38,9 @@
 	font-weight: inherit;
 	text-overflow: ellipsis;
 	line-height: 1;
-	text-transform: var(--_ui5-badge-text-transform);
+	text-transform: uppercase;
 	letter-spacing: inherit;
-	font-size: var(--ui5-badge-font-size); /* origin from --sapFontSmallSize (0.75rem) */
+	font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */
 }
 
 :host(:hover) .ui5-badge-text {
@@ -61,19 +59,8 @@
 	color: inherit;
 }
 
-/* IE 11 specific selector */
-[ui5-badge] [ui5-icon][slot="icon"] {
-	display: flex;
-}
-
 :host([_has-icon]) .ui5-badge-text {
-	padding-left: 0.125em;
-}
-
-/* RTL */
-:host([_has-icon]) .ui5-badge-root[dir="rtl"] .ui5-badge-text {
-	padding-left: 0;
-	padding-right: 0.125em;
+	padding-inline-start: 0.125rem;
 }
 
 /* Scheme 1 */
@@ -83,16 +70,6 @@
 	color: var(--ui5-badge-color-scheme-1-color);
 }
 
-:host([color-scheme="1"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-1-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-1-shadow);
-}
-
-:host([active][color-scheme="1"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-1-active-shadow);
-	color: var(--ui5-badge-color-scheme-1-active-color);
-}
-
 /* Scheme 2 */
 :host([color-scheme="2"]) {
 	background-color: var(--ui5-badge-color-scheme-2-background);
@@ -100,16 +77,6 @@
 	color: var(--ui5-badge-color-scheme-2-color);
 }
 
-:host([color-scheme="2"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-2-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-2-shadow);
-}
-
-:host([active][color-scheme="2"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-2-active-shadow);
-	color: var(--ui5-badge-color-scheme-2-active-color);
-}
-
 /* Scheme 3 */
 :host([color-scheme="3"]) {
 	background-color: var(--ui5-badge-color-scheme-3-background);
@@ -117,16 +84,6 @@
 	color: var(--ui5-badge-color-scheme-3-color);
 }
 
-:host([color-scheme="3"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-3-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-3-shadow);
-}
-
-:host([active][color-scheme="3"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-3-active-shadow);
-	color: var(--ui5-badge-color-scheme-3-active-color);
-}
-
 /* Scheme 4 */
 :host([color-scheme="4"]) {
 	background-color: var(--ui5-badge-color-scheme-4-background);
@@ -134,16 +91,6 @@
 	color: var(--ui5-badge-color-scheme-4-color);
 }
 
-:host([color-scheme="4"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-4-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-4-shadow);
-}
-
-:host([active][color-scheme="4"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-4-active-shadow);
-	color: var(--ui5-badge-color-scheme-4-active-color);
-}
-
 /* Scheme 5 */
 :host([color-scheme="5"]) {
 	background-color: var(--ui5-badge-color-scheme-5-background);
@@ -151,16 +98,6 @@
 	color: var(--ui5-badge-color-scheme-5-color);
 }
 
-:host([color-scheme="5"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-5-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-5-shadow);
-}
-
-:host([active][color-scheme="5"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-5-active-shadow);
-	color: var(--ui5-badge-color-scheme-5-active-color);
-}
-
 /* Scheme 6 */
 :host([color-scheme="6"]) {
 	background-color: var(--ui5-badge-color-scheme-6-background);
@@ -168,16 +105,6 @@
 	color: var(--ui5-badge-color-scheme-6-color);
 }
 
-:host([color-scheme="6"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-6-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-6-shadow);
-}
-
-:host([active][color-scheme="6"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-6-active-shadow);
-	color: var(--ui5-badge-color-scheme-6-active-color);
-}
-
 /* Scheme 7 */
 :host([color-scheme="7"]) {
 	background-color: var(--ui5-badge-color-scheme-7-background);
@@ -185,16 +112,6 @@
 	color: var(--ui5-badge-color-scheme-7-color);
 }
 
-:host([color-scheme="7"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-7-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-7-shadow);
-}
-
-:host([active][color-scheme="7"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-7-active-shadow);
-	color: var(--ui5-badge-color-scheme-7-active-color);
-}
-
 /* Scheme 8 */
 :host([color-scheme="8"]) {
 	background-color: var(--ui5-badge-color-scheme-8-background);
@@ -202,16 +119,6 @@
 	color: var(--ui5-badge-color-scheme-8-color);
 }
 
-:host([color-scheme="8"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-8-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-8-shadow);
-}
-
-:host([active][color-scheme="8"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-8-active-shadow);
-	color: var(--ui5-badge-color-scheme-8-active-color);
-}
-
 /* Scheme 9 */
 :host([color-scheme="9"]) {
 	background-color: var(--ui5-badge-color-scheme-9-background);
@@ -219,16 +126,6 @@
 	color: var(--ui5-badge-color-scheme-9-color);
 }
 
-:host([color-scheme="9"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-9-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-9-shadow);
-}
-
-:host([active][color-scheme="9"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-9-active-shadow);
-	color: var(--ui5-badge-color-scheme-9-active-color);
-}
-
 /* Scheme 10 */
 :host([color-scheme="10"]) {
 	background-color: var(--ui5-badge-color-scheme-10-background);
@@ -236,12 +133,14 @@
 	color: var(--ui5-badge-color-scheme-10-color);
 }
 
-:host([color-scheme="10"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-10-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-10-shadow);
-}
-
-:host([active][color-scheme="10"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-10-active-shadow);
-	color: var(--ui5-badge-color-scheme-10-active-color);
-}
+/* ---Slotted Badges--- */
+/* [ui5-avatar] - Badge icon styles */
+/* Make icon take full width minus padding.
+ [ui5-avatar] is the only component using an icon for badge,
+ therefore no additional scoping is needed. */
+:host([slot="badge"]) ::slotted([ui5-icon][slot="icon"]) {
+	width: 100%;
+	height: 100%;
+	min-width: 100%;
+	min-height: 100%;
+}

package/src/themes/Breadcrumbs.css

@@ -22,11 +22,14 @@
     -webkit-flex: 1;
     -webkit-box-flex: 1;
     flex: 1 1 auto;
+    /* Fix extra height in ul -> li element */
+    font-size: 0;
+    align-self: center;
 }
 
 .ui5-breadcrumbs-current-location > span:focus {
-	outline-offset: -1px;
-	outline: 1px dotted var(--sapContent_FocusColor);
+    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+    border-radius: var(--_ui5_breadcrumbs_current_location_focus_border_radius);
 }
 
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
@@ -41,6 +44,10 @@
     color: var(--sapLinkColor);
 }
 
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon] {
+    color: var(--_ui5_link_focus_color);
+}
+
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
     content: "...";
     vertical-align: middle;