refactor: update avatar-group to use has-overflow host attribute (#9657)

Author: web-padawan

packages/avatar-group/src/styles/vaadin-avatar-group-base-styles.js

@@ -56,7 +56,7 @@ export const avatarGroupStyles = css`
     }
 
     :host(:not([theme~='reverse'])) ::slotted(vaadin-avatar:last-child),
-    :host(:not([theme~='reverse'])) [part='container']:not(.has-overflow) ::slotted(vaadin-avatar:nth-last-child(2)),
+    :host(:not([theme~='reverse']):not([has-overflow])) ::slotted(vaadin-avatar:nth-last-child(2)),
     :host([theme~='reverse']) ::slotted(vaadin-avatar:first-child) {
       mask-image: none;
     }

packages/avatar-group/src/vaadin-avatar-group-mixin.js

@@ -345,7 +345,7 @@ export const AvatarGroupMixin = (superClass) =>
         overflow.abbr = `+${count - this.__getLimit(count, itemsInView, maxItemsVisible)}`;
         const hasOverflow = maxReached || (itemsInView && itemsInView < count);
         overflow.toggleAttribute('hidden', !hasOverflow);
-        this.$.container.classList.toggle('has-overflow', hasOverflow);
+        this.toggleAttribute('has-overflow', hasOverflow);
       }
     }
 

packages/avatar-group/test/dom/__snapshots__/avatar-group.test.snap.js

@@ -161,7 +161,10 @@ Tomi Virkki
 /* end snapshot vaadin-avatar-group theme */
 
 snapshots["vaadin-avatar-group opened default"] = 
-`<vaadin-avatar-group aria-label="Currently 4 active users">
+`<vaadin-avatar-group
+  aria-label="Currently 4 active users"
+  has-overflow=""
+>
   <vaadin-avatar
     abbr="AD"
     aria-describedby="vaadin-tooltip-8"