@vaadin/avatar-group 23.3.0-alpha2 → 24.0.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar-group",
-  "version": "23.3.0-alpha2",
+  "version": "24.0.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,14 +37,14 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/avatar": "23.3.0-alpha2",
-    "@vaadin/component-base": "23.3.0-alpha2",
-    "@vaadin/item": "23.3.0-alpha2",
-    "@vaadin/list-box": "23.3.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha2",
-    "@vaadin/vaadin-material-styles": "23.3.0-alpha2",
-    "@vaadin/vaadin-overlay": "23.3.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha2"
+    "@vaadin/avatar": "24.0.0-alpha1",
+    "@vaadin/component-base": "24.0.0-alpha1",
+    "@vaadin/item": "24.0.0-alpha1",
+    "@vaadin/list-box": "24.0.0-alpha1",
+    "@vaadin/overlay": "24.0.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -55,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6"
+  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
 }

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

@@ -3,16 +3,16 @@
  * Copyright (c) 2020 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
-import { PositionMixin } from '@vaadin/vaadin-overlay/src/vaadin-overlay-position-mixin.js';
+import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 
 /**
  * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
  *
- * @extends OverlayElement
+ * @extends Overlay
  * @private
  */
-class AvatarGroupOverlay extends PositionMixin(OverlayElement) {
+class AvatarGroupOverlay extends PositionMixin(Overlay) {
   static get is() {
     return 'vaadin-avatar-group-overlay';
   }

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

@@ -4,6 +4,7 @@
  * 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 { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -51,7 +52,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 +63,9 @@ 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(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
   readonly _avatars: HTMLElement[];
 
   /**

package/src/vaadin-avatar-group.js

@@ -3,17 +3,18 @@
  * Copyright (c) 2020 - 2022 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 { 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 { 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 +44,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,15 +55,15 @@ 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 ThemableMixin
  * @mixes ResizeMixin
  */
-class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
@@ -82,7 +85,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 +96,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 +113,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 +215,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)',
+      '__updateOverflowAbbr(_overflow, items.length, __itemsInView, maxItemsVisible)',
+      '__updateOverflowHidden(_overflow, items.length, __itemsInView, __maxReached)',
+      '__updateOverflowTooltip(_overflowTooltip, items.length, __itemsInView, maxItemsVisible)',
     ];
   }
 
@@ -290,20 +279,38 @@ 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',
+      () => document.createElement('vaadin-avatar'),
+      (_, 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);
+
+    this.$.overlay.renderer = this.__overlayRenderer.bind(this);
 
     afterNextRender(this, () => {
       this.__setItemsInView();
     });
   }
 
-  /**
-   * @return {!Array<!HTMLElement>}
-   * @protected
-   */
-  get _avatars() {
-    return this.shadowRoot.querySelectorAll('vaadin-avatar');
+  /** @protected */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this._opened = false;
   }
 
   /** @private */
@@ -311,6 +318,76 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
     return action.replace('{user}', user.name || user.abbr || this.i18n.anonymous);
   }
 
+  /**
+   * Renders items when they are provided by the `items` property and clears the content otherwise.
+   * @param {!HTMLElement} root
+   * @param {!Select} _select
+   * @private
+   */
+  __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 */
+  __createAvatar(item) {
+    const avatar = document.createElement('vaadin-avatar');
+    avatar.name = item.name;
+    avatar.abbr = item.abbr;
+    avatar.img = item.img;
+    avatar.colorIndex = item.colorIndex;
+
+    avatar.withTooltip = true;
+    avatar.i18n = this.i18n;
+    avatar._item = item;
+
+    return avatar;
+  }
+
+  /** @private */
+  __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 */
   _onOverflowClick(e) {
     e.stopPropagation();
@@ -354,17 +431,48 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
   }
 
   /** @private */
-  __computeItems(arr, itemsInView, maxItemsVisible) {
+  __updateAvatars(arr, itemsInView, maxItemsVisible) {
     const items = arr.base || [];
     const limit = this.__getLimit(items.length, itemsInView, maxItemsVisible);
-    return limit ? items.slice(0, limit) : items;
+
+    const newItems = limit ? items.slice(0, limit) : items;
+    const oldItems = this.__oldAvatarItems || [];
+
+    if (newItems.length || oldItems.length) {
+      const removed = oldItems.filter((item) => !newItems.includes(item));
+      const added = [...newItems];
+
+      this._avatars.forEach((avatar) => {
+        const item = avatar._item;
+        if (removed.includes(item)) {
+          avatar.remove();
+        } else if (added.includes(item)) {
+          added.splice(added.indexOf(item), 1);
+        }
+      });
+
+      this.__addAvatars(added, newItems);
+    }
+
+    this._avatars = [...this.querySelectorAll('vaadin-avatar')];
+    this.__oldAvatarItems = newItems;
   }
 
   /** @private */
-  __computeExtraItems(arr, itemsInView, maxItemsVisible) {
+  __addAvatars(itemsToAdd, allItems) {
+    itemsToAdd.forEach((item) => {
+      const avatar = this.__createAvatar(item);
+      const nextItem = allItems[allItems.indexOf(item) + 1];
+      const nextAvatar = this._avatars.find((el) => el._item === nextItem);
+      this.insertBefore(avatar, nextAvatar || this._overflow);
+    });
+  }
+
+  /** @private */
+  __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 */
@@ -373,21 +481,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 */
-  __computeMoreHidden(items, itemsInView, maxReached) {
-    return !maxReached && !(itemsInView && itemsInView < items);
+  __updateOverflowHidden(overflow, items, itemsInView, maxReached) {
+    if (overflow) {
+      overflow.toggleAttribute('hidden', !maxReached && !(itemsInView && itemsInView < items));
+    }
   }
 
   /** @private */
-  __computeMoreTooltip(items, itemsInView, maxItemsVisible) {
+  __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) {
+      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];
@@ -395,8 +525,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 */
@@ -421,7 +551,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')
@@ -469,6 +598,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;
+      });
     }
   }
 
@@ -476,20 +609,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 */

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/lumo/vaadin-avatar-group.js

@@ -1,6 +1,6 @@
 import '@vaadin/avatar/theme/lumo/vaadin-avatar.js';
 import '@vaadin/item/theme/lumo/vaadin-item.js';
 import '@vaadin/list-box/theme/lumo/vaadin-list-box.js';
-import '@vaadin/vaadin-overlay/theme/lumo/vaadin-overlay.js';
+import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
 import './vaadin-avatar-group-styles.js';
 import '../../src/vaadin-avatar-group.js';

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/theme/material/vaadin-avatar-group.js

@@ -1,6 +1,6 @@
 import '@vaadin/avatar/theme/material/vaadin-avatar.js';
 import '@vaadin/item/theme/material/vaadin-item.js';
 import '@vaadin/list-box/theme/material/vaadin-list-box.js';
-import '@vaadin/vaadin-overlay/theme/material/vaadin-overlay.js';
+import '@vaadin/overlay/theme/material/vaadin-overlay.js';
 import './vaadin-avatar-group-styles.js';
 import '../../src/vaadin-avatar-group.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar-group",
-  "version": "23.3.0-alpha2",
+  "version": "24.0.0-alpha1",
   "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.0-alpha2/#/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.0-alpha2/#/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.0-alpha2/#/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-alpha1/#/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-alpha1/#/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-alpha1/#/elements/vaadin-overlay).",
           "attributes": [
             {
               "name": "max-items-visible",
@@ -37,7 +37,7 @@
             "properties": [
               {
                 "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.0-alpha2/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/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-alpha1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/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.0-alpha2",
+  "version": "24.0.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,12 +16,12 @@
       "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.0-alpha2/#/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.0-alpha2/#/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.0-alpha2/#/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-alpha1/#/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-alpha1/#/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-alpha1/#/elements/vaadin-overlay).",
           "extension": true,
           "attributes": [
             {
               "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.0-alpha2/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/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-alpha1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/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);