feat!: add reverse variant for avatar group Lumo theme

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

@@ -33,18 +33,19 @@ export const avatarGroupStyles = css`
   ::slotted(vaadin-avatar) {
     --_overlap: max(0px, var(--vaadin-avatar-group-overlap, 8px));
     --_gap: max(0px, var(--vaadin-avatar-group-gap, 2px));
-    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((100% - var(--vaadin-focus-ring-width) * 2) * 3);
-    mask-position: calc(50% + (100% - var(--vaadin-focus-ring-width) * 2 - var(--_overlap)) * var(--_d));
+    --_outline-width: var(--vaadin-focus-ring-width);
     --_d: var(--_dir);
+    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((100% - var(--_outline-width) * 2) * 3);
+    mask-position: calc(50% + (100% - var(--_outline-width) * 2 - var(--_overlap)) * var(--_d));
   }
 
   :host(:dir(rtl)) ::slotted(vaadin-avatar) {
     --_d: calc(var(--_dir) * -1);
   }
 
   ::slotted(vaadin-avatar:not(:first-of-type)) {
-    margin-inline-start: calc((var(--vaadin-focus-ring-width) + var(--_overlap) - var(--_gap)) * -1);
+    margin-inline-start: calc((var(--_outline-width) + var(--_overlap) - var(--_gap)) * -1);
   }
 
   :host(:not([theme~='reverse'])) ::slotted(vaadin-avatar:last-child),

packages/avatar-group/src/vaadin-avatar-group.js

@@ -73,6 +73,10 @@ class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(PolylitMix
     return avatarGroupStyles;
   }
 
+  static get lumoInjector() {
+    return { ...super.lumoInjector, includeBaseStyles: true };
+  }
+
   /** @protected */
   render() {
     return html`

packages/avatar-group/test/visual/base/avatar-group.test.js

@@ -17,6 +17,12 @@ describe('avatar-group', () => {
     await visualDiff(div, 'basic');
   });
 
+  it('reverse', async () => {
+    element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];
+    element.setAttribute('theme', 'reverse');
+    await visualDiff(div, 'reverse');
+  });
+
   it('max-items-visible', async () => {
     element.maxItemsVisible = 3;
     element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];

packages/avatar-group/test/visual/lumo/avatar-group.test.js

@@ -20,6 +20,12 @@ describe('avatar-group', () => {
     await visualDiff(div, 'basic');
   });
 
+  it('reverse', async () => {
+    element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];
+    element.setAttribute('theme', 'reverse');
+    await visualDiff(div, 'reverse');
+  });
+
   it('max-items-visible', async () => {
     element.maxItemsVisible = 3;
     element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];

packages/vaadin-lumo-styles/src/components/avatar-group.css

@@ -5,40 +5,20 @@
  */
 @media lumo_components_avatar-group {
   :host {
-    display: block;
-    width: 100%; /* prevent collapsing inside non-stretching column flex */
     --vaadin-avatar-size: var(--lumo-size-m);
     --vaadin-avatar-group-overlap: 8px;
     /* Deprecated property name (overlap-border), for backwards compatibility */
     --vaadin-avatar-group-overlap-border: var(--vaadin-avatar-group-gap, 2px);
   }
 
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  [part='container'] {
-    display: flex;
-    position: relative;
-    width: 100%;
-    flex-wrap: nowrap;
-  }
-
-  ::slotted(vaadin-avatar:not(:first-of-type)) {
-    mask-image: url('data:image/svg+xml;utf8,<svg viewBox=%220 0 300 300%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z%22 fill=%22black%22/></svg>');
+  ::slotted(vaadin-avatar) {
+    --_gap: var(--vaadin-avatar-group-overlap-border);
+    --_outline-width: var(--vaadin-avatar-outline-width);
     mask-size: calc(300% + var(--vaadin-avatar-group-overlap-border) * 6 - var(--vaadin-avatar-outline-width) * 6);
   }
 
-  ::slotted(vaadin-avatar:not([dir='rtl']):not(:first-of-type)) {
-    margin-left: calc(var(--vaadin-avatar-group-overlap) * -1 - var(--vaadin-avatar-outline-width));
-    mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));
-  }
-
-  ::slotted(vaadin-avatar[dir='rtl']:not(:first-of-type)) {
-    margin-right: calc(var(--vaadin-avatar-group-overlap) * -1);
-    mask-position: calc(
-      50% + var(--vaadin-avatar-size) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)
-    );
+  ::slotted(vaadin-avatar:not(:first-of-type)) {
+    margin-inline-start: calc(var(--_overlap) * -1 - var(--vaadin-avatar-outline-width));
   }
 
   :host([theme~='xlarge']) {