@vaadin/avatar-group 25.0.0-alpha7 → 25.0.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar-group",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -38,20 +38,20 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha7",
-    "@vaadin/avatar": "25.0.0-alpha7",
-    "@vaadin/component-base": "25.0.0-alpha7",
-    "@vaadin/item": "25.0.0-alpha7",
-    "@vaadin/list-box": "25.0.0-alpha7",
-    "@vaadin/overlay": "25.0.0-alpha7",
-    "@vaadin/tooltip": "25.0.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha7",
+    "@vaadin/a11y-base": "25.0.0-alpha8",
+    "@vaadin/avatar": "25.0.0-alpha8",
+    "@vaadin/component-base": "25.0.0-alpha8",
+    "@vaadin/item": "25.0.0-alpha8",
+    "@vaadin/list-box": "25.0.0-alpha8",
+    "@vaadin/overlay": "25.0.0-alpha8",
+    "@vaadin/tooltip": "25.0.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha7",
-    "@vaadin/test-runner-commands": "25.0.0-alpha7",
+    "@vaadin/chai-plugins": "25.0.0-alpha8",
+    "@vaadin/test-runner-commands": "25.0.0-alpha8",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -59,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "87f72707ce6866892f8be5782fa0da008e87dcbc"
+  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
 }

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

@@ -3,62 +3,61 @@
  * Copyright (c) 2020 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import '@vaadin/component-base/src/style-props.js';
 import { css } from 'lit';
 
 export const avatarGroupStyles = css`
-  @layer base {
-    :host {
-      display: block;
-      width: 100%; /* prevent collapsing inside non-stretching column flex */
-      /* 1: last on top */
-      /* -1: first on top */
-      --_dir: 1;
-    }
+  :host {
+    display: block;
+    width: 100%; /* prevent collapsing inside non-stretching column flex */
+    /* 1: last on top */
+    /* -1: first on top */
+    --_dir: 1;
+  }
 
-    :host([theme~='reverse']) {
-      --_dir: -1;
-    }
+  :host([theme~='reverse']) {
+    --_dir: -1;
+  }
 
-    :host([hidden]) {
-      display: none !important;
-    }
+  :host([hidden]) {
+    display: none !important;
+  }
 
-    [part='container'] {
-      display: flex;
-      position: relative;
-      width: 100%;
-      flex-wrap: nowrap;
-    }
+  [part='container'] {
+    display: flex;
+    position: relative;
+    width: 100%;
+    flex-wrap: nowrap;
+  }
 
-    ::slotted(vaadin-avatar) {
-      mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z" fill="black"/></svg>');
-      mask-size: calc(300% + var(--vaadin-avatar-group-gap, 2px) * 6 - var(--vaadin-focus-ring-width) * 6);
-      mask-position: calc(
-        50% +
-          (
-            var(--vaadin-avatar-size, 2em) - var(--vaadin-avatar-group-overlap, 8px) +
-              var(--vaadin-avatar-group-gap, 2px)
-          ) *
-          var(--_d)
-      );
-      --_d: var(--_dir);
-    }
+  ::slotted(vaadin-avatar) {
+    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z" fill="black"/></svg>');
+    mask-size: calc(300% + var(--vaadin-avatar-group-gap, 2px) * 6 - var(--vaadin-focus-ring-width) * 6);
+    mask-position: calc(
+      50% +
+        (
+          var(--vaadin-avatar-size, 32px) - var(--vaadin-avatar-group-overlap, 8px) +
+            var(--vaadin-avatar-group-gap, 2px)
+        ) *
+        var(--_d)
+    );
+    --_d: var(--_dir);
+  }
 
-    :host(:dir(rtl)) ::slotted(vaadin-avatar) {
-      --_d: calc(var(--_dir) * -1);
-    }
+  :host(:dir(rtl)) ::slotted(vaadin-avatar) {
+    --_d: calc(var(--_dir) * -1);
+  }
 
-    ::slotted(vaadin-avatar:not(:first-child)) {
-      margin-inline-start: calc(
-        var(--vaadin-avatar-group-overlap, 8px) * -1 - var(--vaadin-focus-ring-width) +
-          var(--vaadin-avatar-group-gap, 2px)
-      );
-    }
+  ::slotted(vaadin-avatar:not(:first-of-type)) {
+    margin-inline-start: calc(
+      var(--vaadin-avatar-group-overlap, 8px) * -1 - var(--vaadin-focus-ring-width) +
+        var(--vaadin-avatar-group-gap, 2px)
+    );
+  }
 
-    :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([theme~='reverse']) ::slotted(vaadin-avatar:first-child) {
-      mask-image: none;
-    }
+  :host(:not([theme~='reverse'])) ::slotted(vaadin-avatar:last-child),
+  :host(:not([theme~='reverse']):not([has-overflow])) ::slotted(vaadin-avatar:nth-last-child(2)),
+  :host([theme~='reverse']) ::slotted(vaadin-avatar:first-of-type) {
+    mask-image: none;
   }
 `;

package/src/styles/vaadin-avatar-group-core-styles.js

@@ -25,17 +25,17 @@ export const avatarGroupStyles = css`
     flex-wrap: nowrap;
   }
 
-  ::slotted(vaadin-avatar:not(:first-child)) {
+  ::slotted(vaadin-avatar:not(:first-of-type)) {
     mask-image: url('data:image/svg+xml;utf8,<svg viewBox=%220 0 300 300%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z%22 fill=%22black%22/></svg>');
     mask-size: calc(300% + var(--vaadin-avatar-group-overlap-border) * 6 - var(--vaadin-avatar-outline-width) * 6);
   }
 
-  ::slotted(vaadin-avatar:not([dir='rtl']):not(:first-child)) {
+  ::slotted(vaadin-avatar:not([dir='rtl']):not(:first-of-type)) {
     margin-left: calc(var(--vaadin-avatar-group-overlap) * -1 - var(--vaadin-avatar-outline-width));
     mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));
   }
 
-  ::slotted(vaadin-avatar[dir='rtl']:not(:first-child)) {
+  ::slotted(vaadin-avatar[dir='rtl']:not(:first-of-type)) {
     margin-right: calc(var(--vaadin-avatar-group-overlap) * -1);
     mask-position: calc(
       50% + var(--vaadin-avatar-size) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)

package/src/styles/vaadin-avatar-group-menu-base-styles.js

@@ -6,18 +6,16 @@
 import { css } from 'lit';
 
 export const avatarGroupMenuStyles = css`
-  @layer base {
-    :host {
-      display: block;
-      padding: var(--vaadin-item-overlay-padding, 4px);
-    }
+  :host {
+    display: block;
+    padding: var(--vaadin-item-overlay-padding, 4px);
+  }
 
-    :host([hidden]) {
-      display: none !important;
-    }
+  :host([hidden]) {
+    display: none !important;
+  }
 
-    [part='items'] {
-      display: contents;
-    }
+  [part='items'] {
+    display: contents;
   }
 `;

package/src/styles/vaadin-avatar-group-menu-item-base-styles.js

@@ -7,12 +7,10 @@ import { css } from 'lit';
 import { itemStyles } from '@vaadin/item/src/styles/vaadin-item-base-styles.js';
 
 const menuItemStyles = css`
-  @layer base {
-    [part='content'] {
-      display: flex;
-      align-items: center;
-      gap: inherit;
-    }
+  [part='content'] {
+    display: flex;
+    align-items: center;
+    gap: inherit;
   }
 `;
 

package/src/vaadin-avatar-group-menu-item.js

@@ -22,7 +22,7 @@ import { avatarGroupMenuItemStyles } from './styles/vaadin-avatar-group-menu-ite
  * @mixes ThemableMixin
  * @protected
  */
-class AvatarGroupMenuItem extends ItemMixin(ThemableMixin(DirMixin(LumoInjectionMixin(PolylitMixin(LitElement))))) {
+class AvatarGroupMenuItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-avatar-group-menu-item';
   }

package/src/vaadin-avatar-group-menu.js

@@ -22,7 +22,7 @@ import { avatarGroupMenuStyles } from './styles/vaadin-avatar-group-menu-core-st
  * @mixes ThemableMixin
  * @protected
  */
-class AvatarGroupMenu extends ListMixin(ThemableMixin(DirMixin(LumoInjectionMixin(PolylitMixin(LitElement))))) {
+class AvatarGroupMenu extends ListMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-avatar-group-menu';
   }

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

@@ -64,7 +64,6 @@ export const AvatarGroupMixin = (superClass) =>
          */
         items: {
           type: Array,
-          observer: '__itemsChanged',
           sync: true,
         },
 
@@ -79,13 +78,6 @@ export const AvatarGroupMixin = (superClass) =>
           sync: true,
         },
 
-        /** @private */
-        _avatars: {
-          type: Array,
-          value: () => [],
-          sync: true,
-        },
-
         /** @private */
         __itemsInView: {
           type: Number,
@@ -93,23 +85,14 @@ export const AvatarGroupMixin = (superClass) =>
           sync: true,
         },
 
-        /** @private */
-        _overflow: {
-          type: Object,
-          sync: true,
-        },
-
         /** @private */
         _overflowItems: {
           type: Array,
-          observer: '__overflowItemsChanged',
-          computed: '__computeOverflowItems(items, __itemsInView, maxItemsVisible)',
         },
 
         /** @private */
-        _overflowTooltip: {
-          type: Object,
-          sync: true,
+        _overflowLimit: {
+          type: Number,
         },
 
         /** @private */
@@ -120,17 +103,6 @@ export const AvatarGroupMixin = (superClass) =>
       };
     }
 
-    static get observers() {
-      return [
-        '__i18nItemsChanged(__effectiveI18n, items)',
-        '__openedChanged(_opened, _overflow)',
-        '__updateAvatarsTheme(_overflow, _avatars, _theme)',
-        '__updateAvatars(items, __itemsInView, maxItemsVisible, _overflow, __effectiveI18n)',
-        '__updateOverflowAvatar(_overflow, items, __itemsInView, maxItemsVisible)',
-        '__updateOverflowTooltip(_overflowTooltip, items, __itemsInView, maxItemsVisible)',
-      ];
-    }
-
     /**
      * The object used to localize this component. To change the default
      * localization, replace this with an object that provides all properties, or
@@ -167,16 +139,22 @@ export const AvatarGroupMixin = (superClass) =>
       super.i18n = value;
     }
 
-    constructor() {
-      super();
-
-      this.__overlayRenderer = this.__overlayRenderer.bind(this);
+    /** @protected */
+    get _avatars() {
+      return [...this.children].filter((node) => node.localName === 'vaadin-avatar');
     }
 
     /** @protected */
     ready() {
       super.ready();
 
+      this._menuController = new SlotController(this, 'overlay', 'vaadin-avatar-group-menu', {
+        initializer: (menu) => {
+          menu.addEventListener('keydown', this._onListKeyDown.bind(this));
+          this._menuElement = menu;
+        },
+      });
+
       this._overflowController = new SlotController(this, 'overflow', 'vaadin-avatar', {
         initializer: (overflow) => {
           overflow.setAttribute('role', 'button');
@@ -193,6 +171,8 @@ export const AvatarGroupMixin = (superClass) =>
           this._overflowTooltip = tooltip;
         },
       });
+
+      this.addController(this._menuController);
       this.addController(this._overflowController);
 
       this._overlayElement = this.$.overlay;
@@ -205,6 +185,58 @@ export const AvatarGroupMixin = (superClass) =>
       this._opened = false;
     }
 
+    /** @protected */
+    willUpdate(props) {
+      super.willUpdate(props);
+
+      if (props.has('items') || props.has('__itemsInView') || props.has('maxItemsVisible')) {
+        // Calculate overflow limit only once to reuse it in updated() observers
+        const count = Array.isArray(this.items) ? this.items.length : 0;
+        const limit = this.__getLimit(count, this.__itemsInView, this.maxItemsVisible);
+        this._overflowLimit = limit;
+        this._overflowItems = limit ? this.items.slice(limit) : [];
+      }
+    }
+
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('items')) {
+        this.__itemsChanged(this.items, props.get('items'));
+      }
+
+      if (props.has('items') || props.has('_overflowLimit') || props.has('__effectiveI18n') || props.has('_theme')) {
+        const limit = this._overflowLimit;
+        this.__renderAvatars(limit ? this.items.slice(0, limit) : this.items || []);
+      }
+
+      if (props.has('items') || props.has('_overflowLimit')) {
+        this.__updateOverflowTooltip(this.items, this._overflowLimit);
+        this.__updateOverflowAvatar(this.items, this._overflowLimit, this.__itemsInView);
+      }
+
+      if (props.has('__effectiveI18n') || props.has('items')) {
+        this.__i18nItemsChanged(this.__effectiveI18n, this.items);
+      }
+
+      if (props.has('_opened')) {
+        this.__openedChanged(this._opened, props.get('_opened'));
+      }
+
+      if (props.has('_theme')) {
+        if (this._theme) {
+          this._overflow.setAttribute('theme', this._theme);
+        } else {
+          this._overflow.removeAttribute('theme');
+        }
+      }
+
+      if (props.has('_overflowItems') || props.has('__effectiveI18n') || props.has('_theme')) {
+        this.__renderMenu();
+      }
+    }
+
     /** @private */
     __getMessage(user, action) {
       return action.replace('{user}', user.name || user.abbr || this.__effectiveI18n.anonymous);
@@ -212,34 +244,31 @@ export const AvatarGroupMixin = (superClass) =>
 
     /**
      * Renders items when they are provided by the `items` property and clears the content otherwise.
-     * @param {!HTMLElement} root
      * @private
      */
-    __overlayRenderer(root) {
+    __renderMenu() {
       render(
         html`
-          <vaadin-avatar-group-menu @keydown="${this._onListKeyDown}">
-            ${(this._overflowItems || []).map(
-              (item) => html`
-                <vaadin-avatar-group-menu-item>
-                  <vaadin-avatar
-                    .name="${item.name}"
-                    .abbr="${item.abbr}"
-                    .img="${item.img}"
-                    .colorIndex="${item.colorIndex}"
-                    .i18n="${this.__effectiveI18n}"
-                    class="${ifDefined(item.className)}"
-                    theme="${ifDefined(this._theme)}"
-                    aria-hidden="true"
-                    tabindex="-1"
-                  ></vaadin-avatar>
-                  ${item.name || ''}
-                </vaadin-avatar-group-menu-item>
-              `,
-            )}
-          </vaadin-avatar-group-menu>
+          ${(this._overflowItems || []).map(
+            (item) => html`
+              <vaadin-avatar-group-menu-item>
+                <vaadin-avatar
+                  .name="${item.name}"
+                  .abbr="${item.abbr}"
+                  .img="${item.img}"
+                  .colorIndex="${item.colorIndex}"
+                  .i18n="${this.__effectiveI18n}"
+                  class="${ifDefined(item.className)}"
+                  theme="${ifDefined(this._theme)}"
+                  aria-hidden="true"
+                  tabindex="-1"
+                ></vaadin-avatar>
+                ${item.name || ''}
+              </vaadin-avatar-group-menu-item>
+            `,
+          )}
         `,
-        root,
+        this._menuElement,
         { host: this },
       );
     }
@@ -305,6 +334,7 @@ export const AvatarGroupMixin = (superClass) =>
                 .img="${item.img}"
                 .colorIndex="${item.colorIndex}"
                 .i18n="${this.__effectiveI18n}"
+                theme="${ifDefined(this._theme)}"
                 class="${ifDefined(item.className)}"
                 with-tooltip
               ></vaadin-avatar>
@@ -317,58 +347,25 @@ export const AvatarGroupMixin = (superClass) =>
     }
 
     /** @private */
-    __updateAvatars(items, itemsInView, maxItemsVisible, overflow) {
-      if (!overflow || !Array.isArray(items)) {
-        return;
-      }
-
-      const limit = this.__getLimit(items.length, itemsInView, maxItemsVisible);
-
-      this.__renderAvatars(limit ? items.slice(0, limit) : items);
-
-      this._avatars = [...this.querySelectorAll('vaadin-avatar')];
-    }
-
-    /** @private */
-    __computeOverflowItems(items, itemsInView, maxItemsVisible) {
-      const count = Array.isArray(items) ? items.length : 0;
-      const limit = this.__getLimit(count, itemsInView, maxItemsVisible);
-      return limit ? items.slice(limit) : [];
-    }
-
-    /** @private */
-    __updateOverflowAvatar(overflow, items, itemsInView, maxItemsVisible) {
+    __updateOverflowAvatar(items, limit, itemsInView) {
+      const overflow = this._overflow;
       if (overflow) {
         const count = Array.isArray(items) ? items.length : 0;
-        const maxReached = maxItemsVisible != null && count > this.__getMax(maxItemsVisible);
+        const maxReached = this.maxItemsVisible != null && count > this.__getMax(this.maxItemsVisible);
 
-        overflow.abbr = `+${count - this.__getLimit(count, itemsInView, maxItemsVisible)}`;
+        overflow.abbr = `+${count - limit}`;
         const hasOverflow = maxReached || (itemsInView && itemsInView < count);
         overflow.toggleAttribute('hidden', !hasOverflow);
-        this.$.container.classList.toggle('has-overflow', hasOverflow);
+        this.toggleAttribute('has-overflow', hasOverflow);
       }
     }
 
     /** @private */
-    __updateAvatarsTheme(overflow, avatars, theme) {
-      if (overflow) {
-        [overflow, ...avatars].forEach((avatar) => {
-          if (theme) {
-            avatar.setAttribute('theme', theme);
-          } else {
-            avatar.removeAttribute('theme');
-          }
-        });
-      }
-    }
-
-    /** @private */
-    __updateOverflowTooltip(tooltip, items, itemsInView, maxItemsVisible) {
-      if (!tooltip || !Array.isArray(items)) {
+    __updateOverflowTooltip(items, limit) {
+      if (!Array.isArray(items)) {
         return;
       }
 
-      const limit = this.__getLimit(items.length, itemsInView, maxItemsVisible);
       if (limit == null) {
         return;
       }
@@ -381,7 +378,7 @@ export const AvatarGroupMixin = (superClass) =>
         }
       }
 
-      tooltip.text = result.join('\n');
+      this._overflowTooltip.text = result.join('\n');
     }
 
     /** @private */
@@ -450,46 +447,21 @@ export const AvatarGroupMixin = (superClass) =>
         if (effectiveI18n.activeUsers[field]) {
           this.setAttribute('aria-label', effectiveI18n.activeUsers[field].replace('{count}', count || 0));
         }
-
-        this._avatars.forEach((avatar) => {
-          avatar.i18n = effectiveI18n;
-        });
       }
     }
 
     /** @private */
-    __openedChanged(opened, overflow) {
-      if (!overflow) {
-        return;
-      }
-
+    __openedChanged(opened, oldOpened) {
       if (opened) {
-        if (!this._menuElement) {
-          this._menuElement = this.$.overlay.querySelector('vaadin-avatar-group-menu');
-        }
-
-        this._openedWithFocusRing = overflow.hasAttribute('focus-ring');
-      } else if (this.__oldOpened) {
-        overflow.focus();
+        this._openedWithFocusRing = this._overflow.hasAttribute('focus-ring');
+      } else if (oldOpened) {
+        this._overflow.focus();
         if (this._openedWithFocusRing) {
-          overflow.setAttribute('focus-ring', '');
+          this._overflow.setAttribute('focus-ring', '');
         }
       }
 
-      overflow.setAttribute('aria-expanded', opened === true);
-      this.__oldOpened = opened;
-    }
-
-    /** @private */
-    __overflowItemsChanged(items, oldItems) {
-      // Prevent renderer from being called unnecessarily on initialization
-      if (items && items.length === 0 && (!oldItems || oldItems.length === 0)) {
-        return;
-      }
-
-      if (items || oldItems) {
-        this.$.overlay.requestContentUpdate();
-      }
+      this._overflow.setAttribute('aria-expanded', opened === true);
     }
 
     /** @private */

package/src/vaadin-avatar-group-overlay.js

@@ -25,7 +25,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @private
  */
 class AvatarGroupOverlay extends PositionMixin(
-  OverlayMixin(DirMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement))))),
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
 ) {
   static get is() {
     return 'vaadin-avatar-group-overlay';
@@ -38,7 +38,6 @@ class AvatarGroupOverlay extends PositionMixin(
   /** @protected */
   render() {
     return html`
-      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
       <div part="overlay" id="overlay" tabindex="0">
         <div part="content" id="content">
           <slot></slot>
@@ -46,6 +45,22 @@ class AvatarGroupOverlay extends PositionMixin(
       </div>
     `;
   }
+
+  /**
+   * @protected
+   * @override
+   */
+  _attachOverlay() {
+    this.showPopover();
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  _detachOverlay() {
+    this.hidePopover();
+  }
 }
 
 defineCustomElement(AvatarGroupOverlay);

package/src/vaadin-avatar-group.d.ts

@@ -15,13 +15,13 @@ export { AvatarGroupI18n, AvatarGroupItem, AvatarI18n };
  *
  * To create the avatar group, first add the component to the page:
  *
- * ```
+ * ```html
  * <vaadin-avatar-group></vaadin-avatar-group>
  * ```
  *
  * And then use [`items`](#/elements/vaadin-avatar-group#property-items) property to initialize the structure:
  *
- * ```
+ * ```js
  * document.querySelector('vaadin-avatar-group').items = [
  *   {name: 'John Doe'},
  *   {abbr: 'AB'}
@@ -35,6 +35,8 @@ export { AvatarGroupI18n, AvatarGroupItem, AvatarI18n };
  * Part name   | Description
  * ----------- | ---------------
  * `container` | The container element
+ * `overlay`   | The overflow avatar menu overlay
+ * `content`   | The overflow avatar menu overlay content
  *
  * See the [`<vaadin-avatar>`](#/elements/vaadin-avatar) documentation for the available
  * state attributes and stylable shadow parts of avatar elements.

package/src/vaadin-avatar-group.js

@@ -22,13 +22,13 @@ import { AvatarGroupMixin } from './vaadin-avatar-group-mixin.js';
  *
  * To create the avatar group, first add the component to the page:
  *
- * ```
+ * ```html
  * <vaadin-avatar-group></vaadin-avatar-group>
  * ```
  *
  * And then use [`items`](#/elements/vaadin-avatar-group#property-items) property to initialize the structure:
  *
- * ```
+ * ```js
  * document.querySelector('vaadin-avatar-group').items = [
  *   {name: 'John Doe'},
  *   {abbr: 'AB'}
@@ -42,6 +42,8 @@ import { AvatarGroupMixin } from './vaadin-avatar-group-mixin.js';
  * Part name   | Description
  * ----------- | ---------------
  * `container` | The container element
+ * `overlay`   | The overflow avatar menu overlay
+ * `content`   | The overflow avatar menu overlay content
  *
  * See the [`<vaadin-avatar>`](#/elements/vaadin-avatar) documentation for the available
  * state attributes and stylable shadow parts of avatar elements.
@@ -63,7 +65,7 @@ import { AvatarGroupMixin } from './vaadin-avatar-group-mixin.js';
  * @mixes AvatarGroupMixin
  * @mixes ThemableMixin
  */
-class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement))))) {
+class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-avatar-group';
   }
@@ -81,14 +83,18 @@ class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(LumoInject
       </div>
       <vaadin-avatar-group-overlay
         id="overlay"
+        popover="manual"
+        .owner="${this}"
         .opened="${this._opened}"
         .positionTarget="${this._overflow}"
-        .renderer="${this.__overlayRenderer}"
         no-vertical-overlap
+        exportparts="overlay, content"
         @vaadin-overlay-close="${this._onVaadinOverlayClose}"
         @vaadin-overlay-open="${this._onVaadinOverlayOpen}"
         @opened-changed="${this._onOpenedChanged}"
-      ></vaadin-avatar-group-overlay>
+      >
+        <slot name="overlay"></slot>
+      </vaadin-avatar-group-overlay>
     `;
   }
 

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar-group",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-avatar-group",
-          "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n  {name: 'John Doe'},\n  {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name   | Description\n----------- | ---------------\n`container` | The container element\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-item).",
+          "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```html\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```js\ndocument.querySelector('vaadin-avatar-group').items = [\n  {name: 'John Doe'},\n  {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name   | Description\n----------- | ---------------\n`container` | The container element\n`overlay`   | The overflow avatar menu overlay\n`content`   | The overflow avatar menu overlay content\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-item).",
           "attributes": [
             {
               "name": "i18n",
@@ -77,7 +77,7 @@
               },
               {
                 "name": "items",
-                "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars, and set `className` to provide CSS class names.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png',\n    className: 'even'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1,\n    className: 'odd'\n  },\n];\n```",
+                "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars, and set `className` to provide CSS class names.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png',\n    className: 'even'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1,\n    className: 'odd'\n  },\n];\n```",
                 "value": {
                   "type": [
                     "Array.<AvatarGroupItem>",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar-group",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-avatar-group",
-          "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n  {name: 'John Doe'},\n  {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name   | Description\n----------- | ---------------\n`container` | The container element\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-item).",
+          "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```html\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```js\ndocument.querySelector('vaadin-avatar-group').items = [\n  {name: 'John Doe'},\n  {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name   | Description\n----------- | ---------------\n`container` | The container element\n`overlay`   | The overflow avatar menu overlay\n`content`   | The overflow avatar menu overlay content\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-item).",
           "extension": true,
           "attributes": [
             {
@@ -35,7 +35,7 @@
             },
             {
               "name": ".items",
-              "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars, and set `className` to provide CSS class names.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png',\n    className: 'even'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1,\n    className: 'odd'\n  },\n];\n```",
+              "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars, and set `className` to provide CSS class names.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png',\n    className: 'even'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1,\n    className: 'odd'\n  },\n];\n```",
               "value": {
                 "kind": "expression"
               }