@ui5/webcomponents-fiori 0.0.0-e818f286e → 0.0.0-ebd9a4db3

package/src/themes/ShellBar.css

@@ -3,10 +3,20 @@
 :host(:not([hidden])) {
 	display: inline-block;
 	width: 100%;
+	max-width: 100%;
+	background: var(--sapShellColor);
+	box-sizing: border-box;
 }
 
 :host {
 	--_ui5_input_placeholder_color: var(--sapShell_InteractiveTextColor);
+	--_ui5_input_border_radius: var(--_ui5_shellbar_input_border_radius);
+	--_ui5_input_focus_border_radius: var(--_ui5_shellbar_input_focus_border_radius);
+	--_ui5_input_background_color: var(--_ui5_shellbar_input_background_color);
+	--_ui5_input_focus_outline_color: var(--_ui5_shellbar_input_focus_outline_color);
+	--_ui5_input_margin_top_bottom: 0;
+	box-shadow: inset 0 -0.0625rem 0 0 var(--sapPageHeader_BorderColor);
+
 }
 
 .ui5-shellbar-root {
@@ -14,7 +24,6 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	background: var(--sapShellColor);
 	height: var(--_ui5_shellbar_root_height);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
@@ -25,56 +34,68 @@
 .ui5-shellbar-menu-button,
 .ui5-shellbar-button,
 .ui5-shellbar-image-button,
-::slotted([ui5-button][slot="startButton"]) {
+::slotted([ui5-toggle-button]:not([slot^="content"])),
+::slotted([ui5-button]:not([slot^="content"])) {
 	height: 2.25rem;
 	padding: 0;
-	margin-inline-start: 0.5rem;
-	border: none;
-	background: transparent;
+	margin-inline-start: var(--_ui5-shellbar-overflow-button-margin);
+	border: 0.0625rem solid var(--sapButton_Lite_BorderColor);
+	background: var(--sapButton_Lite_Background);
 	outline-color: var(--_ui5_shellbar_logo_outline_color);
 	color: var(--sapShell_TextColor);
 	box-sizing: border-box;
 	cursor: pointer;
 	border-radius: var(--_ui5_shellbar_button_border_radius);
 	position: relative;
-	font-size: 0.75rem;
 	font-weight: bold;
 	white-space: initial;
 	overflow: initial;
 	text-overflow: initial;
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+}
+
+::slotted([ui5-toggle-button][slot="assistant"]) {
+	margin-inline-start: 0;
+}
+
+.ui5-shellbar-assistant-button {
+	margin-inline-start: var(--_ui5-shellbar-overflow-button-margin);
 }
 
 ::slotted([ui5-button][slot="startButton"]) {
 	margin-inline-start: 0;
 }
 
-::slotted([ui5-button][slot="startButton"]:hover),
+::slotted([ui5-toggle-button]:hover),
+::slotted([ui5-button]:hover),
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,
 .ui5-shellbar-button:hover,
-.ui5-shellbar-image-button:hover {
+.ui5-shellbar-image-button:hover,
+::slotted([ui5-button][slot="midContent"]:hover) {
 	background: var(--sapShell_Hover_Background);
+	border-color: var(--sapButton_Lite_Hover_BorderColor);
+	color: var(--sapShell_TextColor);
 }
 
-
-::slotted([ui5-button][slot="startButton"]:hover),
-.ui5-shellbar-button:hover,
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover {
-	box-shadow: var(--_ui5_shellbar_button_box_shadow);
+::slotted([ui5-toggle-button][slot="assistant"][pressed]),
+::slotted([ui5-toggle-button][slot="assistant"][pressed]:hover:not([active])) {
+	color: var(--sapShell_Assistant_ForegroundColor);
 }
 
-::slotted([ui5-button][slot="startButton"][active]),
+::slotted([ui5-toggle-button][active]),
+::slotted([ui5-button][active]),
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active,
 .ui5-shellbar-button[active],
-.ui5-shellbar-image-button:active {
+.ui5-shellbar-image-button:active{
 	background: var(--sapShell_Active_Background);
+	border-color: var(--sapButton_Lite_Active_BorderColor);
 	color: var(--_ui5_shellbar_button_active_color);
 }
 
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-arrow {
-	border-top-color: var(--_ui5_shellbar_button_active_color);
-}
-
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus {
+:host([desktop]) .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus,
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus-visible {
 	outline: var(--_ui5_shellbar_logo_outline);
 	outline-offset: var(--_ui5_shellbar_outline_offset);
 }
@@ -84,28 +105,31 @@ slot[name="profile"] {
 }
 
 ::slotted([ui5-avatar][slot="profile"]) {
-	min-width: 0;
+	display: block;
 	width: 2rem;
 	height: 2rem;
-	padding: .25rem;
+	min-width: 0;
+	min-height: 2rem;
 	pointer-events: none;
+	font-size: var(--_ui5_avatar_fontsize_XS);
+	font-weight: normal;
 }
 
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner {
 	border: none;
 }
 
+.ui5-shellbar-menu-button-arrow,
 .ui5-shellbar-menu-button-title,
 .ui5-shellbar-title {
 	display: inline-block;
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontSemiboldDuplexFamily);
 	margin: 0;
 	font-size: var(--_ui5_shellbar_menu_button_title_font_size);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	color: var(--sapShell_TextColor);
-	flex: auto;
+	color: var(--sapShell_SubBrand_TextColor);
 }
 
 :host(:not([primary-title])) .ui5-shellbar-menu-button {
@@ -117,24 +141,25 @@ slot[name="profile"] {
 	display: inline-block;
 	font-size: var(--sapFontSmallSize);
 	color: var(--sapShell_TextColor);
-	line-height: 1rem;
 	font-weight: normal;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
+	margin: 0;
+	text-align: start;
+}
+
+.ui5-shellbar-headings {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	height: 100%;
+	overflow: hidden;
+	margin-left: 0.25rem;
 }
 
 .ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
-	display: inline-block;
 	margin-inline-start: 0.375rem;
-	width: 10px;
-	height: 10px;
-	width: 0px;
-	height: 0px;
-	color: var(--sapShell_InteractiveTextColor);
-	border-left: 5px solid transparent;
-	border-right: 5px solid transparent;
-	border-top: 5px solid var(--sapShell_TextColor);
 }
 
 .ui5-shellbar-overflow-container {
@@ -146,21 +171,22 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-overflow-container-middle {
-	align-self: center;
+	align-self: flex-start;
 	height: var(--_ui5_shellbar_overflow_container_middle_height);
 	width: 0;
 	flex-shrink: 0;
 }
 
-:host([show-co-pilot]) .ui5-shellbar-overflow-container-middle {
-	width: 3rem;
+.ui5-shellbar-mid-content {
+	height: var(--_ui5_shellbar_overflow_container_middle_height);
 }
 
+
 :host([breakpoint-size="S"]) .ui5-shellbar-menu-button {
 	margin-inline-start: 0;
 }
 
-:host([breakpoint-size="S"]) .ui5-shellbar-root {
+:host([breakpoint-size="S"]) {
 	padding: 0 1rem;
 }
 
@@ -168,7 +194,7 @@ slot[name="profile"] {
 	padding: 0 1rem;
 }
 
-:host([breakpoint-size="M"]) .ui5-shellbar-root {
+:host([breakpoint-size="M"]) {
 	padding: 0 2rem;
 }
 
@@ -176,37 +202,82 @@ slot[name="profile"] {
 	padding: 0 2rem;
 }
 
-:host([breakpoint-size="L"]) .ui5-shellbar-root {
+:host([breakpoint-size="L"]) {
 	padding: 0 2rem;
 }
 
-:host([breakpoint-size="XL"]) .ui5-shellbar-root {
+:host([breakpoint-size="XL"]) {
 	padding: 0 3rem;
 }
 
-:host([breakpoint-size="XXL"]) .ui5-shellbar-root {
+:host([breakpoint-size="XXL"]) {
 	padding: 0 3rem;
 }
 
 .ui5-shellbar-logo {
+	overflow: hidden;
 	cursor: pointer;
 	max-height: 2rem;
+	max-width: 3.75rem;
+}
+
+.ui5-shellbar-logo-area {
 	overflow: hidden;
+	display: flex;
+	align-items: center;
+	padding: .25rem .5rem .25rem .25rem;
+	box-sizing: border-box;
+	cursor: pointer;
+	background: var(--sapButton_Lite_Background);
+	border: 1px solid var(--sapButton_Lite_BorderColor);
+	color: var(--sapShell_TextColor);
+	/* fix cutting of the focus outline */
+	margin-inline-start: 0.125rem;
 }
 
-.ui5-shellbar-logo:focus {
+.ui5-shellbar-logo:focus,
+.ui5-shellbar-logo-area:focus {
 	outline: var(--_ui5_shellbar_logo_outline);
-	outline-offset: var(--_ui5_shellbar_logo_outline_offset);
 	border-radius: var(--_ui5_shellbar_logo_border_radius);
 }
 
-.ui5-shellbar-logo:hover {
+.ui5-shellbar-overflow-container > .ui5-shellbar-logo:hover,
+.ui5-shellbar-logo-area:hover {
 	box-shadow: var(--_ui5_shellbar_button_box_shadow);
 	border-radius: var(--_ui5_shellbar_logo_border_radius);
 }
 
+.ui5-shellbar-logo-area:active:focus {
+	background: var(--sapShell_Active_Background);
+	border: 1px solid var(--sapButton_Lite_Active_BorderColor);
+	color: var(--sapShell_Active_TextColor);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover {
+	box-shadow: var(--_ui5_shellbar_button_box_shadow);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active {
+	box-shadow: var(--_ui5_shellbar_button_box_shadow_active);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-arrow,
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-title {
+	color: var(--sapShell_Active_TextColor);
+}
+
+.ui5-shellbar-menu-button .ui5-shellbar-logo:hover {
+	box-shadow: none;
+}
+
 .ui5-shellbar-button {
 	width: 2.5rem;
+	box-sizing: border-box;
+}
+
+.ui5-shellbar-button,
+::slotted([ui5-button][slot="startButton"]) {
+	--_ui5_button_focused_border: var(--_ui5_shellbar_button_focused_border);
 }
 
 .ui5-shellbar-search-button {
@@ -217,42 +288,31 @@ slot[name="profile"] {
 	min-width: var(--_ui5_shellbar_search_button_size);
 }
 
-.ui5-shellbar-image-buttonImage {
-	border-radius: 50%;
-	width: 1.75rem;
-	height: 1.75rem;
-	display: flex;
-	background-size: cover;
-}
-
 .ui5-shellbar-image-button {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	min-width: 2.25rem;
-	height: 2.25rem;
-	display: inline-flex;
-	padding: 0;
+	min-width: auto;
+	height: 2.5rem;
+	--_ui5_button_focused_border_radius: var(--_ui5_shellbar_image_button_border_radius);
+	border-radius: var(--_ui5_shellbar_image_button_border_radius);
 }
 
 .ui5-shellbar-overflow-container-left {
-	padding: 0 0.125rem;
+	padding: 0;
 	justify-content: flex-start;
-	margin-inline-end: 0.5rem;
 	max-width: 75%;
 	flex-shrink: 0;
-	flex-grow: 0;
 }
 
 .ui5-shellbar-overflow-container-left > :nth-child(n) {
 	margin-inline-end: 0.5rem;
 }
 
-:host([show-co-pilot]) .ui5-shellbar-overflow-container-left {
+/* :host([breakpoint-size="XXL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-left {
 	flex-basis: 50%;
-	max-width: calc(50% - 1.5rem);
-}
-
+	max-width: calc(50% - 18.25rem);
+} */
 
 .ui5-shellbar-menu-button {
 	white-space: nowrap;
@@ -271,7 +331,9 @@ slot[name="profile"] {
 	-moz-user-select: none;
 	user-select: none;
 	cursor: pointer;
+	background: var(--sapButton_Lite_Background);
 	border: var(--_ui5_shellbar_button_border);
+	color: var(--sapShell_TextColor);
 }
 
 :host(:not([with-logo])) .ui5-shellbar-menu-button {
@@ -279,21 +341,8 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-overflow-container-right {
-	padding: 0 0.125rem;
-	display: block;
-	overflow: hidden;
-	box-sizing: border-box;
-	white-space: nowrap;
-	flex: 1 1 auto;
-	max-width: 100%;
-}
-
-:host([show-co-pilot]) .ui5-shellbar-overflow-container-right {
-	flex-basis: 0%;
-}
-
-:host(:not([show-search-field])) .ui5-shellbar-overflow-container-right {
-	margin-inline-start: 8rem;
+	flex-grow: 1;
+	justify-content: flex-end;
 }
 
 .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
@@ -301,46 +350,62 @@ slot[name="profile"] {
 	justify-content: flex-end;
 	height: inherit;
 	align-items: center;
-	float: var(--_ui5_shellbar_overflow_container_float);
 }
 
-.ui5-shellbar-overflow-button {
-	display: none;
+.ui5-shellbar-overflow-container-right-inner {
+	display: flex;
+	flex-grow: 1;
 }
 
-:host([breakpoint-size="M"]) .ui5-shellbar-secondary-title {
-	display: none;
+.ui5-shellbar-content-items {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-grow: 1;
+	/* max-content prevents the container from overflowing
+	which is needed for the responsive logic */
+	min-width: max-content;
 }
 
-:host([breakpoint-size="S"]) .ui5-shellbar-secondary-title {
-	display: none;
+.ui5-shellbar-spacer {
+	flex-grow: 1;
+	height: 1px;
+	flex-basis: 1rem;
+	flex-shrink: 1;
 }
 
-:host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right {
-	margin-inline-start: 0;
+.ui5-shellbar-separator {
+	flex-grow: 0;
+	flex-shrink: 0;
+	height: 1rem;
+	width: 1px;
+	background-color: var(--sapToolbar_SeparatorColor);
 }
 
-.ui5-shellbar-overflow-button-shown {
-	display: inline-block;
+.ui5-shellbar-separator-end {
+	margin-inline-start: 0.5rem;
 }
 
-.ui5-shellbar-hidden-button,
-.ui5-shellbar-invisible-button {
-	visibility: hidden;
+.ui5-shellbar-overflow-container-right-child .ui5-shellbar-button[data-count]:has(+ .ui5-shellbar-overflow-button)::before {
+	inset-inline-end: var(--_ui5-shellbar-notification-btn-count-offset);
 }
 
-.ui5-shellbar-coPilot {
-	height: 100%;
-	background-color: transparent;
-	cursor: pointer;
+
+:host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right {
+	padding-inline-start: 0;
 }
 
-:host([breakpoint-size="L"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
-	margin-inline-start: 1rem;
+::slotted([hidden]) {
+	visibility: hidden;
+	order: -1;
+	position: absolute;
 }
 
-:host([breakpoint-size="XL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
-	margin-inline-start: 1rem;
+.ui5-shellbar-content-item {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+ 	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
 }
 
 :host(:not([notifications-count])) .ui5-shellbar-bell-button {
@@ -356,10 +421,10 @@ slot[name="profile"] {
 	background: var(--sapContent_BadgeBackground);
 	border: var(--_ui5_shellbar_button_badge_border);
 	color: var(--sapContent_BadgeTextColor);
-	top: 0.125rem;
-	left: 1.5rem;
-	padding: .25rem;
-	border-radius: 1rem;
+	top: -0.25rem;
+	right: -0.25rem;
+	padding: 0 0.3125rem;
+	border-radius: 0.5rem;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -371,22 +436,33 @@ slot[name="profile"] {
 
 :host([notifications-count]:not([notifications-count=""])) .ui5-shellbar-bell-button::before {
 	content: attr(data-ui5-notifications-count);
+	inset-inline-end: var(--_ui5-shellbar-notification-btn-count-offset);
 }
 
 .ui5-shellbar-button[data-count]::before {
 	content: attr(data-count);
 }
 
+.ui5-shellbar-button[data-count=" "]::before {
+	height: 0.75rem;
+	min-width: 0.75rem;
+}
+
 .ui5-shellbar-menu-button {
 	margin-inline-start: 0.5rem;
 }
 
 .ui5-shellbar-search-field {
+	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
+	min-width: var(--_ui5_shellbar_search_field_width);
 	align-items: center;
 	flex-grow: 1;
-	min-width: 240px;
 	margin-inline-start: 0.5rem;
-	max-width: 25rem;
+}
+
+.ui5-shellbar-overflow-container-right-child > :first-child,
+.ui5-shellbar-search-field:first-child + .ui5-shellbar-button:not(.ui5-shellbar-search-button) {
+	margin-inline-start: 0;
 }
 
 .ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field {
@@ -411,12 +487,27 @@ slot[name="profile"] {
 	width: auto;
 }
 
+.ui5-shellbar-search-full-width-wrapper ::slotted([ui5-shellbar-search]) {
+	max-width: unset;
+}
+
 ::slotted([ui5-input]) {
 	background: var(--_ui5_shellbar_search_field_background);
 	border: var(--_ui5_shellbar_search_field_border);
+	box-shadow: var(--_ui5_shellbar_search_field_box_shadow);
 	color: var(--_ui5_shellbar_search_field_color);
 	height: 2.25rem;
 	width: 100%;
+	min-width: var(--_ui5_shellbar_search_field_width);
+}
+
+:host([breakpoint-size="M"]) ::slotted([ui5-input]),
+:host([breakpoint-size="S"]) ::slotted([ui5-input]) {
+	min-width: 1rem;
+}
+
+:host([breakpoint-size="M"][show-search-field]) .ui5-shellbar-overflow-container-right-child {
+	flex-grow: 1;
 }
 
 ::slotted([ui5-input]:hover) {
@@ -430,75 +521,18 @@ slot[name="profile"] {
 
 ::slotted([slot="logo"]) {
 	max-height: 2rem;
+	max-width: 3.75rem;
 	pointer-events: none;
 }
 
-.ui5-shellbar-copilot-wrapper {
-	position: relative;
-	outline: none;
-	box-sizing: border-box;
-	height: 100%;
-}
-
-.ui5-shellbar-copilot-wrapper:hover {
-	border-radius: var(--sapButton_BorderCornerRadius);
-	background: var(--sapShell_Hover_Background);
-}
-
-.ui5-shellbar-copilot-wrapper:active,
-.ui5-shellbar-copilot-wrapper[active] {
-	background: var(--sapShell_Active_Background);
-}
-
-.ui5-shellbar-copilot-wrapper:hover::after,
-.ui5-shellbar-copilot-wrapper:focus::after {
-	content: "";
-	position: absolute;
-	left: var(--_ui5_shellbar_copilot_focus_offset);
-	right: var(--_ui5_shellbar_copilot_focus_offset);
-	top: var(--_ui5_shellbar_copilot_focus_offset);
-	bottom: var(--_ui5_shellbar_copilot_focus_offset);
-	outline: none;
-	pointer-events: none;
-	border-radius: var(--_ui5_shellbar_logo_outline_border_radius);
-}
-
-.ui5-shellbar-copilot-wrapper:hover::after {
-	background: transparent;
-	box-shadow: var(--sapContent_Interaction_Shadow);
-}
-
-.ui5-shellbar-copilot-wrapper:focus::after {
-	border: var(--_ui5_shellbar_logo_outline);
-}
-
 .ui5-shellbar-co-pilot-placeholder {
 	width: 2.75rem;
 	height: 2.75rem;
 }
 
-.ui5-shellbar-co-pilot-circle {
-	fill: var(--sapShellColor);
-}
-
-.ui5-shellbar-co-pilot-color1 {
-	stop-color: var(--_ui5_shellbar_copilot_stop_color1);
-}
-
-.ui5-shellbar-co-pilot-color2 {
-	stop-color: var(--_ui5_shellbar_copilot_stop_color2);
-}
-
-.ui5-shellbar-co-pilot-opacity7 {
-	stop-opacity: 0.7;
-}
-
-.ui5-shellbar-co-pilot-opacity36 {
-	stop-opacity: 0.36;
-}
-
-.ui5-shellbar-co-pilot-opacity2 {
-	stop-opacity: 0.2;
+.ui5-shellbar-coPilot-pressed,
+.ui5-shellbar-coPilot-pressed:hover {
+	color: var(--sapShell_Assistant_ForegroundColor);
 }
 
 ::slotted([ui5-button][slot="startButton"]) {
@@ -507,6 +541,22 @@ slot[name="profile"] {
 	align-items: center;
 }
 
-::slotted([ui5-button][profile-btn]) {
+::slotted([ui5-button][data-profile-btn]) {
 	width: auto;
 }
+
+/* if class contains ui5-shellbar-hidden-button */
+::slotted(.ui5-shellbar-hidden-button),
+.ui5-shellbar-hidden-button,
+.ui5-shellbar-invisible-button {
+	visibility: hidden;
+	order: -1;
+	opacity: 0;
+	min-width: 0;
+	width: 0;
+	margin: 0;
+	padding: 0;
+	padding-inline-start: 0;
+	border: 0;
+	margin-inline-start: 0;
+}

package/src/themes/ShellBarPopover.css

@@ -3,3 +3,36 @@
 	padding: 0;
 }
 
+.ui5-shellbar-overflow-popover [ui5-li]::part(icon) {
+	color: var(--sapList_TextColor);
+}
+
+.ui5-shellbar-overflow-popover [ui5-li]::part(title) {
+	font-size: var(--sapFontSize);
+}
+
+.ui5-shellbar-overflow-popover [ui5-li]:after {
+	position: relative;
+	width: fit-content;
+	height: 1rem;
+	min-width: 1rem;
+	background: var(--sapContent_BadgeBackground);
+	border: var(--_ui5_shellbar_button_badge_border);
+	color: var(--sapContent_BadgeTextColor);
+	bottom: calc(100% + 0.0625rem);
+	left: 1.25rem;
+	padding: 0 0.3125rem;
+	border-radius: 0.5rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: var(--sapFontSmallSize);
+	font-family: "72override", var(--sapFontFamily);
+	z-index: 2;
+	box-sizing: border-box;
+	pointer-events: none;
+}
+
+.ui5-shellbar-overflow-popover [ui5-li][data-count]:after {
+	content: attr(data-count);
+}