@vaadin/avatar-group 23.3.3 → 24.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar-group",
-  "version": "23.3.3",
+  "version": "24.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -37,14 +37,15 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/avatar": "~23.3.3",
-    "@vaadin/component-base": "~23.3.3",
-    "@vaadin/item": "~23.3.3",
-    "@vaadin/list-box": "~23.3.3",
-    "@vaadin/overlay": "~23.3.3",
-    "@vaadin/vaadin-lumo-styles": "~23.3.3",
-    "@vaadin/vaadin-material-styles": "~23.3.3",
-    "@vaadin/vaadin-themable-mixin": "~23.3.3"
+    "@vaadin/avatar": "24.0.0-alpha10",
+    "@vaadin/component-base": "24.0.0-alpha10",
+    "@vaadin/item": "24.0.0-alpha10",
+    "@vaadin/list-box": "24.0.0-alpha10",
+    "@vaadin/overlay": "24.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha10",
+    "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -55,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "1529ed623e053d28a3c1c66af55ebe402743ddd0"
+  "gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2020 - 2022 Vaadin Ltd.
+ * Copyright (c) 2020 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';

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

@@ -1,10 +1,12 @@
 /**
  * @license
- * Copyright (c) 2020 - 2022 Vaadin Ltd.
+ * Copyright (c) 2020 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { AvatarI18n } from '@vaadin/avatar/src/vaadin-avatar.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -51,7 +53,9 @@ export interface AvatarGroupItem {
  * Part name   | Description
  * ----------- | ---------------
  * `container` | The container element
- * `avatar`    | Individual avatars
+ *
+ * See the [`<vaadin-avatar>`](#/elements/vaadin-avatar) documentation for the available
+ * state attributes and stylable shadow parts of avatar elements.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
@@ -60,10 +64,11 @@ export interface AvatarGroupItem {
  * In addition to `<vaadin-avatar-group>` itself, the following internal
  * components are themable:
  *
- * - `<vaadin-avatar-group-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
  * - `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  */
-declare class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(HTMLElement))) {
+declare class AvatarGroup extends ResizeMixin(
+  OverlayClassMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))),
+) {
   readonly _avatars: HTMLElement[];
 
   /**

package/src/vaadin-avatar-group.js

@@ -1,19 +1,22 @@
 /**
  * @license
- * Copyright (c) 2020 - 2022 Vaadin Ltd.
+ * Copyright (c) 2020 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@polymer/polymer/lib/elements/dom-repeat.js';
 import '@vaadin/avatar/src/vaadin-avatar.js';
 import '@vaadin/item/src/vaadin-item.js';
-import './vaadin-avatar-group-list-box.js';
+import '@vaadin/list-box/src/vaadin-list-box.js';
 import './vaadin-avatar-group-overlay.js';
 import { calculateSplices } from '@polymer/polymer/lib/utils/array-splice.js';
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html as legacyHtml, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, render } from 'lit';
 import { announce } from '@vaadin/component-base/src/a11y-announcer.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const MINIMUM_DISPLAYED_AVATARS = 2;
@@ -43,7 +46,9 @@ const MINIMUM_DISPLAYED_AVATARS = 2;
  * Part name   | Description
  * ----------- | ---------------
  * `container` | The container element
- * `avatar`    | Individual avatars
+ *
+ * See the [`<vaadin-avatar>`](#/elements/vaadin-avatar) documentation for the available
+ * state attributes and stylable shadow parts of avatar elements.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
@@ -52,17 +57,18 @@ const MINIMUM_DISPLAYED_AVATARS = 2;
  * In addition to `<vaadin-avatar-group>` itself, the following internal
  * components are themable:
  *
- * - `<vaadin-avatar-group-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
  * - `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  *
  * @extends HTMLElement
+ * @mixes ControllerMixin
  * @mixes ElementMixin
+ * @mixes OverlayClassMixin
  * @mixes ThemableMixin
  * @mixes ResizeMixin
  */
-class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class AvatarGroup extends ResizeMixin(OverlayClassMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))))) {
   static get template() {
-    return html`
+    return legacyHtml`
       <style>
         :host {
           display: block;
@@ -82,7 +88,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
           flex-wrap: nowrap;
         }
 
-        [part='avatar']:not(:first-child) {
+        ::slotted(vaadin-avatar:not(:first-child)) {
           -webkit-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-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>');
           -webkit-mask-size: calc(
@@ -93,13 +99,13 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
           );
         }
 
-        [part='avatar']:not([dir='rtl']):not(:first-child) {
+        ::slotted(vaadin-avatar:not([dir='rtl']):not(:first-child)) {
           margin-left: calc(var(--vaadin-avatar-group-overlap) * -1 - var(--vaadin-avatar-outline-width));
           -webkit-mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));
           mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));
         }
 
-        [part='avatar'][dir='rtl']:not(:first-child) {
+        ::slotted(vaadin-avatar[dir='rtl']:not(:first-child)) {
           margin-right: calc(var(--vaadin-avatar-group-overlap) * -1);
           -webkit-mask-position: calc(
             50% + var(--vaadin-avatar-size) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)
@@ -110,58 +116,16 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
         }
       </style>
       <div id="container" part="container">
-        <template id="items" is="dom-repeat" items="[[__computeItems(items.*, __itemsInView, maxItemsVisible)]]">
-          <vaadin-avatar
-            name="[[item.name]]"
-            abbr="[[item.abbr]]"
-            img="[[item.img]]"
-            part="avatar"
-            theme$="[[_theme]]"
-            i18n="[[i18n]]"
-            color-index="[[item.colorIndex]]"
-            with-tooltip
-          ></vaadin-avatar>
-        </template>
-        <vaadin-avatar
-          id="overflow"
-          part="avatar"
-          hidden$="[[__computeMoreHidden(items.length, __itemsInView, __maxReached)]]"
-          abbr="[[__computeMore(items.length, __itemsInView, maxItemsVisible)]]"
-          theme$="[[_theme]]"
-          on-click="_onOverflowClick"
-          on-keydown="_onOverflowKeyDown"
-          aria-haspopup="listbox"
-        >
-          <vaadin-tooltip slot="tooltip" generator="[[__overflowTextGenerator]]"></vaadin-tooltip>
-        </vaadin-avatar>
+        <slot></slot>
+        <slot name="overflow"></slot>
       </div>
       <vaadin-avatar-group-overlay
         id="overlay"
         opened="{{_opened}}"
+        position-target="[[_overflow]]"
         no-vertical-overlap
         on-vaadin-overlay-close="_onVaadinOverlayClose"
-      >
-        <template>
-          <vaadin-avatar-group-list-box on-keydown="_onListKeyDown">
-            <template is="dom-repeat" items="[[__computeExtraItems(items.*, __itemsInView, maxItemsVisible)]]">
-              <vaadin-item theme="avatar-group-item" role="option">
-                <vaadin-avatar
-                  name="[[item.name]]"
-                  abbr="[[item.abbr]]"
-                  img="[[item.img]]"
-                  i18n="[[i18n]]"
-                  part="avatar"
-                  theme$="[[_theme]]"
-                  color-index="[[item.colorIndex]]"
-                  tabindex="-1"
-                  aria-hidden="true"
-                ></vaadin-avatar>
-                [[item.name]]
-              </vaadin-item>
-            </template>
-          </vaadin-avatar-group-list-box>
-        </template>
-      </vaadin-avatar-group-overlay>
+      ></vaadin-avatar-group-overlay>
     `;
   }
 
@@ -254,35 +218,63 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
         },
       },
 
+      /** @private */
+      _avatars: {
+        type: Array,
+        value: () => [],
+      },
+
       /** @private */
       __maxReached: {
         type: Boolean,
         computed: '__computeMaxReached(items.length, maxItemsVisible)',
       },
 
+      /** @private */
+      __items: {
+        type: Array,
+      },
+
       /** @private */
       __itemsInView: {
         type: Number,
         value: null,
       },
 
+      /** @private */
+      _overflow: {
+        type: Object,
+      },
+
+      /** @private */
+      _overflowItems: {
+        type: Array,
+        observer: '__overflowItemsChanged',
+        computed: '__computeOverflowItems(items.*, __itemsInView, maxItemsVisible)',
+      },
+
+      /** @private */
+      _overflowTooltip: {
+        type: Object,
+      },
+
       /** @private */
       _opened: {
         type: Boolean,
         observer: '__openedChanged',
-        value: false,
       },
-
-      /** @private */
-      __overflowTextGenerator: Object,
     };
   }
 
   static get observers() {
     return [
-      '__computeMoreTooltip(items.length, __itemsInView, maxItemsVisible)',
       '__itemsChanged(items.splices, items.*)',
       '__i18nItemsChanged(i18n.*, items.length)',
+      '__updateAvatarsTheme(_overflow, _avatars, _theme)',
+      '__updateAvatars(items.*, __itemsInView, maxItemsVisible, _overflow, i18n)',
+      '__updateOverflowAbbr(_overflow, items.length, __itemsInView, maxItemsVisible)',
+      '__updateOverflowHidden(_overflow, items.length, __itemsInView, __maxReached)',
+      '__updateOverflowTooltip(_overflowTooltip, items.length, __itemsInView, maxItemsVisible)',
     ];
   }
 
@@ -290,8 +282,26 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
   ready() {
     super.ready();
 
-    this._overlayElement = this.shadowRoot.querySelector('vaadin-avatar-group-overlay');
-    this._overlayElement.positionTarget = this.$.overflow;
+    this._overflowController = new SlotController(this, 'overflow', 'vaadin-avatar', {
+      initializer: (overflow) => {
+        overflow.setAttribute('aria-haspopup', 'listbox');
+        overflow.setAttribute('aria-expanded', 'false');
+        overflow.addEventListener('click', (e) => this._onOverflowClick(e));
+        overflow.addEventListener('keydown', (e) => this._onOverflowKeyDown(e));
+
+        const tooltip = document.createElement('vaadin-tooltip');
+        tooltip.setAttribute('slot', 'tooltip');
+        overflow.appendChild(tooltip);
+
+        this._overflow = overflow;
+        this._overflowTooltip = tooltip;
+      },
+    });
+    this.addController(this._overflowController);
+
+    const overlay = this.$.overlay;
+    overlay.renderer = this.__overlayRenderer.bind(this);
+    this._overlayElement = overlay;
 
     afterNextRender(this, () => {
       this.__setItemsInView();
@@ -305,17 +315,64 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
     this._opened = false;
   }
 
+  /** @private */
+  __getMessage(user, action) {
+    return action.replace('{user}', user.name || user.abbr || this.i18n.anonymous);
+  }
+
   /**
-   * @return {!Array<!HTMLElement>}
-   * @protected
+   * Renders items when they are provided by the `items` property and clears the content otherwise.
+   * @param {!HTMLElement} root
+   * @param {!Select} _select
+   * @private
    */
-  get _avatars() {
-    return this.shadowRoot.querySelectorAll('vaadin-avatar');
+  __overlayRenderer(root) {
+    let listBox = root.firstElementChild;
+    if (!listBox) {
+      listBox = document.createElement('vaadin-list-box');
+      listBox.addEventListener('keydown', (event) => this._onListKeyDown(event));
+      root.appendChild(listBox);
+    }
+
+    listBox.textContent = '';
+
+    if (!this._overflowItems) {
+      return;
+    }
+
+    this._overflowItems.forEach((item) => {
+      listBox.appendChild(this.__createItemElement(item));
+    });
   }
 
   /** @private */
-  __getMessage(user, action) {
-    return action.replace('{user}', user.name || user.abbr || this.i18n.anonymous);
+  __createItemElement(item) {
+    const itemElement = document.createElement('vaadin-item');
+    itemElement.setAttribute('theme', 'avatar-group-item');
+    itemElement.setAttribute('role', 'option');
+
+    const avatar = document.createElement('vaadin-avatar');
+    itemElement.appendChild(avatar);
+
+    avatar.setAttribute('aria-hidden', 'true');
+    avatar.setAttribute('tabindex', '-1');
+    avatar.i18n = this.i18n;
+
+    if (this._theme) {
+      avatar.setAttribute('theme', this._theme);
+    }
+
+    avatar.name = item.name;
+    avatar.abbr = item.abbr;
+    avatar.img = item.img;
+    avatar.colorIndex = item.colorIndex;
+
+    if (item.name) {
+      const text = document.createTextNode(item.name);
+      itemElement.appendChild(text);
+    }
+
+    return itemElement;
   }
 
   /** @private */
@@ -331,7 +388,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
   /** @private */
   _onOverflowKeyDown(e) {
     if (!this._opened) {
-      if (/^(Enter|SpaceBar|\s)$/.test(e.key)) {
+      if (/^(Enter|SpaceBar|\s)$/u.test(e.key)) {
         e.preventDefault();
         this._opened = true;
       }
@@ -340,7 +397,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
 
   /** @private */
   _onListKeyDown(event) {
-    if (event.key === 'Escape' || event.key === 'Esc' || /^(Tab)$/.test(event.key)) {
+    if (event.key === 'Escape' || event.key === 'Tab') {
       this._opened = false;
     }
   }
@@ -361,17 +418,47 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
   }
 
   /** @private */
-  __computeItems(arr, itemsInView, maxItemsVisible) {
+  __renderAvatars(items) {
+    render(
+      html`
+        ${items.map(
+          (item) =>
+            html`
+              <vaadin-avatar
+                .name="${item.name}"
+                .abbr="${item.abbr}"
+                .img="${item.img}"
+                .colorIndex="${item.colorIndex}"
+                .i18n="${this.i18n}"
+                with-tooltip
+              ></vaadin-avatar>
+            `,
+        )}
+      `,
+      this,
+      { renderBefore: this._overflow },
+    );
+  }
+
+  /** @private */
+  __updateAvatars(arr, itemsInView, maxItemsVisible, overflow) {
+    if (!overflow) {
+      return;
+    }
+
     const items = arr.base || [];
     const limit = this.__getLimit(items.length, itemsInView, maxItemsVisible);
-    return limit ? items.slice(0, limit) : items;
+
+    this.__renderAvatars(limit ? items.slice(0, limit) : items);
+
+    this._avatars = [...this.querySelectorAll('vaadin-avatar')];
   }
 
   /** @private */
-  __computeExtraItems(arr, itemsInView, maxItemsVisible) {
+  __computeOverflowItems(arr, itemsInView, maxItemsVisible) {
     const items = arr.base || [];
     const limit = this.__getLimit(items.length, itemsInView, maxItemsVisible);
-    return limit ? items.slice(limit) : items;
+    return limit ? items.slice(limit) : [];
   }
 
   /** @private */
@@ -380,21 +467,43 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
   }
 
   /** @private */
-  __computeMore(items, itemsInView, maxItemsVisible) {
-    return `+${items - this.__getLimit(items, itemsInView, maxItemsVisible)}`;
+  __updateOverflowAbbr(overflow, items, itemsInView, maxItemsVisible) {
+    if (overflow) {
+      overflow.abbr = `+${items - this.__getLimit(items, itemsInView, maxItemsVisible)}`;
+    }
+  }
+
+  /** @private */
+  __updateOverflowHidden(overflow, items, itemsInView, maxReached) {
+    if (overflow) {
+      overflow.toggleAttribute('hidden', !maxReached && !(itemsInView && itemsInView < items));
+    }
   }
 
   /** @private */
-  __computeMoreHidden(items, itemsInView, maxReached) {
-    return !maxReached && !(itemsInView && itemsInView < items);
+  __updateAvatarsTheme(overflow, avatars, theme) {
+    if (overflow) {
+      [overflow, ...avatars].forEach((avatar) => {
+        if (theme) {
+          avatar.setAttribute('theme', theme);
+        } else {
+          avatar.removeAttribute('theme');
+        }
+      });
+    }
   }
 
   /** @private */
-  __computeMoreTooltip(items, itemsInView, maxItemsVisible) {
+  __updateOverflowTooltip(tooltip, items, itemsInView, maxItemsVisible) {
+    if (!tooltip) {
+      return;
+    }
+
     const limit = this.__getLimit(items, itemsInView, maxItemsVisible);
     if (limit == null) {
       return;
     }
+
     const result = [];
     for (let i = limit; i < items; i++) {
       const item = this.items[i];
@@ -402,8 +511,8 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
         result.push(item.name || item.abbr || 'anonymous');
       }
     }
-    // Override generated tooltip text
-    this.__overflowTextGenerator = () => result.join('\n');
+
+    tooltip.text = result.join('\n');
   }
 
   /** @private */
@@ -428,7 +537,6 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
   /** @private */
   __itemsChanged(splices, itemsChange) {
     const items = itemsChange.base;
-    this.$.items.render();
     this.__setItemsInView();
 
     // Mutation using group.splice('items')
@@ -476,6 +584,10 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
       if (base.activeUsers[field]) {
         this.setAttribute('aria-label', base.activeUsers[field].replace('{count}', items || 0));
       }
+
+      this._avatars.forEach((avatar) => {
+        avatar.i18n = base;
+      });
     }
   }
 
@@ -483,20 +595,27 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
   __openedChanged(opened, wasOpened) {
     if (opened) {
       if (!this._menuElement) {
-        this._menuElement = this._overlayElement.content.querySelector('vaadin-avatar-group-list-box');
+        this._menuElement = this.$.overlay.querySelector('vaadin-list-box');
         this._menuElement.setAttribute('role', 'listbox');
       }
 
-      this._openedWithFocusRing = this.$.overflow.hasAttribute('focus-ring');
+      this._openedWithFocusRing = this._overflow.hasAttribute('focus-ring');
 
       this._menuElement.focus();
     } else if (wasOpened) {
-      this.$.overflow.focus();
+      this._overflow.focus();
       if (this._openedWithFocusRing) {
-        this.$.overflow.setAttribute('focus-ring', '');
+        this._overflow.setAttribute('focus-ring', '');
       }
     }
-    this.$.overflow.setAttribute('aria-expanded', opened === true);
+    this._overflow.setAttribute('aria-expanded', opened === true);
+  }
+
+  /** @private */
+  __overflowItemsChanged(items, oldItems) {
+    if (items || oldItems) {
+      this.$.overlay.requestContentUpdate();
+    }
   }
 
   /** @private */
@@ -541,10 +660,9 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
     // Take negative margin into account
     const { marginLeft, marginRight } = getComputedStyle(avatars[1]);
 
-    const offset =
-      this.getAttribute('dir') === 'rtl'
-        ? parseInt(marginRight, 0) - parseInt(marginLeft, 0)
-        : parseInt(marginLeft, 0) - parseInt(marginRight, 0);
+    const offset = this.__isRTL
+      ? parseInt(marginRight, 0) - parseInt(marginLeft, 0)
+      : parseInt(marginLeft, 0) - parseInt(marginRight, 0);
 
     return Math.floor((this.$.container.offsetWidth - avatarWidth) / (avatarWidth + offset));
   }

package/theme/lumo/vaadin-avatar-group-styles.js

@@ -55,24 +55,13 @@ registerStyles('vaadin-avatar-group-overlay', [overlay, menuOverlayCore, avatarG
 });
 
 registerStyles(
-  'vaadin-avatar-group-list-box',
+  'vaadin-item',
   css`
-    [part='items'] ::slotted(vaadin-item[theme='avatar-group-item']) {
+    :host([theme='avatar-group-item']) {
       padding: var(--lumo-space-xs);
-      padding-right: var(--lumo-space-m);
+      padding-inline-end: var(--lumo-space-m);
     }
 
-    :host([dir='rtl']) [part='items'] ::slotted(vaadin-item[theme='avatar-group-item']) {
-      padding: var(--lumo-space-xs);
-      padding-left: var(--lumo-space-m);
-    }
-  `,
-  { moduleId: 'lumo-avatar-group-list-box' },
-);
-
-registerStyles(
-  'vaadin-item',
-  css`
     :host([theme='avatar-group-item']) [part='content'] {
       display: flex;
       align-items: center;

package/theme/material/vaadin-avatar-group-styles.js

@@ -47,24 +47,13 @@ registerStyles('vaadin-avatar-group-overlay', [menuOverlay, avatarGroupOverlay],
 });
 
 registerStyles(
-  'vaadin-avatar-group-list-box',
+  'vaadin-item',
   css`
-    [part='items'] ::slotted(vaadin-item[theme='avatar-group-item']) {
+    :host([theme='avatar-group-item']) {
       padding: 8px;
-      padding-right: 24px;
+      padding-inline-end: 24px;
     }
 
-    :host([dir='rtl']) [part='items'] ::slotted(vaadin-item[theme='avatar-group-item']) {
-      padding: 8px;
-      padding-left: 24px;
-    }
-  `,
-  { moduleId: 'material-avatar-group-list-box' },
-);
-
-registerStyles(
-  'vaadin-item',
-  css`
     :host([theme='avatar-group-item']) [part='content'] {
       display: flex;
       align-items: center;

package/web-types.json

@@ -1,15 +1,26 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar-group",
-  "version": "23.3.3",
+  "version": "24.0.0-alpha10",
   "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/23.3.3/#/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`avatar`    | Individual avatars\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/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-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-overlay).",
+          "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/24.0.0-alpha10/#/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/24.0.0-alpha10/#/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/custom-theme/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/24.0.0-alpha10/#/elements/vaadin-overlay).",
           "attributes": [
+            {
+              "name": "overlay-class",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "max-items-visible",
               "description": "The maximum number of avatars to display. By default, all the avatars are displayed.\nWhen _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with\na dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.",
@@ -35,9 +46,20 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "overlayClass",
+                "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "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/23.3.3/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1\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/24.0.0-alpha10/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1\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": "23.3.3",
+  "version": "24.0.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,12 +16,19 @@
       "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/23.3.3/#/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`avatar`    | Individual avatars\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/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-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-overlay).",
+          "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/24.0.0-alpha10/#/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/24.0.0-alpha10/#/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/custom-theme/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/24.0.0-alpha10/#/elements/vaadin-overlay).",
           "extension": true,
           "attributes": [
+            {
+              "name": ".overlayClass",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "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/23.3.3/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1\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/24.0.0-alpha10/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1\n  },\n];\n```",
               "value": {
                 "kind": "expression"
               }

package/src/vaadin-avatar-group-list-box.js

@@ -1,20 +0,0 @@
-/**
- * @license
- * Copyright (c) 2020 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { ListBox } from '@vaadin/list-box/src/vaadin-list-box.js';
-
-/**
- * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
- *
- * @extends ListBox
- * @private
- */
-class AvatarGroupListBox extends ListBox {
-  static get is() {
-    return 'vaadin-avatar-group-list-box';
-  }
-}
-
-customElements.define(AvatarGroupListBox.is, AvatarGroupListBox);