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

package/bundle/components/Footer.md

@@ -1,11 +1,9 @@
 ---
 component: Footer
-category: Layout
-figma-node: ""
-figma-file: ""
-related: [Page, Header, Button, TableBasic]
+category: Footer
+related: [FooterPage, TableBasic]
 tokens: []
-stories: ""
+stories: stories/Footer/Footer.stories.tsx
 version: "1.0"
 ---
 
@@ -13,327 +11,286 @@ version: "1.0"
 
 ## Назначение
 
-Разметочный футер страницы/формы — контейнер под подвал с описанием и
-кнопками действий. **Compound-компонент**: корневой `Footer` — тонкая
-обёртка-`<div>` с `data-tx`; основная логика разметки — в
-`Footer.Description` (flex-контейнер) + его под-компоненты
-`Footer.Description.Content` (растяжимый контент слева) и
-`Footer.Description.Controls` (фиксированная группа кнопок справа).
+Контейнер нижнего блока — контент и управляющие элементы (кнопки, ссылки) внизу карточки,
+страницы или таблицы. Собственной визуальной оболочки не имеет: не рисует фон, рамку и отступы,
+только даёт разметку и раскладку через составной `Footer.Description`.
 
-Типовой кейс: нижняя часть формы/LightBox'а/страницы, где слева —
-пояснение или статус, справа — действия (`Сохранить`, `Отменить`).
-На мобильных устройствах Controls переносится на следующую строку.
+Наполнение строится тремя частями:
 
-Используй когда: нужна стандартизированная разметка подвала
-"контент + действия" с корректным мобильным wrap-поведением и
-отступами, согласованными с `Button` (компенсация margin'ами).
-Не используй как: универсальный flex-контейнер (возьми `Row`/собственный
-layout).
+- `Footer.Description` — строка с контентом и кнопками (`display: flex`);
+- `Footer.Description.Content` — контент, занимает свободное место;
+- `Footer.Description.Controls` — кнопки действий, прижаты вправо.
 
----
-
-## Файловая структура
-
-```text
-src/components/Footer/
-├── Footer.tsx                              # корень, compound-root, forwardRef + data-tx
-├── index.ts                                # Barrel: Footer, FooterDescription, FooterDescriptionContent, FooterDescriptionControls
-├── components/
-│   ├── FooterDescription.tsx               # Object.assign → Content/Controls
-│   ├── FooterDescriptionContent.tsx        # flex-grow: 1; margin-right: auto
-│   └── FooterDescriptionControls.tsx       # margin-left: auto; padding-left: 24px
-├── styles/
-│   └── Footer.module.less                  # flex/space-between + mobile wrap
-└── __tests__/
-    └── Footer.test.tsx                     # smoke: root, ref, arbitrary props
-```
-
-Особенности:
-- **`forwardRef`** — есть на всех 4 уровнях.
-- **`data-tx`** — только на корне `Footer`. `Description`/`Content`/
-  `Controls` не проставляют (они внутренние под-компоненты одной
-  compound-семьи).
-- **`IFooterDescriptionControlsProps`** импортируется из
-  `@sberbusiness/triplex-next/components/Table/TableBasic/types` —
-  исторический кросс-модульный импорт (type определён в types.ts
-  Table, но используется здесь). Не трогать без осознанного
-  рефакторинга обоих мест.
-- **Нет собственных stories** — Footer демонстрируется через
-  `stories/Page/FooterPage.stories.tsx` и как часть Table/LightBox
-  story-групп.
-- **Тесты** покрывают только корень `Footer` (smoke-уровень —
-  рендер, ref, props-passthrough).
-
----
-
-## Compound-структура
-
-```tsx
-<Footer>
-    <Footer.Description>
-        <Footer.Description.Content>
-            Комментарий / описание / статус
-        </Footer.Description.Content>
-        <Footer.Description.Controls>
-            <Button>Отменить</Button>
-            <Button>Сохранить</Button>
-        </Footer.Description.Controls>
-    </Footer.Description>
-</Footer>
-```
-
-**Реализация compound-а через `Object.assign`:**
-
-```tsx
-export const Footer = Object.assign(
-    React.forwardRef<HTMLDivElement, IFooterProps>(function Footer({ children, ...rest }, ref) { ... }),
-    { Description: FooterDescription },
-);
-
-export const FooterDescription = Object.assign(
-    React.forwardRef<HTMLDivElement, IFooterDescriptionProps>(function FooterDescription(...) { ... }),
-    {
-        Content: FooterDescriptionContent,
-        Controls: FooterDescriptionControls,
-    },
-);
-```
-
-**Два уровня compound'а:** `Footer.Description` + вложенный
-`Description.Content`/`Description.Controls`. Это редкий паттерн в
-библиотеке — большинство компонентов имеют один уровень.
-
-**Все под-компоненты также экспортируются напрямую через barrel:**
-`FooterDescription`, `FooterDescriptionContent`, `FooterDescriptionControls`.
-Можно использовать либо compound-обращение (`Footer.Description.Content`),
-либо прямой импорт. Предпочтение — compound для читаемости.
+Используй когда: нужен нижний блок с текстом и действиями внутри своего контейнера
+(`Island`, таблица, произвольная карточка), и оформление задаёт этот контейнер.
+Не используй когда: нужен футер страницы — там `Page.Footer` (`FooterPage`), он в зависимости
+от обязательного `type` оборачивает контент в карточку (`Island`) и умеет прилипать к нижней
+границе экрана (`EFooterPageType.FIRST`) либо рендерит голый `Footer` (`EFooterPageType.SECOND`).
 
 ---
 
 ## Варианты и props
 
-### Footer — `IFooterProps extends React.HTMLAttributes<HTMLDivElement>`
+Собственных props нет. `IFooterProps` расширяет `React.HTMLAttributes<HTMLDivElement>`:
+принимаются `children`, `className` и любые HTML-атрибуты div, всё уходит на корневой элемент
+через `...rest`. То же верно для `FooterDescription`, `FooterDescriptionContent`
+и `FooterDescriptionControls`.
 
-| Prop | Тип | Default | Описание |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Обычно ровно один `Footer.Description`. |
-| `className`, `style`, `...HTMLDivAttributes` | — | — | Стандартные. |
+### Обязательные props
 
-**Корневой `Footer` — минимальный**: не добавляет flex/padding, только
-data-tx. Никаких собственных классов. Все визуальные свойства —
-в `Description`.
+Обязательных props нет.
 
-### FooterDescription — `IFooterDescriptionProps extends React.HTMLAttributes<HTMLDivElement>`
+### Опциональные props
 
-| Prop | Тип | Default | Описание |
+| Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `children` | `ReactNode` | — | Обычно `Content` + `Controls` или только `Controls`. |
-| `className` | `string` | — | Мержится с `styles.footerDescription` через `clsx`. |
-| `...HTMLDivAttributes` | — | — | Стандартные. |
-
-Класс `.footerDescription`:
-```less
-display: flex;
-justify-content: space-between;
-align-items: center;
-```
+| `children` | `React.ReactNode` | — | Контент футера. Обычно составной `Footer.Description`. |
 
-### FooterDescriptionContent — `IFooterDescriptionContentProps extends React.HTMLAttributes<HTMLDivElement>`
+### Ограничения
 
-| Prop | Тип | Default | Описание |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Текст/описание/статус. |
-| `className` | `string` | — | Мержится через `clsx`. |
-| `...HTMLDivAttributes` | — | — | Стандартные. |
-
-Класс `.footerDescriptionContent`:
-```less
-flex-grow: 1;
-margin-right: auto;
-```
+- Корневой `<div>` не получает собственного класса — вертикальные отступы и фон задаёт
+  контейнер-родитель либо переданный `className`.
+- Тип props у `FooterDescriptionControls` — `IFooterDescriptionControlsProps` — импортируется
+  из `@sberbusiness/triplex-next/components/Table/TableBasic/types`, а не объявлен рядом
+  с компонентом. Переносить и переименовывать его нельзя — это публичный API `TableBasic`
+  и breaking change. Правки внутри интерфейса, не меняющие его тип (например JSDoc на
+  `children`, как у остальных трёх интерфейсов семейства), допустимы — это техдолг,
+  который закрывается вместе с задачей по `TableBasic`.
 
-**`margin-right: auto`** + `flex-grow: 1` — занимает всё свободное
-место слева, выталкивая `Controls` вправо.
+---
 
-### FooterDescriptionControls — `IFooterDescriptionControlsProps extends React.HTMLAttributes<HTMLDivElement>`
+## Дизайн-токены
 
-| Prop | Тип | Default | Описание |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Обычно `<Button>...</Button>`-группа. |
-| `className` | `string` | — | Мержится через `clsx`. |
-| `...HTMLDivAttributes` | — | — | Стандартные. |
-
-Класс `.footerDescriptionControls`:
-```less
-margin-left: auto;
-white-space: nowrap;
-padding-left: 24px;
-```
+Компонент не использует CSS-переменные дизайн-токенов: цвета и типографику задают вложенные
+компоненты (`Text`, `Button`, `Link`) и контейнер-родитель.
 
-**`white-space: nowrap`** — не даёт кнопкам переноситься на новую строку
-внутри Controls (на desktop). **`padding-left: 24px`** — минимальный
-gap между Content и Controls.
+Раскладка задаётся литеральными значениями в `styles/Footer.module.less`:
+отступ `padding-left: 24px` у `Controls` на десктопе и компенсирующие отступы `16px`
+между кнопками при переносе на мобильных.
 
 ---
 
-## Ключевые особенности реализации
-
-### Корень `Footer` — "прозрачный" контейнер
-
-```tsx
-<div {...rest} data-tx={process.env.npm_package_version} ref={ref}>
-    {children}
-</div>
-```
+## Инварианты
 
-Без класса, без padding. Смысл — только как "маркер" (data-tx) и
-стабильная точка для ref потребителя. Визуальная логика делегирована
-`Description`. Если потребитель хочет padding/border — добавляет через
-`className`/`style` в props.
-
-### Mobile wrap — `flex-wrap: wrap` + перераскладка Controls
-
-```less
-@media (max-width: @screen-sm-max) {
-    .footerDescription { flex-wrap: wrap; align-items: normal; }
-    .footerDescriptionContent { width: 100%; }
-    .footerDescriptionControls {
-        padding-left: 0;
-        white-space: normal;                // разрешаем перенос на mobile
-        margin-top: -16px;                  // компенсация Button margin
-        margin-left: -16px;
-        > button {
-            margin-left: 16px;
-            margin-top: 16px;
-        }
-    }
-    .footerDescriptionContent + .footerDescriptionControls {
-        margin-top: 0;                      // если Content есть — полагаемся на его высоту
-    }
-}
-```
+- `forwardRef<HTMLDivElement>` на всех четырёх компонентах — не убирать. Ref всегда указывает
+  на корневой `<div>`.
+- Корневой элемент — `<div>`; у `Footer` он без собственного класса, у остальных — с одним
+  классом из `styles/Footer.module.less` плюс `className` потребителя через `clsx`.
+- `Footer` собран через `Object.assign(forwardRef(...), { Description })`,
+  `FooterDescription` — через `Object.assign(forwardRef(...), { Content, Controls })`.
+  Статические свойства сохранять: на них опирается `FooterPage` (`Page.Footer.Description`).
+- `data-tx={process.env.npm_package_version}` на корневом элементе `Footer` — маркер версии
+  библиотеки, ставится после `...rest`, чтобы потребитель его не перетирал.
+- `displayName` — `"Footer"`, `"FooterDescription"`, `"FooterDescriptionContent"`,
+  `"FooterDescriptionControls"`. Не менять.
+- Экспорты `Footer`, `IFooterProps`, `FooterDescription`, `IFooterDescriptionProps`,
+  `FooterDescriptionContent`, `IFooterDescriptionContentProps`, `FooterDescriptionControls`
+  идут в barrel `src/components/Footer/index.ts` — сохранять.
+- `IFooterDescriptionControlsProps` живёт в `Table/TableBasic/types` и экспортируется оттуда —
+  сюда не переносить.
+- Перенос кнопок под контент на ширине экрана до `@screen-sm-max` (767px) — часть визуального
+  контракта, покрыт скриншотами на viewport `xs`.
 
-**На mobile Controls:**
-- Переносится на новую строку (flex-wrap).
-- `padding-left: 0` — убирает отступ (строка уже новая).
-- `white-space: normal` — кнопки могут переноситься, если места мало.
-- **`margin-top/-left: -16px` + `button > margin: 16px`** — трюк:
-  компенсирует отступы Button'а, чтобы визуально gap между кнопками
-  оставался 16px, но внешние края выравнивались к краю контейнера.
-- **`Content + Controls { margin-top: 0 }`** — когда Content есть,
-  использует его нижний отступ; когда Controls стоит одна (без Content),
-  применяется полноценный -16px для верхнего смещения.
-
-### `.footer` класс в медиа — orphan
-
-```less
-@media (max-width: @screen-sm-max) {
-    .footer { padding: 16px 0; }
-}
-```
+---
 
-**Этот класс объявлен, но НЕ применяется** — в `Footer.tsx` нет
-`className={styles.footer}`. Legacy-остаток. Не удалять без
-подтверждения, что нигде не импортируется напрямую через module-import.
+## Accessibility
 
-### `IFooterDescriptionControlsProps` — кросс-модульный тип
+Структурный контейнер без собственного интерактивного поведения и ARIA-ролей. Семантику задаёт
+потребитель через проброшенные атрибуты (`role="contentinfo"`, `aria-label` и т.п.).
+Интерактивность обеспечивают вложенные кнопки и ссылки внутри `Footer.Description.Controls` —
+порядок фокуса совпадает с порядком в DOM.
 
-```ts
-import { IFooterDescriptionControlsProps } from "@sberbusiness/triplex-next/components/Table/TableBasic/types";
-```
+---
 
-Тип живёт в `src/components/Table/TableBasic/types.ts`, но
-используется `FooterDescriptionControls`. Исторический артефакт. Не
-дублировать, не переносить без согласованного обновления Table.
-`Table` импортирует этот же тип и разметку для своего Table-Footer.
+## Связанные компоненты
 
-### `React.HTMLAttributes<HTMLDivElement>` — пустое extension
+- `FooterPage` — футер страницы (`Page.Footer`); рендерит `Footer` внутри себя, наследует
+  `IFooterProps` и реэкспортирует `Footer.Description` как `Page.Footer.Description`.
+- `TableBasic` — владелец типа `IFooterDescriptionControlsProps`, который используют
+  `FooterDescriptionControls`.
+- `FooterDescription` (`Footer.Description`) — основная часть футера: строка с контентом
+  и кнопками, `justify-content: space-between`. Тривиальная обёртка (className + spread + ref),
+  отдельного AI.md нет.
+- `FooterDescriptionContent` (`Footer.Description.Content`) — контентная область,
+  `flex-grow: 1`. Тривиальная обёртка, отдельного AI.md нет.
+- `FooterDescriptionControls` (`Footer.Description.Controls`) — область кнопок действий,
+  прижата вправо. Тривиальная обёртка, отдельного AI.md нет.
 
-```ts
-export interface IFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
-```
+---
 
-Все 4 Props-интерфейса — пустые extensions HTML-атрибутов. Это
-сознательно: интерфейсы существуют как "именованные точки", чтобы
-можно было в будущем добавить пропсы без breaking change, а также
-чтобы TS отображал именно `IFooterDescriptionProps` в hover'ах.
+## Stories
 
----
+Основные истории: `stories/Footer/Footer.stories.tsx`
+Файлы примеров: `stories/Footer/examples/`
 
-## Инварианты
+Playground не создаётся — у компонента нет настраиваемых props.
 
-- **`Footer` — минимальный контейнер**: только data-tx, без собственных
-  стилей. Не добавлять padding/border в компонент — оставить на
-  потребителя.
-- **`data-tx`** — только на корневом `Footer`, не на под-компонентах.
-- **Compound через `Object.assign`** — `Footer.Description.Content`,
-  `Footer.Description.Controls`. Не превращать в children-API.
-- **`Description` использует flex `space-between` + `align-items: center`**
-  — desktop. Не менять на grid (сломает mobile wrap).
-- **`Content` с `flex-grow: 1; margin-right: auto`** — занимает место,
-  выталкивает `Controls`.
-- **`Controls` с `margin-left: auto; white-space: nowrap; padding-left: 24px`**
-  — правый край, кнопки в одну строку.
-- **Mobile (`max-width: @screen-sm-max`)** — `flex-wrap: wrap`, Content
-  на 100%, Controls на новой строке с Button-margin-компенсацией.
-  Не менять без обновления Button'а.
-- **`.footer` в медиа-селекторе — orphan**. Не использовать; не
-  удалять без grep'а потребителей.
-- **`IFooterDescriptionControlsProps` — импорт из `Table/TableBasic/types`**,
-  не дублировать локально.
-- **`forwardRef`** — на всех 4 компонентах.
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Default` | `Default.tsx` | Минимальный футер: контент и две кнопки |
+| `Layouts` | `Layouts.tsx` | Варианты наполнения: контент и кнопки, только контент, только кнопки, длинный контент |
+| `Example` | `Example.tsx` | Production-like композиция: футер внутри `Island` с ссылкой и тремя кнопками |
 
 ---
 
-## Accessibility
+## История изменений
 
-- **`<div>`-контейнеры** — семантика не задаётся (нет `<footer>`-тега).
-  Потребитель должен выбрать корректный semantic-элемент сам, передав
-  нужные ARIA-роли через `...rest`. Для "подвала страницы" ожидается
-  `<Footer role="contentinfo">` или оборачивание во внешний `<footer>`.
-- **Нет `role="toolbar"` на Controls** — группа кнопок не анонсируется
-  как toolbar. Если нужно — потребитель добавляет через `role`/`aria-label`.
-- **Tab-навигация** — естественная (от Content к Controls). Mobile
-  сохраняет tab-order (flex-wrap не меняет DOM-порядок).
-- **Focus ring** — на дочерних `Button`/`Link`, сам Footer не focusable.
+| Дата | Изменение |
+|---|---|
+| 2026-08-25 | Создан документ. AI-рефакторинг (JSDoc на `children`, удалён мёртвый CSS-класс `.footer`), unit-тесты на все четыре компонента, stories по modern pattern. |
 
 ---
 
-## Дизайн-токены
+## Примеры использования
 
-**Нет собственных.** Все визуальные свойства — от дочерних компонентов
-(`Button`, `Link`, `Typography`). Footer — только layout.
+### Default
 
----
+`stories/Footer/examples/Default.tsx`
 
-## Связанные компоненты
-
-- `Page` (`src/components/Page`) — типичный контейнер, где используется
-  Footer как подвал страницы (см. `stories/Page/FooterPage.stories.tsx`).
-- `Header` (`src/components/Header`) — верхняя часть страницы, парная
-  к Footer.
-- `LightBox`/`ModalWindow`/`SideOverlay` — часто имеют Footer в нижней
-  части модалки с action-buttons.
-- `Button` — основной дочерний элемент в `Controls`. Mobile-стили
-  специально рассчитаны на отступы Button'а (`margin: 16px` compensation).
-- `Table`/`TableBasic` — переиспользует `IFooterDescriptionControlsProps`
-  тип.
+```tsx
+import React from "react";
+import { Footer, Button, EButtonTheme, EComponentSize, Text, ETextSize } from "@sberbusiness/triplex-next";
+
+export const Default = () => (
+    <div style={{ maxWidth: "720px" }}>
+        <Footer>
+            <Footer.Description>
+                <Footer.Description.Content>
+                    <Text size={ETextSize.B3}>Контент футера</Text>
+                </Footer.Description.Content>
+                <Footer.Description.Controls>
+                    <Button size={EComponentSize.MD} theme={EButtonTheme.SECONDARY}>
+                        Отмена
+                    </Button>
+                    <Button size={EComponentSize.MD} theme={EButtonTheme.GENERAL}>
+                        Сохранить
+                    </Button>
+                </Footer.Description.Controls>
+            </Footer.Description>
+        </Footer>
+    </div>
+);
+```
 
----
+### Layouts
 
-## Stories
+`stories/Footer/examples/Layouts.tsx`
 
-**Нет собственных stories.** Footer демонстрируется через:
-- `stories/Page/FooterPage.stories.tsx` — в составе страницы.
-- Stories Table/LightBox/ModalWindow — как часть layout'а модалок.
+```tsx
+import React from "react";
+import { Footer, Button, EButtonTheme, EComponentSize, Text, ETextSize } from "@sberbusiness/triplex-next";
+
+export const Layouts = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px", maxWidth: "720px" }}>
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>Контент и кнопки</div>
+            <Footer>
+                <Footer.Description>
+                    <Footer.Description.Content>
+                        <Text size={ETextSize.B3}>Контент футера</Text>
+                    </Footer.Description.Content>
+                    <Footer.Description.Controls>
+                        <Button size={EComponentSize.MD} theme={EButtonTheme.SECONDARY}>
+                            Отмена
+                        </Button>
+                        <Button size={EComponentSize.MD} theme={EButtonTheme.GENERAL}>
+                            Сохранить
+                        </Button>
+                    </Footer.Description.Controls>
+                </Footer.Description>
+            </Footer>
+        </div>
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>Только контент</div>
+            <Footer>
+                <Footer.Description>
+                    <Footer.Description.Content>
+                        <Text size={ETextSize.B3}>Контент футера без управляющих элементов</Text>
+                    </Footer.Description.Content>
+                </Footer.Description>
+            </Footer>
+        </div>
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>Только кнопки</div>
+            <Footer>
+                <Footer.Description>
+                    <Footer.Description.Controls>
+                        <Button size={EComponentSize.MD} theme={EButtonTheme.SECONDARY}>
+                            Отмена
+                        </Button>
+                        <Button size={EComponentSize.MD} theme={EButtonTheme.GENERAL}>
+                            Сохранить
+                        </Button>
+                    </Footer.Description.Controls>
+                </Footer.Description>
+            </Footer>
+        </div>
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>Длинный контент</div>
+            <Footer>
+                <Footer.Description>
+                    <Footer.Description.Content>
+                        <Text size={ETextSize.B3}>
+                            Нажимая кнопку «Отправить», вы соглашаетесь с условиями обслуживания и подтверждаете, что
+                            данные в документе проверены и заполнены корректно.
+                        </Text>
+                    </Footer.Description.Content>
+                    <Footer.Description.Controls>
+                        <Button size={EComponentSize.MD} theme={EButtonTheme.SECONDARY}>
+                            Отмена
+                        </Button>
+                        <Button size={EComponentSize.MD} theme={EButtonTheme.GENERAL}>
+                            Отправить
+                        </Button>
+                    </Footer.Description.Controls>
+                </Footer.Description>
+            </Footer>
+        </div>
+    </div>
+);
+```
 
-Добавление своих stories — AI-Ready debt (подобные примитивы обычно
-имеют базовый showcase).
+### Example
 
----
+`stories/Footer/examples/Example.tsx`
 
-## История изменений
+```tsx
+import React from "react";
+import {
+    Footer,
+    Island,
+    EIslandType,
+    Button,
+    EButtonTheme,
+    EComponentSize,
+    Link,
+    Text,
+    ETextSize,
+} from "@sberbusiness/triplex-next";
+
+export const Example = () => (
+    <Island type={EIslandType.TYPE_1} size={EComponentSize.MD} style={{ maxWidth: "720px" }}>
+        <Footer>
+            <Footer.Description>
+                <Footer.Description.Content>
+                    <Text size={ETextSize.B3}>
+                        Отправляя документ, вы соглашаетесь с <Link href="#">условиями обслуживания</Link>.
+                    </Text>
+                </Footer.Description.Content>
+                <Footer.Description.Controls>
+                    <Button size={EComponentSize.MD} theme={EButtonTheme.SECONDARY}>
+                        Отмена
+                    </Button>
+                    <Button size={EComponentSize.MD} theme={EButtonTheme.SECONDARY}>
+                        Сохранить черновик
+                    </Button>
+                    <Button size={EComponentSize.MD} theme={EButtonTheme.GENERAL}>
+                        Отправить
+                    </Button>
+                </Footer.Description.Controls>
+            </Footer.Description>
+        </Footer>
+    </Island>
+);
+```
 
-| Дата | Изменение |
-|---|---|
-| 2026-04-18 | Создан документ |

package/bundle/components/Island.md

@@ -49,6 +49,7 @@ version: "1.0"
 | `size` | `EComponentSize` | `EComponentSize.MD` | Скругление, внутренние отступы карточки и отступы между Header / Body / Footer |
 | `loading` | `boolean` | `false` | Показывает `LoaderScreen` поверх контента карточки |
 | `loaderScreenProps` | `ILoaderScreenMiddleProps` | `undefined` | Props лоадера: `description`, `controls`, `className` и остальные атрибуты `<div>`. `type` задаёт Island (`middle`) |
+| `withoutPaddings` | `boolean` | `false` | Убирает внутренние отступы карточки. Скругление и отступы между Header / Body / Footer от `size` сохраняются |
 
 Компонент расширяет `React.HTMLAttributes<HTMLDivElement>` — все стандартные атрибуты `<div>`
 (`className`, `style`, `role`, `aria-*`, `data-*`, обработчики событий) попадают на корневой элемент.
@@ -238,11 +239,12 @@ Island — неинтерактивный контейнер: не выстав
 
 | Story | Example file | Что демонстрирует |
 |---|---|---|
-| `Playground` | — | Интерактивный контроль `type`, `size`, `loading` и состава (Header / Body / Footer) |
+| `Playground` | — | Интерактивный контроль `type`, `size`, `loading`, `withoutPaddings` и состава (Header / Body / Footer) |
 | `Default` | `DefaultExample.tsx` | Минимальная карточка: Header + Body + Footer |
 | `Types` | `TypesExample.tsx` | Все значения `EIslandType` рядом |
 | `Sizes` | `SizesExample.tsx` | Размеры SM / MD / LG: скругление, паддинги, отступы между частями |
 | `Loading` | `Loading.tsx` | `loading`: `LoaderScreen` поверх контента карточки |
+| `WithoutPaddings` | `WithoutPaddings.tsx` | `withoutPaddings` во всех размерах: внутренние отступы убраны, скругление и отступы между Header / Body / Footer сохраняются |
 
 Файлы примеров с постфиксом `Example` — локальный legacy-паттерн папки; новые примеры называются
 по имени story (`Loading.tsx`).
@@ -253,6 +255,7 @@ Island — неинтерактивный контейнер: не выстав
 
 | Дата | Изменение |
 |---|---|
+| 2026-08-24 | Добавлено свойство `withoutPaddings` — отключает внутренние отступы карточки. Добавлена story `WithoutPaddings`. |
 | 2026-08-11 | Prop состояния загрузки переименован `isLoading` → `loading` — по преобладающей в библиотеке конвенции boolean-props без префикса `is` (`loading` у `Button`, `List`, `Dropdown`, `Suggest`, `Table`). Prop ещё не выпускался, поэтому breaking change нет; `Omit` в `IModalWindowBodyProps` обновлён на `"loading"`. Поведение не изменилось. |
 | 2026-08-06 | `related` приведён к правилу `docs/ai/CONTEXT.md` → «Как заполнять `related` в AI.md»: убраны потребители (`BodyPage`, `HeaderPage`, `FooterPage`, `Confirm`), `ModalWindowBody` заменён родителем `ModalWindow`, добавлен `LoaderScreen`. Раздел «Связанные компоненты» разбит по типам связи. Добавлено состояние загрузки: props `isLoading` и `loaderScreenProps` — при `isLoading` поверх контента карточки рендерится `LoaderScreen` типа `middle`. Подложка наследует скругление карточки, `z-index` понижен до локального. `ModalWindowBody` эти props не наследует (`Omit`) — его тело скроллируется, лоадер там задаётся на `ModalWindowContent`. Добавлены story `Loading` и unit-тесты. Остальной публичный API не изменён. |
 | 2026-08-04 | Создан документ. AI-рефакторинг: JSDoc на props, значениях `EIslandType` и субкомпонентах, `displayName` у `IslandHeader` / `IslandBody` / `IslandFooter`, unit-тесты на все типы и размеры, части острова и `mapTypeToClassName`. Исправлено: `className` в `IslandHeader` и `IslandFooter` больше не затирает базовый класс компонента; побочный отступ в `IslandAccordion` погашен в стилях аккордеона, вид библиотечных компонентов не изменился. Публичный API не изменён. |
@@ -375,3 +378,35 @@ export const Loading = () => (
 );
 ```
 
+### WithoutPaddings
+
+`stories/Island/examples/WithoutPaddings.tsx`
+
+```tsx
+import React from "react";
+import { Island, EIslandType, EComponentSize } from "@sberbusiness/triplex-next";
+
+const SIZES = Object.values(EComponentSize);
+
+export const WithoutPaddings = () => (
+    <div
+        style={{
+            display: "grid",
+            gap: 16,
+            gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
+        }}
+    >
+        {SIZES.map((size) => (
+            <div key={size}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{size.toUpperCase()}</div>
+                <Island type={EIslandType.TYPE_1} size={size} withoutPaddings>
+                    <Island.Header>Header content</Island.Header>
+                    <Island.Body>Body content</Island.Body>
+                    <Island.Footer>Footer content</Island.Footer>
+                </Island>
+            </div>
+        ))}
+    </div>
+);
+```
+