From aaeb6742688aa63f0aecb0afab4b1fa0555e39c5 Mon Sep 17 00:00:00 2001
From: Denis Ryabko <ryabkodenis@yandex-team.ru>
Date: Sat, 1 Nov 2025 14:31:48 +0300
Subject: [PATCH 1/3] fix(AvatarStack): change ordering algorithm for correct
 logical order li

---
 src/components/AvatarStack/AvatarStack.scss    |  5 ++---
 src/components/AvatarStack/AvatarStack.tsx     | 15 +++++++++++----
 src/components/AvatarStack/AvatarStackItem.tsx | 12 +++++++++---
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/AvatarStack/AvatarStack.scss b/src/components/AvatarStack/AvatarStack.scss
index 970f814b8b..26413ff5dc 100644
--- a/src/components/AvatarStack/AvatarStack.scss
+++ b/src/components/AvatarStack/AvatarStack.scss
@@ -10,7 +10,7 @@ $block: '.#{variables.$ns}avatar-stack';
 
     display: inline-flex;
     justify-content: flex-end;
-    flex-direction: row-reverse;
+    flex-direction: row;
 
     margin: 0;
     padding: 0;
@@ -31,8 +31,7 @@ $block: '.#{variables.$ns}avatar-stack';
         display: flex;
         z-index: 0;
         border-radius: 100%;
-
-        &:not(:first-child) {
+        &:not(:last-child) {
             margin-inline-end: calc(-1 * var(--_--overlap));
         }
     }
diff --git a/src/components/AvatarStack/AvatarStack.tsx b/src/components/AvatarStack/AvatarStack.tsx
index 9578e5c914..8fdefb0032 100644
--- a/src/components/AvatarStack/AvatarStack.tsx
+++ b/src/components/AvatarStack/AvatarStack.tsx
@@ -43,10 +43,17 @@ const AvatarStackComponent = React.forwardRef<HTMLUListElement, AvatarStackProps
                 return;
             }
 
-            const item = <AvatarStackItem key={visibleItems.length}>{child}</AvatarStackItem>;
+            const item = (
+                <AvatarStackItem
+                    key={visibleItems.length}
+                    style={{zIndex: normalizedMax - visibleItems.length}}
+                >
+                    {child}
+                </AvatarStackItem>
+            );
 
             if (visibleItems.length < normalizedMax) {
-                visibleItems.unshift(item);
+                visibleItems.push(item);
             }
         });
 
@@ -57,8 +64,9 @@ const AvatarStackComponent = React.forwardRef<HTMLUListElement, AvatarStackProps
             // to restore role manually
             // eslint-disable-next-line jsx-a11y/no-redundant-roles
             <ul className={b({'overlap-size': overlapSize}, className)} role={'list'} ref={ref}>
+                {visibleItems}
                 {hasMoreButton ? (
-                    <AvatarStackItem key="more-button">
+                    <AvatarStackItem key="more-button" style={{zIndex: 0}}>
                         {renderMore ? (
                             renderMore({count: moreItems})
                         ) : (
@@ -66,7 +74,6 @@ const AvatarStackComponent = React.forwardRef<HTMLUListElement, AvatarStackProps
                         )}
                     </AvatarStackItem>
                 ) : null}
-                {visibleItems}
             </ul>
         );
     },
diff --git a/src/components/AvatarStack/AvatarStackItem.tsx b/src/components/AvatarStack/AvatarStackItem.tsx
index 37ca62a698..23f5ffc36c 100644
--- a/src/components/AvatarStack/AvatarStackItem.tsx
+++ b/src/components/AvatarStack/AvatarStackItem.tsx
@@ -4,10 +4,16 @@ import {block} from '../utils/cn';
 
 const b = block('avatar-stack');
 
-type Props = React.PropsWithChildren<{}>;
+type Props = React.PropsWithChildren<{
+    style?: React.CSSProperties;
+}>;
 
-export const AvatarStackItem = ({children}: Props) => {
-    return <li className={b('item')}>{children}</li>;
+export const AvatarStackItem = ({children, style}: Props) => {
+    return (
+        <li className={b('item')} style={style}>
+            {children}
+        </li>
+    );
 };
 
 AvatarStackItem.displayName = 'AvatarStack.Item';

From c3613a8f88a7660ef6566bdf688932d0c5c833cb Mon Sep 17 00:00:00 2001
From: Denis Ryabko <ryabkodenis@yandex-team.ru>
Date: Sat, 15 Nov 2025 09:04:58 +0300
Subject: [PATCH 2/3] fix(AvatarStack): simplify margin logic and improve style
 handling for more button

---
 src/components/AvatarStack/AvatarStack.scss    | 4 +---
 src/components/AvatarStack/AvatarStack.tsx     | 5 ++++-
 src/components/AvatarStack/AvatarStackItem.tsx | 4 +---
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/AvatarStack/AvatarStack.scss b/src/components/AvatarStack/AvatarStack.scss
index 26413ff5dc..b70cd23bb1 100644
--- a/src/components/AvatarStack/AvatarStack.scss
+++ b/src/components/AvatarStack/AvatarStack.scss
@@ -31,9 +31,7 @@ $block: '.#{variables.$ns}avatar-stack';
         display: flex;
         z-index: 0;
         border-radius: 100%;
-        &:not(:last-child) {
-            margin-inline-end: calc(-1 * var(--_--overlap));
-        }
+        margin-inline-end: calc(-1 * var(--_--overlap));
     }
 
     &__more-button,
diff --git a/src/components/AvatarStack/AvatarStack.tsx b/src/components/AvatarStack/AvatarStack.tsx
index 8fdefb0032..b9a521ee78 100644
--- a/src/components/AvatarStack/AvatarStack.tsx
+++ b/src/components/AvatarStack/AvatarStack.tsx
@@ -12,6 +12,9 @@ import './AvatarStack.scss';
 
 const b = block('avatar-stack');
 
+// Default style for more button item
+const DEFAULT_MORE_BUTTON_STYLE = {zIndex: 0};
+
 const AvatarStackComponent = React.forwardRef<HTMLUListElement, AvatarStackProps>(
     (
         {
@@ -66,7 +69,7 @@ const AvatarStackComponent = React.forwardRef<HTMLUListElement, AvatarStackProps
             <ul className={b({'overlap-size': overlapSize}, className)} role={'list'} ref={ref}>
                 {visibleItems}
                 {hasMoreButton ? (
-                    <AvatarStackItem key="more-button" style={{zIndex: 0}}>
+                    <AvatarStackItem key="more-button" style={DEFAULT_MORE_BUTTON_STYLE}>
                         {renderMore ? (
                             renderMore({count: moreItems})
                         ) : (
diff --git a/src/components/AvatarStack/AvatarStackItem.tsx b/src/components/AvatarStack/AvatarStackItem.tsx
index 23f5ffc36c..ac67beb289 100644
--- a/src/components/AvatarStack/AvatarStackItem.tsx
+++ b/src/components/AvatarStack/AvatarStackItem.tsx
@@ -4,9 +4,7 @@ import {block} from '../utils/cn';
 
 const b = block('avatar-stack');
 
-type Props = React.PropsWithChildren<{
-    style?: React.CSSProperties;
-}>;
+type Props = React.PropsWithChildren<Pick<React.HTMLAttributes<HTMLLIElement>, 'style'>>;
 
 export const AvatarStackItem = ({children, style}: Props) => {
     return (

From e8741b473f2ee3fcc56e915981782b99dd471140 Mon Sep 17 00:00:00 2001
From: Denis Ryabko <ryabkodenis@yandex-team.ru>
Date: Sat, 15 Nov 2025 09:12:05 +0300
Subject: [PATCH 3/3] fix(AvatarStack): apply margin only to non-last avatars
 for better layout

---
 src/components/AvatarStack/AvatarStack.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/AvatarStack/AvatarStack.scss b/src/components/AvatarStack/AvatarStack.scss
index b70cd23bb1..26413ff5dc 100644
--- a/src/components/AvatarStack/AvatarStack.scss
+++ b/src/components/AvatarStack/AvatarStack.scss
@@ -31,7 +31,9 @@ $block: '.#{variables.$ns}avatar-stack';
         display: flex;
         z-index: 0;
         border-radius: 100%;
-        margin-inline-end: calc(-1 * var(--_--overlap));
+        &:not(:last-child) {
+            margin-inline-end: calc(-1 * var(--_--overlap));
+        }
     }
 
     &__more-button,