fix: avatar size and avatar-group overlap mask base styles

Author: jouni

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

@@ -31,16 +31,11 @@ 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(300% + var(--vaadin-avatar-group-gap, 2px) * 6 - var(--vaadin-focus-ring-width) * 6);
-    mask-position: calc(
-      50% +
-        (
-          var(--vaadin-avatar-size, 32px) - var(--vaadin-avatar-group-overlap, 8px) +
-            var(--vaadin-avatar-group-gap, 2px)
-        ) *
-        var(--_d)
-    );
+    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));
     --_d: var(--_dir);
   }
 
@@ -49,10 +44,7 @@ export const avatarGroupStyles = css`
   }
 
   ::slotted(vaadin-avatar:not(:first-of-type)) {
-    margin-inline-start: calc(
-      var(--vaadin-avatar-group-overlap, 8px) * -1 - var(--vaadin-focus-ring-width) +
-        var(--vaadin-avatar-group-gap, 2px)
-    );
+    margin-inline-start: calc((var(--vaadin-focus-ring-width) + var(--_overlap) - var(--_gap)) * -1);
   }
 
   :host(:not([theme~='reverse'])) ::slotted(vaadin-avatar:last-child),