@vaadin/avatar-group 24.8.4 → 25.0.0-alpha10

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,10 +139,22 @@ export const AvatarGroupMixin = (superClass) =>
       super.i18n = value;
     }
 
+    /** @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');
@@ -187,11 +171,11 @@ export const AvatarGroupMixin = (superClass) =>
           this._overflowTooltip = tooltip;
         },
       });
+
+      this.addController(this._menuController);
       this.addController(this._overflowController);
 
-      const overlay = this.$.overlay;
-      overlay.renderer = this.__overlayRenderer.bind(this);
-      this._overlayElement = overlay;
+      this._overlayElement = this.$.overlay;
     }
 
     /** @protected */
@@ -201,65 +185,92 @@ export const AvatarGroupMixin = (superClass) =>
       this._opened = false;
     }
 
-    /** @private */
-    __getMessage(user, action) {
-      return action.replace('{user}', user.name || user.abbr || this.__effectiveI18n.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 menu = root.firstElementChild;
-      if (!menu) {
-        menu = document.createElement('vaadin-avatar-group-menu');
-        menu.addEventListener('keydown', (event) => this._onListKeyDown(event));
-        root.appendChild(menu);
+    /** @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) : [];
       }
+    }
 
-      menu.textContent = '';
+    /** @protected */
+    updated(props) {
+      super.updated(props);
 
-      if (!this._overflowItems) {
-        return;
+      if (props.has('items')) {
+        this.__itemsChanged(this.items, props.get('items'));
       }
 
-      this._overflowItems.forEach((item) => {
-        menu.appendChild(this.__createItemElement(item));
-      });
-    }
-
-    /** @private */
-    __createItemElement(item) {
-      const itemElement = document.createElement('vaadin-avatar-group-menu-item');
+      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 || []);
+      }
 
-      const avatar = document.createElement('vaadin-avatar');
-      itemElement.appendChild(avatar);
+      if (props.has('items') || props.has('_overflowLimit')) {
+        this.__updateOverflowTooltip(this.items, this._overflowLimit);
+        this.__updateOverflowAvatar(this.items, this._overflowLimit, this.__itemsInView);
+      }
 
-      avatar.setAttribute('aria-hidden', 'true');
-      avatar.setAttribute('tabindex', '-1');
-      avatar.i18n = this.__effectiveI18n;
+      if (props.has('__effectiveI18n') || props.has('items')) {
+        this.__i18nItemsChanged(this.__effectiveI18n, this.items);
+      }
 
-      if (this._theme) {
-        avatar.setAttribute('theme', this._theme);
+      if (props.has('_opened')) {
+        this.__openedChanged(this._opened, props.get('_opened'));
       }
 
-      avatar.name = item.name;
-      avatar.abbr = item.abbr;
-      avatar.img = item.img;
-      avatar.colorIndex = item.colorIndex;
-      if (item.className) {
-        avatar.className = item.className;
+      if (props.has('_theme')) {
+        if (this._theme) {
+          this._overflow.setAttribute('theme', this._theme);
+        } else {
+          this._overflow.removeAttribute('theme');
+        }
       }
 
-      if (item.name) {
-        const text = document.createTextNode(item.name);
-        itemElement.appendChild(text);
+      if (props.has('_overflowItems') || props.has('__effectiveI18n') || props.has('_theme')) {
+        this.__renderMenu();
       }
+    }
 
-      return itemElement;
+    /** @private */
+    __getMessage(user, action) {
+      return action.replace('{user}', user.name || user.abbr || this.__effectiveI18n.anonymous);
+    }
+
+    /**
+     * Renders items when they are provided by the `items` property and clears the content otherwise.
+     * @private
+     */
+    __renderMenu() {
+      render(
+        html`
+          ${(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>
+            `,
+          )}
+        `,
+        this._menuElement,
+        { host: this },
+      );
     }
 
     /** @private */
@@ -323,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>
@@ -335,56 +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.toggleAttribute('hidden', !maxReached && !(itemsInView && itemsInView < count));
-      }
-    }
-
-    /** @private */
-    __updateAvatarsTheme(overflow, avatars, theme) {
-      if (overflow) {
-        [overflow, ...avatars].forEach((avatar) => {
-          if (theme) {
-            avatar.setAttribute('theme', theme);
-          } else {
-            avatar.removeAttribute('theme');
-          }
-        });
+        overflow.abbr = `+${count - limit}`;
+        const hasOverflow = maxReached || (itemsInView && itemsInView < count);
+        overflow.toggleAttribute('hidden', !hasOverflow);
+        this.toggleAttribute('has-overflow', hasOverflow);
       }
     }
 
     /** @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;
       }
@@ -397,7 +378,7 @@ export const AvatarGroupMixin = (superClass) =>
         }
       }
 
-      tooltip.text = result.join('\n');
+      this._overflowTooltip.text = result.join('\n');
     }
 
     /** @private */
@@ -466,41 +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) {
-      if (items || oldItems) {
-        this.$.overlay.requestContentUpdate();
-      }
+      this._overflow.setAttribute('aria-expanded', opened === true);
     }
 
     /** @private */

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

@@ -3,17 +3,15 @@
  * Copyright (c) 2020 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles('vaadin-avatar-group-overlay', [overlayStyles], {
-  moduleId: 'vaadin-avatar-group-overlay-styles',
-});
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
  * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
@@ -26,14 +24,20 @@ registerStyles('vaadin-avatar-group-overlay', [overlayStyles], {
  * @mixes ThemableMixin
  * @private
  */
-class AvatarGroupOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
+class AvatarGroupOverlay extends PositionMixin(
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
+) {
   static get is() {
     return 'vaadin-avatar-group-overlay';
   }
 
-  static get template() {
+  static get styles() {
+    return overlayStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
       <div part="overlay" id="overlay" tabindex="0">
         <div part="content" id="content">
           <slot></slot>

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

@@ -4,7 +4,6 @@
  * 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { AvatarGroupI18n, AvatarGroupItem, AvatarGroupMixin } from './vaadin-avatar-group-mixin.js';
@@ -16,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'}
@@ -36,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.
@@ -51,7 +52,7 @@ export { AvatarGroupI18n, AvatarGroupItem, AvatarI18n };
  * - `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
  * - `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
  */
-declare class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {}
+declare class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(HTMLElement))) {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-avatar-group.js

@@ -8,28 +8,27 @@ import '@vaadin/tooltip/src/vaadin-tooltip.js';
 import './vaadin-avatar-group-menu.js';
 import './vaadin-avatar-group-menu-item.js';
 import './vaadin-avatar-group-overlay.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { avatarGroupStyles } from './styles/vaadin-avatar-group-core-styles.js';
 import { AvatarGroupMixin } from './vaadin-avatar-group-mixin.js';
-import { avatarGroupStyles } from './vaadin-avatar-group-styles.js';
-
-registerStyles('vaadin-avatar-group', avatarGroupStyles, { moduleId: 'vaadin-avatar-group-styles' });
 
 /**
  * `<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.
  *
  * 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'}
@@ -43,6 +42,8 @@ registerStyles('vaadin-avatar-group', avatarGroupStyles, { moduleId: 'vaadin-ava
  * 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.
@@ -60,13 +61,21 @@ registerStyles('vaadin-avatar-group', avatarGroupStyles, { moduleId: 'vaadin-ava
  *
  * @customElement
  * @extends HTMLElement
- * @mixes ControllerMixin
  * @mixes ElementMixin
  * @mixes AvatarGroupMixin
  * @mixes ThemableMixin
  */
-class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
-  static get template() {
+class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
+  static get is() {
+    return 'vaadin-avatar-group';
+  }
+
+  static get styles() {
+    return avatarGroupStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div id="container" part="container">
         <slot></slot>
@@ -74,17 +83,23 @@ class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(Controller
       </div>
       <vaadin-avatar-group-overlay
         id="overlay"
-        opened="{{_opened}}"
-        position-target="[[_overflow]]"
+        .owner="${this}"
+        .opened="${this._opened}"
+        .positionTarget="${this._overflow}"
         no-vertical-overlap
-        on-vaadin-overlay-close="_onVaadinOverlayClose"
-        on-vaadin-overlay-open="_onVaadinOverlayOpen"
-      ></vaadin-avatar-group-overlay>
+        exportparts="overlay, content"
+        @vaadin-overlay-close="${this._onVaadinOverlayClose}"
+        @vaadin-overlay-open="${this._onVaadinOverlayOpen}"
+        @opened-changed="${this._onOpenedChanged}"
+      >
+        <slot name="overlay"></slot>
+      </vaadin-avatar-group-overlay>
     `;
   }
 
-  static get is() {
-    return 'vaadin-avatar-group';
+  /** @private */
+  _onOpenedChanged(event) {
+    this._opened = event.detail.value;
   }
 }
 

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar-group",
-  "version": "24.8.4",
+  "version": "25.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/24.8.4/#/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.8.4/#/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/24.8.4/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/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-alpha10/#/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-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/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-alpha10/#/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-alpha10/#/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-alpha10/#/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/24.8.4/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/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-alpha10/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/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": "24.8.4",
+  "version": "25.0.0-alpha10",
   "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/24.8.4/#/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.8.4/#/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/24.8.4/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/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-alpha10/#/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-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/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-alpha10/#/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-alpha10/#/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-alpha10/#/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/24.8.4/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/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-alpha10/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/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"
               }