AvatarGroup: The first avatar extends left of the containing box

[dispatchrabbi]

Describe the bug

When using the AvatarGroup component, the first Avatar in the group extends left of the containing DOM box, which means it does not respect margins on containing elements. This was unexpected and does not seem like the way the component ought to work.

Expected behavior:

• The leftmost Avatar's containing div is flush with the left side of the AvatarGroup's div.

Observed behvaior:

• The leftmost Avatar's containing div extends 1rem left of the left side of the AvatarGroup's div.

In the included StackBlitz, you can see that the Avatar extends past the yellow (the AvatarGroup) and into the red (the containing div).

Reproducer

https://stackblitz.com/edit/7pvgcr?file=src%2FApp.vue

PrimeVue version

3.52.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

1. Create a div with a margin.
2. Add an AvatarGroup component with multiple Avatar components inside it to the div.
3. Observe that the first Avatar does not respect the div's margin.

Expected behavior

The leftmost Avatar's containing div is flush with the left side of the AvatarGroup's div.

[dispatchrabbi]

In my own code, I've fixed this by changing the theming for Avatar:

{ '-ml-4': parent.instance.$style?.name == 'avatargroup' },

becomes

{ '[&:not(:first-child)]:-ml-4': parent.instance.$style?.name == 'avatargroup' },

This is on line 22 of wind/avatar/index.js; there's a similar line on line 20 of lara/avatar/index.js. Not sure about Aura; it just released and I haven't looked at it yet.