fix(ui5-avatar): revise active state styles (#8474)

This update corrects the unwarranted toggle-like behaviour of the avatar
on clicking. It also introduces proper active state styles to enhance
the user experience.

Fixes: #8309

Author: kgogov

packages/main/src/Avatar.ts

@@ -92,13 +92,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
 	@property({ type: Boolean })
 	interactive!: boolean;
 
-	/**
-	 * Indicates if the elements is pressed
-	 * @private
-	 */
-	@property({ type: Boolean })
-	pressed!: boolean;
-
 	/**
 	 * Defines the name of the UI5 Icon, that will be displayed.
 	 *
@@ -404,7 +397,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
 
 	_fireClick() {
 		this.fireEvent("click");
-		this.pressed = !this.pressed;
 	}
 
 	_getAriaHasPopup() {

packages/main/src/themes/Avatar.css

@@ -10,33 +10,27 @@
 	opacity: .7;
 }
 
-:host(:is([interactive]):not([disabled])) {
+:host([interactive]:not([disabled])) {
 	cursor: pointer;
 }
 
-:host(:is([interactive][pressed]):not([hidden])) {
-	background: var(--sapButton_Active_Background);
+:host([interactive]:not([hidden]):active) {
+	background-color: var(--sapButton_Active_Background);
 	border-color: var(--sapButton_Active_BorderColor);
 	color: var(--sapButton_Active_TextColor);
 }
 
-:host(:is([interactive][pressed]):not([hidden]):hover) {
-	background: var(--sapButton_Selected_Hover_Background);
-	border-color: var(--sapButton_Selected_Hover_BorderColor);
-	color: var(--sapButton_Selected_TextColor);
-}
-
-:host(:is([interactive]):not([hidden]):not([pressed]):not([disabled]):hover) {
+:host([interactive]:not([hidden]):not([disabled]):not(:active):hover) {
 	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
 }
 
-:host(:is([interactive][desktop]):not([hidden])) .ui5-avatar-root:focus-within,
-:host(:is([interactive]):not([hidden])) .ui5-avatar-root:focus-visible {
+:host([interactive][desktop]:not([hidden])) .ui5-avatar-root:focus-within,
+:host([interactive]:not([hidden])) .ui5-avatar-root:focus-visible {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
 }
 
-:host(:is([disabled])) {
+:host([disabled]) {
 	opacity: var(--sapContent_DisabledOpacity);
 }
 
@@ -137,8 +131,8 @@
 
 ::slotted(*) {
 	border-radius: 50%;
-    width: 100%;
-    height: 100%;
+	width: 100%;
+	height: 100%;
 	pointer-events: none;
 }