From 61a3715eef85608f15663556e54b5f456c645fb0 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Mon, 8 Jul 2024 15:20:06 -0400
Subject: [PATCH 1/9] avatar component

---
 .../app-layout/app-layout.component.html      |  7 ++++
 lib/core/src/lib/avatar/avatar.component.html |  7 ++++
 lib/core/src/lib/avatar/avatar.component.scss | 15 +++++++
 lib/core/src/lib/avatar/avatar.component.ts   | 42 +++++++++++++++++++
 lib/core/src/public-api.ts                    |  1 +
 5 files changed, 72 insertions(+)
 create mode 100644 lib/core/src/lib/avatar/avatar.component.html
 create mode 100644 lib/core/src/lib/avatar/avatar.component.scss
 create mode 100644 lib/core/src/lib/avatar/avatar.component.ts

diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.html b/demo-shell/src/app/components/app-layout/app-layout.component.html
index 30b7d1de977..189261cb607 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.html
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.html
@@ -18,6 +18,13 @@
                 <app-search-bar></app-search-bar>
 
                 <app-shell-user-info [menuPositionX]="'before'" [menuPositionY]="'above'"></app-shell-user-info>
+                <adf-avatar
+                    size="32px"
+                    src="https://avatars.githubusercontent.com/u/503991?v=4&size=64"
+                    initials="DV"
+                    tooltip="Denys Vuika"
+                    >
+                </adf-avatar>
             </adf-layout-header>
         </ng-template>
     </adf-sidenav-layout-header>
diff --git a/lib/core/src/lib/avatar/avatar.component.html b/lib/core/src/lib/avatar/avatar.component.html
new file mode 100644
index 00000000000..7f4ca31505b
--- /dev/null
+++ b/lib/core/src/lib/avatar/avatar.component.html
@@ -0,0 +1,7 @@
+<div style="display: flex">
+    <img *ngIf="src; else initialsTemplate" class="adf-avatar__image" [src]="src" [alt]="initials" [title]="tooltip" />
+</div>
+
+<ng-template #initialsTemplate>
+    <div class="adf-avatar__image" [title]="tooltip">{{ initials }}</div>
+</ng-template>
diff --git a/lib/core/src/lib/avatar/avatar.component.scss b/lib/core/src/lib/avatar/avatar.component.scss
new file mode 100644
index 00000000000..560a527d525
--- /dev/null
+++ b/lib/core/src/lib/avatar/avatar.component.scss
@@ -0,0 +1,15 @@
+.adf-avatar__image {
+    cursor: default;
+    display: inline-block;
+    overflow: hidden;
+    line-height: 1;
+    border-radius: 50%;
+    width: var(--adf-avatar-size, 32px);
+    height: var(--adf-avatar-size, 32px);
+    background-color: #f3f3f3;
+    color: #333;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 500;
+    align-content: center;
+}
diff --git a/lib/core/src/lib/avatar/avatar.component.ts b/lib/core/src/lib/avatar/avatar.component.ts
new file mode 100644
index 00000000000..8d572753095
--- /dev/null
+++ b/lib/core/src/lib/avatar/avatar.component.ts
@@ -0,0 +1,42 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'adf-avatar',
+    standalone: true,
+    imports: [CommonModule],
+    templateUrl: './avatar.component.html',
+    styleUrls: ['./avatar.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class AvatarComponent {
+    @Input()
+    src: string;
+
+    @Input()
+    initials: string = 'U';
+
+    @Input()
+    tooltip: string = '';
+
+    @HostBinding('style.--adf-avatar-size')
+    @Input()
+    size = getComputedStyle(document.documentElement).getPropertyValue('--adf-avatar-size');
+}
diff --git a/lib/core/src/public-api.ts b/lib/core/src/public-api.ts
index 7105f0fdd68..84ce1ca93f9 100644
--- a/lib/core/src/public-api.ts
+++ b/lib/core/src/public-api.ts
@@ -16,6 +16,7 @@
  */
 
 export * from './lib/about/index';
+export * from './lib/avatar/avatar.component';
 export * from './lib/button/button.component';
 export * from './lib/viewer/index';
 export * from './lib/toolbar/index';

From 31825e228f783072c06e4c3af99852e4788112cc Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Mon, 8 Jul 2024 15:24:08 -0400
Subject: [PATCH 2/9] avatar component

---
 lib/core/src/lib/avatar/avatar.component.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/core/src/lib/avatar/avatar.component.scss b/lib/core/src/lib/avatar/avatar.component.scss
index 560a527d525..c66d1cc12f6 100644
--- a/lib/core/src/lib/avatar/avatar.component.scss
+++ b/lib/core/src/lib/avatar/avatar.component.scss
@@ -6,8 +6,9 @@
     border-radius: 50%;
     width: var(--adf-avatar-size, 32px);
     height: var(--adf-avatar-size, 32px);
-    background-color: #f3f3f3;
-    color: #333;
+    color: var(--adf-avatar-color, #333);
+    background-color: var(--adf-avatar-bg-color, #f3f3f3);
+    box-shadow: 0 0 0 1px var(--adf-avatar-border-color, rgba(31, 35, 40, 0.15));
     text-align: center;
     font-size: 14px;
     font-weight: 500;

From b8f1c0301198a08fc8f17000247d35c7e6b67894 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Mon, 8 Jul 2024 15:33:08 -0400
Subject: [PATCH 3/9] docs

---
 lib/core/src/lib/avatar/avatar.component.md   | 54 +++++++++++++++++++
 lib/core/src/lib/avatar/avatar.component.scss |  8 +--
 2 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 lib/core/src/lib/avatar/avatar.component.md

diff --git a/lib/core/src/lib/avatar/avatar.component.md b/lib/core/src/lib/avatar/avatar.component.md
new file mode 100644
index 00000000000..697541df5c3
--- /dev/null
+++ b/lib/core/src/lib/avatar/avatar.component.md
@@ -0,0 +1,54 @@
+# Avatar Component
+
+`standalone`, `component`
+
+The Avatar component is a simple component that can be used to display user avatars.
+
+## Usage
+
+```html
+<adf-avatar
+    size="32px"
+    src="https://avatars.githubusercontent.com/u/503991?v=4&size=64"
+    initials="DV"
+    tooltip="Denys Vuika"
+>
+</adf-avatar>
+```
+
+## API
+
+Import the following standalone components:
+
+```typescript
+import { AvatarComponent } from '@alfresco/adf-core';
+```
+
+## Properties
+
+| Name       | Type   | Default | Description                                            |
+|------------|--------|---------|--------------------------------------------------------|
+| `size`     | string | `32px`  | The size of the avatar.                                |
+| `src`      | string |         | The URL of the image to display.                       |
+| `initials` | string |         | The initials to display if the image is not available. |
+| `tooltip`  | string |         | The tooltip to display when hovering over the avatar.  |
+
+## Theming
+
+The following CSS classes are available for theming:
+
+| Name                | Description        |
+|---------------------|--------------------|
+| `adf-avatar`        | The host element.  |
+| `adf-avatar__image` | The image element. |
+
+### CSS Variables
+
+| Name                            | Default   | Description                         |
+|---------------------------------|-----------|-------------------------------------|
+| `--adf-avatar-size`             | `32px`    | The size of the avatar.             |
+| `--adf-avatar-border-radius`    | `50%`     | The border radius of the avatar.    |
+| `--adf-avatar-background-color` | `#f3f3f3` | The background color of the avatar. |
+| `--adf-avatar-color`            | `#333`    | The text color of the initials.     |
+| `--adf-avatar-font-size`        | `16px`    | The font size of the initials.      |
+| `--adf-avatar-font-weight`      | `400`     | The font weight of the initials.    |
diff --git a/lib/core/src/lib/avatar/avatar.component.scss b/lib/core/src/lib/avatar/avatar.component.scss
index c66d1cc12f6..81f264d122e 100644
--- a/lib/core/src/lib/avatar/avatar.component.scss
+++ b/lib/core/src/lib/avatar/avatar.component.scss
@@ -3,14 +3,14 @@
     display: inline-block;
     overflow: hidden;
     line-height: 1;
-    border-radius: 50%;
+    border-radius: var(--adf-avatar-border-radius, 50%);
     width: var(--adf-avatar-size, 32px);
     height: var(--adf-avatar-size, 32px);
     color: var(--adf-avatar-color, #333);
-    background-color: var(--adf-avatar-bg-color, #f3f3f3);
+    background-color: var(--adf-avatar-background-color, #f3f3f3);
     box-shadow: 0 0 0 1px var(--adf-avatar-border-color, rgba(31, 35, 40, 0.15));
+    font-size: var(--adf-avatar-font-size, 14px);
+    font-weight: var(--adf-avatar-font-weight, 500);
     text-align: center;
-    font-size: 14px;
-    font-weight: 500;
     align-content: center;
 }

From 2d6dba07baabda6d81177ba8eee73c99662af924 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Mon, 8 Jul 2024 15:43:57 -0400
Subject: [PATCH 4/9] css fixes

---
 lib/core/src/lib/avatar/avatar.component.html | 2 +-
 lib/core/src/lib/avatar/avatar.component.scss | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/lib/core/src/lib/avatar/avatar.component.html b/lib/core/src/lib/avatar/avatar.component.html
index 7f4ca31505b..f6b7266eb74 100644
--- a/lib/core/src/lib/avatar/avatar.component.html
+++ b/lib/core/src/lib/avatar/avatar.component.html
@@ -1,4 +1,4 @@
-<div style="display: flex">
+<div class="adf-avatar">
     <img *ngIf="src; else initialsTemplate" class="adf-avatar__image" [src]="src" [alt]="initials" [title]="tooltip" />
 </div>
 
diff --git a/lib/core/src/lib/avatar/avatar.component.scss b/lib/core/src/lib/avatar/avatar.component.scss
index 81f264d122e..fd683f11668 100644
--- a/lib/core/src/lib/avatar/avatar.component.scss
+++ b/lib/core/src/lib/avatar/avatar.component.scss
@@ -1,3 +1,7 @@
+.adf-avatar {
+    display: flex;
+}
+
 .adf-avatar__image {
     cursor: default;
     display: inline-block;

From 6eb8cd92897ed439741545e47680d40ad3083261 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Mon, 8 Jul 2024 15:53:12 -0400
Subject: [PATCH 5/9] mat menu support and docs

---
 .../app-layout/app-layout.component.html      |  7 +++++-
 lib/core/src/lib/avatar/avatar.component.md   | 23 +++++++++++++++++++
 lib/core/src/lib/avatar/avatar.component.scss |  2 +-
 lib/core/src/lib/avatar/avatar.component.ts   |  4 ++++
 4 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.html b/demo-shell/src/app/components/app-layout/app-layout.component.html
index 189261cb607..31c840191d1 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.html
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.html
@@ -23,8 +23,13 @@
                     src="https://avatars.githubusercontent.com/u/503991?v=4&size=64"
                     initials="DV"
                     tooltip="Denys Vuika"
-                    >
+                    cursor="pointer"
+                    [matMenuTriggerFor]="userMenu">
                 </adf-avatar>
+                <mat-menu #userMenu="matMenu">
+                    <button mat-menu-item>Item 1</button>
+                    <button mat-menu-item>Item 2</button>
+                </mat-menu>
             </adf-layout-header>
         </ng-template>
     </adf-sidenav-layout-header>
diff --git a/lib/core/src/lib/avatar/avatar.component.md b/lib/core/src/lib/avatar/avatar.component.md
index 697541df5c3..bd2aea54af4 100644
--- a/lib/core/src/lib/avatar/avatar.component.md
+++ b/lib/core/src/lib/avatar/avatar.component.md
@@ -6,6 +6,8 @@ The Avatar component is a simple component that can be used to display user avat
 
 ## Usage
 
+Displaying an avatar with an image and initials fallback:
+
 ```html
 <adf-avatar
     size="32px"
@@ -16,6 +18,24 @@ The Avatar component is a simple component that can be used to display user avat
 </adf-avatar>
 ```
 
+Integrating with context menu:
+
+```html
+<adf-avatar
+    size="32px"
+    src="https://avatars.githubusercontent.com/u/503991?v=4&size=64"
+    initials="DV"
+    tooltip="Denys Vuika"
+    cursor="pointer"
+    [matMenuTriggerFor]="userMenu">
+</adf-avatar>
+
+<mat-menu #userMenu="matMenu">
+    <button mat-menu-item>Item 1</button>
+    <button mat-menu-item>Item 2</button>
+</mat-menu>
+```
+
 ## API
 
 Import the following standalone components:
@@ -32,6 +52,7 @@ import { AvatarComponent } from '@alfresco/adf-core';
 | `src`      | string |         | The URL of the image to display.                       |
 | `initials` | string |         | The initials to display if the image is not available. |
 | `tooltip`  | string |         | The tooltip to display when hovering over the avatar.  |
+| `cursor`   | string | `auto`  | The cursor style.                                      |
 
 ## Theming
 
@@ -52,3 +73,5 @@ The following CSS classes are available for theming:
 | `--adf-avatar-color`            | `#333`    | The text color of the initials.     |
 | `--adf-avatar-font-size`        | `16px`    | The font size of the initials.      |
 | `--adf-avatar-font-weight`      | `400`     | The font weight of the initials.    |
+| `--adf-avatar-cursor`           | `auto`    | The cursor style.                   |
+```
diff --git a/lib/core/src/lib/avatar/avatar.component.scss b/lib/core/src/lib/avatar/avatar.component.scss
index fd683f11668..67e69728c52 100644
--- a/lib/core/src/lib/avatar/avatar.component.scss
+++ b/lib/core/src/lib/avatar/avatar.component.scss
@@ -3,7 +3,7 @@
 }
 
 .adf-avatar__image {
-    cursor: default;
+    cursor: var(--adf-avatar-cursor, auto);
     display: inline-block;
     overflow: hidden;
     line-height: 1;
diff --git a/lib/core/src/lib/avatar/avatar.component.ts b/lib/core/src/lib/avatar/avatar.component.ts
index 8d572753095..9a868c769ae 100644
--- a/lib/core/src/lib/avatar/avatar.component.ts
+++ b/lib/core/src/lib/avatar/avatar.component.ts
@@ -39,4 +39,8 @@ export class AvatarComponent {
     @HostBinding('style.--adf-avatar-size')
     @Input()
     size = getComputedStyle(document.documentElement).getPropertyValue('--adf-avatar-size');
+
+    @HostBinding('style.--adf-avatar-cursor')
+    @Input()
+    cursor = getComputedStyle(document.documentElement).getPropertyValue('--adf-avatar-cursor');
 }

From 9054363bcd4d8916e33f784e87108e55faf90a35 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Mon, 8 Jul 2024 17:42:21 -0400
Subject: [PATCH 6/9] update component index

---
 docs/README.md                           | 13 ++++++++++---
 docs/core/components/avatar.component.md |  1 +
 docs/core/components/button.component.md |  1 +
 3 files changed, 12 insertions(+), 3 deletions(-)
 create mode 120000 docs/core/components/avatar.component.md
 create mode 120000 docs/core/components/button.component.md

diff --git a/docs/README.md b/docs/README.md
index 73ff140a4e9..8ffbd95ef9c 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -30,10 +30,8 @@ A few other pages of information are also available:
 -   The [Release notes](release-notes/README.md) section has details of all
     the features introduced and bugs fixed with each release.
 -   The [Version compatibility](compatibility.md) page shows which versions
-    of Alfresco's backend servies (ACS and APS) are compatible with each released
+    of Alfresco backend services (ACS and APS) are compatible with each released
     version of ADF.
--   The [Roadmap](roadmap.md)
-    contains a preview of features we hope to release in future versions of ADF.
 -   The [License info](license-info/README.md) section lists the third-party libraries used by ADF along with links to their Open Source licenses.
 -   The [Vulnerability](vulnerability/README.md) section lists the third-party
     libraries known vulnerability.
@@ -79,6 +77,15 @@ for more information about installing and using the source code.
 
 <!--core start-->
 
+### Primitives
+
+A collection of Angular components for generic use.
+
+| Name                                                    | Description                  |
+|---------------------------------------------------------|------------------------------|
+| [Avatar Component](core/components/avatar.component.md) | Displays user avatars.       |
+| [Button Component](core/components/button.component.md) | A standard button component. |
+
 ### Components
 
 | Name | Description | Source link |
diff --git a/docs/core/components/avatar.component.md b/docs/core/components/avatar.component.md
new file mode 120000
index 00000000000..732acc2e390
--- /dev/null
+++ b/docs/core/components/avatar.component.md
@@ -0,0 +1 @@
+../../../lib/core/src/lib/avatar/avatar.component.md
\ No newline at end of file
diff --git a/docs/core/components/button.component.md b/docs/core/components/button.component.md
new file mode 120000
index 00000000000..f5978fde61e
--- /dev/null
+++ b/docs/core/components/button.component.md
@@ -0,0 +1 @@
+../../../lib/core/src/lib/button/button.component.md
\ No newline at end of file

From 660bf6ae98c1e33d05fd5f7e13dbefb512c2b88c Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Mon, 8 Jul 2024 17:45:16 -0400
Subject: [PATCH 7/9] update component index

---
 docs/README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index 8ffbd95ef9c..1241ad9631f 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -81,10 +81,10 @@ for more information about installing and using the source code.
 
 A collection of Angular components for generic use.
 
-| Name                                                    | Description                  |
-|---------------------------------------------------------|------------------------------|
-| [Avatar Component](core/components/avatar.component.md) | Displays user avatars.       |
-| [Button Component](core/components/button.component.md) | A standard button component. |
+| Name                                          | Description                  |
+|-----------------------------------------------|------------------------------|
+| [Avatar](core/components/avatar.component.md) | Displays user avatars.       |
+| [Button](core/components/button.component.md) | A standard button component. |
 
 ### Components
 

From de373d643763e450f22733b9a58d4a399b28a5ff Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Tue, 9 Jul 2024 08:35:52 -0400
Subject: [PATCH 8/9] add tests

---
 lib/core/src/lib/avatar/avatar.component.html |  2 +-
 lib/core/src/lib/avatar/avatar.component.md   |  9 +-
 .../src/lib/avatar/avatar.component.spec.ts   | 89 +++++++++++++++++++
 3 files changed, 95 insertions(+), 5 deletions(-)
 create mode 100644 lib/core/src/lib/avatar/avatar.component.spec.ts

diff --git a/lib/core/src/lib/avatar/avatar.component.html b/lib/core/src/lib/avatar/avatar.component.html
index f6b7266eb74..88e79302303 100644
--- a/lib/core/src/lib/avatar/avatar.component.html
+++ b/lib/core/src/lib/avatar/avatar.component.html
@@ -3,5 +3,5 @@
 </div>
 
 <ng-template #initialsTemplate>
-    <div class="adf-avatar__image" [title]="tooltip">{{ initials }}</div>
+    <div class="adf-avatar__image adf-avatar__initials" [title]="tooltip">{{ initials }}</div>
 </ng-template>
diff --git a/lib/core/src/lib/avatar/avatar.component.md b/lib/core/src/lib/avatar/avatar.component.md
index bd2aea54af4..bf1be8d0dce 100644
--- a/lib/core/src/lib/avatar/avatar.component.md
+++ b/lib/core/src/lib/avatar/avatar.component.md
@@ -58,10 +58,11 @@ import { AvatarComponent } from '@alfresco/adf-core';
 
 The following CSS classes are available for theming:
 
-| Name                | Description        |
-|---------------------|--------------------|
-| `adf-avatar`        | The host element.  |
-| `adf-avatar__image` | The image element. |
+| Name                   | Description           |
+|------------------------|-----------------------|
+| `adf-avatar`           | The host element.     |
+| `adf-avatar__image`    | The image element.    |
+| `adf-avatar__initials` | The initials element. |
 
 ### CSS Variables
 
diff --git a/lib/core/src/lib/avatar/avatar.component.spec.ts b/lib/core/src/lib/avatar/avatar.component.spec.ts
new file mode 100644
index 00000000000..07bd1623f5b
--- /dev/null
+++ b/lib/core/src/lib/avatar/avatar.component.spec.ts
@@ -0,0 +1,89 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { AvatarComponent } from '@alfresco/adf-core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+describe('AvatarComponent', () => {
+    let component: AvatarComponent;
+    let fixture: ComponentFixture<AvatarComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [AvatarComponent]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(AvatarComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should display initials when src is not provided', () => {
+        component.src = '';
+        fixture.detectChanges();
+        const avatarElement: HTMLElement = fixture.nativeElement.querySelector('.adf-avatar__initials');
+        expect(avatarElement.textContent).toContain(component.initials);
+    });
+
+    it('should display image when src is provided', () => {
+        component.src = 'path/to/image.jpg';
+        fixture.detectChanges();
+        const imgElement: HTMLImageElement = fixture.nativeElement.querySelector('.adf-avatar__image');
+        expect(imgElement.src).toContain(component.src);
+    });
+
+    it('should use default initials when not provided', () => {
+        fixture.detectChanges();
+        const avatarElement: HTMLElement = fixture.nativeElement.querySelector('.adf-avatar__initials');
+        expect(avatarElement.textContent).toContain('U');
+    });
+
+    it('should use custom initials', () => {
+        component.initials = 'DV';
+        fixture.detectChanges();
+        const avatarElement: HTMLElement = fixture.nativeElement.querySelector('.adf-avatar__initials');
+        expect(avatarElement.textContent).toContain('DV');
+    });
+
+    it('should apply custom size style when size is provided', () => {
+        component.size = '48px';
+        fixture.detectChanges();
+
+        const style = getComputedStyle(fixture.nativeElement.querySelector('.adf-avatar__image'));
+        expect(style.width).toBe('48px');
+        expect(style.height).toBe('48px');
+    });
+
+    it('should apply custom cursor style when cursor is provided', () => {
+        component.cursor = 'pointer';
+        fixture.detectChanges();
+
+        const style = getComputedStyle(fixture.nativeElement.querySelector('.adf-avatar__image'));
+        expect(style.cursor).toBe('pointer');
+    });
+
+    it('should display tooltip when provided', () => {
+        component.tooltip = 'User Tooltip';
+        fixture.detectChanges();
+        const avatarElement: HTMLElement = fixture.nativeElement.querySelector('.adf-avatar__image');
+        expect(avatarElement.getAttribute('title')).toBe('User Tooltip');
+    });
+});

From ec6058aae60a75f92a25c79cba3054aee8d75b4e Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Tue, 9 Jul 2024 08:46:12 -0400
Subject: [PATCH 9/9] update docs

---
 lib/core/src/lib/avatar/avatar.component.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/core/src/lib/avatar/avatar.component.md b/lib/core/src/lib/avatar/avatar.component.md
index bf1be8d0dce..473626f80f4 100644
--- a/lib/core/src/lib/avatar/avatar.component.md
+++ b/lib/core/src/lib/avatar/avatar.component.md
@@ -72,7 +72,7 @@ The following CSS classes are available for theming:
 | `--adf-avatar-border-radius`    | `50%`     | The border radius of the avatar.    |
 | `--adf-avatar-background-color` | `#f3f3f3` | The background color of the avatar. |
 | `--adf-avatar-color`            | `#333`    | The text color of the initials.     |
-| `--adf-avatar-font-size`        | `16px`    | The font size of the initials.      |
-| `--adf-avatar-font-weight`      | `400`     | The font weight of the initials.    |
+| `--adf-avatar-font-size`        | `14px`    | The font size of the initials.      |
+| `--adf-avatar-font-weight`      | `500`     | The font weight of the initials.    |
 | `--adf-avatar-cursor`           | `auto`    | The cursor style.                   |
 ```