@sberbusiness/triplex-next-mcp-server 1.50.0-beta → 1.53.1

package/bundle/components/ImageGallery.md

@@ -10,9 +10,6 @@ tokens:
   - ImageGallery.Arrow_BorderColor_Default
   - ImageGallery.Arrow_BorderColor_Hover
   - ImageGallery.Arrow_BorderColor_Active
-  - ImageGallery.Dot_Background_Default
-  - ImageGallery.Dot_Background_Hover
-  - ImageGallery.Dot_Background_Active
   - ImageGallery.Thumb_Mask_Background
 stories: stories/ImageGallery/ImageGallery.stories.tsx
 version: "1.0"
@@ -24,12 +21,12 @@ version: "1.0"
 
 Готовый пресет галереи изображений поверх `ImageGalleryExtended`. Тонкая
 обёртка: фиксирует стандартную раскладку (крупная картинка `.Main` со стрелками
-навигации + лента миниатюр на десктопе / ряд тиков-индикаторов на мобильном
+навигации + лента миниатюр на десктопе / индикаторы страниц на мобильном
 через `MobileView`) и добавляет uncontrolled-режим (`defaultId`), которого нет у
 controlled-only контейнера `ImageGalleryExtended`. Изображения задаются массивом
 `items`.
 
-Используй когда: нужна типовая галерея «крупная картинка + миниатюры/тики» без
+Используй когда: нужна типовая галерея «крупная картинка + миниатюры/индикаторы страниц» без
 кастомизации раскладки — достаточно передать `items` и подписать стрелки.
 Поддерживает и controlled (`selectedId` + `onChange`), и uncontrolled
 (`defaultId`) режимы.
@@ -68,9 +65,9 @@ controlled-only контейнера `ImageGalleryExtended`. Изображен
 | `height` | `'auto' \| number \| string` | `'auto'` | Высота крупной картинки. `'auto'` — фиксированные значения по breakpoint (504px / 264px); число → `px` |
 | `withBlur` | `boolean` | `true` | Блюр-слой копии изображения по краям (для картинок уже вьюпорта) |
 | `showThumbnails` | `boolean` | `true` | Показывать ленту миниатюр (десктоп) |
-| `showDots` | `boolean` | `true` | Показывать ряд тиков-индикаторов (мобильный) |
+| `showPageIndicators` | `boolean` | `true` | Показывать индикаторы страниц (мобильный) |
 | `thumbnailsProps` | `TImageGalleryThumbnailsProps` | — | Свойства ленты миниатюр (пробрасываются в `.Thumbnails`). Допускают `data-*` |
-| `dotsProps` | `TImageGalleryDotsProps` | — | Свойства ряда тиков (пробрасываются в `.Dots`). Допускают `data-*` |
+| `pageIndicatorsProps` | `TImageGalleryPageIndicatorsProps` | — | Свойства индикаторов страниц (пробрасываются в `.PageIndicators`). Допускают `data-*` |
 | `...HTMLDivAttributes` | — | — | Пробрасываются на корневой контейнер. Кроме `onChange` (переопределён под смену изображения) |
 
 ### Controlled vs uncontrolled
@@ -91,7 +88,8 @@ controlled-only контейнера `ImageGalleryExtended`. Изображен
 Собственных стилей и `.less`-файлов у `ImageGallery` нет — вся отрисовка
 делегируется частям `ImageGalleryExtended`. Перечисленные токены принадлежат
 семейству и используются через эти части — группа `ImageGallery` намеренно
-делится обоими семействами.
+делится обоими семействами. Индикаторы страниц на мобильном красятся токенами
+группы `PageIndicators` (см. `PageIndicators-ai.md`).
 
 ```text
 ImageGallery.Accent_Color
@@ -103,10 +101,6 @@ ImageGallery.Arrow_BorderColor_Default
 ImageGallery.Arrow_BorderColor_Hover
 ImageGallery.Arrow_BorderColor_Active
 
-ImageGallery.Dot_Background_Default
-ImageGallery.Dot_Background_Hover
-ImageGallery.Dot_Background_Active
-
 ImageGallery.Thumb_Mask_Background
 ```
 
@@ -129,10 +123,10 @@ Runtime CSS-переменная высоты крупной картинки
   `ImageGalleryExtended` (клик по уже активному изображению не триггерит).
   Потребители на это полагаются.
 - **Публичный API** (имена и сигнатуры props, типы `TImageGalleryArrowProps` /
-  `TImageGalleryThumbnailsProps` / `TImageGalleryDotsProps`, barrel-экспорты) —
+  `TImageGalleryThumbnailsProps` / `TImageGalleryPageIndicatorsProps`, barrel-экспорты) —
   breaking change при изменении.
-- **Раскладка-пресет фиксирована.** Состав (`.Main` + стрелки + миниатюры/тики
-  через `MobileView`) — суть компонента. Нужна другая раскладка — это
+- **Раскладка-пресет фиксирована.** Состав (`.Main` + стрелки + миниатюры/индикаторы
+  страниц через `MobileView`) — суть компонента. Нужна другая раскладка — это
   `ImageGalleryExtended`, а не новый prop здесь.
 
 ---
@@ -147,8 +141,9 @@ Runtime CSS-переменная высоты крупной картинки
   с клавиатуры); `disabled`-стрелка на границе диапазона не показывается вовсе.
 - **Клавиатура:** `←` / `→` на корневом контейнере переключают активное
   изображение (поведение унаследовано от `ImageGalleryExtended`).
-- **`aria-current="true"`** — на активной миниатюре и активном тике.
-- **Миниатюры и тики** берут доступное имя из `item.alt`.
+- **`aria-current="true"`** — на активной миниатюре.
+- **Индикаторы страниц** (мобильный) — WAI-ARIA `tablist`, см. `PageIndicators-ai.md`.
+- **Миниатюры и индикаторы страниц** берут доступное имя из `item.alt`.
 - **Декоративный блюр-слой** (`withBlur`) помечен `aria-hidden="true"` с пустым
   `alt`.
 - **Мобильный свайп** крупного изображения перехватывает горизонтальный жест,
@@ -163,7 +158,7 @@ Runtime CSS-переменная высоты крупной картинки
   и добавляет uncontrolled-режим. Используй Extended напрямую, если нужна
   кастомная раскладка или поведение.
 - `MobileView` — переключает ветку рендера: на десктопе показывает ленту
-  миниатюр (`.Thumbnails`), на мобильном — ряд тиков (`.Dots`).
+  миниатюр (`.Thumbnails`), на мобильном — индикаторы страниц (`.PageIndicators`).
 - `LightBox` — типовой сценарий: `onImageClick` открывает изображение в
   лайтбоксе (см. story `InsideLightBox`).
 
@@ -180,11 +175,10 @@ Runtime CSS-переменная высоты крупной картинки
 | `Default` | `Default.tsx` | Стандартный пресет: крупная картинка со стрелками + лента миниатюр |
 | `FixedHeight` | `FixedHeight.tsx` | Фиксированная высота крупной картинки (`height={number}`) |
 | `WithoutThumbnails` | `WithoutThumbnails.tsx` | Скрытая лента миниатюр (`showThumbnails={false}`) |
-| `WithDots` | `WithDots.tsx` | Мобильный preset (XS viewport): крупная картинка + тики-индикаторы |
-| `PropsForwarding` | `PropsForwarding.tsx` | Проброс свойств (включая `data-*`) в стрелки, миниатюры и тики |
+| `PropsForwarding` | `PropsForwarding.tsx` | Проброс свойств (включая `data-*`) в стрелки, миниатюры и индикаторы страниц |
 | `WithoutBlur` | `WithoutBlur.tsx` | Отключённый блюр-слой по краям (`withBlur={false}`) |
 | `InsideLightBox` | `InsideLightBox.tsx` | Открытие активного изображения в `LightBox` по клику (`onImageClick`) |
-| `VisualTests` | `VisualTests.tsx` | Скриншот-регрессия: встроенные стрелки на границах (disabled) + блюр; тики-индикаторы |
+| `VisualTests` | `VisualTests.tsx` | Скриншот-регрессия: встроенные стрелки на границах (disabled) + блюр |
 
 ---
 
@@ -195,6 +189,7 @@ Runtime CSS-переменная высоты крупной картинки
 | 2026-05-28 | Создан документ |
 | 2026-08-31 | Удалены неиспользуемые токены `Arrow_Background_Disabled` и `Arrow_BorderColor_Disabled`: неактивная стрелка скрывается (`display: none`), красить нечем |
 | 2026-09-29 | Аудит симметрии `related` (TRI-156): из `related` убраны несимметричные имена (`LightBox`). Пояснения к убранным именам сохранены прозой в «Связанные компоненты»; публичный API и поведение не затронуты. |
+| 2026-10-07 | **Breaking:** `showDots`/`dotsProps` → `showPageIndicators`/`pageIndicatorsProps`, мобильные тики заменены индикаторами страниц, удалены токены `Dot_Background_*` |
 
 ---
 
@@ -271,34 +266,6 @@ export const WithoutThumbnails = () => (
 );
 ```
 
-### WithDots
-
-`stories/ImageGallery/examples/WithDots.tsx`
-
-```tsx
-import React from "react";
-import { ImageGallery } from "@sberbusiness/triplex-next";
-
-const ITEMS = Array.from({ length: 9 }, (_, i) => ({
-    id: `photo-${i + 1}`,
-    src: `assets/images/imageGallery/0${i + 1}.jpg`,
-    alt: `Photo ${i + 1}`,
-}));
-
-/**
- * На мобильном viewport (<768px) лента миниатюр заменяется кликабельными
- * тиками-индикаторами. Максимум 4 тика; картинки распределяются по бакетам.
- */
-export const WithDots = () => (
-    <ImageGallery
-        items={ITEMS}
-        showDots
-        prevArrowProps={{ "aria-label": "Предыдущее изображение" }}
-        nextArrowProps={{ "aria-label": "Следующее изображение" }}
-    />
-);
-```
-
 ### PropsForwarding
 
 `stories/ImageGallery/examples/PropsForwarding.tsx`
@@ -322,9 +289,9 @@ export const PropsForwarding = () => (
             id: "image-gallery-thumbnails",
             "data-test-id": "image-gallery-thumbnails",
         }}
-        dotsProps={{
-            id: "image-gallery-dots",
-            "data-test-id": "image-gallery-dots",
+        pageIndicatorsProps={{
+            id: "image-gallery-page-indicators",
+            "data-test-id": "image-gallery-page-indicators",
         }}
     />
 );

package/bundle/components/ImageGalleryExtended.md

@@ -1,7 +1,7 @@
 ---
 component: ImageGalleryExtended
 category: ImageGalleryExtended
-related: [ImageGallery, MobileView]
+related: [ImageGallery, MobileView, PageIndicators]
 tokens:
   - ImageGallery.Accent_Color
   - ImageGallery.Arrow_Background_Default
@@ -10,9 +10,6 @@ tokens:
   - ImageGallery.Arrow_BorderColor_Default
   - ImageGallery.Arrow_BorderColor_Hover
   - ImageGallery.Arrow_BorderColor_Active
-  - ImageGallery.Dot_Background_Default
-  - ImageGallery.Dot_Background_Hover
-  - ImageGallery.Dot_Background_Active
   - ImageGallery.Thumb_Mask_Background
 stories: stories/ImageGalleryExtended/ImageGalleryExtended.stories.tsx
 version: "1.0"
@@ -26,14 +23,14 @@ version: "1.0"
 массивом `items`, контейнер хранит активный индекс, обрабатывает стрелочную
 навигацию с клавиатуры и раздаёт данные составным частям через React-контекст.
 Раскладка задаётся декларативно — потребитель сам собирает нужные части
-(`.Main`, `.Thumbnails`, `.Dots`, `.Nav`, `.Arrow`, `.Thumb`) в любом порядке.
+(`.Main`, `.Thumbnails`, `.PageIndicators`, `.Nav`, `.Arrow`, `.Thumb`) в любом порядке.
 
 Используй `ImageGalleryExtended` когда: нужен полный контроль над раскладкой и
 поведением галереи (нестандартный порядок частей, кастомные стрелки или
 миниатюры через render-функции, собственное управление активным изображением).
 
 Не используй когда: достаточно стандартного пресета «крупная картинка + лента
-миниатюр (десктоп) / тики (мобильный)» с uncontrolled-режимом — для этого есть
+миниатюр (десктоп) / индикаторы страниц (мобильный)» с uncontrolled-режимом — для этого есть
 готовая обёртка `ImageGallery`.
 
 ---
@@ -56,6 +53,10 @@ version: "1.0"
 Контейнер controlled-only: своего состояния активного изображения не держит.
 Uncontrolled-режим (`defaultId`) добавляет обёртка `ImageGallery`.
 
+Части идут колонкой без `gap`: `.Thumbnails` отделяется `margin-top: 16px`,
+`.PageIndicators` прилегает вплотную (отступ до полоски даёт кнопка-индикатор).
+Отступ своей разметке задаёт потребитель.
+
 ### `ImageGalleryExtended.Main`
 
 Крупное изображение: вьюпорт + накладываемый поверх `children` (обычно `.Nav` со
@@ -96,6 +97,10 @@ child `.Main`, чтобы стрелки позиционировались по
 Горизонтальная лента миниатюр с нативным скроллом и автоцентровкой активной.
 `children` — опциональная **render-функция** миниатюры; по умолчанию рисует
 `.Thumb`. Состояние render-функции: `{ item, index, isActive, ariaLabel, onSelect, ref }`.
+
+По дизайну на узком экране (< MD) лента миниатюр заменяется индикаторами
+страниц. Сама часть не переключается — оберни её в `MobileView` с
+`.PageIndicators` в мобильной ветке, как в пресете `ImageGallery` и stories.
 Чтобы автоцентровка работала, проброс `ref` на корневой `<button>` обязателен.
 
 ### `ImageGalleryExtended.Thumb`
@@ -110,11 +115,17 @@ child `.Main`, чтобы стрелки позиционировались по
 | `item` | `IImageGalleryItemProps` | да | Изображение миниатюры (использует `thumbSrc ?? src`) |
 | `isActive` | `boolean` | да | Активна ли миниатюра (рамка + `aria-current`) |
 
-### `ImageGalleryExtended.Dots`
+### `ImageGalleryExtended.PageIndicators`
+
+Индикаторы страниц (мобильный preset) — обёртка над `PageIndicators`: индикатор
+на каждое изображение, видимо окно из 5. `count`/`activeIndex`/`onChange` берутся
+из контекста, ориентация всегда горизонтальная. При `items.length <= 1` ничего не
+рендерит.
 
-Ряд кликабельных тиков-индикаторов (мобильный preset). Изображения распределяются
-по тикам бакетами равного размера (макс. 4 тика); при `items.length <= 1` ничего
-не рендерит. Собственных публичных props нет (`className + ...HTMLDivAttributes`).
+| Prop | Тип | Обязательный | Описание |
+|---|---|---|---|
+| `indicatorProps` | `TPageIndicatorProps \| TPageIndicatorPropsFactory` | нет | Свойства кнопок-индикаторов. По умолчанию `aria-label` = `item.alt`; значения из `indicatorProps` имеют приоритет |
+| `...HTMLDivAttributes` | — | — | Пробрасываются на корневой `<div role="tablist">` |
 
 ---
 
@@ -124,7 +135,8 @@ child `.Main`, чтобы стрелки позиционировались по
 «Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/ImageGallery.ts`.
 
 Токены живут в общей с `ImageGallery` группе `ImageGallery`
-(семейства делят визуальный язык).
+(семейства делят визуальный язык). `.PageIndicators` красится токенами группы
+`PageIndicators` (см. `PageIndicators-ai.md`).
 
 ```text
 ImageGallery.Accent_Color
@@ -136,10 +148,6 @@ ImageGallery.Arrow_BorderColor_Default
 ImageGallery.Arrow_BorderColor_Hover
 ImageGallery.Arrow_BorderColor_Active
 
-ImageGallery.Dot_Background_Default
-ImageGallery.Dot_Background_Hover
-ImageGallery.Dot_Background_Active
-
 ImageGallery.Thumb_Mask_Background
 ```
 
@@ -157,8 +165,8 @@ Runtime CSS-переменные (задаются компонентом чер
 ## Инварианты
 
 - **`forwardRef`** обязателен на всех публичных частях (`Root`, `.Main`, `.Arrow`,
-  `.Thumbnails`, `.Thumb`, `.Dots`). Target — корневой DOM-элемент части
-  (`<div>` для контейнера/Main/Thumbnails/Dots, `<button>` для Arrow/Thumb).
+  `.Thumbnails`, `.Thumb`, `.PageIndicators`). Target — корневой DOM-элемент части
+  (`<div>` для контейнера/Main/Thumbnails/PageIndicators, `<button>` для Arrow/Thumb).
   `.Thumbnails` пробрасывает ref через `useImperativeHandle` на внутренний
   `carouselRef` — это нужно для автоцентровки; не заменять на прямой ref.
 - **Контейнер controlled-only.** Не добавлять внутреннее состояние активного
@@ -185,10 +193,11 @@ Runtime CSS-переменные (задаются компонентом чер
   При навигации стрелками фокус переносится с прежней миниатюры на активную —
   иначе кольцо `:focus-visible` осталось бы на старой одновременно с рамкой
   `.active` новой.
-- **`aria-current`:** активная миниатюра (`.Thumb`), активный тик (`.Dots`) и
-  активная кнопка получают `aria-current="true"`.
+- **`aria-current`:** активная миниатюра (`.Thumb`) получает `aria-current="true"`.
+- **Индикаторы страниц (`.PageIndicators`):** WAI-ARIA `tablist`, см.
+  `PageIndicators-ai.md`. Корневой обработчик стрелок их клавиатуру не дублирует.
 - **`aria-label` — обязанность потребителя.** `.Arrow` требует `aria-label`
-  явным props; компонент не хардкодит язык. `.Thumb`/`.Dots` берут доступное имя
+  явным props; компонент не хардкодит язык. `.Thumb`/`.PageIndicators` берут доступное имя
   из `item.alt`.
 - **Декоративные изображения** (блюр-слой) помечены `aria-hidden="true"` с пустым
   `alt`.
@@ -202,11 +211,14 @@ Runtime CSS-переменные (задаются компонентом чер
 ## Связанные компоненты
 
 - `ImageGallery` — тонкая обёртка-пресет над `ImageGalleryExtended`: задаёт
-  стандартную раскладку (`.Main` + стрелки + миниатюры/тики через `MobileView`) и
+  стандартную раскладку (`.Main` + стрелки + миниатюры/индикаторы страниц через `MobileView`) и
   добавляет uncontrolled-режим (`defaultId`). Используй её, если кастомная
   раскладка не нужна.
+- `PageIndicators` — рендерится внутри `.PageIndicators`; его props
+  (`IPageIndicatorsProps` без `count`/`activeIndex`/`onChange`/`orientation`)
+  составляют API части.
 - `MobileView` — переключает десктопную/мобильную ветку рендера внутри `.Main`
-  (лента свайпа) и в пресете `ImageGallery` (миниатюры ↔ тики).
+  (лента свайпа) и в пресете `ImageGallery` (миниатюры ↔ индикаторы страниц).
 - `LightBox` — типовой сценарий: `onImageClick` открывает изображение в лайтбоксе
   (см. story `OpenFromAvatar`).
 
@@ -231,13 +243,12 @@ API (экспортируются из barrel ради композиции, н
 | Story | Example file | Что демонстрирует |
 |---|---|---|
 | `Playground` | `Playground.tsx` | Интерактивный контроль `withBlur` / `height` |
-| `Default` | `Default.tsx` | Полный десктопный состав: крупная картинка со стрелками + лента миниатюр |
-| `MainOnly` | `MainOnly.tsx` | Только крупная картинка со стрелками (без миниатюр/тиков), с блюром |
-| `WithDots` | `WithDots.tsx` | Мобильный preset: крупная картинка + тики-индикаторы |
-| `CustomLayout` | `CustomLayout.tsx` | Произвольный порядок частей + кастомные стрелки и миниатюры через render-функции |
+| `Default` | `Default.tsx` | Полный состав: крупная картинка со стрелками + лента миниатюр (на мобильном — индикаторы через `MobileView`) |
+| `MainOnly` | `MainOnly.tsx` | Только крупная картинка со стрелками (без миниатюр/индикаторов), с блюром |
+| `CustomLayout` | `CustomLayout.tsx` | Render-функции: панель навигации через `.Nav` вместо стрелок, миниатюры с собственным `aria-label` через `.Thumbnails` |
 | `ManyThumbnails` | `ManyThumbnails.tsx` | Большой набор (20 изображений): горизонтальный скролл и автоцентровка ленты миниатюр |
 | `OpenFromAvatar` | `OpenFromAvatar.tsx` | Открытие изображения в `LightBox` по клику (интеграция `onImageClick`) |
-| `VisualTests` | `VisualTests.tsx` | Скриншот-регрессия: стрелки на границах диапазона (disabled) и тики-индикаторы |
+| `VisualTests` | `VisualTests.tsx` | Скриншот-регрессия: стрелки на границах диапазона (disabled) |
 
 ---
 
@@ -248,6 +259,7 @@ API (экспортируются из barrel ради композиции, н
 | 2026-05-28 | Создан документ |
 | 2026-08-31 | Удалены неиспользуемые токены `Arrow_Background_Disabled` и `Arrow_BorderColor_Disabled`: неактивная стрелка скрывается (`display: none`), красить нечем |
 | 2026-09-29 | Аудит симметрии `related` (TRI-156): из `related` убраны несимметричные имена (`LightBox`). Пояснения к убранным именам сохранены прозой в «Связанные компоненты»; публичный API и поведение не затронуты. |
+| 2026-10-07 | **Breaking:** `.Dots` → `.PageIndicators`, удалены токены `Dot_Background_*`, `gap` корня заменён отступом у `.Thumbnails` |
 
 ---
 
@@ -258,8 +270,8 @@ API (экспортируются из barrel ради композиции, н
 `stories/ImageGalleryExtended/examples/Default.tsx`
 
 ```tsx
-import React from "react";
-import { ImageGalleryExtended, EImageGalleryArrowDirection } from "@sberbusiness/triplex-next";
+import React, { useState } from "react";
+import { ImageGalleryExtended, EImageGalleryArrowDirection, MobileView } from "@sberbusiness/triplex-next";
 
 const ITEMS = Array.from({ length: 9 }, (_, i) => ({
     id: `photo-${i + 1}`,
@@ -268,11 +280,12 @@ const ITEMS = Array.from({ length: 9 }, (_, i) => ({
 }));
 
 /**
- * Полный десктопный состав: крупная картинка со стрелками + лента миниатюр.
+ * Полный состав: крупная картинка со стрелками + лента миниатюр на десктопе,
+ * на мобильном (<768px) лента заменяется индикаторами страниц через `MobileView`.
  * Активный id хранится в состоянии (компонент controlled-only).
  */
 export const Default = () => {
-    const [selectedId, setSelectedId] = React.useState("photo-1");
+    const [selectedId, setSelectedId] = useState("photo-1");
 
     return (
         <ImageGalleryExtended items={ITEMS} selectedId={selectedId} onChange={setSelectedId}>
@@ -298,7 +311,9 @@ export const Default = () => {
                     )}
                 </ImageGalleryExtended.Nav>
             </ImageGalleryExtended.Main>
-            <ImageGalleryExtended.Thumbnails />
+            <MobileView fallback={<ImageGalleryExtended.Thumbnails />}>
+                <ImageGalleryExtended.PageIndicators />
+            </MobileView>
         </ImageGalleryExtended>
     );
 };
@@ -309,7 +324,7 @@ export const Default = () => {
 `stories/ImageGalleryExtended/examples/MainOnly.tsx`
 
 ```tsx
-import React from "react";
+import React, { useState } from "react";
 import { ImageGalleryExtended, EImageGalleryArrowDirection } from "@sberbusiness/triplex-next";
 
 const ITEMS = Array.from({ length: 9 }, (_, i) => ({
@@ -319,11 +334,11 @@ const ITEMS = Array.from({ length: 9 }, (_, i) => ({
 }));
 
 /**
- * Только крупная картинка со стрелками — без миниатюр и тиков.
+ * Только крупная картинка со стрелками — без миниатюр и индикаторов страниц.
  * Навигация доступна стрелками и клавишами `←` / `→`.
  */
 export const MainOnly = () => {
-    const [selectedId, setSelectedId] = React.useState("photo-1");
+    const [selectedId, setSelectedId] = useState("photo-1");
 
     return (
         <ImageGalleryExtended items={ITEMS} selectedId={selectedId} onChange={setSelectedId}>
@@ -354,43 +369,22 @@ export const MainOnly = () => {
 };
 ```
 
-### WithDots
-
-`stories/ImageGalleryExtended/examples/WithDots.tsx`
-
-```tsx
-import React from "react";
-import { ImageGalleryExtended } from "@sberbusiness/triplex-next";
-
-const ITEMS = Array.from({ length: 9 }, (_, i) => ({
-    id: `photo-${i + 1}`,
-    src: `assets/images/imageGallery/0${i + 1}.jpg`,
-    alt: `Photo ${i + 1}`,
-}));
-
-/**
- * Мобильный preset: крупная картинка + ряд тиков-индикаторов вместо ленты
- * миниатюр. Состав частей собирается вручную из примитивов Extended.
- */
-export const WithDots = () => {
-    const [selectedId, setSelectedId] = React.useState("photo-1");
-
-    return (
-        <ImageGalleryExtended items={ITEMS} selectedId={selectedId} onChange={setSelectedId}>
-            <ImageGalleryExtended.Main withBlur />
-            <ImageGalleryExtended.Dots />
-        </ImageGalleryExtended>
-    );
-};
-```
-
 ### CustomLayout
 
 `stories/ImageGalleryExtended/examples/CustomLayout.tsx`
 
 ```tsx
-import React from "react";
-import { ImageGalleryExtended } from "@sberbusiness/triplex-next";
+import React, { useState } from "react";
+import {
+    ImageGalleryExtended,
+    MobileView,
+    Button,
+    EButtonTheme,
+    EComponentSize,
+    Text,
+    ETextSize,
+    EFontType,
+} from "@sberbusiness/triplex-next";
 
 const ITEMS = Array.from({ length: 9 }, (_, i) => ({
     id: `photo-${i + 1}`,
@@ -399,80 +393,67 @@ const ITEMS = Array.from({ length: 9 }, (_, i) => ({
 }));
 
 /**
- * Порядок составных частей произволен: здесь лента миниатюр расположена над
- * крупной картинкой. Демонстрирует обе render-функции: `Thumbnails` рисует
- * миниатюры через `ImageGalleryExtended.Thumb` (можно подставить любую разметку,
- * проброс `ref` включает автоцентровку), а вместо стандартных стрелок `Nav`
- * отдаёт состояние навигации в кастомную панель «‹ N / Total ›».
+ * Кастомизация через render-функции: `Nav` отдаёт состояние навигации в панель
+ * «Назад · N / Total · Вперёд» под картинкой вместо стрелок поверх неё, а
+ * `Thumbnails` рисует стандартные миниатюры с собственным доступным именем
+ * (проброс `ref` сохраняет автоцентровку). На мобильном (<768px) лента миниатюр
+ * заменяется индикаторами страниц через `MobileView`.
  */
 export const CustomLayout = () => {
-    const [selectedId, setSelectedId] = React.useState("photo-1");
+    const [selectedId, setSelectedId] = useState("photo-1");
 
     return (
         <ImageGalleryExtended items={ITEMS} selectedId={selectedId} onChange={setSelectedId}>
-            <ImageGalleryExtended.Thumbnails>
-                {({ item, isActive, onSelect, ref }) => (
-                    <ImageGalleryExtended.Thumb ref={ref} item={item} isActive={isActive} onClick={onSelect} />
-                )}
-            </ImageGalleryExtended.Thumbnails>
-            <ImageGalleryExtended.Main withBlur height={400}>
-                <ImageGalleryExtended.Nav>
-                    {({ onPrev, onNext, isFirst, isLast, selectedIndex, itemsCount }) => (
-                        <div
-                            style={{
-                                position: "absolute",
-                                bottom: 12,
-                                left: "50%",
-                                zIndex: 2,
-                                display: "flex",
-                                alignItems: "center",
-                                gap: 12,
-                                padding: "6px 14px",
-                                borderRadius: 20,
-                                transform: "translateX(-50%)",
-                                background: "rgba(0, 0, 0, 0.5)",
-                                color: "#fff",
-                            }}
+            <ImageGalleryExtended.Main withBlur height={400} />
+            <ImageGalleryExtended.Nav>
+                {({ onPrev, onNext, isFirst, isLast, selectedIndex, itemsCount }) => (
+                    <div
+                        style={{
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            marginTop: 16,
+                        }}
+                    >
+                        <Button
+                            theme={EButtonTheme.SECONDARY}
+                            size={EComponentSize.SM}
+                            disabled={isFirst}
+                            onClick={onPrev}
                         >
-                            <button
-                                type="button"
-                                aria-label="Предыдущее изображение"
-                                disabled={isFirst}
-                                onClick={onPrev}
-                                style={{
-                                    border: "none",
-                                    background: "none",
-                                    color: "inherit",
-                                    fontSize: 18,
-                                    cursor: isFirst ? "default" : "pointer",
-                                    opacity: isFirst ? 0.4 : 1,
-                                }}
-                            >
-                                ‹
-                            </button>
-                            <span>
-                                {selectedIndex + 1} / {itemsCount}
-                            </span>
-                            <button
-                                type="button"
-                                aria-label="Следующее изображение"
-                                disabled={isLast}
-                                onClick={onNext}
-                                style={{
-                                    border: "none",
-                                    background: "none",
-                                    color: "inherit",
-                                    fontSize: 18,
-                                    cursor: isLast ? "default" : "pointer",
-                                    opacity: isLast ? 0.4 : 1,
-                                }}
-                            >
-                                ›
-                            </button>
-                        </div>
-                    )}
-                </ImageGalleryExtended.Nav>
-            </ImageGalleryExtended.Main>
+                            Назад
+                        </Button>
+                        <Text size={ETextSize.B3} type={EFontType.SECONDARY}>
+                            {selectedIndex + 1} / {itemsCount}
+                        </Text>
+                        <Button
+                            theme={EButtonTheme.SECONDARY}
+                            size={EComponentSize.SM}
+                            disabled={isLast}
+                            onClick={onNext}
+                        >
+                            Вперёд
+                        </Button>
+                    </div>
+                )}
+            </ImageGalleryExtended.Nav>
+            <MobileView
+                fallback={
+                    <ImageGalleryExtended.Thumbnails>
+                        {({ item, index, isActive, onSelect, ref }) => (
+                            <ImageGalleryExtended.Thumb
+                                ref={ref}
+                                item={item}
+                                isActive={isActive}
+                                aria-label={`Фото ${index + 1} из ${ITEMS.length}`}
+                                onClick={onSelect}
+                            />
+                        )}
+                    </ImageGalleryExtended.Thumbnails>
+                }
+            >
+                <ImageGalleryExtended.PageIndicators />
+            </MobileView>
         </ImageGalleryExtended>
     );
 };
@@ -483,8 +464,8 @@ export const CustomLayout = () => {
 `stories/ImageGalleryExtended/examples/ManyThumbnails.tsx`
 
 ```tsx
-import React from "react";
-import { ImageGalleryExtended, EImageGalleryArrowDirection } from "@sberbusiness/triplex-next";
+import React, { useState } from "react";
+import { ImageGalleryExtended, EImageGalleryArrowDirection, MobileView } from "@sberbusiness/triplex-next";
 
 /** Доступных файлов-картинок всего 9, поэтому в большом наборе они повторяются по кругу. */
 const IMAGE_COUNT = 9;
@@ -502,9 +483,10 @@ const ITEMS = Array.from({ length: 20 }, (_, i) => {
 /**
  * Большой набор (20 изображений) — проверяет горизонтальный скролл ленты миниатюр
  * и автоцентровку активной миниатюры, когда они не помещаются в видимую область.
+ * На мобильном (<768px) лента заменяется индикаторами страниц через `MobileView`.
  */
 export const ManyThumbnails = () => {
-    const [selectedId, setSelectedId] = React.useState("photo-1");
+    const [selectedId, setSelectedId] = useState("photo-1");
 
     return (
         <ImageGalleryExtended items={ITEMS} selectedId={selectedId} onChange={setSelectedId}>
@@ -530,7 +512,9 @@ export const ManyThumbnails = () => {
                     )}
                 </ImageGalleryExtended.Nav>
             </ImageGalleryExtended.Main>
-            <ImageGalleryExtended.Thumbnails />
+            <MobileView fallback={<ImageGalleryExtended.Thumbnails />}>
+                <ImageGalleryExtended.PageIndicators />
+            </MobileView>
         </ImageGalleryExtended>
     );
 };

package/bundle/components/ListItemControlsButtonDropdown.md

@@ -1,7 +1,7 @@
 ---
 component: ListItemControlsButtonDropdown
 category: List
-related: [ListItemControlsButton, ButtonDropdownExtended, Dropdown]
+related: [ListItemControlsButton, ButtonDropdownExtended, Dropdown, Puller]
 tokens:
   - ListItemControlsButton.Background_Default
   - ListItemControlsButton.Background_Hover
@@ -87,7 +87,7 @@ dropdown.
 - `ListItemControlsButton` — используется как сама кнопка-триггер.
 - `ButtonDropdownExtended` — обвязка для кастомных кнопок + dropdown.
 - `Dropdown`, `DropdownList` (desktop) — выпадающий список на десктопе.
-- `DropdownMobileBody`, `DropdownMobileList`, `DropdownMobileListItem`, `DropdownMobileHeader`, `DropdownMobileClose` — bottom-sheet на мобильном.
+- `Puller` (`PullerBody`, `PullerList`, `PullerListItem`, `PullerHeader`, `PullerClose`) — bottom-sheet на мобильном.
 - `DropdownListContext` — управление `activeDescendant`.
 
 ---
@@ -108,3 +108,4 @@ dropdown.
 | Дата | Изменение |
 |---|---|
 | 2026-04-29 | Создан документ |
+| 2026-10-21 | Переход на `Puller` (TRIPLEX-961): мобильная версия собрана из частей `Puller` (бывший `DropdownMobile*`). |