@vaadin/avatar-group 25.0.0-alpha3 → 25.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar-group",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -36,20 +38,20 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha3",
-    "@vaadin/avatar": "25.0.0-alpha3",
-    "@vaadin/component-base": "25.0.0-alpha3",
-    "@vaadin/item": "25.0.0-alpha3",
-    "@vaadin/list-box": "25.0.0-alpha3",
-    "@vaadin/overlay": "25.0.0-alpha3",
-    "@vaadin/tooltip": "25.0.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha3",
+    "@vaadin/a11y-base": "25.0.0-alpha4",
+    "@vaadin/avatar": "25.0.0-alpha4",
+    "@vaadin/component-base": "25.0.0-alpha4",
+    "@vaadin/item": "25.0.0-alpha4",
+    "@vaadin/list-box": "25.0.0-alpha4",
+    "@vaadin/overlay": "25.0.0-alpha4",
+    "@vaadin/tooltip": "25.0.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha3",
-    "@vaadin/test-runner-commands": "25.0.0-alpha3",
+    "@vaadin/chai-plugins": "25.0.0-alpha4",
+    "@vaadin/test-runner-commands": "25.0.0-alpha4",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -57,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8367dd20a47f53ca5589ad349a8e286ec2673055"
+  "gitHead": "ce4421f0daf26027b863b91787a474e4cc264344"
 }

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

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

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const avatarGroupStyles: CSSResult;

package/src/{vaadin-avatar-group-styles.js → styles/vaadin-avatar-group-core-styles.js}

@@ -3,14 +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 { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from 'lit';
 
 export const avatarGroupStyles = css`
   :host {
     display: block;
     width: 100%; /* prevent collapsing inside non-stretching column flex */
     --vaadin-avatar-group-overlap: 8px;
-    --vaadin-avatar-group-overlap-border: 2px;
+    /* Deprecated property name (overlap-border), for backwards compatibility */
+    --vaadin-avatar-group-overlap-border: var(--vaadin-avatar-group-gap, 2px);
   }
 
   :host([hidden]) {

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const avatarGroupMenuStyles = css`
+  @layer base {
+    :host {
+      display: block;
+      padding: var(--vaadin-item-overlay-padding, 4px);
+    }
+
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    [part='items'] {
+      display: contents;
+    }
+  }
+`;

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { listBoxStyles } from '@vaadin/list-box/src/styles/vaadin-list-box-core-styles.js';
+
+export { listBoxStyles as avatarGroupMenuStyles };

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

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+import { itemStyles } from '@vaadin/item/src/styles/vaadin-item-base-styles.js';
+
+const menuItemStyles = css`
+  @layer base {
+    [part='content'] {
+      display: flex;
+      align-items: center;
+      gap: inherit;
+    }
+  }
+`;
+
+export const avatarGroupMenuItemStyles = [itemStyles, menuItemStyles];

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { itemStyles } from '@vaadin/item/src/styles/vaadin-item-core-styles.js';
+
+export const avatarGroupMenuItemStyles = itemStyles;

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

@@ -3,12 +3,14 @@
  * Copyright (c) 2020 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, html, LitElement } from 'lit';
+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 { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { avatarGroupMenuItemStyles } from './styles/vaadin-avatar-group-menu-item-core-styles.js';
 
 /**
  * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
@@ -20,21 +22,13 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes ThemableMixin
  * @protected
  */
-class AvatarGroupMenuItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+class AvatarGroupMenuItem extends ItemMixin(ThemableMixin(DirMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-avatar-group-menu-item';
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: inline-block;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-    `;
+    return avatarGroupMenuItemStyles;
   }
 
   /** @protected */

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

@@ -3,12 +3,14 @@
  * Copyright (c) 2020 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { ListMixin } from '@vaadin/a11y-base/src/list-mixin.js';
 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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { avatarGroupMenuStyles } from './styles/vaadin-avatar-group-menu-core-styles.js';
 
 /**
  * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
@@ -20,28 +22,13 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes ThemableMixin
  * @protected
  */
-class AvatarGroupMenu extends ListMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+class AvatarGroupMenu extends ListMixin(ThemableMixin(DirMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-avatar-group-menu';
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: flex;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      [part='items'] {
-        height: 100%;
-        width: 100%;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-      }
-    `;
+    return avatarGroupMenuStyles;
   }
 
   static get properties() {

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

@@ -167,6 +167,12 @@ export const AvatarGroupMixin = (superClass) =>
       super.i18n = value;
     }
 
+    constructor() {
+      super();
+
+      this.__overlayRenderer = this.__overlayRenderer.bind(this);
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -189,9 +195,7 @@ export const AvatarGroupMixin = (superClass) =>
       });
       this.addController(this._overflowController);
 
-      const overlay = this.$.overlay;
-      overlay.renderer = this.__overlayRenderer.bind(this);
-      this._overlayElement = overlay;
+      this._overlayElement = this.$.overlay;
     }
 
     /** @protected */
@@ -209,57 +213,35 @@ export const AvatarGroupMixin = (superClass) =>
     /**
      * 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);
-      }
-
-      menu.textContent = '';
-
-      if (!this._overflowItems) {
-        return;
-      }
-
-      this._overflowItems.forEach((item) => {
-        menu.appendChild(this.__createItemElement(item));
-      });
-    }
-
-    /** @private */
-    __createItemElement(item) {
-      const itemElement = document.createElement('vaadin-avatar-group-menu-item');
-
-      const avatar = document.createElement('vaadin-avatar');
-      itemElement.appendChild(avatar);
-
-      avatar.setAttribute('aria-hidden', 'true');
-      avatar.setAttribute('tabindex', '-1');
-      avatar.i18n = this.__effectiveI18n;
-
-      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.className) {
-        avatar.className = item.className;
-      }
-
-      if (item.name) {
-        const text = document.createTextNode(item.name);
-        itemElement.appendChild(text);
-      }
-
-      return itemElement;
+      render(
+        html`
+          <vaadin-avatar-group-menu @keydown="${this._onListKeyDown}">
+            ${(this._overflowItems || []).map(
+              (item) => html`
+                <vaadin-avatar-group-menu-item>
+                  <vaadin-avatar
+                    .name="${item.name}"
+                    .abbr="${item.abbr}"
+                    .img="${item.img}"
+                    .colorIndex="${item.colorIndex}"
+                    .i18n="${this.__effectiveI18n}"
+                    class="${ifDefined(item.className)}"
+                    theme="${ifDefined(this._theme)}"
+                    aria-hidden="true"
+                    tabindex="-1"
+                  ></vaadin-avatar>
+                  ${item.name || ''}
+                </vaadin-avatar-group-menu-item>
+              `,
+            )}
+          </vaadin-avatar-group-menu>
+        `,
+        root,
+        { host: this },
+      );
     }
 
     /** @private */
@@ -361,7 +343,9 @@ export const AvatarGroupMixin = (superClass) =>
         const maxReached = maxItemsVisible != null && count > this.__getMax(maxItemsVisible);
 
         overflow.abbr = `+${count - this.__getLimit(count, itemsInView, maxItemsVisible)}`;
-        overflow.toggleAttribute('hidden', !maxReached && !(itemsInView && itemsInView < count));
+        const hasOverflow = maxReached || (itemsInView && itemsInView < count);
+        overflow.toggleAttribute('hidden', !hasOverflow);
+        this.$.container.classList.toggle('has-overflow', hasOverflow);
       }
     }
 
@@ -498,6 +482,11 @@ export const AvatarGroupMixin = (superClass) =>
 
     /** @private */
     __overflowItemsChanged(items, oldItems) {
+      // Prevent renderer from being called unnecessarily on initialization
+      if (items && items.length === 0 && (!oldItems || oldItems.length === 0)) {
+        return;
+      }
+
       if (items || oldItems) {
         this.$.overlay.requestContentUpdate();
       }

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

@@ -7,9 +7,10 @@ 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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -23,7 +24,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes ThemableMixin
  * @private
  */
-class AvatarGroupOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement))))) {
+class AvatarGroupOverlay extends PositionMixin(
+  OverlayMixin(DirMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))),
+) {
   static get is() {
     return 'vaadin-avatar-group-overlay';
   }

package/src/vaadin-avatar-group.js

@@ -12,9 +12,10 @@ 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 { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-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';
 
 /**
  * `<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.
@@ -62,7 +63,7 @@ import { avatarGroupStyles } from './vaadin-avatar-group-styles.js';
  * @mixes AvatarGroupMixin
  * @mixes ThemableMixin
  */
-class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-avatar-group';
   }
@@ -82,6 +83,7 @@ class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(PolylitMix
         id="overlay"
         .opened="${this._opened}"
         .positionTarget="${this._overflow}"
+        .renderer="${this.__overlayRenderer}"
         no-vertical-overlap
         @vaadin-overlay-close="${this._onVaadinOverlayClose}"
         @vaadin-overlay-open="${this._onVaadinOverlayOpen}"

package/web-types.json

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

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar-group",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha4",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-avatar-group",
-          "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n  {name: 'John Doe'},\n  {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name   | Description\n----------- | ---------------\n`container` | The container element\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/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-alpha3/#/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-alpha3/#/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-alpha3/#/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```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha4/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n  {name: 'John Doe'},\n  {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name   | Description\n----------- | ---------------\n`container` | The container element\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha4/#/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-alpha4/#/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-alpha4/#/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-alpha4/#/elements/vaadin-item).",
           "extension": true,
           "attributes": [
             {
@@ -35,7 +35,7 @@
             },
             {
               "name": ".items",
-              "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/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-alpha4/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha4/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha4/#/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"
               }