@sberbusiness/triplex-next-mcp-server 1.44.0-beta → 1.46.0-beta

package/bundle/components/SwipeableArea.md

@@ -1,11 +1,9 @@
 ---
 component: SwipeableArea
-category: Mobile / Layout
-figma-node: ""
-figma-file: ""
-related: [MobileView]
+category: SwipeableArea
+related: [ListTableItem]
 tokens: []
-stories: ""
+stories: stories/SwipeableArea/SwipeableArea.stories.tsx
 version: "1.0"
 ---
 
@@ -13,127 +11,190 @@ version: "1.0"
 
 ## Назначение
 
-Мобильный контейнер с поддержкой horizontal-swipe: при свайпе влево открывается
-`rightSwipeableArea` (обычно — action-панель), при свайпе вправо —
-`leftSwipeableArea`. Основной контент смещается `transform: translateX`.
-Работает только через touch-события (нет mouse drag).
+Контейнер карточки с реализацией горизонтального свайпа: движение пальца
+сдвигает контент и открывает боковую область с действиями. Свайп влево
+открывает `rightSwipeableArea`, свайп вправо — `leftSwipeableArea`.
 
-Используй когда: нужен iOS-подобный swipe-to-reveal в списке (удалить/
-архивировать и т.п.) на мобильных устройствах.
-Не используй когда: нужен desktop drag — `SwipeableArea` не обрабатывает
-mouse events.
+Собственного оформления у компонента нет — только позиционирование боковых
+областей, transition сдвига и блокировки скролла и кликов на время жеста. Фон,
+отступы и содержимое карточки приходят снаружи (обычно `ListItemContent`).
 
----
-
-## Файловая структура
+Используй когда: на мобильной ширине нужно спрятать действия карточки под
+свайп — так устроены элементы списков (`ListItem`, `ListTableItem`).
 
-```text
-src/components/SwipeableArea/
-├── SwipeableArea.tsx    # forwardRef<ISwipeableAreaRef, ISwipeableAreaProps>
-├── index.ts
-└── styles/SwipeableArea.module.less
-```
+Не используй когда: действия должны быть доступны без тач-жеста. Свайп
+воспроизводится только пальцем: ни мышь, ни клавиатура его не выполняют,
+а компонент не даёт визуального триггера для открытия области. Для готового
+табличного элемента списка со свайпом бери `ListTableItem` — он сам собирает
+`SwipeableArea` и `ListItemControls`.
 
 ---
 
 ## Варианты и props
 
-### `ISwipeableAreaProps`
+`ISwipeableAreaProps` расширяет `React.HTMLAttributes<HTMLDivElement>` —
+`...rest` уходит на корневой `<div>`.
+
+### Обязательные props
 
 | Prop | Тип | Описание |
 |---|---|---|
-| `children` | `ReactNode` | Основной контент карточки. |
-| `leftSwipeableArea?` | `ReactNode` | Контент, появляющийся при свайпе вправо. Если не задан — свайп вправо игнорируется. |
-| `rightSwipeableArea?` | `ReactNode` | Контент, появляющийся при свайпе влево. Если не задан — свайп влево игнорируется. |
-| `...HTMLAttributes<HTMLDivElement>` | — | Прокидываются на корневой div. |
-
-### `ISwipeableAreaRef` (imperative API)
-
-```ts
-interface ISwipeableAreaRef {
-    closeSwipe(): void;    // закрыть любую открытую панель
-    swipeLeft(): void;     // открыть rightSwipeableArea (свайп влево)
-    swipeRight(): void;    // открыть leftSwipeableArea (свайп вправо)
-}
-```
+| `children` | `React.ReactNode` | Контент карточки. Лежит поверх боковых областей и сдвигается при свайпе |
 
-Доступ через `React.useRef<ISwipeableAreaRef>` + `ref={...}`.
+### Опциональные props
 
----
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `leftSwipeableArea` | `React.ReactNode` | — | Контент, открывающийся свайпом **вправо**. Если не передан, свайп вправо ничего не двигает |
+| `rightSwipeableArea` | `React.ReactNode` | — | Контент, открывающийся свайпом **влево**. Если не передан, свайп влево ничего не двигает |
+| `onSwipeLeft` | `() => void` | — | Открылась `rightSwipeableArea`. Вызывается только на открытии и только если свайп длиннее порога |
+| `onSwipeRight` | `() => void` | — | Открылась `leftSwipeableArea`. Те же условия |
+| `className` | `string` | — | Мерджится с собственным классом через `clsx` |
 
-## Логика
+Закрывающий свайп (когда область уже открыта) колбэки **не** вызывает — они
+сообщают только о факте открытия.
 
-### Константы
+### Императивный ref — `ISwipeableAreaRef`
 
-| Имя | Значение | Назначение |
-|---|---|---|
-| `SWIPE_MIN_DISTANCE` | `24` (px) | Порог, ниже которого свайп считается «недотянутым» и контент возвращается в исходное положение. |
+`ref` компонента — не DOM-элемент, а объект с методами. Единственный способ
+подвинуть контент без тач-жеста.
 
-### Определение направления (scroll vs swipe)
+| Метод | Что делает |
+|---|---|
+| `swipeLeft()` | Открывает `rightSwipeableArea` |
+| `swipeRight()` | Открывает `leftSwipeableArea` |
+| `closeSwipe()` | Закрывает открытую область |
+
+Метод молча ничего не делает, если соответствующая область не отрисована.
+Колбэки `onSwipeLeft` / `onSwipeRight` при вызове методов **не** срабатывают.
 
-При первом `touchmove`:
-- `|deltaY| > |deltaX|` → `dragType = vertical` (скролл), свайп не обрабатывается.
-- иначе → `horizontal` (свайп), контент двигается.
+### Как обрабатывается жест
 
-При отпускании (`touchend` на document) — сброс `dragType`.
+| Фаза | Поведение |
+|---|---|
+| `touchstart` на контенте | Запоминаются координаты пальца и текущий сдвиг контента; на документ вешается разовый слушатель `touchend` |
+| Первое `touchmove` | Определяется тип жеста: `abs(deltaY) > abs(deltaX)` — это скролл, контент до конца жеста не двигается; иначе — свайп |
+| Последующие `touchmove` | Контент едет за пальцем, но не дальше ширины открываемой области; на время свайпа у контента `touch-action: none` |
+| `touchend` (на документе) | Если длина свайпа больше `SWIPE_MIN_DISTANCE` (24px) — область открывается или закрывается, иначе контент возвращается в положение, с которого начинался жест |
+| `touchstart` вне компонента | Открытая область закрывается |
 
-### Завершение свайпа (`handleSwipe`)
+Мультитач (`event.touches.length !== 1`) игнорируется при перемещении: на
+старте координаты запоминаются всегда, но контент не поедет, пока в жесте
+не останется ровно один палец.
 
-Запускается в `useEffect` при `dragType → undefined && contentTranslateX !== start`.
-Логика зависит от начального состояния:
-- Было закрыто, сдвиг > порога → открыть соответствующую панель (translateX = ±width).
-- Было закрыто, сдвиг < порога → вернуть к 0.
-- Было открыто — если сдвиг в сторону закрытия превышает порог → закрыть, иначе — вернуть к открытому состоянию.
+Прозрачность боковой области считается как `|сдвиг| / ширина области`, поэтому
+она проявляется по мере свайпа. Ширина берётся из `getBoundingClientRect()` в
+момент жеста — область с нулевой шириной открыться не сможет; для неё
+`getSwipeableAreaOpacity` возвращает `1`, как в состоянии покоя, вместо `NaN`
+от деления на ноль.
 
-### Opacity side-панелей
+Логика жеста вынесена в чистые функции `resolveSwipeMove`, `resolveSwipeEnd` и
+`getSwipeableAreaOpacity` (`src/components/SwipeableArea/utils.ts`) и покрыта
+unit-тестами. Компонент
+хранит только состояние: сдвиг контента, тип жеста и флаг анимации.
 
-`opacity = |contentTranslateX| / panelWidth` — плавное появление.
+### Известные ограничения
 
-### Outside-touch
+Пункт существует с первой версии компонента и не менялся при AI-рефакторинге —
+при правках его стоит держать в голове.
 
-`document.addEventListener("touchstart")` закрывает swipe при tap'е вне контейнера.
+- **Сдвиг контента не сбрасывается, если боковая область перестала
+  передаваться.** Открыли `leftSwipeableArea`, затем перестали передавать этот
+  prop — область размонтируется, а контент останется сдвинутым, оставив пустую
+  полосу внутри `overflow: hidden`. Закрыть можно через `closeSwipe()`.
 
-### Анимация
+---
 
-CSS-класс `swipeAnimationFinish` (`animating = true`) → CSS transition.
-`animating = false` в `onTransitionEnd`.
+## Дизайн-токены
 
-Во время горизонтального drag:
-- `disableScroll` класс → не скроллится страница.
-- `disablePointerEvents` класс → элементы внутри контента не реагируют на клик.
+Токенов нет. `SwipeableArea.module.less` содержит только позиционирование,
+`transition` сдвига и `touch-action`. Цвета и фон приходят от контента —
+например, `ListItem.Background` у `ListItemContent`.
 
 ---
 
 ## Инварианты
 
-- **`forwardRef<ISwipeableAreaRef>`** — ref отдаёт imperative API, НЕ DOM-элемент. Это нестандартно, не менять без миграции потребителей.
-- **Только touch-события** — mouse drag не поддерживается намеренно (компонент только для mobile).
-- **`SWIPE_MIN_DISTANCE = 24`** — менять с проверкой UX на реальных устройствах.
-- **`dragType === vertical`** → свайп игнорируется до конца жеста (пока пользователь не отпустит палец). Это предотвращает «дребезг» при диагональных движениях.
-- **`leftSwipeableArea` / `rightSwipeableArea` рендерятся ТОЛЬКО если переданы** (`typeof ... !== "undefined"`) — не оставлять пустые div'ы.
-- **`useImperativeHandle` переопределяет ref-форму** — потребитель не получит HTMLDivElement.
-- **Outside-tap закрывает swipe** (listener на document) — не отключать, это часть UX.
-- **`disablePointerEvents` активен, пока `contentTranslateX !== 0`** — дети не ловят клики при открытой side-панели. Взаимодействие идёт через кнопки в самой side-панели.
+- **`forwardRef` на компоненте — не убирать.** Ref типизирован
+  `ISwipeableAreaRef` и наполняется через `useImperativeHandle`: получить через
+  него корневой `<div>` нельзя, и менять это — breaking change для
+  `ListTableItem` и потребителей библиотеки.
+- **Публичные экспорты barrel** (`src/components/SwipeableArea/index.ts`):
+  `SwipeableArea`, `ISwipeableAreaProps`, `ISwipeableAreaRef`. Переименование —
+  breaking change. `utils.ts` — внутренний модуль, в barrel не попадает.
+- **`displayName = "SwipeableArea"`.**
+- **Корневой DOM — `<div>`.** На него уходят `className`, `...rest` и `data-tx`;
+  тег не настраивается.
+- **Порог свайпа `SWIPE_MIN_DISTANCE = 24` — внутренняя константа.** Пропа для
+  него нет; изменение значения меняет ощущение жеста у всех потребителей.
+- **Боковые области рендерятся, только если соответствующий prop передан**
+  (`!== undefined`), и остаются в DOM всё время жизни компонента. Скрытость
+  закрытой области — следствие `opacity` и перекрытия контентом, а не
+  размонтирования.
+- **`touch-action: pan-y` на контенте и `touch-action: none` во время
+  горизонтального свайпа** — без этого браузер уводит жест в скролл страницы.
+- **`::after` поверх контента при открытой области** — гасит нажатия на
+  вложенные элементы карточки, пока область открыта. Убрать — значит разрешить
+  случайные клики по карточке при открытых кнопках.
+- **Слушатели документа снимаются при размонтировании** (`touchstart` — всегда,
+  `touchend` — если компонент размонтирован в середине жеста).
+- **React 17-совместимость.** Компонент уходит в ветку `release-0`; React
+  18-only API (`useId`, `useSyncExternalStore`, `useInsertionEffect`)
+  использовать нельзя.
 
 ---
 
 ## Accessibility
 
-- Компонент не добавляет ARIA — это чисто-тактильный жест.
-- Для screen-reader пользователей side-панели должны быть доступны альтернативным способом (обычно — через action button в самом контенте, `overlayMenu` и т.п.).
-- Imperative API (`swipeLeft`/`swipeRight`) — используется для программного открытия (например, onboarding-туториал).
+Собственных ARIA-атрибутов компонент не выставляет и текстов не хардкодит —
+библиотека мультиязычная, а содержимое боковых областей приходит снаружи.
+
+Что важно знать потребителю:
+
+- **Клавиатурного эквивалента свайпа нет.** Компонент слушает только `touch`-
+  события. Если действия из боковой области критичны, продублируй их доступным
+  элементом или открывай область через `ISwipeableAreaRef`.
+- **Кнопки боковых областей фокусируются по Tab и в закрытом состоянии** —
+  области всегда в DOM, а `opacity: 0` фокус не забирает. Это осознанный
+  компромисс текущей реализации: если такой обход недопустим, скрывай
+  содержимое области на своей стороне.
+- **Открытая область не помечается для скринридера.** `::after` блокирует
+  только указатель; порядок чтения и фокус остаются прежними.
 
 ---
 
 ## Связанные компоненты
 
-- `MobileView` — оборачивает SwipeableArea для условного рендера только на мобильных viewport'ах.
+- `ListTableItem` (`src/components/List`) — единственный потребитель внутри
+  библиотеки, который опирается на императивный контракт: он всегда оборачивает
+  свой контент в `SwipeableArea`, прокидывает наружу `swipeableAreaRef` типа
+  `React.Ref<ISwipeableAreaRef>` и подключает `controlButtons` как
+  `rightSwipeableArea`. Любая правка `ISwipeableAreaRef` должна сверяться с ним.
+- `ListItemControls`, `ListItemControlsButton`, `ListItemControlsButtonDropdown`
+  (`src/components/List`) — стандартное наполнение боковой области: контейнер
+  кнопок действий и сами кнопки.
+- `ListItemTailLeft` / `ListItemTailRight` (`src/components/List`) —
+  декоративные «хвосты», подсказывающие, что карточку можно свайпнуть.
+  Размещаются внутри `SwipeableArea` рядом с контентом.
+- `ListItem` / `ListItemContent` (`src/components/List`) — типичное окружение:
+  `ListItem` даёт элемент списка, `ListItemContent` — фон и отступы карточки,
+  без которых боковые области просвечивали бы сквозь контент.
 
 ---
 
 ## Stories
 
-Отдельных stories нет (mobile-only компонент, тестируется в составе mobile-экранов).
+Основные истории: `stories/SwipeableArea/SwipeableArea.stories.tsx`
+Файлы примеров: `stories/SwipeableArea/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Переключение боковых областей, колбэки в Actions, кнопки императивного API |
+| `Default` | `Default.tsx` | Минимальная карточка: свайп влево открывает кнопку действия |
+| `With both areas` | `WithBothAreas.tsx` | Обе боковые области сразу |
+| `Imperative API` | `ImperativeApi.tsx` | `swipeLeft` / `swipeRight` / `closeSwipe` через `ISwipeableAreaRef` |
+| `Example` | `Example.tsx` | Список платежей, где открытой остаётся только одна карточка |
+| `VisualTests` | `VisualTests.tsx` | Скриншоты закрытого состояния и обеих открытых областей |
 
 ---
 
@@ -141,4 +202,292 @@ CSS-класс `swipeAnimationFinish` (`animating = true`) → CSS transition.
 
 | Дата | Изменение |
 |---|---|
-| 2026-04-18 | Создан документ |
+| 2026-08-31 | Создан документ. Зафиксированы: контракт императивного `ref` вместо DOM-ref, порог свайпа 24px, правила определения жеста и мультитача, зависимость открытия от ширины боковой области, отсутствие клавиатурного эквивалента и фокусируемость кнопок закрытой области |
+| 2026-09-02 | Прозрачность боковой области нулевой ширины больше не даёт `NaN` — `getSwipeableAreaOpacity` возвращает `1`. Пункт убран из «Известных ограничений» |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/SwipeableArea/examples/Default.tsx`
+
+```tsx
+import React from "react";
+import {
+    List,
+    ListItem,
+    ListItemContent,
+    ListItemControls,
+    ListItemControlsButton,
+    ListItemTailRight,
+    SwipeableArea,
+} from "@sberbusiness/triplex-next";
+import { AttachmentStrokeSrvIcon20 } from "@sberbusiness/icons-next";
+
+export const Default = () => (
+    <div style={{ maxWidth: "500px" }}>
+        <List>
+            <ListItem>
+                <SwipeableArea
+                    rightSwipeableArea={
+                        <ListItemControls>
+                            <ListItemControlsButton
+                                icon={<AttachmentStrokeSrvIcon20 paletteIndex={5} />}
+                                onClick={() => {}}
+                            >
+                                Скачать
+                            </ListItemControlsButton>
+                        </ListItemControls>
+                    }
+                    onSwipeLeft={() => {}}
+                >
+                    <ListItemTailRight />
+                    {/* Минимальная высота, из-за блока с кнопками, появляющегося при свайпе. */}
+                    <ListItemContent style={{ minHeight: "56px" }}>Свайп влево открывает кнопки</ListItemContent>
+                </SwipeableArea>
+            </ListItem>
+        </List>
+    </div>
+);
+```
+
+### With both areas
+
+`stories/SwipeableArea/examples/WithBothAreas.tsx`
+
+```tsx
+import React from "react";
+import {
+    List,
+    ListItem,
+    ListItemContent,
+    ListItemControls,
+    ListItemControlsButton,
+    ListItemTailLeft,
+    ListItemTailRight,
+    SwipeableArea,
+} from "@sberbusiness/triplex-next";
+import { AttachmentStrokeSrvIcon20, DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+
+export const WithBothAreas = () => (
+    <div style={{ maxWidth: "500px" }}>
+        <List>
+            <ListItem>
+                <SwipeableArea
+                    leftSwipeableArea={
+                        <ListItemControls>
+                            <ListItemControlsButton
+                                icon={<DefaulticonStrokePrdIcon20 paletteIndex={5} />}
+                                onClick={() => {}}
+                            >
+                                В архив
+                            </ListItemControlsButton>
+                        </ListItemControls>
+                    }
+                    rightSwipeableArea={
+                        <ListItemControls>
+                            <ListItemControlsButton
+                                icon={<AttachmentStrokeSrvIcon20 paletteIndex={5} />}
+                                onClick={() => {}}
+                            >
+                                Скачать
+                            </ListItemControlsButton>
+                        </ListItemControls>
+                    }
+                    onSwipeLeft={() => {}}
+                    onSwipeRight={() => {}}
+                >
+                    <ListItemTailLeft />
+                    <ListItemTailRight />
+                    {/* Минимальная высота, из-за блока с кнопками, появляющегося при свайпе. */}
+                    <ListItemContent style={{ minHeight: "56px" }}>Свайп влево и вправо</ListItemContent>
+                </SwipeableArea>
+            </ListItem>
+        </List>
+    </div>
+);
+```
+
+### Imperative API
+
+`stories/SwipeableArea/examples/ImperativeApi.tsx`
+
+```tsx
+import React, { useRef } from "react";
+import {
+    Button,
+    EButtonTheme,
+    EComponentSize,
+    ISwipeableAreaRef,
+    List,
+    ListItem,
+    ListItemContent,
+    ListItemControls,
+    ListItemControlsButton,
+    ListItemTailLeft,
+    ListItemTailRight,
+    SwipeableArea,
+} from "@sberbusiness/triplex-next";
+import { AttachmentStrokeSrvIcon20, DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+
+export const ImperativeApi = () => {
+    const swipeableAreaRef = useRef<ISwipeableAreaRef>(null);
+
+    return (
+        <div style={{ maxWidth: "500px" }}>
+            <div style={{ display: "flex", gap: "8px", marginBottom: "16px" }}>
+                <Button
+                    theme={EButtonTheme.SECONDARY}
+                    size={EComponentSize.SM}
+                    onClick={() => swipeableAreaRef.current?.swipeRight()}
+                >
+                    swipeRight
+                </Button>
+                <Button
+                    theme={EButtonTheme.SECONDARY}
+                    size={EComponentSize.SM}
+                    onClick={() => swipeableAreaRef.current?.swipeLeft()}
+                >
+                    swipeLeft
+                </Button>
+                <Button
+                    theme={EButtonTheme.SECONDARY}
+                    size={EComponentSize.SM}
+                    onClick={() => swipeableAreaRef.current?.closeSwipe()}
+                >
+                    closeSwipe
+                </Button>
+            </div>
+
+            <List>
+                <ListItem>
+                    <SwipeableArea
+                        ref={swipeableAreaRef}
+                        leftSwipeableArea={
+                            <ListItemControls>
+                                <ListItemControlsButton
+                                    icon={<DefaulticonStrokePrdIcon20 paletteIndex={5} />}
+                                    onClick={() => {}}
+                                >
+                                    В архив
+                                </ListItemControlsButton>
+                            </ListItemControls>
+                        }
+                        rightSwipeableArea={
+                            <ListItemControls>
+                                <ListItemControlsButton
+                                    icon={<AttachmentStrokeSrvIcon20 paletteIndex={5} />}
+                                    onClick={() => {}}
+                                >
+                                    Скачать
+                                </ListItemControlsButton>
+                            </ListItemControls>
+                        }
+                    >
+                        <ListItemTailLeft />
+                        <ListItemTailRight />
+                        {/* Минимальная высота, из-за блока с кнопками, появляющегося при свайпе. */}
+                        <ListItemContent style={{ minHeight: "56px" }}>Управление через ref</ListItemContent>
+                    </SwipeableArea>
+                </ListItem>
+            </List>
+        </div>
+    );
+};
+```
+
+### Example
+
+`stories/SwipeableArea/examples/Example.tsx`
+
+```tsx
+import React, { useRef } from "react";
+import {
+    EFontType,
+    EFontWeightText,
+    ETextSize,
+    ISwipeableAreaRef,
+    List,
+    ListItem,
+    ListItemContent,
+    ListItemControls,
+    ListItemControlsButton,
+    ListItemControlsButtonDropdown,
+    ListItemTailRight,
+    SwipeableArea,
+    Text,
+} from "@sberbusiness/triplex-next";
+import { AttachmentStrokeSrvIcon20, DotshorizontalStrokeSrvIcon20 } from "@sberbusiness/icons-next";
+
+const PAYMENTS = [
+    { id: "swipeable-area-payment-1", amount: "1 220 000,00 ₽", counterparty: "ООО «Голубая роза»" },
+    { id: "swipeable-area-payment-2", amount: "84 300,00 ₽", counterparty: "ООО «Северный ветер»" },
+    { id: "swipeable-area-payment-3", amount: "12 500,00 ₽", counterparty: "ИП Иванов И. И." },
+];
+
+export const Example = () => {
+    const swipeableAreaRefs = useRef<Record<string, ISwipeableAreaRef | null>>({});
+
+    // Открытой остаётся только одна карточка: свайп по одной закрывает остальные.
+    const handleSwipeLeft = (paymentId: string) => {
+        Object.entries(swipeableAreaRefs.current).forEach(([id, swipeableArea]) => {
+            if (id !== paymentId) {
+                swipeableArea?.closeSwipe();
+            }
+        });
+    };
+
+    return (
+        <div style={{ maxWidth: "500px" }}>
+            <List>
+                {PAYMENTS.map((payment) => (
+                    <ListItem key={payment.id}>
+                        <SwipeableArea
+                            ref={(instance) => {
+                                swipeableAreaRefs.current[payment.id] = instance;
+                            }}
+                            rightSwipeableArea={
+                                <ListItemControls>
+                                    <ListItemControlsButton
+                                        icon={<AttachmentStrokeSrvIcon20 paletteIndex={5} />}
+                                        onClick={() => {}}
+                                    >
+                                        Скачать
+                                    </ListItemControlsButton>
+                                    <ListItemControlsButtonDropdown
+                                        icon={<DotshorizontalStrokeSrvIcon20 paletteIndex={5} />}
+                                        options={[
+                                            { id: `${payment.id}-option-1`, label: "Повторить", onSelect: () => {} },
+                                            { id: `${payment.id}-option-2`, label: "Удалить", onSelect: () => {} },
+                                        ]}
+                                    >
+                                        Действия
+                                    </ListItemControlsButtonDropdown>
+                                </ListItemControls>
+                            }
+                            onSwipeLeft={() => handleSwipeLeft(payment.id)}
+                        >
+                            <ListItemTailRight />
+                            {/* Минимальная высота, из-за блока с кнопками, появляющегося при свайпе. */}
+                            <ListItemContent style={{ minHeight: "56px" }}>
+                                <Text size={ETextSize.B2} weight={EFontWeightText.SEMIBOLD} tag="div">
+                                    {payment.amount}
+                                </Text>
+                                <Text size={ETextSize.B3} tag="div">
+                                    {payment.counterparty}
+                                </Text>
+                                <Text size={ETextSize.B3} type={EFontType.SECONDARY} tag="div">
+                                    Оплата по счёту от 09.04.24
+                                </Text>
+                            </ListItemContent>
+                        </SwipeableArea>
+                    </ListItem>
+                ))}
+            </List>
+        </div>
+    );
+};
+```
+

package/bundle/components/TableBasic.md

@@ -3,10 +3,10 @@ component: TableBasic
 category: Table
 related: [MasterTable, ListTableItem, LoaderScreen, LoaderMiddle, Text]
 tokens:
-  - --triplex-next-TableBasic-Header_Background
-  - --triplex-next-TableBasic-Color
-  - --triplex-next-TableBasic-Background_Hover
-  - --triplex-next-TableBasic-Background_Selected
+  - TableBasic.Header_Background
+  - TableBasic.Color
+  - TableBasic.Background_Hover
+  - TableBasic.Background_Selected
 stories: stories/TableBasic/TableBasic.stories.tsx
 version: "1.0"
 ---
@@ -93,15 +93,23 @@ version: "1.0"
 
 ## Дизайн-токены
 
-```
---triplex-next-TableBasic-Header_Background
---triplex-next-TableBasic-Color
---triplex-next-TableBasic-Background_Hover
---triplex-next-TableBasic-Background_Selected
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/TableBasic.ts`.
+
+```text
+TableBasic.Header_Background
+TableBasic.Color
+TableBasic.Background_Hover
+TableBasic.Background_Selected
 ```
 
-Остальные токены группы `TableBasic-*` (`TableFooter_*`, `TableBasicSettings_*`)
-принадлежат соседним компонентам семейства, а не самому `TableBasic`.
+В группе `TableBasic` лежат и токены соседних компонентов семейства —
+`TableFooter_*` применяются в `TableFooter`, `TableBasicSettings_*` — в
+`TableBasicSettings`. Переопределяются они там же, в группе `TableBasic`:
+имя группы — не имя компонента. Здесь они не перечислены, потому что сам
+`TableBasic` их не использует, а собственных AI.md у этих компонентов пока нет —
+поэтому `syncAiMdTokens` и предупреждает, что токены есть в LESS директории,
+но не описаны ни в одном документе.
 
 ---