@element-plus/nightly 0.0.20260103 → 0.0.20260105

package/theme-chalk/src/avatar-group.scss

@@ -0,0 +1,25 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(avatar-group) {
+  @include set-component-css-var('avatar-group', $avatar-group);
+
+  display: inline-flex;
+
+  .#{$namespace}-avatar {
+    border: 1px solid getCssVar('border-color-extra-light');
+  }
+
+  .#{$namespace}-avatar:not(:first-child) {
+    margin-left: getCssVar('avatar-group', 'item-gap');
+  }
+
+  @include e(collapse-avatars) {
+    @include set-component-css-var('avatar-group', $avatar-group);
+
+    .#{$namespace}-avatar:not(:first-child) {
+      margin-left: getCssVar('avatar-group', 'collapse-item-gap');
+    }
+  }
+}

package/theme-chalk/src/common/var.scss

@@ -1523,6 +1523,15 @@ $avatar-size: map.merge(
   $avatar-size
 );
 
+$avatar-group: () !default;
+$avatar-group: map.merge(
+  (
+    'item-gap': -8px,
+    'collapse-item-gap': 4px,
+  ),
+  $avatar-group
+);
+
 // Empty
 // css3 var in packages/theme-chalk/src/empty.scss
 $empty: () !default;

package/theme-chalk/src/index.scss

@@ -5,6 +5,7 @@
 @use './aside.scss';
 @use './autocomplete.scss';
 @use './avatar.scss';
+@use './avatar-group.scss';
 @use './backtop.scss';
 @use './badge.scss';
 @use './breadcrumb-item.scss';