@vaadin/avatar-group 24.0.0-alpha11 → 24.0.0-alpha13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/package.json +11 -11
  2. package/src/vaadin-avatar-group-menu-item.d.ts +21 -0
  3. package/src/vaadin-avatar-group-menu-item.js +53 -0
  4. package/src/vaadin-avatar-group-menu.d.ts +22 -0
  5. package/src/vaadin-avatar-group-menu.js +81 -0
  6. package/src/vaadin-avatar-group.d.ts +2 -0
  7. package/src/vaadin-avatar-group.js +14 -15
  8. package/theme/lumo/vaadin-avatar-group-styles.js +24 -24
  9. package/theme/lumo/vaadin-avatar-group.js +0 -2
  10. package/theme/material/vaadin-avatar-group-styles.js +25 -22
  11. package/theme/material/vaadin-avatar-group.js +0 -2
  12. package/web-types.json +3 -3
  13. package/web-types.lit.json +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/avatar-group",
3
- "version": "24.0.0-alpha11",
3
+ "version": "24.0.0-alpha13",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,24 +37,24 @@
37
37
  ],
38
38
  "dependencies": {
39
39
  "@polymer/polymer": "^3.0.0",
40
- "@vaadin/avatar": "24.0.0-alpha11",
41
- "@vaadin/component-base": "24.0.0-alpha11",
42
- "@vaadin/item": "24.0.0-alpha11",
43
- "@vaadin/list-box": "24.0.0-alpha11",
44
- "@vaadin/overlay": "24.0.0-alpha11",
45
- "@vaadin/vaadin-lumo-styles": "24.0.0-alpha11",
46
- "@vaadin/vaadin-material-styles": "24.0.0-alpha11",
47
- "@vaadin/vaadin-themable-mixin": "24.0.0-alpha11",
40
+ "@vaadin/avatar": "24.0.0-alpha13",
41
+ "@vaadin/component-base": "24.0.0-alpha13",
42
+ "@vaadin/item": "24.0.0-alpha13",
43
+ "@vaadin/list-box": "24.0.0-alpha13",
44
+ "@vaadin/overlay": "24.0.0-alpha13",
45
+ "@vaadin/vaadin-lumo-styles": "24.0.0-alpha13",
46
+ "@vaadin/vaadin-material-styles": "24.0.0-alpha13",
47
+ "@vaadin/vaadin-themable-mixin": "24.0.0-alpha13",
48
48
  "lit": "^2.0.0"
49
49
  },
50
50
  "devDependencies": {
51
51
  "@esm-bundle/chai": "^4.3.4",
52
- "@vaadin/testing-helpers": "^0.3.2",
52
+ "@vaadin/testing-helpers": "^0.4.0",
53
53
  "sinon": "^13.0.2"
54
54
  },
55
55
  "web-types": [
56
56
  "web-types.json",
57
57
  "web-types.lit.json"
58
58
  ],
59
- "gitHead": "641b3d96ceeb3e503a093682ebe686afdd8c3a68"
59
+ "gitHead": "a423ad309c12b4e4f847737ee9f491f83ea60ff0"
60
60
  }
package/src/vaadin-avatar-group-menu-item.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2020 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
7
+ import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
8
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
9
+
10
+ /**
11
+ * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
12
+ */
13
+ declare class AvatarGroupMenuItem extends ItemMixin(DirMixin(ThemableMixin(HTMLElement))) {}
14
+
15
+ declare global {
16
+ interface HTMLElementTagNameMap {
17
+ 'vaadin-avatar-group-menu-item': AvatarGroupMenuItem;
18
+ }
19
+ }
20
+
21
+ export { AvatarGroupMenuItem };
package/src/vaadin-avatar-group-menu-item.js ADDED
@@ -0,0 +1,53 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2020 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
+ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
8
+ import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
9
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
10
+
11
+ /**
12
+ * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
13
+ *
14
+ * @extends HTMLElement
15
+ * @mixes DirMixin
16
+ * @mixes ItemMixin
17
+ * @mixes ThemableMixin
18
+ * @protected
19
+ */
20
+ class AvatarGroupMenuItem extends ItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
21
+ static get is() {
22
+ return 'vaadin-avatar-group-menu-item';
23
+ }
24
+
25
+ static get template() {
26
+ return html`
27
+ <style>
28
+ :host {
29
+ display: inline-block;
30
+ }
31
+
32
+ :host([hidden]) {
33
+ display: none !important;
34
+ }
35
+ </style>
36
+ <span part="checkmark" aria-hidden="true"></span>
37
+ <div part="content">
38
+ <slot></slot>
39
+ </div>
40
+ `;
41
+ }
42
+
43
+ /** @protected */
44
+ ready() {
45
+ super.ready();
46
+
47
+ this.setAttribute('role', 'menuitem');
48
+ }
49
+ }
50
+
51
+ customElements.define(AvatarGroupMenuItem.is, AvatarGroupMenuItem);
52
+
53
+ export { AvatarGroupMenuItem };
package/src/vaadin-avatar-group-menu.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2020 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
7
+ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
8
+ import { ListMixin } from '@vaadin/component-base/src/list-mixin.js';
9
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
10
+
11
+ /**
12
+ * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
13
+ */
14
+ declare class AvatarGroupMenu extends ListMixin(DirMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {}
15
+
16
+ declare global {
17
+ interface HTMLElementTagNameMap {
18
+ 'vaadin-avatar-group-menu': AvatarGroupMenu;
19
+ }
20
+ }
21
+
22
+ export { AvatarGroupMenu };
package/src/vaadin-avatar-group-menu.js ADDED
@@ -0,0 +1,81 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2020 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
+ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
8
+ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
9
+ import { ListMixin } from '@vaadin/component-base/src/list-mixin.js';
10
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
11
+
12
+ /**
13
+ * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately.
14
+ *
15
+ * @extends HTMLElement
16
+ * @mixes ControllerMixin
17
+ * @mixes DirMixin
18
+ * @mixes ListMixin
19
+ * @mixes ThemableMixin
20
+ * @protected
21
+ */
22
+ class AvatarGroupMenu extends ListMixin(ThemableMixin(DirMixin(ControllerMixin(PolymerElement)))) {
23
+ static get is() {
24
+ return 'vaadin-avatar-group-menu';
25
+ }
26
+
27
+ static get template() {
28
+ return html`
29
+ <style>
30
+ :host {
31
+ display: flex;
32
+ }
33
+
34
+ :host([hidden]) {
35
+ display: none !important;
36
+ }
37
+
38
+ [part='items'] {
39
+ height: 100%;
40
+ width: 100%;
41
+ overflow-y: auto;
42
+ -webkit-overflow-scrolling: touch;
43
+ }
44
+ </style>
45
+ <div part="items">
46
+ <slot></slot>
47
+ </div>
48
+ `;
49
+ }
50
+
51
+ static get properties() {
52
+ return {
53
+ // We don't need to define this property since super default is vertical,
54
+ // but we don't want it to be modified, or be shown in the API docs.
55
+ /** @private */
56
+ orientation: {
57
+ readOnly: true,
58
+ },
59
+ };
60
+ }
61
+
62
+ /**
63
+ * @return {!HTMLElement}
64
+ * @protected
65
+ * @override
66
+ */
67
+ get _scrollerElement() {
68
+ return this.shadowRoot.querySelector('[part="items"]');
69
+ }
70
+
71
+ /** @protected */
72
+ ready() {
73
+ super.ready();
74
+
75
+ this.setAttribute('role', 'menu');
76
+ }
77
+ }
78
+
79
+ customElements.define(AvatarGroupMenu.is, AvatarGroupMenu);
80
+
81
+ export { AvatarGroupMenu };
package/src/vaadin-avatar-group.d.ts CHANGED
@@ -65,6 +65,8 @@ export interface AvatarGroupItem {
65
65
  * components are themable:
66
66
  *
67
67
  * - `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
68
+ * - `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
69
+ * - `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
68
70
  */
69
71
  declare class AvatarGroup extends ResizeMixin(
70
72
  OverlayClassMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))),
package/src/vaadin-avatar-group.js CHANGED
@@ -4,8 +4,8 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import '@vaadin/avatar/src/vaadin-avatar.js';
7
- import '@vaadin/item/src/vaadin-item.js';
8
- import '@vaadin/list-box/src/vaadin-list-box.js';
7
+ import './vaadin-avatar-group-menu.js';
8
+ import './vaadin-avatar-group-menu-item.js';
9
9
  import './vaadin-avatar-group-overlay.js';
10
10
  import { calculateSplices } from '@polymer/polymer/lib/utils/array-splice.js';
11
11
  import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
@@ -58,6 +58,8 @@ const MINIMUM_DISPLAYED_AVATARS = 2;
58
58
  * components are themable:
59
59
  *
60
60
  * - `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
61
+ * - `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
62
+ * - `<vaadin-avatar-group-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
61
63
  *
62
64
  * @extends HTMLElement
63
65
  * @mixes ControllerMixin
@@ -284,7 +286,7 @@ class AvatarGroup extends ResizeMixin(OverlayClassMixin(ElementMixin(ThemableMix
284
286
 
285
287
  this._overflowController = new SlotController(this, 'overflow', 'vaadin-avatar', {
286
288
  initializer: (overflow) => {
287
- overflow.setAttribute('aria-haspopup', 'listbox');
289
+ overflow.setAttribute('aria-haspopup', 'menu');
288
290
  overflow.setAttribute('aria-expanded', 'false');
289
291
  overflow.addEventListener('click', (e) => this._onOverflowClick(e));
290
292
  overflow.addEventListener('keydown', (e) => this._onOverflowKeyDown(e));
@@ -327,29 +329,27 @@ class AvatarGroup extends ResizeMixin(OverlayClassMixin(ElementMixin(ThemableMix
327
329
  * @private
328
330
  */
329
331
  __overlayRenderer(root) {
330
- let listBox = root.firstElementChild;
331
- if (!listBox) {
332
- listBox = document.createElement('vaadin-list-box');
333
- listBox.addEventListener('keydown', (event) => this._onListKeyDown(event));
334
- root.appendChild(listBox);
332
+ let menu = root.firstElementChild;
333
+ if (!menu) {
334
+ menu = document.createElement('vaadin-avatar-group-menu');
335
+ menu.addEventListener('keydown', (event) => this._onListKeyDown(event));
336
+ root.appendChild(menu);
335
337
  }
336
338
 
337
- listBox.textContent = '';
339
+ menu.textContent = '';
338
340
 
339
341
  if (!this._overflowItems) {
340
342
  return;
341
343
  }
342
344
 
343
345
  this._overflowItems.forEach((item) => {
344
- listBox.appendChild(this.__createItemElement(item));
346
+ menu.appendChild(this.__createItemElement(item));
345
347
  });
346
348
  }
347
349
 
348
350
  /** @private */
349
351
  __createItemElement(item) {
350
- const itemElement = document.createElement('vaadin-item');
351
- itemElement.setAttribute('theme', 'avatar-group-item');
352
- itemElement.setAttribute('role', 'option');
352
+ const itemElement = document.createElement('vaadin-avatar-group-menu-item');
353
353
 
354
354
  const avatar = document.createElement('vaadin-avatar');
355
355
  itemElement.appendChild(avatar);
@@ -595,8 +595,7 @@ class AvatarGroup extends ResizeMixin(OverlayClassMixin(ElementMixin(ThemableMix
595
595
  __openedChanged(opened, wasOpened) {
596
596
  if (opened) {
597
597
  if (!this._menuElement) {
598
- this._menuElement = this.$.overlay.querySelector('vaadin-list-box');
599
- this._menuElement.setAttribute('role', 'listbox');
598
+ this._menuElement = this.$.overlay.querySelector('vaadin-avatar-group-menu');
600
599
  }
601
600
 
602
601
  this._openedWithFocusRing = this._overflow.hasAttribute('focus-ring');
package/theme/lumo/vaadin-avatar-group-styles.js CHANGED
@@ -1,6 +1,8 @@
1
1
  import '@vaadin/vaadin-lumo-styles/color.js';
2
2
  import '@vaadin/vaadin-lumo-styles/sizing.js';
3
3
  import '@vaadin/vaadin-lumo-styles/spacing.js';
4
+ import { item } from '@vaadin/item/theme/lumo/vaadin-item-styles.js';
5
+ import { listBox } from '@vaadin/list-box/theme/lumo/vaadin-list-box-styles.js';
4
6
  import { menuOverlayCore } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
5
7
  import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
6
8
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -54,31 +56,29 @@ registerStyles('vaadin-avatar-group-overlay', [overlay, menuOverlayCore, avatarG
54
56
  moduleId: 'lumo-avatar-group-overlay',
55
57
  });
56
58
 
57
- registerStyles(
58
- 'vaadin-item',
59
- css`
60
- :host([theme='avatar-group-item']) {
61
- padding: var(--lumo-space-xs);
62
- padding-inline-end: var(--lumo-space-m);
63
- }
64
-
65
- :host([theme='avatar-group-item']) [part='content'] {
66
- display: flex;
67
- align-items: center;
68
- }
59
+ registerStyles('vaadin-avatar-group-menu', listBox, { moduleId: 'lumo-avatar-group-menu' });
69
60
 
70
- :host([theme='avatar-group-item']) ::slotted(vaadin-avatar) {
71
- width: var(--lumo-size-xs);
72
- height: var(--lumo-size-xs);
73
- }
61
+ registerStyles(
62
+ 'vaadin-avatar-group-menu-item',
63
+ [
64
+ item,
65
+ css`
66
+ :host {
67
+ padding: var(--lumo-space-xs);
68
+ padding-inline-end: var(--lumo-space-m);
69
+ }
74
70
 
75
- :host([theme='avatar-group-item']:not([dir='rtl'])) ::slotted(vaadin-avatar) {
76
- margin-right: var(--lumo-space-s);
77
- }
71
+ [part='content'] {
72
+ display: flex;
73
+ align-items: center;
74
+ }
78
75
 
79
- :host([theme='avatar-group-item'][dir='rtl']) ::slotted(vaadin-avatar) {
80
- margin-left: var(--lumo-space-s);
81
- }
82
- `,
83
- { moduleId: 'lumo-avatar-group-item' },
76
+ [part='content'] ::slotted(vaadin-avatar) {
77
+ width: var(--lumo-size-xs);
78
+ height: var(--lumo-size-xs);
79
+ margin-inline-end: var(--lumo-space-s);
80
+ }
81
+ `,
82
+ ],
83
+ { moduleId: 'lumo-avatar-group-menu-item' },
84
84
  );
package/theme/lumo/vaadin-avatar-group.js CHANGED
@@ -1,6 +1,4 @@
1
1
  import '@vaadin/avatar/theme/lumo/vaadin-avatar.js';
2
- import '@vaadin/item/theme/lumo/vaadin-item.js';
3
- import '@vaadin/list-box/theme/lumo/vaadin-list-box.js';
4
2
  import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
5
3
  import './vaadin-avatar-group-styles.js';
6
4
  import '../../src/vaadin-avatar-group.js';
package/theme/material/vaadin-avatar-group-styles.js CHANGED
@@ -1,4 +1,6 @@
1
1
  import '@vaadin/vaadin-material-styles/color.js';
2
+ import { item } from '@vaadin/item/theme/material/vaadin-item-styles.js';
3
+ import { listBox } from '@vaadin/list-box/theme/material/vaadin-list-box-styles.js';
2
4
  import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
3
5
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
4
6
 
@@ -46,30 +48,31 @@ registerStyles('vaadin-avatar-group-overlay', [menuOverlay, avatarGroupOverlay],
46
48
  moduleId: 'material-avatar-group-overlay',
47
49
  });
48
50
 
51
+ registerStyles('vaadin-avatar-group-menu', listBox, { moduleId: 'material-avatar-group-menu' });
52
+
49
53
  registerStyles(
50
- 'vaadin-item',
51
- css`
52
- :host([theme='avatar-group-item']) {
53
- padding: 8px;
54
- padding-inline-end: 24px;
55
- }
54
+ 'vaadin-avatar-group-menu-item',
55
+ [
56
+ item,
57
+ css`
58
+ :host {
59
+ padding: 8px;
60
+ padding-inline-end: 24px;
61
+ }
56
62
 
57
- :host([theme='avatar-group-item']) [part='content'] {
58
- display: flex;
59
- align-items: center;
60
- }
63
+ [part='content'] {
64
+ display: flex;
65
+ align-items: center;
66
+ }
61
67
 
62
- :host([theme='avatar-group-item']) [part='checkmark']::before {
63
- display: none;
64
- }
68
+ [part='checkmark']::before {
69
+ display: none;
70
+ }
65
71
 
66
- :host([theme='avatar-group-item']:not([dir='rtl'])) ::slotted(vaadin-avatar) {
67
- margin-right: 8px;
68
- }
69
-
70
- :host([theme='avatar-group-item'][dir='rtl']) ::slotted(vaadin-avatar) {
71
- margin-left: 8px;
72
- }
73
- `,
74
- { moduleId: 'material-avatar-group-item' },
72
+ [part='content'] ::slotted(vaadin-avatar) {
73
+ margin-inline-end: 8px;
74
+ }
75
+ `,
76
+ ],
77
+ { moduleId: 'material-avatar-group-menu-item' },
75
78
  );
package/theme/material/vaadin-avatar-group.js CHANGED
@@ -1,6 +1,4 @@
1
1
  import '@vaadin/avatar/theme/material/vaadin-avatar.js';
2
- import '@vaadin/item/theme/material/vaadin-item.js';
3
- import '@vaadin/list-box/theme/material/vaadin-list-box.js';
4
2
  import '@vaadin/overlay/theme/material/vaadin-overlay.js';
5
3
  import './vaadin-avatar-group-styles.js';
6
4
  import '../../src/vaadin-avatar-group.js';
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/avatar-group",
4
- "version": "24.0.0-alpha11",
4
+ "version": "24.0.0-alpha13",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-avatar-group",
11
- "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n {name: 'John Doe'},\n {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n----------- | ---------------\n`container` | The container element\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-overlay).",
11
+ "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n {name: 'John Doe'},\n {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n----------- | ---------------\n`container` | The container element\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/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.0.0-alpha13/#/elements/vaadin-item).",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "overlay-class",
@@ -59,7 +59,7 @@
59
59
  },
60
60
  {
61
61
  "name": "items",
62
- "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n {\n name: 'User name',\n img: 'url-to-image.png'\n },\n {\n abbr: 'JD',\n colorIndex: 1\n },\n];\n```",
62
+ "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n {\n name: 'User name',\n img: 'url-to-image.png'\n },\n {\n abbr: 'JD',\n colorIndex: 1\n },\n];\n```",
63
63
  "value": {
64
64
  "type": [
65
65
  "Array.<AvatarGroupItem>",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/avatar-group",
4
- "version": "24.0.0-alpha11",
4
+ "version": "24.0.0-alpha13",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-avatar-group",
19
- "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n {name: 'John Doe'},\n {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n----------- | ---------------\n`container` | The container element\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-overlay).",
19
+ "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n {name: 'John Doe'},\n {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n----------- | ---------------\n`container` | The container element\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-overlay).\n- `<vaadin-avatar-group-menu>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/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.0.0-alpha13/#/elements/vaadin-item).",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
@@ -28,7 +28,7 @@
28
28
  },
29
29
  {
30
30
  "name": ".items",
31
- "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n {\n name: 'User name',\n img: 'url-to-image.png'\n },\n {\n abbr: 'JD',\n colorIndex: 1\n },\n];\n```",
31
+ "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n {\n name: 'User name',\n img: 'url-to-image.png'\n },\n {\n abbr: 'JD',\n colorIndex: 1\n },\n];\n```",
32
32
  "value": {
33
33
  "kind": "expression"
34
34
  }