@vaadin/avatar-group 24.8.0-alpha8 → 25.0.0-alpha1

package/README.md

@@ -34,29 +34,6 @@ Once installed, import the component in your application:
 import '@vaadin/avatar-group';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/avatar-group/vaadin-avatar-group.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/avatar-group/theme/material/vaadin-avatar-group.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/avatar-group/theme/lumo/vaadin-avatar-group.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/avatar-group/src/vaadin-avatar-group.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar-group",
-  "version": "24.8.0-alpha8",
+  "version": "25.0.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -32,26 +32,24 @@
     "vaadin-avatar-group",
     "avatar-group",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.8.0-alpha8",
-    "@vaadin/avatar": "24.8.0-alpha8",
-    "@vaadin/component-base": "24.8.0-alpha8",
-    "@vaadin/item": "24.8.0-alpha8",
-    "@vaadin/list-box": "24.8.0-alpha8",
-    "@vaadin/overlay": "24.8.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha8",
+    "@vaadin/a11y-base": "25.0.0-alpha1",
+    "@vaadin/avatar": "25.0.0-alpha1",
+    "@vaadin/component-base": "25.0.0-alpha1",
+    "@vaadin/item": "25.0.0-alpha1",
+    "@vaadin/list-box": "25.0.0-alpha1",
+    "@vaadin/overlay": "25.0.0-alpha1",
+    "@vaadin/tooltip": "25.0.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha8",
-    "@vaadin/test-runner-commands": "24.8.0-alpha8",
+    "@vaadin/chai-plugins": "25.0.0-alpha1",
+    "@vaadin/test-runner-commands": "25.0.0-alpha1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -59,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "d914bb8f669d7e3d1981feb8eac05688ab9870b4"
+  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
 }

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

@@ -3,9 +3,10 @@
  * 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 { css, 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -19,22 +20,26 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes ThemableMixin
  * @protected
  */
-class AvatarGroupMenuItem extends ItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
+class AvatarGroupMenuItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-avatar-group-menu-item';
   }
 
-  static get template() {
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <style>
-        :host {
-          display: inline-block;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-      </style>
       <span part="checkmark" aria-hidden="true"></span>
       <div part="content">
         <slot></slot>

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

@@ -4,14 +4,13 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ListMixin } from '@vaadin/a11y-base/src/list-mixin.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-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.
  */
-declare class AvatarGroupMenu extends ListMixin(DirMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {}
+declare class AvatarGroupMenu extends ListMixin(DirMixin(ThemableMixin(HTMLElement))) {}
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -3,11 +3,11 @@
  * 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 { css, html, LitElement } from 'lit';
 import { ListMixin } from '@vaadin/a11y-base/src/list-mixin.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -15,38 +15,32 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * @customElement
  * @extends HTMLElement
- * @mixes ControllerMixin
  * @mixes DirMixin
  * @mixes ListMixin
  * @mixes ThemableMixin
  * @protected
  */
-class AvatarGroupMenu extends ListMixin(ThemableMixin(DirMixin(ControllerMixin(PolymerElement)))) {
+class AvatarGroupMenu extends ListMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-avatar-group-menu';
   }
 
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-        }
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+      }
 
-        :host([hidden]) {
-          display: none !important;
-        }
+      :host([hidden]) {
+        display: none !important;
+      }
 
-        [part='items'] {
-          height: 100%;
-          width: 100%;
-          overflow-y: auto;
-          -webkit-overflow-scrolling: touch;
-        }
-      </style>
-      <div part="items">
-        <slot></slot>
-      </div>
+      [part='items'] {
+        height: 100%;
+        width: 100%;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+      }
     `;
   }
 
@@ -70,6 +64,15 @@ class AvatarGroupMenu extends ListMixin(ThemableMixin(DirMixin(ControllerMixin(P
     return this.shadowRoot.querySelector('[part="items"]');
   }
 
+  /** @protected */
+  render() {
+    return html`
+      <div part="items">
+        <slot></slot>
+      </div>
+    `;
+  }
+
   /** @protected */
   ready() {
     super.ready();

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

@@ -3,7 +3,6 @@
  * Copyright (c) 2020 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, render } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { announce } from '@vaadin/a11y-base/src/announce.js';
@@ -193,10 +192,6 @@ export const AvatarGroupMixin = (superClass) =>
       const overlay = this.$.overlay;
       overlay.renderer = this.__overlayRenderer.bind(this);
       this._overlayElement = overlay;
-
-      afterNextRender(this, () => {
-        this.__setItemsInView();
-      });
     }
 
     /** @protected */

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

@@ -3,17 +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 { 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 { 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 { 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 +23,19 @@ 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(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 id="backdrop" part="backdrop" ?hidden="${!this.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';
@@ -51,7 +50,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

@@ -4,19 +4,18 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/avatar/src/vaadin-avatar.js';
+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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.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.
  *
@@ -59,13 +58,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(LitElement)))) {
+  static get is() {
+    return 'vaadin-avatar-group';
+  }
+
+  static get styles() {
+    return avatarGroupStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div id="container" part="container">
         <slot></slot>
@@ -73,17 +80,19 @@ class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(Controller
       </div>
       <vaadin-avatar-group-overlay
         id="overlay"
-        opened="{{_opened}}"
-        position-target="[[_overflow]]"
+        .opened="${this._opened}"
+        .positionTarget="${this._overflow}"
         no-vertical-overlap
-        on-vaadin-overlay-close="_onVaadinOverlayClose"
-        on-vaadin-overlay-open="_onVaadinOverlayOpen"
+        @vaadin-overlay-close="${this._onVaadinOverlayClose}"
+        @vaadin-overlay-open="${this._onVaadinOverlayOpen}"
+        @opened-changed="${this._onOpenedChanged}"
       ></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.0-alpha8",
+  "version": "25.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/24.8.0-alpha8/#/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.0-alpha8/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/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-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/25.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/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-alpha1/#/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-alpha1/#/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-alpha1/#/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.0-alpha8/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars, and set `className` to provide CSS class names.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png',\n    className: 'even'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1,\n    className: 'odd'\n  },\n];\n```",
+                "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-alpha1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/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.0-alpha8",
+  "version": "25.0.0-alpha1",
   "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.0-alpha8/#/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.0-alpha8/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/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-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/25.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/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-alpha1/#/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-alpha1/#/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-alpha1/#/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.0-alpha8/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars, and set `className` to provide CSS class names.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png',\n    className: 'even'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1,\n    className: 'odd'\n  },\n];\n```",
+              "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-alpha1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/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"
               }

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

@@ -1,60 +0,0 @@
-/**
- * @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, 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-/**
- * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes DirMixin
- * @mixes ItemMixin
- * @mixes ThemableMixin
- * @protected
- */
-class AvatarGroupMenuItem extends ItemMixin(ThemableMixin(DirMixin(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;
-      }
-    `;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <span part="checkmark" aria-hidden="true"></span>
-      <div part="content">
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.setAttribute('role', 'menuitem');
-  }
-}
-
-defineCustomElement(AvatarGroupMenuItem);
-
-export { AvatarGroupMenuItem };

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

@@ -1,87 +0,0 @@
-/**
- * @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, 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-/**
- * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes ControllerMixin
- * @mixes DirMixin
- * @mixes ListMixin
- * @mixes ThemableMixin
- * @protected
- */
-class AvatarGroupMenu extends ListMixin(ThemableMixin(DirMixin(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;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      // We don't need to define this property since super default is vertical,
-      // but we don't want it to be modified, or be shown in the API docs.
-      /** @private */
-      orientation: {
-        readOnly: true,
-      },
-    };
-  }
-
-  /**
-   * @return {!HTMLElement}
-   * @protected
-   * @override
-   */
-  get _scrollerElement() {
-    return this.shadowRoot.querySelector('[part="items"]');
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div part="items">
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.setAttribute('role', 'menu');
-  }
-}
-
-defineCustomElement(AvatarGroupMenu);
-
-export { AvatarGroupMenu };

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

@@ -1,48 +0,0 @@
-/**
- * @license
- * Copyright (c) 2020 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-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 { 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-/**
- * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes PositionMixin
- * @mixes OverlayMixin
- * @mixes DirMixin
- * @mixes ThemableMixin
- * @private
- */
-class AvatarGroupOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement))))) {
-  static get is() {
-    return 'vaadin-avatar-group-overlay';
-  }
-
-  static get styles() {
-    return overlayStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay" tabindex="0">
-        <div part="content" id="content">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-defineCustomElement(AvatarGroupOverlay);

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

@@ -1 +0,0 @@
-export * from './vaadin-avatar-group.js';

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

@@ -1,64 +0,0 @@
-/**
- * @license
- * Copyright (c) 2020 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/avatar/src/vaadin-lit-avatar.js';
-import './vaadin-lit-avatar-group-menu.js';
-import './vaadin-lit-avatar-group-menu-item.js';
-import './vaadin-lit-avatar-group-overlay.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 { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { AvatarGroupMixin } from './vaadin-avatar-group-mixin.js';
-import { avatarGroupStyles } from './vaadin-avatar-group-styles.js';
-
-/**
- * LitElement based version of `<vaadin-avatar-group>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-avatar-group';
-  }
-
-  static get styles() {
-    return avatarGroupStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="container" part="container">
-        <slot></slot>
-        <slot name="overflow"></slot>
-      </div>
-
-      <vaadin-avatar-group-overlay
-        id="overlay"
-        .opened="${this._opened}"
-        .positionTarget="${this._overflow}"
-        no-vertical-overlap
-        @vaadin-overlay-close="${this._onVaadinOverlayClose}"
-        @vaadin-overlay-open="${this._onVaadinOverlayOpen}"
-        @opened-changed="${this._onOpenedChanged}"
-      ></vaadin-avatar-group-overlay>
-    `;
-  }
-
-  /** @private */
-  _onOpenedChanged(event) {
-    this._opened = event.detail.value;
-  }
-}
-
-defineCustomElement(AvatarGroup);
-
-export { AvatarGroup };

package/theme/lumo/vaadin-lit-avatar-group.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/avatar/theme/lumo/vaadin-lit-avatar.js';
-import './vaadin-avatar-group-styles.js';
-import '../../src/vaadin-lit-avatar-group.js';

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

@@ -1,3 +0,0 @@
-import '@vaadin/avatar/theme/lumo/vaadin-lit-avatar.js';
-import './vaadin-avatar-group-styles.js';
-import '../../src/vaadin-lit-avatar-group.js';

package/theme/material/vaadin-avatar-group-styles.d.ts

@@ -1 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';

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

@@ -1,78 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import { item } from '@vaadin/item/theme/material/vaadin-item-styles.js';
-import { listBox } from '@vaadin/list-box/theme/material/vaadin-list-box-styles.js';
-import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-avatar-group',
-  css`
-    :host {
-      --vaadin-avatar-size: 2.25rem;
-    }
-
-    :host([theme~='xlarge']) {
-      --vaadin-avatar-group-overlap: 12px;
-      --vaadin-avatar-group-overlap-border: 3px;
-      --vaadin-avatar-size: 3.5rem;
-    }
-
-    :host([theme~='large']) {
-      --vaadin-avatar-group-overlap: 10px;
-      --vaadin-avatar-group-overlap-border: 3px;
-      --vaadin-avatar-size: 2.75rem;
-    }
-
-    :host([theme~='small']) {
-      --vaadin-avatar-group-overlap: 6px;
-      --vaadin-avatar-group-overlap-border: 2px;
-      --vaadin-avatar-size: 1.875rem;
-    }
-
-    :host([theme~='xsmall']) {
-      --vaadin-avatar-group-overlap: 4px;
-      --vaadin-avatar-group-overlap-border: 2px;
-      --vaadin-avatar-size: 1.625rem;
-    }
-  `,
-  { moduleId: 'material-avatar-group' },
-);
-
-const avatarGroupOverlay = css`
-  [part='overlay'] {
-    outline: none;
-  }
-`;
-
-registerStyles('vaadin-avatar-group-overlay', [menuOverlay, avatarGroupOverlay], {
-  moduleId: 'material-avatar-group-overlay',
-});
-
-registerStyles('vaadin-avatar-group-menu', listBox, { moduleId: 'material-avatar-group-menu' });
-
-registerStyles(
-  'vaadin-avatar-group-menu-item',
-  [
-    item,
-    css`
-      :host {
-        padding: 8px;
-        padding-inline-end: 24px;
-      }
-
-      [part='content'] {
-        display: flex;
-        align-items: center;
-      }
-
-      [part='checkmark']::before {
-        display: none;
-      }
-
-      [part='content'] ::slotted(vaadin-avatar) {
-        margin-inline-end: 8px;
-      }
-    `,
-  ],
-  { moduleId: 'material-avatar-group-menu-item' },
-);

package/theme/material/vaadin-avatar-group.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/avatar/theme/material/vaadin-avatar.js';
-import './vaadin-avatar-group-styles.js';
-import '../../src/vaadin-avatar-group.js';

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

@@ -1,3 +0,0 @@
-import '@vaadin/avatar/theme/material/vaadin-avatar.js';
-import './vaadin-avatar-group-styles.js';
-import '../../src/vaadin-avatar-group.js';

package/theme/material/vaadin-lit-avatar-group.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/avatar/theme/material/vaadin-lit-avatar.js';
-import './vaadin-avatar-group-styles.js';
-import '../../src/vaadin-lit-avatar-group.js';

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

@@ -1,3 +0,0 @@
-import '@vaadin/avatar/theme/material/vaadin-lit-avatar.js';
-import './vaadin-avatar-group-styles.js';
-import '../../src/vaadin-lit-avatar-group.js';

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

@@ -1 +0,0 @@
-export * from './src/vaadin-avatar-group.js';

package/vaadin-lit-avatar-group.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-avatar-group.js';
-export * from './src/vaadin-lit-avatar-group.js';