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

package/bundle/components/Checkbox.md

@@ -3,20 +3,20 @@ component: Checkbox
 category: Inputs
 related: [CheckboxXGroup, CheckboxYGroup, CheckboxTree, CheckboxTreeExtended]
 tokens:
-  - --triplex-next-Checkbox-Background_Default
-  - --triplex-next-Checkbox-BorderColor_Default
-  - --triplex-next-Checkbox-Checkmark_Fill_Default
-  - --triplex-next-Checkbox-Background_Hover
-  - --triplex-next-Checkbox-BorderColor_Hover
-  - --triplex-next-Checkbox-Background_Checked_Default
-  - --triplex-next-Checkbox-BorderColor_Checked_Default
-  - --triplex-next-Checkbox-Background_Disabled
-  - --triplex-next-Checkbox-BorderColor_Disabled
-  - --triplex-next-Checkbox-Background_Checked_Disabled
-  - --triplex-next-Checkbox-BorderColor_Checked_Disabled
-  - --triplex-next-Checkbox-Checkmark_Fill_Disabled
-  - --triplex-next-Checkbox-BorderColor_Focus
-  - --triplex-next-Checkbox-Background_Checked_Hover
+  - Checkbox.Background_Default
+  - Checkbox.BorderColor_Default
+  - Checkbox.Checkmark_Fill_Default
+  - Checkbox.Background_Hover
+  - Checkbox.BorderColor_Hover
+  - Checkbox.Background_Checked_Default
+  - Checkbox.BorderColor_Checked_Default
+  - Checkbox.Background_Disabled
+  - Checkbox.BorderColor_Disabled
+  - Checkbox.Background_Checked_Disabled
+  - Checkbox.BorderColor_Checked_Disabled
+  - Checkbox.Checkmark_Fill_Disabled
+  - Checkbox.BorderColor_Focus
+  - Checkbox.Background_Checked_Hover
 stories: stories/Checkbox/Checkbox.stories.tsx
 version: "1.0"
 ---
@@ -62,21 +62,24 @@ version: "1.0"
 
 ## Дизайн-токены
 
-```
---triplex-next-Checkbox-Background_Default
---triplex-next-Checkbox-BorderColor_Default
---triplex-next-Checkbox-Checkmark_Fill_Default
---triplex-next-Checkbox-Background_Hover
---triplex-next-Checkbox-BorderColor_Hover
---triplex-next-Checkbox-Background_Checked_Default
---triplex-next-Checkbox-BorderColor_Checked_Default
---triplex-next-Checkbox-Background_Disabled
---triplex-next-Checkbox-BorderColor_Disabled
---triplex-next-Checkbox-Background_Checked_Disabled
---triplex-next-Checkbox-BorderColor_Checked_Disabled
---triplex-next-Checkbox-Checkmark_Fill_Disabled
---triplex-next-Checkbox-BorderColor_Focus
---triplex-next-Checkbox-Background_Checked_Hover
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/Checkbox.ts`.
+
+```text
+Checkbox.Background_Default
+Checkbox.BorderColor_Default
+Checkbox.Checkmark_Fill_Default
+Checkbox.Background_Hover
+Checkbox.BorderColor_Hover
+Checkbox.Background_Checked_Default
+Checkbox.BorderColor_Checked_Default
+Checkbox.Background_Disabled
+Checkbox.BorderColor_Disabled
+Checkbox.Background_Checked_Disabled
+Checkbox.BorderColor_Checked_Disabled
+Checkbox.Checkmark_Fill_Disabled
+Checkbox.BorderColor_Focus
+Checkbox.Background_Checked_Hover
 ```
 
 ---

package/bundle/components/CheckboxTreeExtended.md

@@ -3,7 +3,7 @@ component: CheckboxTreeExtended
 category: Inputs
 related: [CheckboxTree, CollapsibleTreeExtended, Checkbox]
 tokens:
-  - --triplex-next-Checkbox-BorderColor_Focus
+  - Checkbox.BorderColor_Focus
 stories: stories/CheckboxTreeExtended/CheckboxTreeExtended.stories.tsx
 version: "1.0"
 ---
@@ -88,11 +88,15 @@ render-функции узла.
 
 ## Дизайн-токены
 
-Собственных токенов компонент не вводит. Единственная CSS-переменная в стилях —
-у стрелки раскрытия (см. «Инварианты», сейчас не отрисовывается):
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/Checkbox.ts`.
 
-```
---triplex-next-Checkbox-BorderColor_Focus
+Собственных токенов компонент не вводит. Единственный токен в стилях — общий
+`Checkbox.BorderColor_Focus`: тот же токен рисует фокус чекбокса, а здесь —
+`:focus-visible` стрелки раскрытия (см. «Инварианты», сейчас не отрисовывается):
+
+```text
+Checkbox.BorderColor_Focus
 ```
 
 Размеры и цвета самих чекбоксов приходят из `Checkbox`, вертикальные отступы

package/bundle/components/Chip.md

@@ -1,27 +1,27 @@
 ---
 component: Chip
 category: Chips
-related: [ChipGroup, ChipIcon, ChipOptions, ChipSelect, ChipMultiselect, ChipSort, ChipSuggest, ChipDatePicker, ChipClearButton, ChipDropdownArrow, Badge, IconWrapper]
+related: [ChipGroup, ChipIcon, ChipOptions, ChipSelect, ChipMultiselect, ChipSort, ChipSuggest, ChipDatePicker, ChipMonthYearPicker, ChipClearButton, ChipDropdownArrow, Badge, IconWrapper]
 tokens:
-  - --triplex-next-Chip-Background_Type1_Default
-  - --triplex-next-Chip-Background_Type1_Hover
-  - --triplex-next-Chip-Background_Type2_Default
-  - --triplex-next-Chip-Background_Type2_Hover
-  - --triplex-next-Chip-Background_Active
-  - --triplex-next-Chip-Background_Disabled
-  - --triplex-next-Chip-Background_Selected_Default
-  - --triplex-next-Chip-Background_Selected_Hover
-  - --triplex-next-Chip-Background_Selected_Active
-  - --triplex-next-Chip-Background_Selected_Disabled
-  - --triplex-next-Chip-Color_Default
-  - --triplex-next-Chip-Color_Hover
-  - --triplex-next-Chip-Color_Active
-  - --triplex-next-Chip-Color_Disabled
-  - --triplex-next-Chip-Color_Selected_Default
-  - --triplex-next-Chip-Color_Selected_Hover
-  - --triplex-next-Chip-Color_Selected_Active
-  - --triplex-next-Chip-Color_Selected_Disabled
-  - --triplex-next-Chip-Shadow_Focus
+  - Chip.Background_Type1_Default
+  - Chip.Background_Type1_Hover
+  - Chip.Background_Type2_Default
+  - Chip.Background_Type2_Hover
+  - Chip.Background_Active
+  - Chip.Background_Disabled
+  - Chip.Background_Selected_Default
+  - Chip.Background_Selected_Hover
+  - Chip.Background_Selected_Active
+  - Chip.Background_Selected_Disabled
+  - Chip.Color_Default
+  - Chip.Color_Hover
+  - Chip.Color_Active
+  - Chip.Color_Disabled
+  - Chip.Color_Selected_Default
+  - Chip.Color_Selected_Hover
+  - Chip.Color_Selected_Active
+  - Chip.Color_Selected_Disabled
+  - Chip.Shadow_Focus
 stories: stories/Chips/Chip.stories.tsx
 version: "1.0"
 ---
@@ -33,7 +33,7 @@ version: "1.0"
 Компактный интерактивный элемент-«чипс»: выполняет действие по нажатию и отображает
 выбранное (`selected`) состояние. Одновременно служит базой для всего семейства Chip*
 — поверх него построены `ChipIcon`, `ChipOptions`, а также target-элементы
-`ChipSelect`, `ChipMultiselect`, `ChipSuggest`, `ChipDatePicker`.
+`ChipSelect`, `ChipMultiselect`, `ChipSuggest`, `ChipDatePicker`, `ChipMonthYearPicker`.
 
 Используй когда: нужен переключаемый фильтр, тег или компактная кнопка-действие
 в ряду однотипных элементов.
@@ -99,7 +99,7 @@ version: "1.0"
   вызовут `onClick` / `onKeyDown`. Не полагайся на `disabled` как на защиту в логике —
   проверяй флаг в самом обработчике, если это критично.
 - **`selected` и `disabled` совместимы** — есть отдельные токены
-  `--triplex-next-Chip-*_Selected_Disabled`.
+  `Chip.*_Selected_Disabled`.
 - Ширина ограничена: `min-width: 40px`, `max-width: 264px`. Длинный `children`
   обрезается многоточием, а не переносится.
 
@@ -107,28 +107,31 @@ version: "1.0"
 
 ## Дизайн-токены
 
-Паттерн: `--triplex-next-Chip-{Property}_{Modifier}_{State}`
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/Chip.ts`.
+
+Паттерн: `Chip.{Property}_{Modifier}_{State}`
 
 ```text
---triplex-next-Chip-Background_Type1_Default
---triplex-next-Chip-Background_Type1_Hover
---triplex-next-Chip-Background_Type2_Default
---triplex-next-Chip-Background_Type2_Hover
---triplex-next-Chip-Background_Active
---triplex-next-Chip-Background_Disabled
---triplex-next-Chip-Background_Selected_Default
---triplex-next-Chip-Background_Selected_Hover
---triplex-next-Chip-Background_Selected_Active
---triplex-next-Chip-Background_Selected_Disabled
---triplex-next-Chip-Color_Default
---triplex-next-Chip-Color_Hover
---triplex-next-Chip-Color_Active
---triplex-next-Chip-Color_Disabled
---triplex-next-Chip-Color_Selected_Default
---triplex-next-Chip-Color_Selected_Hover
---triplex-next-Chip-Color_Selected_Active
---triplex-next-Chip-Color_Selected_Disabled
---triplex-next-Chip-Shadow_Focus
+Chip.Background_Type1_Default
+Chip.Background_Type1_Hover
+Chip.Background_Type2_Default
+Chip.Background_Type2_Hover
+Chip.Background_Active
+Chip.Background_Disabled
+Chip.Background_Selected_Default
+Chip.Background_Selected_Hover
+Chip.Background_Selected_Active
+Chip.Background_Selected_Disabled
+Chip.Color_Default
+Chip.Color_Hover
+Chip.Color_Active
+Chip.Color_Disabled
+Chip.Color_Selected_Default
+Chip.Color_Selected_Hover
+Chip.Color_Selected_Active
+Chip.Color_Selected_Disabled
+Chip.Shadow_Focus
 ```
 
 Токены `_Type1_` / `_Type2_` существуют только для `Background` в состояниях
@@ -149,7 +152,7 @@ Default и Hover. Цвет текста (`Color_*`) от типа не зави
 - **Класс `.chipGroupItem`** выставляется всегда, наравне с `.chip`. Объявлен
   в `styles/Chip.module.less` и служит общим маркером «элемент верхнего уровня
   в ряду чипсов»: его проставляют себе все члены семейства — `Chip`, `ChipSort`,
-  `ChipMultiselect`, `ChipSelect`, `ChipDatePicker`, `ChipSuggest`. Причём
+  `ChipMultiselect`, `ChipSelect`, `ChipDatePicker`, `ChipMonthYearPicker`, `ChipSuggest`. Причём
   `.chipGroupItem` не всегда совпадает с `.chip`: в `ChipSelect` / `ChipMultiselect`
   `.chip` лежит внутри элемента с `.chipGroupItem`. Раскладка `ChipGroup` на этот
   класс не опирается — в её стилях он не встречается. Не удалять и не переименовывать.
@@ -174,8 +177,8 @@ Default и Hover. Цвет текста (`Color_*`) от типа не зави
   компонент не генерирует (у `<span role="button">` нет нативного поведения кнопки),
   внешний `onKeyDown` вызывается всегда и после `preventDefault`. Если чипс должен
   срабатывать с клавиатуры, потребитель обрабатывает Enter/Space сам через `onKeyDown`.
-  Обёртки семейства (`ChipSelect`, `ChipSuggest`, `ChipDatePicker`) делают это на своём уровне.
-- Фокус-стиль через `:focus-visible` (`--triplex-next-Chip-Shadow_Focus`) — виден только
+  Обёртки семейства (`ChipSelect`, `ChipSuggest`, `ChipDatePicker`, `ChipMonthYearPicker`) делают это на своём уровне.
+- Фокус-стиль через `:focus-visible` (`Chip.Shadow_Focus`) — виден только
   при клавиатурной навигации. Нативная обводка на корневом элементе намеренно отключена
   (`outline: none` в LESS) в пользу `box-shadow` — убирать правило нельзя, иначе фокус
   отрисуется дважды.
@@ -203,8 +206,8 @@ Default и Hover. Цвет текста (`Color_*`) от типа не зави
 - `ChipDropdownArrow` — стрелка дропдауна для `postfix`; объявлена как `React.FC`
   (не `forwardRef`), собственных обработчиков не имеет. Props: **обязательный**
   `rotated: boolean` (даёт класс `.rotated`) и `size?: EComponentSize`
-- `ChipSelect`, `ChipMultiselect`, `ChipSuggest`, `ChipDatePicker`, `ChipSort` —
-  составные компоненты, использующие `Chip` как target-элемент дропдауна
+- `ChipSelect`, `ChipMultiselect`, `ChipSuggest`, `ChipDatePicker`, `ChipMonthYearPicker`,
+  `ChipSort` — составные компоненты, использующие `Chip` как target-элемент дропдауна
 - `Badge` (`Badge.Dot`) — значок уведомлений при `showNotificationIcon`
 - `IconWrapper` — обёртка `prefix` / `postfix`, добавляет классы `hoverable` / `disabled`,
   управляющие цветом иконки при взаимодействии
@@ -236,6 +239,7 @@ Default и Hover. Цвет текста (`Color_*`) от типа не зави
 | 2026-07-29 | Создан документ (TRI-26, AI-Ready Phase 1) |
 | 2026-07-29 | AI-рефакторинг (TRI-26): codestyle-чистка `Chip.tsx` (константы-маппинги в UPPER_SNAKE_CASE, эквивалентные упрощения в `clsx`, JSDoc на `children` и `handleKeyDown`), unit-тесты расширены с 5 до 22 кейсов; публичный API, DOM и визуал не изменены |
 | 2026-07-29 | Правки по ревью PR #487: уточнена атрибуция класса `.chipGroupItem` (его проставляет семейство Chip*, а не раскладка `ChipGroup`) и описание API `ChipClearButton` / `ChipDropdownArrow` |
+| 2026-09-07 | В семейство добавлен `ChipMonthYearPicker` — упомянут в списках потребителей `Chip` и `.chipGroupItem` |
 
 ---
 

package/bundle/components/ChipMonthYearPicker.md

@@ -0,0 +1,344 @@
+---
+component: ChipMonthYearPicker
+category: Chips
+related: [Chip, ChipDatePicker, ChipGroup, MonthYearField, DatePickerExtended]
+tokens: []
+stories: stories/Chips/ChipMonthYearPicker.stories.tsx
+version: "1.0"
+---
+
+# ChipMonthYearPicker
+
+## Назначение
+
+Выбор месяца и года в виде чипса: в свёрнутом виде показывает название фильтра либо
+выбранный месяц, по нажатию открывает календарь, сразу открытый на сетке месяцев
+(`ECalendarPickType.MONTH_YEAR`). Ввода с клавиатуры нет — значение меняется только
+выбором в календаре.
+
+Используй когда: в панели фильтров нужен период гранулярности «месяц» (отчётный период,
+месяц выписки) и результат должен читаться прямо на чипсе.
+Не используй когда: нужна конкретная дата (`ChipDatePicker`), нужен диапазон месяцев
+(`MonthYearRange`) или поле в форме с лейблом и статусом валидации (`MonthYearField`).
+
+Компонент управляемый: `value` и `onChange` держит потребитель. Рекомендуется
+располагать внутри `ChipGroup` — он задаёт отступы и режим одной строки.
+
+---
+
+## Варианты и props
+
+`IChipMonthYearPickerProps` — это `IMonthYearFieldProps` без props поля формы
+(`status`, `label`, `onClear`, `targetProps`) и без `pickType` (зафиксирован
+компонентом), плюс `type` / `disabled` от `IChipProps` и собственные `label`,
+`displayedValue`, `clearButtonProps`. То есть все props `DatePickerExtended`
+(`alignment`, `limitRange`, `disabledDays`, `defaultViewDate`, `onDropdownOpen` /
+`onDropdownClose`, `focusTrapProps`, кнопки навигации календаря) доступны и уходят
+в него спредом.
+
+`label` переопределён по сравнению с `MonthYearField`: там это лейбл поля из
+`TextField`, здесь — **обязательный** текст самого чипса в невыбранном состоянии.
+
+Неизвестные компоненту атрибуты (`data-*`, `aria-*`, `id`, обработчики `<div>`)
+попадают на корневой `<div>` `DatePickerExtended`, а не на чипс-таргет.
+
+### Обязательные props
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `value` | `string` | Значение в формате `format`. Пустая строка либо непарсимое/выходящее за `limitRange` значение = «не выбрано» |
+| `label` | `React.ReactNode` | Текст чипса, пока значение не выбрано |
+| `onChange` | `(value: string) => void` | Вызывается с датой в формате `format` при выборе месяца и с `""` при очистке |
+
+### Опциональные props
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `format` | `string` | `"YYYYMMDD"` (`dateFormatYYYYMMDD`) | Транспортный формат `value`. На отображение не влияет |
+| `limitRange` | `IDateLimitRange` | `globalLimitRange` (1900-01-01 … 2199-12-31) | Границы выбора. Значение вне диапазона считается невыбранным |
+| `displayedValue` | `React.ReactNode` | — | Показывается вместо отформатированного значения, **только когда значение выбрано** |
+| `placeholder` | `string` | — | Подсказка в поле шапки мобильного дропдауна. В самом чипсе не видна |
+| `size` | `EComponentSize` | `MD` (дефолт `Chip`) | Размер чипса, иконки очистки и стрелки |
+| `type` | `EChipType` | `TYPE_1` | Визуальный тип чипса |
+| `disabled` | `boolean` | `false` | Блокирует открытие календаря и очистку |
+| `clearButtonProps` | `Omit<IChipClearButtonProps, "size" \| "disabled" \| "onClick" \| "onKeyDown">` | — | Props кнопки очистки; основное назначение — задать `aria-label`. `size` и `disabled` наследуются от чипса и не переопределяются |
+| `alignment` | `EDropdownAlignment` | `LEFT` | Выравнивание дропдауна относительно чипса |
+| `className` | `string` | — | Дополнительный класс корневого `<div>`, мержится с `.chipGroupItem` |
+
+### Отображаемое значение
+
+Порядок вычисления того, что видно на чипсе:
+
+```text
+selected = getPickerValues(value, format, limitRange).calendarDate !== null
+чипс     = selected ? (displayedValue ?? value в формате "MMM YYYY") : label
+```
+
+- формат отображения — `inputMonthYearFormat` (`"MMM YYYY"`) из
+  `MonthYearField/constants.ts`, локализуется глобальной локалью `moment`
+  (`Jan 1970` по умолчанию, `янв. 1970` при `moment.locale("ru")`). Он **не**
+  зависит от `format` — тот описывает только транспортное значение;
+- `value`, которое не парсится по `format` или выходит за `limitRange`, молча
+  трактуется как «не выбрано»: показывается `label`, исключения не бросаются;
+- `displayedValue` при пустом `value` игнорируется — приоритет всегда у `label`.
+
+### Постфикс чипса
+
+Правый слот переключается по тому же `selected`: выбранное значение → `ChipClearButton`
+(очистка), невыбранное → `ChipDropdownArrow`, повёрнутая при открытом дропдауне.
+Отдельной кнопки-календаря, как в `MonthYearField`, у чипса нет.
+
+---
+
+## Дизайн-токены
+
+Собственных токенов у компонента нет: в `styles/Chip.module.less` ему принадлежит
+только `.chipGroupItem` (`display: inline-block`). Весь визуал приходит из компонентов,
+на которых он построен:
+
+- чипс-таргет — `Chip` (группа `Chip`: фон, цвет, тень фокуса, состояния `selected` и `disabled`);
+- кнопка очистки и стрелка — `ChipClearButton` / `ChipDropdownArrow` поверх `ButtonIcon`
+  и `IconWrapper`, палитра иконок задаётся `paletteIndex`, а не токеном;
+- календарь и выпадающий блок — `Calendar` (группа `Calendar`) и `Dropdown`.
+
+Полный список токенов чипса — в `Chip-ai.md` → «Дизайн-токены», календаря —
+в `Calendar-ai.md`.
+
+---
+
+## Инварианты
+
+- **`forwardRef`** — не убирать. `ref` указывает на корневой `<div>` `DatePickerExtended`,
+  а не на чипс-таргет. Цель `ref` не менять — на ней держится тест `Should forward ref correctly`.
+- **`pickType` зафиксирован** значением `ECalendarPickType.MONTH_YEAR` и исключён из props
+  (`Omit`). Возможность выбрать день здесь не открывать — для этого есть `ChipDatePicker`.
+- **`label` обязателен и переопределяет опциональный `label` из `IMonthYearFieldProps`** —
+  без него у чипса нет невыбранного состояния.
+- **Пустая строка — контракт очистки.** Кнопка очистки вызывает `onChange("")`;
+  отдельного `onClear` (как в `MonthYearField`) у компонента намеренно нет.
+- **`className` мержится через `clsx` с `.chipGroupItem`** на корневом `<div>` —
+  общий маркер семейства Chip*. Не удалять и не заменять спредом `...rest`.
+- **Значение вне `limitRange` не является ошибкой** — оно показывается как невыбранное.
+  Компонент библиотеки не бросает исключений в рантайме.
+- **Barrel `src/components/Chip/index.ts`** экспортирует `ChipMonthYearPicker`,
+  `ChipMonthYearPickerTarget` и их интерфейсы — сохранять.
+- **Story ids `chips-chipmonthyearpicker--*`** завязаны на baseline-скриншоты
+  в `__screenshots__/` — переименование story требует обновления baseline.
+
+---
+
+## Accessibility
+
+- Таргет — `<span role="button">` из `Chip` с `aria-expanded`, отражающим состояние
+  дропдауна. Доступное имя берётся из содержимого чипса (`label` либо значение).
+- **Клавиатура на чипсе:** Enter и Space открывают и закрывают календарь с
+  `preventDefault()` (гасят прокрутку и «клик» по пробелу). Escape на открытом
+  дропдауне закрывает его (`DatePickerExtended`). `onKeyDown`, переданный в
+  `ChipMonthYearPicker`, в чипс-таргет не пробрасывается — он попадает на корневой
+  `<div>` `DatePickerExtended` вместе с остальным `...rest` и ловит всплывающие
+  события. Собственный `onKeyDown` экспортируемого `ChipMonthYearPickerTarget`
+  вызывается на любую клавишу, как у базового `Chip`; Enter/Space дополнительно
+  переключают дропдаун, если чипс не `disabled`. Навигация по сетке месяцев —
+  стрелки (шаг: ±1 месяц по горизонтали, ±3 по вертикали, PageUp/PageDown — ±1 год),
+  внутри `CalendarViewMonths`.
+- **Кнопка очистки** гасит всплытие Enter/Space и клика, поэтому активируется сама,
+  а не открывает календарь. Своего текста у неё нет: задать доступное имя обязан
+  потребитель через `clearButtonProps={{ "aria-label": "…" }}` — библиотека
+  мультиязычная и текст не хардкодит.
+  Её `disabled` не переопределяется из `clearButtonProps` (исключён из типа) —
+  на задизейбленном чипсе очистка всегда недоступна.
+- **Фокус:** дропдаун — `role="dialog"` с `aria-modal` и `FocusTrap`. При открытии
+  с клавиатуры фокус уходит в календарь и возвращается на чипс при закрытии; при
+  открытии мышью фокус не перехватывается (`mouseUsedRef` в `DatePickerExtended`).
+- `disabled` у `Chip` не нативный: `pointer-events: none` плюс `tabIndex={-1}`.
+  Дополнительно таргет сам игнорирует клик и Enter/Space, а `ChipClearButton`
+  получает `disabled`. Программно диспатченные события всё же дойдут до DOM —
+  см. `Chip-ai.md`.
+- В мобильном режиме календарь показывается как мобильный `Dropdown`: в шапке —
+  поле `readOnly` с выбранным значением и `placeholder`, справа — кнопка закрытия.
+
+---
+
+## Связанные компоненты
+
+- `Chip` — база таргета: классы состояний, фокус, `role="button"`, ограничения `disabled`
+- `ChipDatePicker` — альтернатива для выбора конкретной даты; тот же чипс-таргет,
+  но с маскированным ручным вводом и связанным с ним локальным состоянием
+- `ChipGroup` — рекомендуемый контейнер: отступы, перенос строк, режим `oneLine`
+- `MonthYearField` — тот же выбор месяца в виде поля формы; источник
+  `IMonthYearFieldProps` и утилит `MonthYearPickerUtils`
+- `DatePickerExtended` — база: владеет состоянием открытости, дропдауном, календарём
+  и корневым `<div>`; получает `renderTarget` и `renderDropdownHeaderTarget`
+- `ChipMonthYearPickerTarget` — чипс-таргет этого компонента (экспортируется, но
+  собственного AI.md не имеет): читает открытость из `DatePickerExtendedContext`,
+  переключает её по клику и Enter/Space, рендерит `ChipClearButton` либо
+  `ChipDropdownArrow` в `postfix`
+
+---
+
+## Stories
+
+Основные истории: `stories/Chips/ChipMonthYearPicker.stories.tsx`
+Файлы примеров: `stories/Chips/examples/ChipMonthYearPicker/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `PlaygroundExample.tsx` | Интерактивный контроль `type`, `size`, `label`, `placeholder`, `displayedValue`, `disabled` |
+| `Default` | `DefaultExample.tsx` | Базовое управляемое использование: `value` + `onChange` + `aria-label` кнопки очистки |
+| `Types` | `TypesExample.tsx` | `TYPE_1` и `TYPE_2` |
+| `Sizes` | `SizesExample.tsx` | Размеры SM / MD / LG |
+| `WithCustomDisplayedValue` | `WithCustomDisplayedValueExample.tsx` | Подмена отображаемого значения через `displayedValue` |
+| `VisualTests` | `VisualTestsExample.tsx` | Скриншот-регрессия: три размера с выбранным значением, у последнего открыт календарь |
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-09-07 | Создан компонент и документ (AI-Ready Phase 1) |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Chips/examples/ChipMonthYearPicker/DefaultExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { ChipMonthYearPicker, EComponentSize, EDropdownAlignment } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => {
+    const [value, setValue] = useState("");
+    return (
+        <ChipMonthYearPicker
+            value={value}
+            label="MonthYear label"
+            placeholder="мм.гггг"
+            onChange={setValue}
+            alignment={EDropdownAlignment.LEFT}
+            size={EComponentSize.MD}
+            clearButtonProps={{ "aria-label": "Очистить" }}
+        />
+    );
+};
+```
+
+### Types
+
+`stories/Chips/examples/ChipMonthYearPicker/TypesExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { ChipMonthYearPicker, EChipType, EDropdownAlignment } from "@sberbusiness/triplex-next";
+
+type TypeItemProps = {
+    type: EChipType;
+    label: string;
+};
+
+const TypeItem = ({ type, label }: TypeItemProps) => {
+    const [value, setValue] = useState("");
+
+    return (
+        <div>
+            <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{label}</div>
+            <ChipMonthYearPicker
+                value={value}
+                label="MonthYear label"
+                placeholder="мм.гггг"
+                clearButtonProps={{ "aria-label": "Очистить" }}
+                type={type}
+                alignment={EDropdownAlignment.LEFT}
+                onChange={setValue}
+            />
+        </div>
+    );
+};
+
+const typeOptions = Object.values(EChipType).map((type) => ({
+    value: type,
+    label: type.toUpperCase(),
+}));
+
+export const TypesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        {typeOptions.map(({ value, label }) => (
+            <TypeItem key={value} type={value} label={label} />
+        ))}
+    </div>
+);
+```
+
+### Sizes
+
+`stories/Chips/examples/ChipMonthYearPicker/SizesExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { ChipMonthYearPicker, EComponentSize, EDropdownAlignment } from "@sberbusiness/triplex-next";
+
+type SizeItemProps = {
+    size: EComponentSize;
+    label: string;
+};
+
+const SizeItem = ({ size, label }: SizeItemProps) => {
+    const [value, setValue] = useState("");
+
+    return (
+        <div>
+            <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{label}</div>
+            <ChipMonthYearPicker
+                size={size}
+                alignment={EDropdownAlignment.LEFT}
+                value={value}
+                label="MonthYear label"
+                placeholder="мм.гггг"
+                clearButtonProps={{ "aria-label": "Очистить" }}
+                onChange={setValue}
+            />
+        </div>
+    );
+};
+
+const sizeOptions = Object.values(EComponentSize).map((size) => ({
+    value: size,
+    label: size.toUpperCase(),
+}));
+
+export const SizesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        {sizeOptions.map(({ value, label }) => (
+            <SizeItem key={value} size={value} label={label} />
+        ))}
+    </div>
+);
+```
+
+### WithCustomDisplayedValue
+
+`stories/Chips/examples/ChipMonthYearPicker/WithCustomDisplayedValueExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { ChipMonthYearPicker, EComponentSize, EDropdownAlignment } from "@sberbusiness/triplex-next";
+
+export const WithCustomDisplayedValueExample = () => {
+    const [value, setValue] = useState("19700101");
+    return (
+        <ChipMonthYearPicker
+            value={value}
+            label="MonthYear label"
+            placeholder="мм.гггг"
+            onChange={setValue}
+            alignment={EDropdownAlignment.LEFT}
+            size={EComponentSize.MD}
+            displayedValue="MonthYear value"
+        />
+    );
+};
+```
+