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

package/bundle/components/Header.md

@@ -1,11 +1,9 @@
 ---
 component: Header
-category: Layout
-figma-node: ""
-figma-file: ""
-related: [Page, Footer, Tabs, Button]
+category: Header
+related: [HeaderPage]
 tokens: []
-stories: stories/Page/HeaderPage.stories.tsx
+stories: stories/Header/Header.stories.tsx
 version: "1.0"
 ---
 
@@ -13,268 +11,550 @@ version: "1.0"
 
 ## Назначение
 
-Разметочный заголовок страницы/контейнера. **Compound с тремя уровнями
-композиции:** `Header.Title` (заголовок + действия), `Header.Tabs` (вкладки +
-действия) и `Header.Subhead` (произвольный подзаголовок). Плюс отдельный
-layout-слот `Header.LayoutSidebar` для размещения контента рядом с сайдбаром.
+Контейнер верхнего блока — заголовок, табы и подзаголовочный контент вверху карточки,
+страницы или произвольного блока. Собственной визуальной оболочки не имеет: не рисует фон,
+рамку и отступы, только даёт разметку и раскладку через составные части.
 
-Используй когда: нужен типовой верхний блок страницы с заголовком, табами
-и действиями (паттерн "Title + Controls" + "Tabs + Controls" + Subheader).
-Корневой `Header` не задаёт стилей — только прокидывает `data-tx` на корневой
-`<div>`; вся вёрстка приходит от уровней.
+Наполнение строится уровнями, которые вкладываются в `Header` в нужном порядке:
 
-Не используй как: универсальный `<header>`-тег. Потребитель сам решает,
-оборачивать ли во внешний semantic-элемент.
+- `Header.Title` — первый уровень: заголовок, подзаголовок и кнопки действий
+  (`Header.Title.Content` и `Header.Title.Controls`);
+- `Header.Tabs` — второй уровень: табы и кнопки действий
+  (`Header.Tabs.Content` и `Header.Tabs.Controls`), с отступом сверху 8px;
+- `Header.Subhead` — третий уровень: произвольный контент с вертикальными отступами 24px;
+- `Header.LayoutSidebar` — необязательная раскладка в две колонки
+  (`Header.LayoutSidebar.Content` и `Header.LayoutSidebar.Sidebar`), в которую
+  оборачиваются уровни, если справа нужна боковая колонка.
 
----
-
-## Файловая структура
-
-```text
-src/components/Header/
-├── Header.tsx                        # Корень compound, Object.assign уровней
-├── index.ts                          # Barrel: Header + все под-компоненты
-├── components/
-│   ├── HeaderTitle/
-│   │   ├── HeaderTitle.tsx           # Object.assign → Content/Controls
-│   │   ├── HeaderTitleContent.tsx
-│   │   └── HeaderTitleControls.tsx
-│   ├── HeaderTabs/
-│   │   ├── HeaderTabs.tsx            # Object.assign → Content/Controls
-│   │   ├── HeaderTabsContent.tsx
-│   │   └── HeaderTabsControls.tsx
-│   ├── HeaderSubheader/
-│   │   └── HeaderSubheader.tsx       # withoutPaddings prop
-│   └── HeaderLayoutSidebar/
-│       ├── HeaderLayoutSidebar.tsx   # Object.assign → Content/Sidebar
-│       ├── HeaderLayoutSidebarContent.tsx
-│       └── HeaderLayoutSidebarSidebar.tsx
-└── styles/
-    ├── HeaderTitle.module.less
-    ├── HeaderTabs.module.less
-    ├── HeaderSubheader.module.less
-    └── HeaderLayoutSidebar.module.less
-```
-
-Нет собственных `__tests__` в репозитории (проверяется через visual tests
-Page/Header). Нет собственных stories — демонстрация в `stories/Page/HeaderPage.stories.tsx`.
+Ни один уровень не обязателен, порядок задаёт потребитель — сам `Header` рендерит только
+`<div>` с `children`.
 
-Экспорт в `Page`: `Page.Header` = этот же `Header`.
+Используй когда: нужен верхний блок с заголовком, действиями и табами внутри своего
+контейнера (`Island`, карточка, произвольный блок), и оформление задаёт этот контейнер.
+Не используй когда: нужен заголовок страницы — там `Page.Header` (`HeaderPage`), который в
+зависимости от обязательного `type` либо оборачивает заголовок в карточку (`Island`) и умеет прилипать
+к верхней границе экрана (`EHeaderPageType.FIRST`), либо рендерит голый `Header`
+(`EHeaderPageType.SECOND`).
 
 ---
 
-## Compound-структура
-
-```tsx
-<Header>
-    <Header.Title>
-        <Header.Title.Content>Название страницы</Header.Title.Content>
-        <Header.Title.Controls>
-            <Button>Действие</Button>
-        </Header.Title.Controls>
-    </Header.Title>
-
-    <Header.Tabs>
-        <Header.Tabs.Content>
-            <TabsLine ... />
-        </Header.Tabs.Content>
-        <Header.Tabs.Controls>
-            <Button>Кнопка у табов</Button>
-        </Header.Tabs.Controls>
-    </Header.Tabs>
-
-    <Header.Subhead>Любой произвольный контент</Header.Subhead>
-</Header>
-```
-
-**Альтернативный layout с сайдбаром:**
+## Варианты и props
 
-```tsx
-<Header>
-    <Header.LayoutSidebar>
-        <Header.LayoutSidebar.Content>
-            <Header.Title>...</Header.Title>
-            <Header.Tabs>...</Header.Tabs>
-        </Header.LayoutSidebar.Content>
-        <Header.LayoutSidebar.Sidebar>
-            {/* десктоп-only сайдбар */}
-        </Header.LayoutSidebar.Sidebar>
-    </Header.LayoutSidebar>
-</Header>
-```
+Собственных props у `Header` нет. `IHeaderProps` расширяет `React.HTMLAttributes<HTMLDivElement>`:
+принимаются `children`, `className` и любые HTML-атрибуты div, всё уходит на корневой элемент
+через `...rest`. То же верно для `HeaderTitle`, `HeaderTitleContent`, `HeaderTitleControls`,
+`HeaderTabs`, `HeaderTabsContent`, `HeaderTabsControls`, `HeaderLayoutSidebar`,
+`HeaderLayoutSidebarContent` и `HeaderLayoutSidebarSidebar`.
 
-Все компоненты compound'а также **экспортируются напрямую через barrel**
-(`HeaderTitle`, `HeaderTabs`, `HeaderSubheader`, `HeaderLayoutSidebar` и их
-под-компоненты). Обычно предпочтительна запись через точку (`Header.Title.Content`).
+Единственный собственный prop во всём семействе — `withoutPaddings` у `HeaderSubheader`.
 
----
+### Обязательные props
 
-## Варианты и props
+Обязательных props нет.
 
-### Header — `IHeaderProps extends HTMLAttributes<HTMLDivElement>`
+### Опциональные props
 
-| Prop | Тип | Default | Описание |
+| Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `children` | `ReactNode` | — | Обычно `Header.Title`/`Tabs`/`Subhead` или `Header.LayoutSidebar`. |
-| `className`, `style`, `...HTMLDivAttributes` | — | — | Стандартные. |
+| `children` | `React.ReactNode` | — | Содержимое заголовка. Обычно составные `Header.Title`, `Header.Tabs` и `Header.Subhead`. |
 
-Корневой `Header` — "прозрачный" `<div>` с `data-tx`. Без собственных CSS-классов.
+`HeaderSubheader` (`Header.Subhead`) дополнительно принимает:
 
-### Header.Title — `IHeaderTitleProps extends HTMLAttributes<HTMLDivElement>`
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `withoutPaddings` | `boolean` | `false` | Снимает вертикальные отступы 24px. |
+
+### Ограничения
+
+- Корневой `<div>` у `Header` не получает собственного класса — фон, рамку и внешние отступы
+  задаёт контейнер-родитель либо переданный `className`.
+- `Header.LayoutSidebar.Sidebar` не задаёт себе горизонтального отступа от контента: расстояние
+  между колонками добавляет потребитель (`className` или `style`). Сама раскладка —
+  `display: flex` + `justify-content: space-between` у родителя, `flex-grow: 1` и
+  `min-width: 1px` у `Content`.
+- Кнопки действий внутри `Header.Title.Controls` на мобильных отступают от левого края через
+  отрицательный `margin-left: -16px` у контейнера и `margin-left: 16px` у прямых потомков
+  `> button` и `> [class*="buttonDropdown"]`. Другие обёртки вокруг кнопок этот отступ не получат.
+- `Header.Tabs.Controls` на мобильных обнуляет `margin-left` у прямых `> button` через
+  `!important` — переопределить отступ между соседними кнопками снаружи не выйдет.
 
-`.headerTitle`: `display: flex; justify-content: space-between;`
+---
 
-### Header.Title.Content — `IHeaderTitleContentProps`
+## Дизайн-токены
 
-Имеет два класса: `.headerTitleContent` (локальный) и `.global-HeaderTitleContent`
-(глобальный селектор `min-width: 0` для корректного переноса контента внутри flex).
+Компонент не использует CSS-переменные дизайн-токенов: цвета и типографику задают вложенные
+компоненты (`Title`, `Text`, `Button`, `Tabs`) и контейнер-родитель.
 
-### Header.Title.Controls — `IHeaderTitleControlsProps`
+Раскладка задаётся литеральными значениями в `styles/`: `margin-top: 8px` у `HeaderTabs`,
+`padding: 24px 0` у `HeaderSubheader`, `padding-left: 24px` у обоих блоков `Controls`
+на десктопе и компенсирующие отступы 16px между кнопками при переносе на мобильных.
+На мобильных (до `@screen-sm-max`) у `HeaderTabs` другие значения: `margin-top: 16px`
+и `gap: 16px`.
 
-`.headerTitleControls`: `flex-shrink: 0; white-space: nowrap; padding-left: 24px;`
-+ `.global-HeaderTitleControls { min-width: 0; }`
+---
 
-### Header.Tabs / Tabs.Content / Tabs.Controls
+## Инварианты
 
-Симметрично Title: flex space-between, Content растягивается (`flex-grow: 1`),
-Controls — фикс. Аналогичный mobile wrap.
+- `forwardRef<HTMLDivElement>` на всех одиннадцати компонентах семейства — не убирать. Ref всегда
+  указывает на корневой `<div>`.
+- Корневой элемент — `<div>`; у `Header` он без собственного класса, у остальных — с классами
+  из соответствующего `styles/*.module.less` плюс `className` потребителя через `clsx`.
+  `className` всегда идёт последним аргументом `clsx` и никогда не затирает собственные классы.
+- `Header` собран через `Object.assign(forwardRef(...), { LayoutSidebar, Subhead, Tabs, Title })`,
+  `HeaderTitle` — `{ Content, Controls }`, `HeaderTabs` — `{ Content, Controls }`,
+  `HeaderLayoutSidebar` — `{ Content, Sidebar }`. Статические свойства сохранять: на них
+  опирается `HeaderPage` (`Page.Header.Title`, `Page.Header.Tabs`, `Page.Header.Subhead`,
+  `Page.Header.LayoutSidebar`).
+- `data-tx={process.env.npm_package_version}` на корневом элементе `Header` — маркер версии
+  библиотеки, ставится после `...rest`, чтобы потребитель его не перетирал.
+- Классы `global-HeaderTitleContent` и `global-HeaderTitleControls` (оба — `min-width: 0`)
+  выставляются в дополнение к основным классам на `HeaderTitleContent` и `HeaderTitleControls`.
+  Не удалять: они гасят `min-width: auto` у flex-элементов, без них длинный заголовок
+  перестаёт сжиматься и ломает строку.
+- `min-width: 1px` у `.headerTabsContent` и `.headerLayoutSidebarContent` — тот же обход
+  `min-width: auto` у flex-элементов. Не удалять: у `.headerTabsContent` это ещё и фикс бага
+  с компонентом `Tabs` внутри `HeaderTabs`.
+- `displayName` — `"Header"`, `"HeaderTitle"`, `"HeaderTitleContent"`, `"HeaderTitleControls"`,
+  `"HeaderTabs"`, `"HeaderTabsContent"`, `"HeaderTabsControls"`, `"HeaderSubheader"`,
+  `"HeaderLayoutSidebar"`, `"HeaderLayoutSidebarContent"`, `"HeaderLayoutSidebarSidebar"`.
+  Не менять.
+- Все одиннадцать компонентов и их интерфейсы props идут в barrel `src/components/Header/index.ts` —
+  экспорты сохранять. Имя `IHeaderLayoutSidebarSidebarProps` выглядит удвоенным, но это
+  публичный API: переименование — breaking change.
+- Имя prop `withoutPaddings` у `HeaderSubheader` — публичный API, не переименовывать.
+- Адаптивное поведение на ширине экрана до `@screen-sm-max` (767px) — часть визуального
+  контракта, покрыто скриншотами на viewport `xs`: кнопки `Title.Controls` и `Tabs.Controls`
+  переносятся под контент, `HeaderTitle.Content` растягивается на всю ширину,
+  `HeaderLayoutSidebar.Sidebar` скрывается (`display: none`).
 
-### Header.Subhead — `IHeaderSubheaderProps`
+---
 
-| Prop | Тип | Default | Описание |
-|---|---|---|---|
-| `withoutPaddings` | `boolean` | `false` | Убирает `padding: 24px 0`. |
+## Accessibility
 
-### Header.LayoutSidebar / .Content / .Sidebar
+Структурный контейнер без собственного интерактивного поведения и ARIA-ролей. Семантику задаёт
+потребитель через проброшенные атрибуты (`role="banner"`, `aria-label` и т.п.) и через уровень
+заголовка вложенного `Title` (`tag="h1"`). Интерактивность обеспечивают вложенные кнопки, табы
+и ссылки — порядок фокуса совпадает с порядком в DOM.
 
-`.headerLayoutSidebar`: `display: flex; justify-content: space-between;`.
-`Content` — `flex-grow: 1; min-width: 1px`. **`Sidebar` на mobile (`max-width: @screen-sm-max`) скрывается** (`display: none`).
+Важно: `Header.LayoutSidebar.Sidebar` скрывается на мобильных через `display: none`, поэтому
+её содержимое пропадает и из дерева доступности. Дублируй в `Content` то, что должно оставаться
+доступным на узких экранах.
 
 ---
 
-## Ключевые особенности реализации
-
-### Mobile wrap (Title и Tabs)
-
-```less
-@media (max-width: @screen-sm-max) {
-    .headerTitle { flex-wrap: wrap; }
-    .headerTitleContent { width: 100%; }
-    .headerTitleControls {
-        padding-left: 0;
-        white-space: normal;
-        flex-shrink: initial;
-        margin-left: -16px;                 // компенсация Button margin
-        > button, > [class*="buttonDropdown"] {
-            margin-left: 16px;
-            margin-top: 16px;
-        }
-    }
-}
-```
-
-Controls переносится на новую строку, отступы между кнопками задаются
-через `margin: 16px` на `<button>` + компенсация `-16px` на контейнере.
-Этот же паттерн использован в `Footer`. Не менять без обновления Button'а.
+## Связанные компоненты
 
-### Глобальные классы `global-HeaderTitleContent` / `global-HeaderTitleControls`
+- `HeaderPage` — заголовок страницы (`Page.Header`); рендерит `Header` внутри себя, наследует
+  `IHeaderProps` и реэкспортирует статические свойства `Header` как `Page.Header.Title`,
+  `Page.Header.Tabs`, `Page.Header.Subhead`, `Page.Header.LayoutSidebar`.
+- `HeaderTitle` (`Header.Title`) — первый уровень: строка с заголовком и кнопками,
+  `justify-content: space-between`. Тривиальная обёртка (className + spread + ref),
+  отдельного AI.md нет.
+- `HeaderTitleContent` (`Header.Title.Content`) — заголовок и подзаголовок, занимает свободное
+  место. Тривиальная обёртка, отдельного AI.md нет.
+- `HeaderTitleControls` (`Header.Title.Controls`) — кнопки действий первого уровня, прижаты
+  вправо. Тривиальная обёртка, отдельного AI.md нет.
+- `HeaderTabs` (`Header.Tabs`) — второй уровень: строка с табами и кнопками. Тривиальная
+  обёртка, отдельного AI.md нет.
+- `HeaderTabsContent` (`Header.Tabs.Content`) — контейнер табов, `flex-grow: 1`. Тривиальная
+  обёртка, отдельного AI.md нет.
+- `HeaderTabsControls` (`Header.Tabs.Controls`) — кнопки действий второго уровня. Тривиальная
+  обёртка, отдельного AI.md нет.
+- `HeaderSubheader` (`Header.Subhead`) — третий уровень с произвольным контентом; единственный
+  в семействе имеет собственный prop `withoutPaddings`. Отдельного AI.md нет, prop описан выше.
+- `HeaderLayoutSidebar` (`Header.LayoutSidebar`) — раскладка в две колонки. Тривиальная
+  обёртка, отдельного AI.md нет.
+- `HeaderLayoutSidebarContent` (`Header.LayoutSidebar.Content`) — основная колонка,
+  `flex-grow: 1`. Тривиальная обёртка, отдельного AI.md нет.
+- `HeaderLayoutSidebarSidebar` (`Header.LayoutSidebar.Sidebar`) — боковая колонка, скрыта на
+  мобильных. Тривиальная обёртка, отдельного AI.md нет.
 
-```less
-.global-HeaderTitleContent { min-width: 0; }
-.global-HeaderTitleControls { min-width: 0; }
-```
+---
 
-Необходимы, чтобы внутренние flex-дети корректно сжимались. Имена с
-префиксом `global-` — это CSS-Modules escape hatch, класс не переименовывается
-при компиляции. Используется для того, чтобы **потребитель мог
-перекрыть стили через глобальный селектор**. Не удалять.
+## Stories
 
-### `.headerLink + .headerTitle { padding-top: 0 }` — orphan-селектор
+Основные истории: `stories/Header/Header.stories.tsx`
+Файлы примеров: `stories/Header/examples/`
 
-Селектор присутствует в `HeaderTitle.module.less`, но класс `headerLink`
-в самом компоненте не используется. Legacy, затачивался под кейс, где
-над Title стоит ссылка "назад". Если встретится — удалять только после
-поиска потребителей.
+Playground не создаётся — у компонента нет настраиваемых props.
 
-### Sidebar скрыт на mobile
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Default` | `Default.tsx` | Минимальный заголовок: `Title.Content` с заголовком и подзаголовком плюс две кнопки в `Title.Controls` |
+| `WithTabs` | `WithTabs.tsx` | Два уровня: заголовок и `Tabs` с табами и кнопками действий |
+| `WithSubhead` | `WithSubhead.tsx` | Третий уровень `Subhead` с произвольным контентом под заголовком |
+| `WithoutPaddings` | `WithoutPaddings.tsx` | Сравнение `Subhead` с отступами по умолчанию и с `withoutPaddings` |
+| `WithLayoutSidebar` | `WithLayoutSidebar.tsx` | Раскладка в две колонки: заголовок слева, остаток по счёту в боковой колонке |
+| `Example` | `Example.tsx` | Production-like композиция: все уровни внутри `Island` |
+| `VisualTests` | — | Краевые состояния для скриншотов: заголовок без кнопок, длинный заголовок с тремя кнопками, два `Subhead` рядом, боковая колонка |
 
-`HeaderLayoutSidebarSidebar` на `max-width: @screen-sm-max` получает
-`display: none`. Это осознанное решение (сайдбар редко влезает на мобиле).
-Потребителю нужно учитывать это при дублировании контента сайдбара в
-`HeaderSubhead` для mobile.
+---
 
-### Все компоненты — `forwardRef`
+## История изменений
 
-Включая уровни. Ref идёт на корневой `<div>` каждого слоя.
+| Дата | Изменение |
+|---|---|
+| 2026-08-28 | Создан документ. AI-рефакторинг (JSDoc на `children` и `withoutPaddings`, выровнен порядок аргументов `clsx`, удалён мёртвый CSS-селектор `.headerLink` и пустое правило `.headerTitleContent`), unit-тесты на все одиннадцать компонентов, stories по modern pattern. |
 
 ---
 
-## Инварианты
+## Примеры использования
 
-- **Corневой `Header` минимален**: `<div>` + `data-tx`, без стилей. Не
-  добавлять padding — это сломает существующие интеграции, где padding
-  задаётся Page/Subhead.
-- **Compound через `Object.assign`** — `Header.Title.Content`,
-  `Header.Tabs.Controls`, `Header.LayoutSidebar.Sidebar`. Не заменять на children-API.
-- **Barrel `index.ts`** экспортирует все под-компоненты отдельно. Не удалять
-  прямые экспорты (`HeaderTitleContent` и т.д.) — ими пользуются потребители.
-- **Имена `global-HeaderTitle*`** — CSS-Modules escape hatch. Не переименовывать.
-- **Mobile wrap стили** ожидают `<button>` с `margin: 16px`. Не менять
-  селекторы `> button` и компенсацию `-16px` без согласования с Button.
-- **Sidebar `display: none` на mobile** — контракт с потребителем. Нельзя
-  автоматически дублировать контент сайдбара; решение оставлено за консьюмером.
-- **`forwardRef`** на всех уровнях.
+### Default
 
----
+`stories/Header/examples/Default.tsx`
 
-## Accessibility
+```tsx
+import React from "react";
+import {
+    Header,
+    Button,
+    EButtonTheme,
+    EComponentSize,
+    Title,
+    ETitleSize,
+    Text,
+    ETextSize,
+    EFontType,
+    Gap,
+} from "@sberbusiness/triplex-next";
+
+export const Default = () => (
+    <Header>
+        <Header.Title>
+            <Header.Title.Content>
+                <Title tag="h1" size={ETitleSize.H1}>
+                    Заголовок страницы
+                </Title>
+                <Gap size={8} />
+                <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                    Дополнительное описание страницы
+                </Text>
+            </Header.Title.Content>
+            <Header.Title.Controls>
+                <Button size={EComponentSize.MD} theme={EButtonTheme.SECONDARY}>
+                    Отмена
+                </Button>
+                <Button size={EComponentSize.MD} theme={EButtonTheme.GENERAL}>
+                    Сохранить
+                </Button>
+            </Header.Title.Controls>
+        </Header.Title>
+    </Header>
+);
+```
 
-- Все уровни — `<div>` без ARIA-ролей. **Нет автосемантики `<header>`**;
-  потребитель сам оборачивает или передаёт `role="banner"` на корневой Header.
-- `HeaderTitleContent` не рендерит `<h1>`/`<h2>` — потребитель передаёт
-  нужный заголовок внутрь. Это осознанно: уровень заголовка зависит от контекста.
-- `HeaderTabsContent` обычно содержит `TabsLine`/`Tabs` — они сами управляют ARIA.
-- Tab-навигация — через интерактивные потомки (Buttons/Tabs). Сам Header не focusable.
+### WithTabs
 
----
+`stories/Header/examples/WithTabs.tsx`
 
-## Дизайн-токены
+```tsx
+import React, { useState } from "react";
+import {
+    Header,
+    Button,
+    EButtonTheme,
+    EComponentSize,
+    Tabs,
+    Title,
+    ETitleSize,
+    Text,
+    ETextSize,
+    EFontType,
+    Gap,
+} from "@sberbusiness/triplex-next";
+
+const tabs = [
+    { id: "header-tab-overview", label: "Обзор" },
+    { id: "header-tab-operations", label: "Операции" },
+    { id: "header-tab-documents", label: "Документы" },
+];
+
+export const WithTabs = () => {
+    const [selectedTabId, setSelectedTabId] = useState("header-tab-overview");
+
+    return (
+        <Header>
+            <Header.Title>
+                <Header.Title.Content>
+                    <Title tag="h1" size={ETitleSize.H1}>
+                        Расчётный счёт
+                    </Title>
+                    <Gap size={8} />
+                    <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                        40702810300000012345 · Рубли РФ
+                    </Text>
+                </Header.Title.Content>
+            </Header.Title>
+
+            <Header.Tabs>
+                <Header.Tabs.Content>
+                    <Tabs
+                        tabs={tabs}
+                        selectedId={selectedTabId}
+                        onSelectTab={setSelectedTabId}
+                        size={EComponentSize.MD}
+                        buttonDropdownAttributes={{ "aria-label": "Другие вкладки" }}
+                    />
+                </Header.Tabs.Content>
+                <Header.Tabs.Controls>
+                    <Button size={EComponentSize.MD} theme={EButtonTheme.SECONDARY}>
+                        Реквизиты
+                    </Button>
+                    <Button size={EComponentSize.MD} theme={EButtonTheme.GENERAL}>
+                        Создать платёж
+                    </Button>
+                </Header.Tabs.Controls>
+            </Header.Tabs>
+        </Header>
+    );
+};
+```
 
-Нет собственных. Все цвета/тени приходят от дочерних компонентов
-(`Button`, `TabsLine`, `Typography`).
+### WithSubhead
 
----
+`stories/Header/examples/WithSubhead.tsx`
 
-## Связанные компоненты
+```tsx
+import React from "react";
+import {
+    Header,
+    Button,
+    EButtonTheme,
+    EComponentSize,
+    Title,
+    ETitleSize,
+    Text,
+    ETextSize,
+    EFontType,
+} from "@sberbusiness/triplex-next";
+
+export const WithSubhead = () => (
+    <Header>
+        <Header.Title>
+            <Header.Title.Content>
+                <Title tag="h1" size={ETitleSize.H1}>
+                    Платёжное поручение № 145
+                </Title>
+            </Header.Title.Content>
+            <Header.Title.Controls>
+                <Button size={EComponentSize.MD} theme={EButtonTheme.GENERAL}>
+                    Подписать
+                </Button>
+            </Header.Title.Controls>
+        </Header.Title>
+
+        <Header.Subhead>
+            <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                Документ создан 12.05.2026 · Ожидает подписи
+            </Text>
+        </Header.Subhead>
+    </Header>
+);
+```
 
-- `Page` — типовой контейнер страницы, экспортирует `Page.Header` = этот `Header`.
-- `Footer` — парный элемент, такая же mobile wrap-логика в `Controls`.
-- `TabsLine` / `Tabs` — типичный контент `HeaderTabsContent`.
-- `Button` / `ButtonDropdown` — ожидаемые дети `Controls` (mobile стили
-  рассчитаны на их margin).
-- `DocumentNumberEdit` — используется в `Header.Title.Content` для кейсов с
-  редактируемым номером документа.
+### WithoutPaddings
 
----
+`stories/Header/examples/WithoutPaddings.tsx`
 
-## Stories
+```tsx
+import React from "react";
+import { Header, Title, ETitleSize, Text, ETextSize, EFontType } from "@sberbusiness/triplex-next";
+
+export const WithoutPaddings = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>
+                По умолчанию — вертикальные отступы 24px
+            </div>
+            <Header>
+                <Header.Title>
+                    <Header.Title.Content>
+                        <Title tag="h2" size={ETitleSize.H2}>
+                            Заголовок
+                        </Title>
+                    </Header.Title.Content>
+                </Header.Title>
+                {/* Пунктир на обёртке — только для наглядности границ отступов. */}
+                <div style={{ outline: "1px dashed currentColor" }}>
+                    <Header.Subhead>
+                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                            Произвольный контент третьего уровня
+                        </Text>
+                    </Header.Subhead>
+                </div>
+            </Header>
+        </div>
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>
+                withoutPaddings — отступы сняты
+            </div>
+            <Header>
+                <Header.Title>
+                    <Header.Title.Content>
+                        <Title tag="h2" size={ETitleSize.H2}>
+                            Заголовок
+                        </Title>
+                    </Header.Title.Content>
+                </Header.Title>
+                {/* Пунктир на обёртке — только для наглядности границ отступов. */}
+                <div style={{ outline: "1px dashed currentColor" }}>
+                    <Header.Subhead withoutPaddings>
+                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                            Произвольный контент третьего уровня
+                        </Text>
+                    </Header.Subhead>
+                </div>
+            </Header>
+        </div>
+    </div>
+);
+```
 
-**Нет собственных stories.** Демонстрация через
-`stories/Page/HeaderPage.stories.tsx` (регистрируется как
-`Components/HeaderPage`):
+### WithLayoutSidebar
 
-- `Basic` — базовое использование.
-- `TypeSecond` — альтернативная раскладка.
-- `WithLinkInTitle` — ссылка "назад" над заголовком.
-- `DocumentNumberEdit` — редактируемый номер документа в Title.
-- `WithTabsAndControls` — Title + Tabs + Controls.
-- `WithSubheader` — с Subhead.
-- `LayoutWithSidebar` — `HeaderLayoutSidebar`.
+`stories/Header/examples/WithLayoutSidebar.tsx`
 
----
+```tsx
+import React from "react";
+import {
+    Header,
+    Button,
+    EButtonTheme,
+    EComponentSize,
+    Title,
+    ETitleSize,
+    Text,
+    ETextSize,
+    EFontType,
+    Gap,
+} from "@sberbusiness/triplex-next";
+
+export const WithLayoutSidebar = () => (
+    <Header>
+        <Header.LayoutSidebar>
+            <Header.LayoutSidebar.Content>
+                <Header.Title>
+                    <Header.Title.Content>
+                        <Title tag="h1" size={ETitleSize.H1}>
+                            Расчётный счёт
+                        </Title>
+                        <Gap size={8} />
+                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                            40702810300000012345 · Рубли РФ
+                        </Text>
+                    </Header.Title.Content>
+                    <Header.Title.Controls>
+                        <Button size={EComponentSize.MD} theme={EButtonTheme.GENERAL}>
+                            Создать платёж
+                        </Button>
+                    </Header.Title.Controls>
+                </Header.Title>
+            </Header.LayoutSidebar.Content>
+
+            {/* Отступ от контента задаёт потребитель — своя раскладка у Sidebar отсутствует. */}
+            <Header.LayoutSidebar.Sidebar style={{ paddingLeft: "24px" }}>
+                <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                    Остаток на счёте
+                </Text>
+                <Gap size={4} />
+                <Title tag="div" size={ETitleSize.H3}>
+                    1 250 300,45 ₽
+                </Title>
+            </Header.LayoutSidebar.Sidebar>
+        </Header.LayoutSidebar>
+    </Header>
+);
+```
 
-## История изменений
+### Example
+
+`stories/Header/examples/Example.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    Header,
+    Island,
+    EIslandType,
+    Button,
+    EButtonTheme,
+    EComponentSize,
+    Tabs,
+    Title,
+    ETitleSize,
+    Text,
+    ETextSize,
+    EFontType,
+    Gap,
+} from "@sberbusiness/triplex-next";
+
+const tabs = [
+    { id: "account-tab-operations", label: "Операции" },
+    { id: "account-tab-statements", label: "Выписки" },
+    { id: "account-tab-requisites", label: "Реквизиты" },
+];
+
+export const Example = () => {
+    const [selectedTabId, setSelectedTabId] = useState("account-tab-operations");
+
+    return (
+        <Island type={EIslandType.TYPE_1} size={EComponentSize.MD}>
+            <Header>
+                <Header.LayoutSidebar>
+                    <Header.LayoutSidebar.Content>
+                        <Header.Title>
+                            <Header.Title.Content>
+                                <Title tag="h1" size={ETitleSize.H1}>
+                                    Расчётный счёт
+                                </Title>
+                                <Gap size={8} />
+                                <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                    40702810300000012345 · Рубли РФ
+                                </Text>
+                            </Header.Title.Content>
+                            <Header.Title.Controls>
+                                <Button size={EComponentSize.MD} theme={EButtonTheme.SECONDARY}>
+                                    Выписка
+                                </Button>
+                                <Button size={EComponentSize.MD} theme={EButtonTheme.GENERAL}>
+                                    Создать платёж
+                                </Button>
+                            </Header.Title.Controls>
+                        </Header.Title>
+                    </Header.LayoutSidebar.Content>
+
+                    <Header.LayoutSidebar.Sidebar style={{ paddingLeft: "24px" }}>
+                        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                            Остаток на счёте
+                        </Text>
+                        <Gap size={4} />
+                        <Title tag="div" size={ETitleSize.H3}>
+                            1 250 300,45 ₽
+                        </Title>
+                    </Header.LayoutSidebar.Sidebar>
+                </Header.LayoutSidebar>
+
+                <Header.Tabs>
+                    <Header.Tabs.Content>
+                        <Tabs
+                            tabs={tabs}
+                            selectedId={selectedTabId}
+                            onSelectTab={setSelectedTabId}
+                            size={EComponentSize.MD}
+                            buttonDropdownAttributes={{ "aria-label": "Другие вкладки" }}
+                        />
+                    </Header.Tabs.Content>
+                </Header.Tabs>
+
+                <Header.Subhead>
+                    <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                        Показаны операции за последние 30 дней
+                    </Text>
+                </Header.Subhead>
+            </Header>
+        </Island>
+    );
+};
+```
 
-| Дата | Изменение |
-|---|---|
-| 2026-04-18 | Создан документ |