diff --git a/context7.json b/context7.json
new file mode 100644
index 0000000..708337d
--- /dev/null
+++ b/context7.json
@@ -0,0 +1,9 @@
+{
+	"$schema": "https://context7.com/schema/context7.json",
+	"projectTitle": "Bitrix Framework",
+	"description": "Фреймворк для работы с Битрикс24 и 1С‑Битрикс: Управление сайтом",
+	"folders": ["pages"],
+	"excludeFolders": ["_images", "_assets", "extensions"],
+	"excludeFiles": ["README.md", "favicon.ico", "index.yaml", "LICENSE", "poll-bar.md", "prompt.md", "toc.yaml"],
+	"rules": []
+  }
\ No newline at end of file
diff --git a/pages/ui/bitrix-cli.md b/pages/ui/bitrix-cli.md
new file mode 100644
index 0000000..dc28811
--- /dev/null
+++ b/pages/ui/bitrix-cli.md
@@ -0,0 +1,81 @@
+## Bitrix CLI (@bitrix/cli) — Краткая справка
+
+Это краткая справочная документация по использованию Bitrix CLI для сборки, тестирования и создания JS/CSS расширений для 1C‑Bitrix/Bitrix24.
+
+### Обзор
+- CLI `bitrix` рекурсивно находит файлы `bundle.config.js` и запускает сборку/транспиляцию для каждого.
+- Тесты основаны на Mocha и обнаруживаются в `./test` относительно каждого `bundle.config.js`.
+- Расширения (экстеншны) находятся в `local/js/{module}/...` и загружаются в PHP через `\Bitrix\Main\UI\Extension::load(...)`.
+
+### Сборка
+Запустить полную сборку проекта:
+
+```bash
+bitrix build
+```
+
+Часто используемые флаги:
+- `--watch[=<exts>]`, `-w[=<exts>]`: Пересборка при изменении файлов. По умолчанию отслеживает `js,jsx,vue,css,scss` при использовании `defaults`.
+- `--test`, `-t`: Запускать тесты после каждой сборки (показывает только сводку прохождений/ошибок; полный отчёт через `bitrix test`).
+- `--modules <name[,name...]>`, `-m=<...>`: Собирать только выбранные модули (корневой контекст для `local/js` и `bitrix/modules`).
+- `--path <path>`, `-p=<path>`: Собрать конкретную директорию (относительный путь).
+- `--extensions <name[,name...]>`, `-e=<...>`: Собрать конкретные расширения; можно запускать из любой точки репозитория.
+
+Примеры:
+```bash
+bitrix build --watch
+bitrix build -w=defaults,json,mjs,svg
+bitrix build --modules main,ui,landing
+bitrix build -p=./main/install/js/main/loader
+bitrix build -e=main.core,ui.buttons,landing.main
+```
+
+### Тестирование
+Запустить Mocha тесты с полным отчётом:
+
+```bash
+bitrix test
+```
+
+Примечания:
+- Файлы тестов — это JS файлы в `./test` рядом с каждым `bundle.config.js`.
+- Исходный код и тесты обрабатываются/транспилируются на лету; поддерживается ES6+.
+
+Часто используемые флаги (та же семантика, что и у сборки):
+- `--watch[=<exts>]`, `-w[=<exts>]`
+- `--modules <name[,name...]>`, `-m=<...>`
+- `--path <path>`, `-p=<path>`
+- `--extensions <name[,name...]>`, `-e=<...>`
+
+Примеры:
+```bash
+bitrix test --watch
+bitrix test -w=defaults,json,mjs,svg
+bitrix test --modules main,ui,landing
+bitrix test -p=./main/install/js/main/loader
+bitrix test -e=main.core,ui.buttons,landing.main
+```
+
+### Создание расширения
+Создать новое расширение:
+
+```bash
+cd local/js/{module}
+bitrix create
+```
+
+Советы:
+- `{module}` должен быть именем модуля без точек (например, префикс партнёра).
+- Также можно запустить прямо в `local/js/`: `bitrix create myext`.
+
+Загрузка расширения (PHP):
+
+```php
+\Bitrix\Main\UI\Extension::load("partner.ext"); // для local/js/partner/ext/
+\Bitrix\Main\UI\Extension::load("myext");       // при создании прямо в local/js/
+```
+
+### Практические заметки
+- Значения по умолчанию для watch покрывают: `js,jsx,vue,css,scss`.
+- Используйте `--extensions` при итерации над небольшим набором расширений для ускорения сборки/тестирования.
+- Храните тесты в `./test` рядом с соответствующим `bundle.config.js` для их обнаружения.
diff --git a/pages/ui/dialog-messagebox.md b/pages/ui/dialog-messagebox.md
new file mode 100644
index 0000000..d5cc57e
--- /dev/null
+++ b/pages/ui/dialog-messagebox.md
@@ -0,0 +1,136 @@
+# ui.dialogs.messagebox
+
+## Описание
+
+Компонент `ui.dialogs.messagebox` предоставляет простой способ для создания и управления стандартными модальными окнами, такими как предупреждения (`alert`) и подтверждения (`confirm`). Он позволяет настраивать заголовок, сообщение, кнопки и обработчики событий.
+
+**Расположение:** `/ui/install/js/ui/dialogs/messagebox/src/`
+
+## Импорт компонента
+
+```javascript
+import { MessageBox, MessageBoxButtons } from 'ui.dialogs.messagebox';
+```
+
+## Основные статические методы
+
+### MessageBox.alert()
+
+Показывает диалоговое окно с сообщением и кнопкой «ОК».
+
+```javascript
+MessageBox.alert(message, title, onOk, okCaption);
+```
+
+| Параметр | Тип | Описание |
+|-----------|----------|----------|
+| `message` | `String` | Текст сообщения. |
+| `title` | `String` | (опционально) Заголовок окна. |
+| `onOk` | `Function` | (опционально) Callback-функция при нажатии «ОК». |
+| `okCaption` | `String` | (опционально) Текст для кнопки «ОК». |
+
+### MessageBox.confirm()
+
+Показывает диалоговое окно с сообщением и кнопками «ОК» и «Отмена».
+
+```javascript
+MessageBox.confirm(message, title, onOk, onCancel, okCaption, cancelCaption);
+```
+
+| Параметр | Тип | Описание |
+|-----------|----------|----------|
+| `message` | `String` | Текст сообщения. |
+| `title` | `String` | (опционально) Заголовок окна. |
+| `onOk` | `Function` | (опционально) Callback-функция при нажатии «ОК». |
+| `onCancel` | `Function` | (опционально) Callback-функция при нажатии «Отмена». |
+| `okCaption` | `String` | (опционально) Текст для кнопки «ОК». |
+| `cancelCaption` | `String` | (опционально) Текст для кнопки «Отмена». |
+
+### MessageBox.show()
+
+Создает и сразу показывает диалоговое окно с указанными параметрами.
+
+```javascript
+MessageBox.show({
+   message: 'Текст сообщения',
+   title: 'Заголовок',
+   buttons: MessageBoxButtons.OK_CANCEL,
+   // ... другие параметры
+});
+```
+
+## Параметры конструктора
+
+Экземпляр `MessageBox` можно создать с помощью `new MessageBox(options)`.
+
+| Параметр | Тип | По умолчанию | Описание |
+|-----------|----------|----------|----------|
+| `message` | `String` \| `Element` | `''` | Основной текст или DOM-элемент в окне. |
+| `title` | `String` | `null` | Заголовок окна. |
+| `buttons` | `Array` \| `String` | `[]` | Массив кнопок или строка-пресет (`MessageBoxButtons`). |
+| `onOk` | `Function` | `null` | Callback для кнопки «ОК». |
+| `onCancel` | `Function` | `null` | Callback для кнопки «Отмена». |
+| `onYes` | `Function` | `null` | Callback для кнопки «Да». |
+| `onNo` | `Function` | `null` | Callback для кнопки «Нет». |
+| `okCaption` | `String` | `(локализовано)` | Текст для кнопки «ОK». |
+| `cancelCaption` | `String` | `(локализовано)` | Текст для кнопки «Отмена». |
+| `yesCaption` | `String` | `(локализовано)` | Текст для кнопки «Да». |
+| `noCaption` | `String` | `(локализовано)` | Текст для кнопки «Нет». |
+| `modal` | `Boolean` | `true` | Делает окно модальным (с оверлеем). |
+| `mediumButtonSize` | `Boolean` | `false` | Использовать средний размер для кнопок. |
+| `popupOptions` | `Object` | `{}` | Дополнительные параметры для `main.popup`. |
+
+## Примеры использования
+
+### Простое предупреждение
+
+```javascript
+import { MessageBox } from 'ui.dialogs.messagebox';
+
+MessageBox.alert('Операция успешно завершена!');
+```
+
+### Запрос подтверждения
+
+```javascript
+import { MessageBox } from 'ui.dialogs.messagebox';
+
+MessageBox.confirm('Вы уверены, что хотите удалить этот элемент?', (messageBox) => {
+  console.log('Пользователь нажал ОК');
+  messageBox.close();
+}, 'Удалить', (messageBox) => {
+  console.log('Пользователь нажал Отмена');
+  messageBox.close();
+});
+```
+
+### Создание кастомного окна
+
+```javascript
+import { MessageBox, MessageBoxButtons } from 'ui.dialogs.messagebox';
+
+const box = new MessageBox({
+  message: 'Вы хотите сохранить изменения?',
+  title: 'Сохранение',
+  buttons: MessageBoxButtons.YES_NO_CANCEL,
+  onYes: (messageBox) => {
+    console.log('Сохраняем...');
+    messageBox.close();
+  },
+  onNo: (messageBox) => {
+    console.log('Не сохраняем.');
+    messageBox.close();
+  },
+  onCancel: (messageBox) => {
+    console.log('Действие отменено.');
+    messageBox.close();
+  }
+});
+
+box.show();
+```
+
+## Экспортируемые компоненты
+
+- `MessageBox`: Основной класс для создания диалоговых окон.
+- `MessageBoxButtons`: Объект с константами для стандартных наборов кнопок (`OK`, `OK_CANCEL`, `YES_NO`, `YES_NO_CANCEL` и т.д.).
\ No newline at end of file
diff --git a/pages/ui/entity-selector.md b/pages/ui/entity-selector.md
new file mode 100644
index 0000000..00b5423
--- /dev/null
+++ b/pages/ui/entity-selector.md
@@ -0,0 +1,198 @@
+# ui.entity-selector
+
+## Описание
+
+Компонент `ui.entity-selector` предоставляет многофункциональный диалог для выбора различных сущностей, таких как пользователи, отделы, элементы CRM, задачи и другие. Он поддерживает одиночный и множественный выбор, поиск, кастомные табы и интеграцию с `TagSelector` для отображения выбранных элементов.
+
+**Расположение:** `/ui/install/js/ui/entity-selector/src`
+
+## Импорт классов
+
+```javascript
+import {
+	Dialog,
+	Item,
+	Tab,
+	Entity,
+	TagSelector
+} from 'ui.entity-selector';
+```
+
+## Основные классы
+
+### Dialog
+
+Основной класс, который создает и управляет диалогом выбора.
+
+**Конструктор:** `new Dialog(options: DialogOptions)`
+
+#### Ключевые опции `DialogOptions`:
+
+| Опция | Тип | Описание |
+|---|---|---|
+| `targetNode` | `HTMLElement` | Элемент, к которому будет привязан диалог. |
+| `multiple` | `boolean` | `true` для множественного выбора, `false` для одиночного. По умолчанию `true`. |
+| `entities` | `EntityOptions[]` | Массив объектов, описывающих сущности для выбора (например, пользователи, отделы). |
+| `preselectedItems` | `Array<[string, string | number]>` | Массив для предвыбранных элементов в формате `['entityId', 'itemId']`. |
+| `dropdownMode` | `boolean` | Упрощенный режим отображения в виде выпадающего списка. По умолчанию `false`. |
+| `enableSearch` | `boolean` | Включает встроенный поиск в диалоге. По умолчанию `false`. |
+| `context` | `string` | Контекст для сохранения последних выбранных элементов (например, `CRM_DEAL`). |
+| `events` | `object` | Объект с обработчиками событий, например `onSelect`, `onDeselect`. |
+| `tagSelector` | `TagSelector` | Экземпляр `TagSelector` для отображения выбранных элементов вне диалога. |
+
+### TagSelector
+
+Компонент для отображения выбранных элементов в виде тегов. Может использоваться как внутри диалога, так и отдельно.
+
+**Конструктор:** `new TagSelector(options: TagSelectorOptions)`
+
+### Item
+
+Представляет один выбираемый элемент в диалоге (например, конкретного пользователя).
+
+### Entity
+
+Определяет тип сущности, доступной для выбора (например, 'user', 'department').
+
+### Tab
+
+Представляет вкладку в диалоге (например, "Последние" или "Поиск").
+
+## Примеры использования
+
+### 1. Простой выбор одного пользователя
+
+Создание диалога для выбора одного пользователя, который открывается по клику на кнопку.
+
+```javascript
+import { Dialog } from 'ui.entity-selector';
+
+const button = document.getElementById('select-user-button');
+button.addEventListener('click', () => {
+	const dialog = new Dialog({
+		targetNode: button,
+		multiple: false,
+		context: 'MY_MODULE_CONTEXT',
+		entities: [
+			{
+				id: 'user',
+				options: {
+					inviteEmployeeLink: false
+				}
+			}
+		],
+		events: {
+			'Item:onSelect': (event) => {
+				const { item } = event.getData();
+				console.log('Выбран пользователь:', item.getTitle());
+				dialog.hide();
+			}
+		}
+	});
+
+	dialog.show();
+});
+```
+
+### 2. Множественный выбор с внешним TagSelector
+
+Создание диалога для выбора нескольких пользователей и отделов с отображением результатов в `TagSelector`.
+
+```javascript
+import { Dialog, TagSelector } from 'ui.entity-selector';
+
+// Инициализация TagSelector
+const tagSelector = new TagSelector({
+	dialogOptions: {
+		context: 'MY_MODULE_USERS_DEPARTMENTS',
+		entities: [
+			{
+				id: 'user',
+			},
+			{
+				id: 'department',
+				options: {
+					selectMode: 'usersAndDepartments'
+				}
+			}
+		],
+		preselectedItems: [
+			['user', 1], // Предвыбран пользователь с ID 1
+			['department', 5] // Предвыбран отдел с ID 5
+		],
+	}
+});
+
+// Рендеринг TagSelector в контейнер
+const container = document.getElementById('tag-selector-container');
+tagSelector.renderTo(container);
+
+```
+
+### 3. Режим выпадающего списка (Dropdown Mode)
+
+Диалог в компактном режиме, который лучше подходит для встраивания в формы.
+
+```javascript
+import { Dialog } from 'ui.entity-selector';
+
+const dropdownNode = document.getElementById('my-dropdown');
+dropdownNode.addEventListener('click', () => {
+	const dialog = new Dialog({
+		targetNode: dropdownNode,
+		dropdownMode: true,
+		multiple: false,
+		entities: [
+			{
+				id: 'user',
+			}
+		],
+		events: {
+			'Item:onSelect': (event) => {
+				const { item } = event.getData();
+				dropdownNode.innerText = item.getTitle();
+			}
+		}
+	});
+
+	dialog.show();
+});
+```
+
+## TypeScript типы
+
+Для разработки можно использовать следующие TypeScript-типы:
+
+```typescript
+import type {
+	DialogOptions,
+	ItemOptions,
+	EntityOptions,
+	TabOptions,
+	TagSelectorOptions,
+	ItemId
+} from 'ui.entity-selector';
+```
+
+## Экспортируемые модули
+
+Модуль `ui.entity-selector` экспортирует следующие классы и типы:
+
+- **Классы:**
+    - `Dialog`
+    - `Item`
+    - `Tab`
+    - `Entity`
+    - `TagSelector`
+    - `TagItem`
+    - `BaseHeader`, `DefaultHeader`
+    - `BaseFooter`, `DefaultFooter`
+    - `BaseStub`, `DefaultStub`
+- **TypeScript-типы:**
+    - `DialogOptions`
+    - `ItemOptions`
+    - `EntityOptions`
+    - `TabOptions`
+    - `TagSelectorOptions`
+    - `ItemId`
+    - и другие.
diff --git a/pages/ui/hint.md b/pages/ui/hint.md
new file mode 100644
index 0000000..694f7e0
--- /dev/null
+++ b/pages/ui/hint.md
@@ -0,0 +1,124 @@
+# UI.Hint
+
+## Описание
+
+`UI.Hint` — это JavaScript-расширение для создания и управления всплывающими подсказками (хинт). Компонент позволяет добавлять подсказки к любым элементам на странице как декларативно через HTML-атрибуты, так и программно с помощью JavaScript API.
+
+**Расположение:** `/ui/install/js/ui/hint/`
+
+## Подключение
+
+Для использования `UI.Hint` необходимо подключить расширение:
+
+```php
+\Bitrix\Main\UI\Extension::load('ui.hint');
+```
+
+## Декларативное использование (HTML)
+
+Самый простой способ добавить подсказку — использовать `data-hint` атрибут. Элемент с таким атрибутом автоматически инициализируется и получит иконку подсказки.
+
+```html
+<span data-hint="Текст простой подсказки."></span>
+```
+
+### Основные атрибуты
+
+| Атрибут | Описание |
+|---|---|
+| `data-hint` | **Обязательный.** Устанавливает текст подсказки. Если текст не указан, подсказка не будет показана. |
+| `data-hint-html` | Указывает, что содержимое `data-hint` является HTML-кодом. По умолчанию текст экранируется. |
+| `data-hint-interactivity` | Делает подсказку интерактивной: она не будет закрываться при наведении на нее курсора, что позволяет взаимодействовать с ее содержимым (например, кликнуть по ссылке). |
+| `data-hint-no-icon` | Отключает отображение стандартной иконки подсказки. Атрибут следует добавлять к элементу, у которого уже есть видимое содержимое. |
+| `data-hint-center` | Центрирует подсказку относительно элемента, к которому она привязана. |
+
+### Примеры использования
+
+#### Простая текстовая подсказка
+
+```html
+<span data-hint="Это простая текстовая подсказка."></span>
+```
+
+#### Подсказка с HTML-содержимым
+
+Для вставки сложного форматирования используйте атрибут `data-hint-html`.
+
+```html
+<span
+  data-hint="Это <b>жирный</b> текст и <a href='#'>ссылка</a>."
+  data-hint-html
+></span>
+```
+
+#### Интерактивная подсказка
+
+Полезна, когда в подсказке есть ссылки или кнопки.
+
+```html
+<span
+  data-hint="В этой подсказке можно <a href='#' onclick='alert(\"Клик!\"); return false;'>нажать на ссылку</a>."
+  data-hint-html
+  data-hint-interactivity
+></span>
+```
+
+#### Подсказка без иконки
+
+Используется, когда подсказка нужна для элемента, у которого уже есть контент.
+
+```html
+<span data-hint="Подсказка для этого текста." data-hint-no-icon>
+  Наведите на меня
+</span>
+```
+
+## Программное использование (JavaScript)
+
+`UI.Hint` предоставляет глобальный объект `BX.UI.Hint` для управления подсказками.
+
+### Инициализация подсказок
+
+Если подсказки добавляются на страницу динамически, их нужно инициализировать.
+
+```javascript
+// Инициализировать все неинициализированные подсказки в документе
+BX.UI.Hint.init();
+
+// Инициализировать подсказки в пределах конкретного контейнера
+const container = document.getElementById('my-container');
+BX.UI.Hint.init(container);
+```
+
+### Создание узла подсказки
+
+Вы можете создать DOM-узел подсказки с помощью JavaScript.
+
+```javascript
+const hintNode = BX.UI.Hint.createNode('Текст для новой подсказки');
+document.body.appendChild(hintNode);
+```
+
+### Методы API
+
+| Метод | Описание |
+|---|---|
+| `init(context)` | Инициализирует все подсказки с атрибутом `data-hint` внутри `context` (по умолчанию `document.body`). |
+| `createNode(text)` | Создает и возвращает DOM-элемент `<span>` с настроенной подсказкой. |
+| `show(anchorNode, html, centerPos)` | Программно показывает подсказку для элемента `anchorNode`. |
+| `hide()` | Программно скрывает текущую активную подсказку. |
+| `createInstance(parameters)` | Создает новый, изолированный экземпляр менеджера подсказок с кастомными параметрами. |
+
+### Создание кастомного экземпляра
+
+Для особых случаев можно создать отдельный менеджер подсказок.
+
+```javascript
+const myHintManager = BX.UI.Hint.createInstance({
+    attributeName: 'data-my-hint',
+    className: 'my-hint-class'
+});
+
+// Этот менеджер будет работать только с атрибутом data-my-hint
+myHintManager.init();
+```
\ No newline at end of file
diff --git a/pages/ui/icon-set-api-core.md b/pages/ui/icon-set-api-core.md
new file mode 100644
index 0000000..9f297e4
--- /dev/null
+++ b/pages/ui/icon-set-api-core.md
@@ -0,0 +1,133 @@
+# Icon
+
+## Описание
+
+Расширение `ui.icon-set.api.core` предоставляет стандартизированный набор иконок для использования в интерфейсе. Оно позволяет создавать и настраивать иконки с помощью класса `Icon`.
+
+**Расположение:** `/ui/install/js/ui/icon-set/api/core/src`
+
+## Импорт
+
+```javascript
+import { Icon, Actions, Social, Main, IconHoverMode } from 'ui.icon-set.api.core';
+```
+
+## Основные свойства
+
+Для создания иконки используется класс `Icon` с объектом опций `IconOptions`.
+
+```javascript
+new Icon(options: IconOptions): HTMLElement;
+```
+
+### icon
+
+Определяет, какая иконка будет отображена. Значение должно быть одной из констант, экспортируемых из наборов иконок.
+
+**Тип:** `String`
+**Обязательное свойство.**
+
+### size
+
+Задает размер иконки в пикселях.
+
+**Тип:** `Number`
+**По умолчанию:** `null` (используется размер по умолчанию)
+
+### color
+
+Устанавливает цвет иконки.
+
+**Тип:** `String`
+**По умолчанию:** `null` (используется цвет по умолчанию)
+
+### hoverMode
+
+Определяет поведение иконки при наведении курсора.
+
+**Тип:** `String`
+**По умолчанию:** `null`
+
+| Константа | Значение | Описание |
+|-----------|----------|----------|
+| `IconHoverMode.DEFAULT` | `'default'` | Стандартное поведение при наведении |
+| `IconHoverMode.ALT` | `'alt'` | Альтернативное поведение при наведении |
+
+### responsive
+
+Определяет, будет ли иконка адаптивной.
+
+**Тип:** `Boolean`
+**По умолчанию:** `false`
+
+## Примеры использования
+
+### Базовый пример
+
+Создание иконки "карандаш" из набора `Actions` и добавление ее на страницу.
+
+```javascript
+import { Icon, Actions } from 'ui.icon-set.api.core';
+
+const pencilIcon = new Icon({
+  icon: Actions.PENCIL_DRAW,
+}).render();
+
+document.body.appendChild(pencilIcon);
+```
+
+### Иконка с размером и цветом
+
+Создание иконки "настройки" размером 24px и определенным цветом.
+
+```javascript
+import { Icon, Actions } from 'ui.icon-set.api.core';
+
+const settingsIcon = new Icon({
+  icon: Actions.SETTINGS_1,
+  size: 24,
+  color: '#525C69',
+}).render();
+
+document.body.appendChild(settingsIcon);
+```
+
+## TypeScript типы
+
+```typescript
+import type { IconOptions } from 'ui.icon-set.api.core';
+```
+
+### IconOptions
+
+Интерфейс для объекта опций, передаваемого в конструктор `Icon`.
+
+```typescript
+type IconOptions = {
+	icon: string,
+	size?: number,
+	color?: string,
+	hoverMode?: IconHoverMode,
+	responsive?: boolean,
+};
+```
+
+## Экспортируемые модули
+
+- `Icon`: Основной класс для создания иконок.
+- `IconHoverMode`: Объект с константами для режимов наведения.
+- `IconOptions`: TypeScript-тип для опций иконки.
+- **Наборы иконок:**
+    - `Actions`
+    - `Social`
+    - `Main`
+    - `ContactCenter`
+    - `CRM`
+    - `Editor`
+    - `Special`
+    - `Animated`
+    - `Outline`
+    - `Solid`
+    - `Disk`
+    - `DiskCompact`
+    - `SmallOutline`
diff --git a/pages/ui/icon-set-api-vue.md b/pages/ui/icon-set-api-vue.md
new file mode 100644
index 0000000..d197ca0
--- /dev/null
+++ b/pages/ui/icon-set-api-vue.md
@@ -0,0 +1,121 @@
+# Icon Set (BIcon)
+
+## Описание
+
+Компонент `BIcon` предназначен для отображения иконок из стандартного набора иконок Bitrix. Он позволяет легко вставлять иконки, настраивать их размер, цвет и поведение при наведении.
+
+**Расположение:** `/ui/install/js/ui/icon-set/api/vue/`
+
+## Импорт компонента
+
+```javascript
+import { BIcon, Set, Outline, Solid, SmallOutline } from 'ui.icon-set.api.vue';
+```
+
+## Основные свойства
+
+### name
+
+Определяет, какая иконка будет отображена. Имя иконки следует брать из одного из экспортируемых наборов.
+
+**Тип:** `String`
+**Обязательное:** `true`
+
+Иконки сгруппированы в наборы:
+- `Set`: Основной набор иконок.
+- `Outline`: Контурные иконки.
+- `Solid`: Залитые иконки.
+- `SmallOutline`: Маленькие контурные иконки.
+
+### color
+
+Задает цвет иконки.
+
+**Тип:** `String`
+**По умолчанию:** `null`
+
+### size
+
+Устанавливает размер иконки в пикселях.
+
+**Тип:** `Number`
+**По умолчанию:** `null`
+
+### hoverable
+
+При значении `true` добавляет стандартный эффект при наведении курсора.
+
+**Тип:** `Boolean`
+**По умолчанию:** `false`
+
+### hoverableAlt
+
+При значении `true` добавляет альтернативный эффект при наведении курсора.
+
+**Тип:** `Boolean`
+**По умолчанию:** `false`
+
+### responsive
+
+При значении `true` делает иконку адаптивной, позволяя ей масштабироваться относительно родительского контейнера. Свойство `size` при этом игнорируется.
+
+**Тип:** `Boolean`
+**По умолчанию:** `false`
+
+## Примеры использования
+
+### Базовый пример
+
+Этот пример показывает, как отобразить иконку закрытия размером 24px, используя `v-bind` для передачи свойств.
+
+```javascript
+import { BIcon, Set } from 'ui.icon-set.api.vue';
+
+export const MyComponent = {
+	components: { BIcon },
+	computed: {
+		closeIconProps(): { name: string, size: number } {
+			return {
+				name: Set.CROSS_40,
+				size: 24,
+			};
+		},
+	},
+	template: `
+		<BIcon v-bind="closeIconProps" />
+	`,
+};
+```
+
+### Иконка с цветом и эффектом наведения
+
+В этом примере иконка настраивается через вычисляемое свойство, которое включает цвет, размер и эффект при наведении.
+
+```javascript
+import { BIcon, Outline } from 'ui.icon-set.api.vue';
+
+export const MyComponentWithIcon = {
+	components: { BIcon },
+	computed: {
+		iconProps(): { name: string, color: string, size: number, hoverable: boolean } {
+			return {
+				name: Outline.CHECK,
+				color: '#2FC6F6',
+				size: 32,
+				hoverable: true,
+			};
+		},
+	},
+	template: `
+		<BIcon v-bind="iconProps" />
+	`,
+};
+```
+
+## Экспортируемые модули
+
+- `BIcon`: Основной Vue-компонент для отображения иконок.
+- `Set`: Объект с константами для основного набора иконок.
+- `Outline`: Объект с константами для контурных иконок.
+- `Solid`: Объект с константами для залитых иконок.
+- `SmallOutline`: Объект с константами для маленьких контурных иконок.
diff --git a/pages/ui/main-popup.md b/pages/ui/main-popup.md
new file mode 100644
index 0000000..21cbce8
--- /dev/null
+++ b/pages/ui/main-popup.md
@@ -0,0 +1,162 @@
+# main.popup
+
+## Описание
+
+Компонент `main.popup` предоставляет мощный и гибкий инструмент для создания и управления всплывающими окнами (попапами) и контекстными меню в Битрикс. Он позволяет настраивать внешний вид, поведение, анимацию и взаимодействие с пользователем.
+
+**Расположение:** `/main/install/js/main/popup/src/`
+
+## Импорт и использование
+
+### ES6
+
+```javascript
+import { Popup, PopupManager, Menu, MenuItem, MenuManager, CloseIconSize } from 'main.popup';
+
+// Создание попапа
+const popup = new Popup({
+    id: 'my-popup',
+    content: 'Содержимое попапа',
+    closeByEsc: true,
+    autoHide: true,
+});
+popup.show();
+
+// Создание меню
+const menu = new Menu({
+    id: 'my-menu',
+    bindElement: document.querySelector('#menu-target'),
+    items: [
+        { text: 'Пункт 1', onclick: () => console.log('Пункт 1') },
+        { text: 'Пункт 2', delimiter: true },
+        { text: 'Пункт 3' },
+    ]
+});
+menu.show();
+```
+
+---
+
+## Popup
+
+Основной класс для создания всплывающих окон.
+
+### Основные параметры `PopupOptions`
+
+| Параметр | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `id` | `string` | `popup-window-{random}` | Уникальный идентификатор попапа. |
+| `bindElement` | `HTMLElement \| {left: number, top: number}` | `null` | Элемент, к которому будет привязан попап. |
+| `content` | `string \| HTMLElement` | `null` | Содержимое окна. |
+| `buttons` | `Array<BX.UI.Button>` | `[]` | Массив кнопок (`BX.UI.Button`). |
+| `width` / `height` | `number` | `null` | Ширина/высота окна. |
+| `minWidth` / `minHeight` | `number` | `null` | Минимальная ширина/высота. |
+| `maxWidth` / `maxHeight` | `number` | `null` | Максимальная ширина/высота. |
+| `padding` | `number` | `15` | Внутренний отступ контейнера попапа. |
+| `contentPadding` | `number` | `0` | Внутренний отступ контента. |
+| `borderRadius` | `string` | `null` | Радиус скругления углов. |
+| `background` | `string` | `null` | CSS-фон для всего попапа. |
+| `contentBackground` | `string` | `null` | CSS-фон для области контента. |
+| `className` | `string` | `''` | Дополнительный CSS-класс для контейнера. |
+| `darkMode` | `boolean` | `false` | Темный режим. |
+| `autoHide` | `boolean` | `false` | Автоматически закрывать при клике вне окна. |
+| `closeByEsc` | `boolean` | `false` | Закрывать по нажатию на `Esc`. |
+| `draggable` | `boolean \| {element: HTMLElement}` | `false` | Разрешить перетаскивание. По умолчанию за заголовок. |
+| `resizable` | `boolean` | `false` | Разрешить изменение размера. |
+| `titleBar` | `string \| boolean` | `false` | Заголовок окна. |
+| `closeIcon` | `boolean \| {size: CloseIconSize}` | `false` | Показать иконку закрытия. |
+| `angle` | `boolean \| {position, offset}` | `false` | Показать "стрелку" у попапа. |
+| `overlay` | `boolean \| {backgroundColor, opacity}` | `false` | Показать подложку (overlay). |
+| `animation` | `string \| {showClassName, closeClassName}` | `null` | Настройки анимации появления/скрытия. Варианты: `fading`, `fading-slide`, `scale`. |
+| `cacheable` | `boolean` | `true` | Не уничтожать DOM попапа при закрытии. |
+| `events` | `object` | `{}` | Объект с обработчиками событий. |
+
+### Методы `Popup`
+
+- `show()`: Показать попап.
+- `close()`: Закрыть попап.
+- `toggle()`: Переключить видимость.
+- `destroy()`: Уничтожить попап.
+- `isShown()`: `boolean` - Проверить, показан ли попап.
+- `adjustPosition()`: Пересчитать позицию относительно `bindElement`.
+- `setContent(content)`: Установить новое содержимое.
+- `setButtons(buttons)`: Установить новый набор кнопок.
+- `setWidth(width)` / `setHeight(height)`: Установить размеры.
+- `getPopupContainer()`: `HTMLElement` - Получить DOM-элемент контейнера попапа.
+- `getContentContainer()`: `HTMLElement` - Получить DOM-элемент контейнера контента.
+
+### События `Popup`
+
+- `onInit`: Сразу после создания экземпляра.
+- `onAfterInit`: После полной инициализации.
+- `onFirstShow`: При первом показе.
+- `onShow`: Перед началом анимации показа.
+- `onAfterShow`: После завершения анимации показа.
+- `onClose`: Перед началом анимации закрытия.
+- `onAfterClose`: После завершения анимации закрытия.
+- `onDestroy`: Перед уничтожением.
+- `onDragStart` / `onDrag` / `onDragEnd`: События перетаскивания.
+- `onResizeStart` / `onResize` / `onResizeEnd`: События изменения размера.
+
+---
+
+## Menu
+
+Класс для создания контекстных меню. Наследуется от `Popup` и имеет схожие параметры и методы.
+
+### Основные параметры `MenuOptions`
+
+| Параметр | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `items` | `Array<MenuItemOptions>` | `[]` | Массив пунктов меню. |
+| `closeSubMenuOnMouseLeave` | `boolean` | `true` | Закрывать подменю при уводе курсора. |
+| `maxHeight` | `number` | `null` | Максимальная высота меню. |
+| `allowResizeX` | `boolean` | `false` | Разрешить изменение ширины. |
+
+### `MenuItemOptions`
+
+| Параметр | Тип | Описание |
+|---|---|---|
+| `id` | `string` | Уникальный идентификатор пункта. |
+| `text` | `string` | Текст пункта. |
+| `html` | `string` | HTML-содержимое пункта (имеет приоритет над `text`). |
+| `href` | `string` | Ссылка (пункт будет тегом `<a>`). |
+| `onclick` | `Function` | Обработчик клика. |
+| `delimiter` | `boolean` | Является ли пункт разделителем. |
+| `disabled` | `boolean` | Сделать пункт неактивным. |
+| `items` | `Array<MenuItemOptions>` | Массив для создания подменю. |
+
+---
+
+## Менеджеры
+
+- `PopupManager`: Позволяет управлять всеми созданными попапами.
+  - `PopupManager.create(options)`: Фабричный метод для создания `Popup`.
+  - `PopupManager.getPopupById(id)`: Получить экземпляр попапа по ID.
+- `MenuManager`: Аналогично для меню.
+  - `MenuManager.create(options)`: Фабричный метод для создания `Menu`.
+  - `MenuManager.getMenuById(id)`: Получить экземпляр меню по ID.
+
+---
+
+## TypeScript типы
+
+```typescript
+import type { 
+    PopupOptions, 
+    PopupTarget, 
+    PopupAnimationOptions,
+    MenuOptions, 
+    MenuItemOptions 
+} from 'main.popup';
+```
+
+## Совместимость
+
+Для обратной совместимости `main.popup` предоставляет старые имена классов в глобальном пространстве `BX`:
+
+- `BX.PopupWindow` (алиас для `Popup`)
+- `BX.PopupMenuWindow` (алиас для `Menu`)
+- `BX.PopupWindowManager` (алиас для `PopupManager`)
+- `BX.PopupMenu` (алиас для `MenuManager`)
+- `BX.PopupMenuItem` (алиас для `MenuItem`)
\ No newline at end of file
diff --git a/pages/ui/main-sidepanel.md b/pages/ui/main-sidepanel.md
new file mode 100644
index 0000000..be16f5f
--- /dev/null
+++ b/pages/ui/main-sidepanel.md
@@ -0,0 +1,144 @@
+# SidePanel
+
+## Описание
+
+Модуль `main.sidepanel` предоставляет функциональность для создания и управления слайдерами. Он позволяет открывать страницы и компоненты в модальных окнах, которые выдвигаются сбоку экрана, не перезагружая основную страницу. Управление всеми слайдерами осуществляется через единый менеджер — `SidePanel.Instance`.
+
+**Расположение:** `/main/install/js/main/sidepanel/src/`
+
+## Получение экземпляра
+
+Доступ к менеджеру слайдеров можно получить импортировав его из модуля.
+
+```javascript
+// ES6
+import { SidePanel } from 'main.sidepanel';
+const sliderManager = SidePanel.Instance;
+```
+
+## Основные методы
+
+### Открытие слайдера
+
+Основной метод для открытия нового слайдера — `open`. Он принимает URL для загрузки в слайдере и объект с опциями.
+
+```javascript
+import { SidePanel } from 'main.sidepanel';
+
+SidePanel.Instance.open("profile/user/1/", {
+    width: 800,
+    cacheable: false,
+    allowChangeHistory: true,
+    events: {
+        onClose: function(event) {
+            console.log("Slider was closed!");
+        }
+    }
+});
+```
+
+### Закрытие слайдера
+
+Для закрытия текущего (верхнего) слайдера используется метод `close`.
+
+```javascript
+SidePanel.Instance.close();
+```
+
+### Отправка сообщений между слайдерами
+
+Модуль поддерживает обмен сообщениями между слайдерами и основной страницей с помощью `postMessage`.
+
+```javascript
+import { SidePanel } from 'main.sidepanel';
+
+// Отправка сообщения из дочернего слайдера в родительский
+SidePanel.Instance.postMessage(window, "my-event-name", { some: "data" });
+
+// Подписка на событие в родительском окне
+SidePanel.Instance.subscribe("my-event-name", function(event) {
+    const data = event.getData();
+    console.log(data); // { some: "data" }
+});
+```
+
+## Основные опции при открытии (`open`)
+
+| Параметр | Тип | Описание |
+|---|---|---|
+| `width` | `Number` | Ширина слайдера в пикселях. |
+| `cacheable` | `Boolean` | Если `true`, содержимое слайдера будет кешироваться. По умолчанию `true`. |
+| `allowChangeHistory` | `Boolean` | Если `true`, URL слайдера будет добавлен в историю браузера. Позволяет навигацию по кнопкам "назад/вперед". |
+| `events` | `Object` | Объект с обработчиками событий слайдера (`onOpen`, `onClose`, `onLoad`, `onDestroy`). |
+| `label` | `Object` | Позволяет добавить кастомную метку в шапку слайдера. Например: `{text: 'My Label', color: '#ff0000'}`. |
+| `contentCallback` | `Function` | Функция, которая возвращает `Promise` или HTML-элемент для отображения в слайдере вместо загрузки URL. |
+| `requestMethod` | `String` | Метод запроса для загрузки контента (`'get'` или `'post'`). По умолчанию `'get'`. |
+| `requestParams` | `Object` | Параметры, которые будут отправлены с запросом (при `requestMethod: 'post'`). |
+
+## События слайдера (`events`)
+
+| Событие | Описание |
+|---|---|
+| `onOpenStart` | Вызывается перед началом анимации открытия. |
+| `onOpenComplete` | Вызывается после завершения анимации открытия. |
+| `onLoad` | Вызывается после полной загрузки контента в слайдере. |
+| `onCloseStart` | Вызывается перед началом анимации закрытия. |
+| `onCloseComplete` | Вызывается после полного закрытия слайдера. |
+| `onDestroy` | Вызывается при уничтожении экземпляра слайдера. |
+
+## Примеры использования
+
+### Открытие простого слайдера
+
+```javascript
+import { SidePanel } from 'main.sidepanel';
+
+SidePanel.Instance.open("/tasks/task/view/1/", {
+    width: 1000,
+    allowChangeHistory: false
+});
+```
+
+### Слайдер с обратным вызовом при закрытии
+
+```javascript
+import { SidePanel } from 'main.sidepanel';
+
+SidePanel.Instance.open("/crm/deal/details/1/", {
+    events: {
+        onClose: function(event) {
+            console.log("Deal slider has been closed.");
+            // Можно перезагрузить страницу или обновить данные
+            // window.location.reload();
+        }
+    }
+});
+```
+
+### Использование `contentCallback` для кастомного контента
+
+```javascript
+import { SidePanel } from 'main.sidepanel';
+
+SidePanel.Instance.open("my-custom-slider", {
+    contentCallback: function(slider) {
+        return new Promise(function(resolve, reject) {
+            const element = document.createElement('div');
+            element.innerHTML = "<h2>Hello from SidePanel!</h2>";
+            resolve(element);
+        });
+    }
+});
+```
+
+## Экспортируемые модули
+
+- `SidePanel` — Основной объект с доступом к `Instance`.
+- `Slider` — Класс, представляющий отдельный слайдер.
+- `SliderManager` — Класс менеджера слайдеров (синглтон).
+- `Toolbar` — Класс панели инструментов для свернутых слайдеров.
+- `MessageEvent` — Класс события для `postMessage`.
+- `SliderEvent` — Базовый класс событий слайдера.
+- `Label` — Класс для управления метками в шапке.
+- `Dictionary` — Утилита для хранения данных.
+- `...Options` — TypeScript-типы для опций.
diff --git a/pages/ui/notification-manager.md b/pages/ui/notification-manager.md
new file mode 100644
index 0000000..0efa52b
--- /dev/null
+++ b/pages/ui/notification-manager.md
@@ -0,0 +1,143 @@
+# Менеджер уведомлений (Notification Manager)
+
+## Описание
+
+Модуль `ui.notification-manager` предоставляет единый API для работы с уведомлениями. Он автоматически выбирает наилучший способ доставки уведомлений в зависимости от окружения.
+
+**Расположение:** `/ui/install/js/ui/notification-manager/src`
+
+## Импорт компонента
+
+```javascript
+import { Notifier, Notification } from 'ui.notification-manager';
+```
+
+## Основные сущности
+
+### Notifier
+
+Основной класс для управления уведомлениями. Он отвечает за создание и отправку уведомлений, а также за подписку на события.
+
+#### `Notifier.notify(options)`
+
+Отправляет уведомление.
+
+**Параметры:**
+
+| Имя | Тип | Описание |
+| --- | --- | --- |
+| `options` | `NotificationOptions` | Объект с параметрами уведомления. |
+
+#### `Notifier.subscribe(eventName, handler)`
+
+Подписывается на события уведомлений.
+
+**Параметры:**
+
+| Имя | Тип | Описание |
+| --- | --- | --- |
+| `eventName` | `String` | Имя события (например, `click`, `close`, `reply`). |
+| `handler` | `Function` | Обработчик события. |
+
+### NotificationOptions
+
+Объект с параметрами для создания уведомления.
+
+| Свойство | Тип | Обязательное | Описание |
+| --- | --- | --- | --- |
+| `id` | `string` | Да | Уникальный идентификатор уведомления. |
+| `category` | `string` | Нет | Категория уведомления (например, `im`, `calendar`). |
+| `title` | `string` | Нет | Заголовок уведомления. |
+| `text` | `string` | Нет | Основной текст уведомления. |
+| `icon` | `string` | Нет | URL иконки для уведомления. |
+| `inputPlaceholderText` | `string` | Нет | Текст-заполнитель для поля ввода (если уведомление поддерживает ответ). |
+| `button1Text` | `string` | Нет | Текст для первой кнопки. |
+| `button2Text` | `string` | Нет | Текст для второй кнопки. |
+
+## Примеры использования
+
+### Отправка простого уведомления
+
+```javascript
+import { Notifier } from 'ui.notification-manager';
+
+Notifier.notify({
+	id: 'my-notification-1',
+	title: 'Привет!',
+	text: 'Это простое уведомление.',
+	icon: '/path/to/icon.png'
+});
+```
+
+### Уведомление с кнопками и подпиской на клик
+
+```javascript
+import { Notifier } from 'ui.notification-manager';
+
+const notificationId = 'my-interactive-notification';
+
+Notifier.notify({
+	id: notificationId,
+	title: 'Встреча',
+	text: 'У вас запланирована встреча через 15 минут.',
+	button1Text: 'Открыть календарь',
+	button2Text: 'Отложить'
+});
+
+Notifier.subscribe('click', (event) => {
+	const { id, buttonId } = event.getData();
+	if (id === notificationId)
+	{
+		if (buttonId === 1)
+		{
+			console.log('Пользователь нажал "Открыть календарь"');
+			// window.open('/calendar/');
+		}
+		else if (buttonId === 2)
+		{
+			console.log('Пользователь нажал "Отложить"');
+		}
+	}
+});
+```
+
+### Уведомление с полем для ответа
+
+```javascript
+import { Notifier } from 'ui.notification-manager';
+
+const notificationId = 'new-message-123';
+
+Notifier.notify({
+	id: notificationId,
+	category: 'im',
+	title: 'Новое сообщение от Анны',
+	text: 'Привет, как дела?',
+	inputPlaceholderText: 'Введите ответ...'
+});
+
+Notifier.subscribe('reply', (event) => {
+	const { id, reply } = event.getData();
+	if (id === notificationId)
+	{
+		console.log(`Пользователь ответил: "${reply}"`);
+		// Логика отправки ответа
+	}
+});
+```
+
+## TypeScript типы
+
+```typescript
+import type { NotificationOptions } from 'ui.notification-manager';
+```
+
+### NotificationOptions
+
+Интерфейс для объекта опций при создании уведомления.
+
+## Экспортируемые модули
+
+- `Notifier` - Основной класс для отправки уведомлений и подписки на события.
+- `Notification` - Класс, представляющий объект уведомления (в основном для внутреннего использования).
+- `NotificationOptions` - TypeScript тип для опций уведомления.
diff --git a/pages/ui/system-chip.md b/pages/ui/system-chip.md
new file mode 100644
index 0000000..2d47c69
--- /dev/null
+++ b/pages/ui/system-chip.md
@@ -0,0 +1,146 @@
+# Chip
+
+## Описание
+
+Компонент `Chip` используется для отображения небольших блоков информации, таких как теги или категории. Поддерживает различные размеры, цветовые схемы, скругление углов и может содержать текст.
+
+**Расположение:** `/ui/install/js/ui/system/chip/src`
+
+## Импорт компонента
+
+```javascript
+import { Chip, ChipSize, ChipDesign } from 'ui.system.chip.vue';
+```
+
+## Основные свойства
+
+### size (размер)
+
+Определяет размер компонента.
+
+**Тип:** `String`  
+**По умолчанию:** `ChipSize.Lg`
+
+| Константа | Значение | Описание | Высота |
+|-----------|----------|----------|--------|
+| `ChipSize.Lg` | `'lg'` | Большой размер | 32px |
+| `ChipSize.Md` | `'md'` | Средний размер | 28px |
+| `ChipSize.Sm` | `'sm'` | Малый размер | 24px |
+| `ChipSize.Xs` | `'xs'` | Очень малый размер | 20px |
+
+### design (дизайн)
+
+Определяет цветовую схему и стиль компонента.
+
+**Тип:** `String`  
+**По умолчанию:** `ChipDesign.Filled`
+
+| Константа | Значение | Описание |
+|-----------|----------|----------|
+| `ChipDesign.Filled` | `'filled'` | Заливка акцентным цветом, белый текст |
+| `ChipDesign.Outline` | `'outline'` | Серая обводка, серый текст |
+| `ChipDesign.OutlineAccent` | `'outline-accent'` | Синяя обводка, синий текст |
+| `ChipDesign.OutlineSuccess` | `'outline-success'` | Зеленая обводка, зеленый текст |
+| `ChipDesign.OutlineAlert` | `'outline-alert'` | Красная обводка, красный текст |
+| `ChipDesign.OutlineWarning` | `'outline-warning'` | Оранжевая обводка, оранжевый текст |
+| `ChipDesign.OutlineNoAccent` | `'outline-no-accent'` | Серая обводка без акцента |
+| `ChipDesign.Shadow` | `'shadow'` | С тенью, синяя иконка |
+| `ChipDesign.ShadowAccent` | `'shadow-accent'` | С тенью, синий текст и обводка |
+| `ChipDesign.ShadowNoAccent` | `'shadow-no-accent'` | С тенью, нейтральный стиль |
+| `ChipDesign.ShadowDisabled` | `'shadow-disabled'` | С тенью, состояние disabled |
+
+### rounded (скругление)
+
+Определяет форму границ компонента.
+
+**Тип:** `Boolean`  
+**По умолчанию:** `false`
+
+| Значение | Описание |
+|----------|----------|
+| `false` | Стандартное скругление |
+| `true` | Полное скругление |
+
+### text (текст)
+
+Текст внутри компонента.
+
+**Тип:** `String`  
+**По умолчанию:** `''`
+
+## Примеры использования
+
+### Базовый пример
+
+```vue
+<Chip
+  text="Метка"
+  :size="ChipSize.Lg"
+  :design="ChipDesign.Filled"
+/>
+```
+
+### С обводкой и скруглением
+
+```vue
+<Chip
+  text="Категория"
+  :size="ChipSize.Md"
+  :design="ChipDesign.Outline"
+  :rounded="true"
+/>
+```
+
+### Различные состояния
+
+```vue
+<!-- Success -->
+<Chip
+  text="Активен"
+  :design="ChipDesign.OutlineSuccess"
+/>
+
+<!-- Warning -->
+<Chip
+  text="Внимание"
+  :design="ChipDesign.OutlineWarning"
+/>
+
+<!-- Alert -->
+<Chip
+  text="Ошибка"
+  :design="ChipDesign.OutlineAlert"
+/>
+```
+
+### Различные размеры
+
+```vue
+<Chip text="XS" :size="ChipSize.Xs" />
+<Chip text="SM" :size="ChipSize.Sm" />
+<Chip text="MD" :size="ChipSize.Md" />
+<Chip text="LG" :size="ChipSize.Lg" />
+```
+
+## TypeScript типы
+
+```typescript
+import type { ChipProps, ChipImage } from 'ui.system.chip';
+```
+
+### ChipProps
+
+Интерфейс свойств компонента Chip.
+
+### ChipImage
+
+Тип для изображений в компоненте Chip.
+
+## Экспортируемые модули
+
+- `Vue` - Vue компоненты
+- `Chip` - основной компонент
+- `ChipDesign` - константы дизайна
+- `ChipSize` - константы размеров
+- `ChipProps` - TypeScript тип свойств
+- `ChipImage` - TypeScript тип изображения
\ No newline at end of file
diff --git a/pages/ui/system-input.md b/pages/ui/system-input.md
new file mode 100644
index 0000000..934fb39
--- /dev/null
+++ b/pages/ui/system-input.md
@@ -0,0 +1,110 @@
+# Input
+
+## Описание
+
+Компонент `Input` используется для создания текстовых полей ввода с поддержкой различных размеров и стилей оформления. Компонент предоставляет единообразный интерфейс для работы с пользовательским вводом в рамках UI системы Bitrix.
+
+**Расположение:** `/ui/install/js/ui/system/input/src`
+
+## Импорт компонента
+
+```javascript
+import { Input, InputSize, InputDesign } from 'ui.system.input.vue';
+```
+
+## Основные константы
+
+### InputSize (размер)
+
+Определяет размер поля ввода.
+
+**Тип:** `String`
+
+| Константа | Значение | Описание |
+|-----------|----------|----------|
+| `InputSize.Lg` | `'lg'` | Большой размер |
+| `InputSize.Md` | `'md'` | Средний размер |
+| `InputSize.Sm` | `'sm'` | Малый размер |
+| `InputSize.Xs` | `'xs'` | Очень малый размер |
+
+### InputDesign (дизайн)
+
+Определяет стиль оформления поля ввода.
+
+**Тип:** `String`
+
+| Константа | Значение | Описание |
+|-----------|----------|----------|
+| `InputDesign.Default` | `'default'` | Стандартный стиль |
+| `InputDesign.Primary` | `'primary'` | Основной стиль |
+| `InputDesign.Success` | `'success'` | Стиль успеха (зеленый) |
+| `InputDesign.Warning` | `'warning'` | Стиль предупреждения (оранжевый) |
+| `InputDesign.Danger` | `'danger'` | Стиль ошибки (красный) |
+
+## Примеры использования
+
+### Базовый пример
+
+```vue
+<Input
+  v-model="value"
+  :size="InputSize.Md"
+  :design="InputDesign.Default"
+  placeholder="Введите текст"
+/>
+```
+
+### Различные размеры
+
+```vue
+<Input v-model="value1" :size="InputSize.Xs" placeholder="XS размер" />
+<Input v-model="value2" :size="InputSize.Sm" placeholder="SM размер" />
+<Input v-model="value3" :size="InputSize.Md" placeholder="MD размер" />
+<Input v-model="value4" :size="InputSize.Lg" placeholder="LG размер" />
+```
+
+### Различные стили
+
+```vue
+<!-- Default -->
+<Input
+  v-model="defaultValue"
+  :design="InputDesign.Default"
+  placeholder="Обычное поле"
+/>
+
+<!-- Success -->
+<Input
+  v-model="successValue"
+  :design="InputDesign.Success"
+  placeholder="Успешная валидация"
+/>
+
+<!-- Warning -->
+<Input
+  v-model="warningValue"
+  :design="InputDesign.Warning"
+  placeholder="Предупреждение"
+/>
+
+<!-- Danger -->
+<Input
+  v-model="errorValue"
+  :design="InputDesign.Danger"
+  placeholder="Ошибка валидации"
+/>
+```
+
+## Экспортируемые модули
+
+- `Vue` - Vue компоненты для работы с полями ввода
+- `InputSize` - константы размеров
+- `InputDesign` - константы стилей оформления
+
+## Интеграция
+
+Компонент является частью UI системы Bitrix и следует общим принципам дизайна платформы. Для использования необходимо подключить расширение `ui.system.input` через систему управления расширениями Bitrix.
+
+```php
+\Bitrix\Main\UI\Extension::load('ui.system.input');
+```
\ No newline at end of file
diff --git a/pages/ui/system-label.md b/pages/ui/system-label.md
new file mode 100644
index 0000000..982690c
--- /dev/null
+++ b/pages/ui/system-label.md
@@ -0,0 +1,161 @@
+# Label
+
+## Описание
+
+Компонент `Label` используется для отображения меток (лейблов) с текстом и/или иконкой. Поддерживает различные размеры, стили, цветовые схемы и может содержать как текст, так и иконки.
+
+**Расположение:** `/ui/install/js/ui/system/label/src`
+
+## Импорт компонента
+
+```javascript
+import { Label, LabelStyle, LabelSize, LabelIcon } from 'ui.system.label.vue';
+```
+
+## Основные свойства
+
+### size (размер)
+
+Определяет размер компонента.
+
+**Тип:** `String`  
+**По умолчанию:** `LabelSize.Md`
+
+| Константа | Значение | Описание |
+|-----------|----------|----------|
+| `LabelSize.Lg` | `'lg'` | Большой размер |
+| `LabelSize.Md` | `'md'` | Средний размер |
+| `LabelSize.Sm` | `'sm'` | Малый размер |
+
+### style (стиль)
+
+Определяет цветовую схему и визуальный стиль компонента.
+
+**Тип:** `String`  
+**По умолчанию:** `LabelStyle.Primary`
+
+| Константа | Значение | Описание |
+|-----------|----------|----------|
+| `LabelStyle.Primary` | `'primary'` | Основной стиль (синий) |
+| `LabelStyle.Secondary` | `'secondary'` | Второстепенный стиль (серый) |
+| `LabelStyle.Success` | `'success'` | Стиль успеха (зеленый) |
+| `LabelStyle.Danger` | `'danger'` | Стиль опасности (красный) |
+| `LabelStyle.Warning` | `'warning'` | Стиль предупреждения (оранжевый) |
+| `LabelStyle.Info` | `'info'` | Информационный стиль (голубой) |
+| `LabelStyle.Light` | `'light'` | Светлый стиль |
+| `LabelStyle.Dark` | `'dark'` | Темный стиль |
+
+### icon (иконка)
+
+Определяет иконку, отображаемую в компоненте.
+
+**Тип:** `String`  
+**По умолчанию:** `null`
+
+Константы иконок доступны через `LabelIcon`:
+
+| Константа | Значение | Описание |
+|-----------|----------|----------|
+| `LabelIcon.Check` | `'check'` | Иконка галочки |
+| `LabelIcon.Cross` | `'cross'` | Иконка крестика |
+| `LabelIcon.Info` | `'info'` | Информационная иконка |
+| `LabelIcon.Warning` | `'warning'` | Иконка предупреждения |
+
+### text (текст)
+
+Текст внутри компонента.
+
+**Тип:** `String`  
+**По умолчанию:** `''`
+
+## Примеры использования
+
+### Базовый пример
+
+```vue
+<Label
+  text="Метка"
+  :size="LabelSize.Md"
+  :style="LabelStyle.Primary"
+/>
+```
+
+### С иконкой
+
+```vue
+<Label
+  text="Успешно"
+  :icon="LabelIcon.Check"
+  :style="LabelStyle.Success"
+/>
+```
+
+### Различные стили
+
+```vue
+<!-- Primary -->
+<Label
+  text="Основной"
+  :style="LabelStyle.Primary"
+/>
+
+<!-- Success -->
+<Label
+  text="Успех"
+  :style="LabelStyle.Success"
+/>
+
+<!-- Warning -->
+<Label
+  text="Предупреждение"
+  :style="LabelStyle.Warning"
+/>
+
+<!-- Danger -->
+<Label
+  text="Ошибка"
+  :style="LabelStyle.Danger"
+/>
+```
+
+### Различные размеры
+
+```vue
+<Label text="Малый" :size="LabelSize.Sm" />
+<Label text="Средний" :size="LabelSize.Md" />
+<Label text="Большой" :size="LabelSize.Lg" />
+```
+
+### Комбинация параметров
+
+```vue
+<Label
+  text="Важно"
+  :icon="LabelIcon.Warning"
+  :size="LabelSize.Lg"
+  :style="LabelStyle.Warning"
+/>
+```
+
+## TypeScript типы
+
+```typescript
+import type { LabelProps } from 'ui.system.label';
+```
+
+### LabelProps
+
+Интерфейс свойств компонента Label.
+
+## Экспортируемые модули
+
+- `Vue` - Vue компоненты
+- `Label` - основной компонент
+- `LabelStyle` - константы стилей
+- `LabelSize` - константы размеров
+- `LabelIcon` - константы иконок
+- `LabelProps` - TypeScript тип свойств
+
+## Использование в проекте
+
+Компонент автоматически регистрируется при подключении extension'а `ui.system.label` и доступен для использования в Vue-приложениях через импорт из `ui.system.label.vue`.
\ No newline at end of file
diff --git a/pages/ui/system-menu-vue.md b/pages/ui/system-menu-vue.md
new file mode 100644
index 0000000..00bf8be
--- /dev/null
+++ b/pages/ui/system-menu-vue.md
@@ -0,0 +1,142 @@
+# BMenu
+
+## Описание
+
+Компонент `BMenu` — это декларативная Vue-обёртка над системным JavaScript-модулем `ui.system.menu`. Он упрощает создание и управление выпадающими меню в Vue-приложениях.
+
+Основной принцип работы заключается в том, что меню создаётся и отображается при монтировании компонента (`mounted`) и уничтожается при его размонтировании (`unmounted`). Поэтому для управления видимостью меню рекомендуется использовать директиву `v-if`.
+
+**Расположение:** `/ui/install/js/ui/system/menu/vue/src`
+
+## Импорт компонента
+
+```javascript
+import { BMenu } from 'ui.system.menu.vue';
+import type { MenuOptions, MenuItem } from 'ui.system.menu';
+```
+
+## Основные свойства
+
+### id
+
+Уникальный идентификатор меню.
+
+**Тип:** `String`
+**По умолчанию:** `ui-vue3-menu-` со случайной строкой.
+
+### options
+
+Основной объект с настройками меню, который передаётся в `ui.system.menu`.
+
+**Тип:** `MenuOptions`
+**Обязательный:** `true`
+
+#### Структура `MenuOptions`
+
+| Свойство | Тип | Описание |
+|---|---|---|
+| `bindElement` | `HTMLElement` | **Обязательно.** Элемент, к которому будет привязано меню. |
+| `items` | `MenuItem[]` | Массив объектов, описывающих пункты меню. |
+| `offsetLeft` | `Number` | Смещение меню по горизонтали относительно `bindElement`. |
+| `offsetTop` | `Number` | Смещение меню по вертикали относительно `bindElement`. |
+| `angle` | `Boolean` \| `Object` | Отображать ли "стрелку" у меню. По умолчанию `false`. |
+| `fixed` | `Boolean` | Фиксированное позиционирование меню. По умолчанию `false`. |
+| `cacheable` | `Boolean` | Следует ли кешировать меню. Для Vue-компонента по умолчанию `false`. |
+
+#### Структура `MenuItem`
+
+| Свойство | Тип | Описание |
+|---|---|---|
+| `title` | `String` | Текст пункта меню. |
+| `onClick` | `Function` | Обработчик клика по пункту меню. |
+| `delimiter` | `Boolean` | Если `true`, пункт будет отображаться как разделитель. |
+| `href` | `String` | URL для создания ссылки. |
+| `target` | `String` | Атрибут `target` для ссылки (например, `_blank`). |
+| `disabled` | `Boolean` | Делает пункт меню неактивным. |
+
+## События
+
+### close
+
+Событие генерируется при закрытии меню (например, при клике вне его области). Используется для управления состоянием, которое контролирует директиву `v-if`.
+
+## Пример использования
+
+```javascript
+import { BMenu } from 'ui.system.menu.vue';
+import type { MenuOptions } from 'ui.system.menu';
+
+// @vue/component
+export const MyComponentWithMenu = {
+	name: 'MyComponentWithMenu',
+	components: {
+		BMenu,
+	},
+	data()
+	{
+		return {
+			isMenuShown: false,
+		};
+	},
+	computed: {
+		menuOptions(): MenuOptions
+		{
+			return {
+				bindElement: this.$refs.myButton,
+				items: [
+					{
+						title: 'Пункт 1',
+						onClick: () => console.log('Нажат пункт 1'),
+					},
+					{
+						title: 'Пункт 2',
+						onClick: () => console.log('Нажат пункт 2'),
+					},
+					{
+						delimiter: true,
+					},
+					{
+						title: 'Ссылка на сайт',
+						href: 'https://bitrix24.ru',
+						target: '_blank',
+					},
+				],
+			};
+		},
+	},
+	template: `
+		<div>
+			<button ref="myButton" @click="isMenuShown = true">Показать меню</button>
+			<BMenu
+				v-if="isMenuShown"
+				:options="menuOptions"
+				@close="isMenuShown = false"
+			/>
+		</div>
+	`,
+};
+```
+
+## TypeScript типы
+
+Для работы с типами импортируйте их из `ui.system.menu`.
+
+```typescript
+import type { MenuOptions, MenuItem } from 'ui.system.menu';
+```
+
+### MenuOptions
+
+Интерфейс объекта настроек для компонента `BMenu`.
+
+### MenuItem
+
+Интерфейс для объекта, описывающего один пункт меню.
+
+## Экспортируемые модули
+
+- `BMenu` — основной Vue-компонент.
+- `Menu` — базовый JavaScript-класс меню (реэкспорт из `ui.system.menu`).
+- `MenuOptions` — TypeScript-тип для опций меню.
+- `MenuItem` — TypeScript-тип для элемента меню.
+- `MenuEvents` — TypeScript-тип для событий меню.
diff --git a/pages/ui/system-menu.md b/pages/ui/system-menu.md
new file mode 100644
index 0000000..f5c6260
--- /dev/null
+++ b/pages/ui/system-menu.md
@@ -0,0 +1,194 @@
+# Menu
+
+## Описание
+
+Компонент `Menu` предназначен для создания и управления всплывающими меню. Он позволяет гибко настраивать пункты, разделы, добавлять иконки, счетчики, подменю и кастомный заголовок.
+
+**Расположение:** `/ui/install/js/ui/system/menu/src`
+
+## Импорт компонента
+
+```javascript
+import { Menu, MenuItemDesign, MenuSectionDesign, MenuRichHeaderDesign } from 'ui.system.menu';
+```
+
+## TypeScript типы
+
+```typescript
+import type { MenuOptions, MenuItemOptions, MenuSectionOptions } from 'ui.system.menu';
+```
+
+## Основные сущности
+
+### Menu
+
+Основной класс для создания и управления меню.
+
+**Конструктор:** `new Menu(options: MenuOptions)`
+
+**Основные методы:**
+- `show(bindElement: HTMLElement)`: Показывает меню, привязанное к `bindElement`.
+- `close()`: Закрывает меню.
+- `destroy()`: Уничтожает экземпляр меню.
+- `updateItems(items: MenuItemOptions[])`: Обновляет пункты меню.
+- `getPopup(): Popup`: Возвращает экземпляр `main.popup`.
+
+### MenuOptions
+
+Объект с настройками для создания меню. Наследует опции `main.popup.PopupOptions`.
+
+| Свойство | Тип | Описание |
+|---|---|---|
+| `items` | `MenuItemOptions[]` | Массив объектов для конфигурации пунктов меню. |
+| `sections` | `MenuSectionOptions[]` | Массив объектов для конфигурации разделов меню. |
+| `richHeader` | `Object` | Конфигурация для "богатого" заголовка. |
+| `closeOnItemClick` | `Boolean` | Закрывать ли меню при клике на пункт. По умолчанию `true`. |
+
+### MenuItemOptions
+
+Объект с настройками для пункта меню.
+
+| Свойство | Тип | Описание |
+|---|---|---|
+| `id` | `String` | Уникальный идентификатор пункта. |
+| `sectionCode` | `String` | Код раздела, к которому относится пункт. |
+| `design` | `String` | Дизайн пункта. См. `MenuItemDesign`. |
+| `title` | `String` | Основной текст пункта. |
+| `subtitle` | `String` | Дополнительный текст (подсказка). |
+| `onClick` | `Function` | Обработчик клика по пункту. |
+| `isSelected` | `Boolean` | Выделен ли пункт как выбранный. |
+| `icon` | `String` | CSS-класс иконки. |
+| `svg` | `SVGElement` | SVG-элемент для иконки. |
+| `subMenu` | `MenuOptions` | Конфигурация для вложенного меню. |
+| `isLocked` | `Boolean` | Отображать ли иконку замка (для платных функций). |
+| `badgeText` | `Object` | Настройки для текстового бейджа. `{ title: string, color: string }` |
+| `counter` | `CounterOptions` | Настройки для счетчика `ui.cnt`. |
+| `extraIcon` | `Object` | Настройки для дополнительной иконки. |
+| `uiButtonOptions`| `ButtonOptions` | Настройки для рендера кнопки `ui.buttons`. |
+
+### MenuSectionOptions
+
+Объект с настройками для раздела меню.
+
+| Свойство | Тип | Описание |
+|---|---|---|
+| `code` | `String` | Уникальный код раздела. |
+| `title` | `String` | Заголовок раздела. |
+| `design` | `String` | Дизайн раздела. См. `MenuSectionDesign`. |
+
+### Rich Header
+
+Объект `richHeader` в `MenuOptions` для настройки кастомного заголовка.
+
+| Свойство | Тип | Описание |
+|---|---|---|
+| `title` | `String` | Заголовок. |
+| `subtitle` | `String` | Подзаголовок. |
+| `icon` | `String` | CSS-класс иконки. |
+| `design` | `String` | Дизайн. См. `MenuRichHeaderDesign`. |
+| `onClick` | `Function` | Обработчик клика по заголовку. |
+
+## Константы дизайна
+
+### MenuItemDesign
+
+Определяет внешний вид пункта меню.
+
+| Константа | Значение | Описание |
+|---|---|---|
+| `Default` | `'default'` | Стандартный вид |
+| `Accent1` | `'accent-1'` | Акцентный (синий) |
+| `Accent2` | `'accent-2'` | Акцентный (зеленый) |
+| `Alert` | `'alert'` | Для опасных действий (красный) |
+| `Copilot` | `'copilot'` | Стиль для AI-функций |
+| `Disabled` | `'disabled'` | Неактивное состояние |
+
+### MenuSectionDesign
+
+Определяет внешний вид разделителя секции.
+
+| Константа | Значение | Описание |
+|---|---|---|
+| `Default` | `'default'` | Стандартный разделитель |
+| `Accent` | `'accent'` | Акцентный разделитель |
+
+### MenuRichHeaderDesign
+
+Определяет дизайн "богатого" заголовка.
+
+| Константа | Значение | Описание |
+|---|---|---|
+| `Default` | `'default'` | Стандартный дизайн |
+| `Copilot` | `'copilot'` | Стиль для AI-функций |
+
+## Примеры использования
+
+### Базовое меню
+
+```javascript
+const menu = new Menu({
+    bindElement: document.getElementById('menu-button'),
+    items: [
+        {
+            id: 'profile',
+            title: 'Профиль',
+            onClick: () => console.log('Профиль'),
+        },
+        {
+            id: 'settings',
+            title: 'Настройки',
+            onClick: () => console.log('Настройки'),
+        },
+        null, // Рендерится как разделитель
+        {
+            id: 'logout',
+            title: 'Выйти',
+            design: MenuItemDesign.Alert,
+            onClick: () => console.log('Выйти'),
+        },
+    ],
+});
+
+menu.show();
+```
+
+### Меню с секциями и подменю
+
+```javascript
+const menu = new Menu({
+    bindElement: document.getElementById('menu-button'),
+    sections: [
+        { code: 'main', title: 'Основное' },
+        { code: 'extra', title: 'Дополнительно', design: MenuSectionDesign.Accent },
+    ],
+    items: [
+        {
+            sectionCode: 'main',
+            id: 'edit',
+            title: 'Редактировать',
+            icon: 'ui-icon-set --pencil-40',
+        },
+        {
+            sectionCode: 'main',
+            id: 'copy',
+            title: 'Копировать',
+            icon: 'ui-icon-set --copy-2',
+            subMenu: {
+                closeOnItemClick: true,
+                items: [
+                    { id: 'copy-link', title: 'Копировать ссылку' },
+                    { id: 'copy-text', title: 'Копировать текст' },
+                ],
+            },
+        },
+        {
+            sectionCode: 'extra',
+            id: 'export',
+            title: 'Экспорт',
+            subtitle: 'Сохранить в файл',
+        },
+    ],
+});
+
+menu.show();
+```
\ No newline at end of file
diff --git a/pages/ui/system.typography.md b/pages/ui/system.typography.md
new file mode 100644
index 0000000..d502d25
--- /dev/null
+++ b/pages/ui/system.typography.md
@@ -0,0 +1,239 @@
+# Typography
+
+## Описание
+
+Расширение `ui.system.typography` предоставляет компоненты для работы с заголовками и текстом. Оно включает в себя как нативные JavaScript-классы для создания HTML-элементов, так и Vue-компоненты для декларативного использования.
+
+**Расположение:** `/ui/install/js/ui/system/typography/src`
+
+## Импорт
+
+### JavaScript
+
+```javascript
+import { Headline, Text } from 'ui.system.typography';
+```
+
+### Vue
+
+```javascript
+import { Headline, Text } from 'ui.system.typography.vue';
+```
+
+---
+
+# Headline (Заголовок)
+
+Компонент для отображения заголовков разных уровней.
+
+## Основные свойства
+
+### size (размер)
+
+Определяет размер заголовка.
+
+**Тип:** `String`
+**По умолчанию:** `'md'`
+
+| Значение | Описание |
+|----------|----------|
+| `'xl'`   | Очень большой |
+| `'lg'`   | Большой |
+| `'md'`   | Средний |
+| `'sm'`   | Малый |
+| `'xs'`   | Очень малый |
+
+### accent (акцент)
+
+Выделяет заголовок акцентным цветом.
+
+**Тип:** `Boolean`
+**По умолчанию:** `false`
+
+### align (выравнивание)
+
+Определяет горизонтальное выравнивание текста.
+
+**Тип:** `String`
+**По умолчанию:** `'left'`
+**Варианты:** `'left'`, `'center'`, `'right'`, `'justify'`
+
+### transform (трансформация)
+
+Определяет регистр текста.
+
+**Тип:** `String`
+**По умолчанию:** `null`
+**Варианты:** `'uppercase'`, `'lowercase'`, `'capitalize'`
+
+### wrap (перенос)
+
+Управляет переносом длинного текста.
+
+**Тип:** `String`
+**По умолчанию:** `null`
+**Варианты:** `'truncate'` (обрезает с многоточием), `'break-words'` (переносит по словам), `'break-all'` (переносит по символам)
+
+### tag (HTML-тег)
+
+Позволяет задать собственный HTML-тег для элемента.
+
+**Тип:** `String`
+**По умолчанию:** `'div'`
+
+## Примеры использования
+
+### JavaScript
+
+```javascript
+import { Headline } from 'ui.system.typography';
+
+const title = Headline.render('Мой заголовок', {
+  size: 'lg',
+  accent: true,
+  align: 'center',
+});
+
+document.body.append(title);
+```
+
+### Vue
+
+```vue
+import { Headline } from 'ui.system.typography.vue';
+
+export const MyComponent = {
+	components: {
+		Headline,
+	},
+	template: `
+		<div>
+			<Headline size="lg" class="form-title --padding">
+				Мой заголовок
+			</Headline>
+		</div>
+	`,
+};
+```
+
+---
+
+# Text (Текст)
+
+Компонент для отображения текстовых блоков.
+
+## Основные свойства
+
+### size (размер)
+
+Определяет размер текста.
+
+**Тип:** `String`
+**По умолчанию:** `'md'`
+
+| Значение | Описание |
+|----------|----------|
+| `'2xl'`  | Наибольший |
+| `'xl'`   | Очень большой |
+| `'lg'`   | Большой |
+| `'md'`   | Средний |
+| `'sm'`   | Малый |
+| `'xs'`   | Очень малый |
+| `'2xs'`  | Наименьший |
+| `'3xs'`  | Самый маленький |
+| `'4xs'`  | Микроскопический |
+
+### accent (акцент)
+
+Выделяет текст акцентным цветом.
+
+**Тип:** `Boolean`
+**По умолчанию:** `false`
+
+### align (выравнивание)
+
+Определяет горизонтальное выравнивание текста.
+
+**Тип:** `String`
+**По умолчанию:** `'left'`
+**Варианты:** `'left'`, `'center'`, `'right'`, `'justify'`
+
+### transform (трансформация)
+
+Определяет регистр текста.
+
+**Тип:** `String`
+**По умолчанию:** `null`
+**Варианты:** `'uppercase'`, `'lowercase'`, `'capitalize'`
+
+### wrap (перенос)
+
+Управляет переносом длинного текста.
+
+**Тип:** `String`
+**По умолчанию:** `null`
+**Варианты:** `'truncate'`, `'break-words'`, `'break-all'`
+
+### tag (HTML-тег)
+
+Позволяет задать собственный HTML-тег для элемента.
+
+**Тип:** `String`
+**По умолчанию:** `'span'`
+
+## Примеры использования
+
+### JavaScript
+
+```javascript
+import { Text } from 'ui.system.typography';
+
+const paragraph = Text.render('Это простой текстовый блок.', {
+  size: 'md',
+  align: 'justify',
+});
+
+document.body.append(paragraph);
+```
+
+### Vue
+
+```vue
+import { Text } from 'ui.system.typography.vue';
+
+export const MyComponent = {
+components: {
+    Text,
+},
+template: `
+  <Text
+      size="md"
+      align="justify"
+  >
+    Это простой текстовый блок.
+  </Text>
+`,
+};
+```
+
+## TypeScript типы
+
+Для указания типов опций можно использовать следующие импорты:
+
+```typescript
+import type { DisplayTitleOptions, TextOptions } from 'ui.system.typography';
+```
+
+### DisplayTitleOptions
+
+Интерфейс свойств для компонента `Headline`.
+
+### TextOptions
+
+Интерфейс свойств для компонента `Text`.
+
+## Экспортируемые модули
+
+- `Headline`: JS-класс и Vue-компонент для заголовков.
+- `Text`: JS-класс и Vue-компонент для текста.
+- `Vue`: Объект, содержащий все Vue-компоненты (`Vue.Headline`, `Vue.Text`).
\ No newline at end of file
diff --git a/pages/ui/vue.md b/pages/ui/vue.md
new file mode 100644
index 0000000..0ce7099
--- /dev/null
+++ b/pages/ui/vue.md
@@ -0,0 +1,245 @@
+# Архитектура Vue приложений в Bitrix24
+
+## Описание
+
+Архитектурный подход к созданию сложных SPA приложений в среде Bitrix24 на базе **Vue 3** и **Vuex**.  
+Подход основан на четком разделении ответственности:  
+- **Model** (данные и состояние)
+- **Provider** (взаимодействие с API)
+- **Component** (отображение)
+- **Application** (сборка и точка входа)
+
+## Структура директорий
+
+```text
+local/js/module_name/
+├── application/       # Точки входа приложений (App components)
+├── component/         # Общие UI компоненты (UI Kit модуля)
+├── const/             # Константы и словари
+├── core/              # Ядро: инициализация Store, Pull-клиент
+├── lib/               # Вспомогательные утилиты (напр. API Client)
+├── model/             # Vuex модули (state, getters, mutations)
+└── provider/          # Сервисы для работы с API (fetching data)
+```
+
+## Основные сущности
+
+### 1. Application (Приложение)
+
+Корневой компонент приложения. Отвечает за верстку макета и подключение основных видов (Views). Обычно не содержит сложной бизнес-логики, делегируя её в дочерние компоненты или Store.
+
+**Пример:** `application/answer-card/src/app.js`
+
+```javascript
+import { ViewMode } from './enum/view-mode';
+import { QuestionsView } from './view/questions-view';
+import { AnswerView } from './view/answer-view';
+
+// @vue/component
+export const App = {
+	components: {
+		QuestionsView,
+		AnswerView,
+	},
+	props: {
+		relationId: { type: Number, default: 0 },
+		mode: { type: String, default: ViewMode.FILL },
+	},
+	setup() {
+		return { ViewMode };
+	},
+	computed: {
+		isViewMode() {
+			return this.mode === ViewMode.VIEW;
+		},
+	},
+	template: `
+		<div class="performan__answer-card-app">
+			<AnswerView v-if="isViewMode" :relationId="relationId" />
+			<QuestionsView v-else :relationId="relationId" />
+		</div>
+	`,
+};
+```
+
+### 2. Component (Компонент)
+
+Переиспользуемые UI элементы. Принимают данные через `props` и сообщают о действиях через `emit`.
+
+**Пример:** `component/ui-date-picker/src/ui-date-picker.js`
+
+```javascript
+import { DatePicker } from 'ui.date-picker';
+import './style.css';
+
+// @vue/component
+export const UiDatePicker = {
+	name: 'UiDatePicker',
+	props: {
+		date: { type: String, required: true },
+	},
+	emits: ['update:date'],
+	mounted() {
+		this.initPicker();
+	},
+	methods: {
+		initPicker() {
+			new DatePicker({
+				targetNode: this.$refs.container,
+				onSelect: (date) => this.$emit('update:date', date)
+			});
+		}
+	},
+	template: `
+		<div ref="container" class="ui-date-picker-wrapper">
+			{{ date }}
+		</div>
+	`,
+};
+```
+
+### 3. Provider (Сервис)
+
+Слой для общения с Бэкендом.  
+- Выполняет Ajax запросы.
+- Преобразует DTO (от сервера) в Model (для фронтенда).
+- Сохраняет данные в Vuex Store.
+- Содержит логику обработки pull-событий.
+- Реализован как Singleton.
+
+**Пример:** `provider/service/campaign/src/campaign.js`
+
+```javascript
+import { apiClient } from 'performan.lib.api-client';
+import { Core } from 'performan.core';
+import { Models } from 'performan.const';
+
+export const campaignService = new class {
+	get $store() {
+		return Core.getStore();
+	}
+
+	async getById(id) {
+		try {
+			// 1. Запрос к API
+			const data = await apiClient.post('Campaign.get', { id });
+			
+			// 2. Сохранение в Store (нормализация данных)
+			await this.$store.dispatch(`${Models.Campaigns}/upsert`, data);
+			
+			return data;
+		} catch (error) {
+			console.error('Campaign load error', error);
+			return null;
+		}
+	}
+}();
+```
+
+### 4. Model (Vuex Модуль)
+
+Хранилище данных. Использует Vuex 4 (в составе `ui.vue3.vuex`).
+Рекомендуется хранить данные в плоском виде (normalized), используя `Map` или объекты с ID в качестве ключей.
+
+**Пример использования в компоненте:**
+
+```javascript
+import { mapGetters } from 'ui.vue3.vuex';
+import { Models } from 'performan.const';
+
+export const UserList = {
+	computed: {
+		...mapGetters({
+			users: `${Models.Users}/getAll`, // Получение данных из стора
+		}),
+	},
+	template: `
+		<div v-for="user in users" :key="user.id">
+			{{ user.name }}
+		</div>
+	`
+};
+```
+
+## Интеграция в PHP компонент
+
+Пример того, как подключить и инициализировать Vue приложение внутри шаблона Bitrix компонента (`template.php`).
+
+### 1. Шаблон компонента (template.php)
+
+В файле `template.php` создается контейнер для приложения, подключается расширение и вызывается JS инициализатор.
+
+```php
+<?php
+if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) {
+	die();
+}
+
+use Bitrix\Main\UI\Extension;
+use Bitrix\Main\Web\Json;
+
+/** @var array $arResult */
+/** @var string $templateFolder */
+
+// Подключение расширения с приложением
+Extension::load('module.application.my-app');
+
+// Уникальный ID для контейнера
+$containerId = 'my-app-container-' . $arResult['ID'];
+?>
+
+<div id="<?= $containerId ?>"></div>
+
+<script>
+	BX.ready(function() {
+		// Инициализация приложения с передачей параметров из PHP
+		BX.Module.Application.MyApp.create(
+			document.getElementById('<?= $containerId ?>'),
+			<?= Json::encode([
+				'id' => $arResult['ID'],
+				'initialData' => $arResult['DATA'],
+				'mode' => 'view'
+			]) ?>
+		);
+	});
+</script>
+```
+
+### 2. Точка входа JS
+
+В JavaScript файле расширения (обычно в корне `src/`) создается метод для монтирования приложения.
+
+```javascript
+import { BitrixVue } from 'ui.vue3';
+import { App } from './app';
+import { Store } from './store'; // Ваш Vuex store
+
+export class MyApp
+{
+	static create(container, options = {})
+	{
+		// Создание экземпляра Vue приложения
+		const app = BitrixVue.createApp(App, {
+			id: options.id,
+			mode: options.mode,
+			// Передача начальных данных через props
+			initialData: options.initialData 
+		});
+
+		// Подключение Vuex Store
+		app.use(Store);
+
+		// Монтирование в DOM элемент
+		app.mount(container);
+		
+		return app;
+	}
+}
+```
+
+## Рекомендации для AI агентов
+
+1.  **Не используйте прямые мутации DOM.** Всегда используйте реактивность Vue.
+2.  **Разделяйте логику.** API запросы — в `Provider`, состояние — в `Model` (Store), верстка — в `Component`.
+3.  **Импорты.** Используйте алиасы модулей Bitrix (напр. `import { ... } from 'module.namespace'`).
+4.  **Типизация.** Если доступен FlowJs или TypeScript, используйте интерфейсы для DTO и Моделей.
diff --git a/pages/ui/vue3-components-button.md b/pages/ui/vue3-components-button.md
new file mode 100644
index 0000000..3dc123d
--- /dev/null
+++ b/pages/ui/vue3-components-button.md
@@ -0,0 +1,352 @@
+# Button
+
+## Описание
+
+Компонент `Button` представляет собой Vue 3 обёртку для UI-кнопок Bitrix. Поддерживает различные размеры, состояния, цветовые схемы, иконки, счётчики и другие визуальные эффекты.
+
+**Расположение:** `/ui/install/js/ui/vue3/components/button/src`
+
+## Импорт компонента
+
+```javascript
+import { 
+  Button, 
+  ButtonColor, 
+  ButtonSize, 
+  ButtonIcon, 
+  ButtonState,
+  AirButtonStyle,
+  ButtonCounterColor,
+  ButtonTag
+} from 'ui.vue3.components.button';
+```
+
+## Основные свойства
+
+### text (текст)
+
+Текст на кнопке.
+
+**Тип:** `String`  
+**По умолчанию:** `''`
+
+### size (размер)
+
+Определяет размер кнопки.
+
+**Тип:** `String`  
+**По умолчанию:** `undefined`
+
+Доступные значения из `ButtonSize`:
+- `ButtonSize.EXTRA_SMALL` - очень малый размер
+- `ButtonSize.SMALL` - малый размер
+- `ButtonSize.MEDIUM` - средний размер
+- `ButtonSize.LARGE` - большой размер
+
+### state (состояние)
+
+Определяет визуальное состояние кнопки.
+
+**Тип:** `String`  
+**По умолчанию:** `undefined`
+
+Доступные значения из `ButtonState`:
+- `ButtonState.HOVER` - состояние наведения
+- `ButtonState.ACTIVE` - активное состояние
+- `ButtonState.DISABLED` - отключенное состояние
+- `ButtonState.WAITING` - состояние ожидания
+
+### style (стиль)
+
+Определяет цветовую схему кнопки в стиле Air Design.
+
+**Тип:** `String`  
+**По умолчанию:** `null`
+
+Доступные значения из `AirButtonStyle`.
+
+### disabled (отключена)
+
+Отключает кнопку.
+
+**Тип:** `Boolean`  
+**По умолчанию:** `false`
+
+### loading (загрузка)
+
+Переводит кнопку в состояние загрузки.
+
+**Тип:** `Boolean`  
+**По умолчанию:** `false`
+
+### dropdown (выпадающее меню)
+
+Добавляет индикатор выпадающего меню.
+
+**Тип:** `Boolean`  
+**По умолчанию:** `false`
+
+### wide (широкая)
+
+Делает кнопку на всю ширину контейнера.
+
+**Тип:** `Boolean`  
+**По умолчанию:** `false`
+
+### collapsed (свёрнутая)
+
+Показывает только иконку, скрывая текст.
+
+**Тип:** `Boolean`  
+**По умолчанию:** `false`
+
+### noCaps (без капитализации)
+
+Отключает автоматическое преобразование текста в верхний регистр.
+
+**Тип:** `Boolean`  
+**По умолчанию:** `true`
+
+## Иконки
+
+### leftIcon
+
+Иконка слева от текста.
+
+**Тип:** `String`  
+**По умолчанию:** `null`
+
+Принимает значения из:
+- `ButtonIcon` - стандартные иконки кнопок
+- `IconSet` (из `ui.icon-set.api.core`) - набор иконок
+- `Outline` (из `ui.icon-set.api.core`) - контурные иконки
+
+### rightIcon
+
+Иконка справа от текста.
+
+**Тип:** `String`  
+**По умолчанию:** `null`
+
+### collapsedIcon
+
+Иконка для свёрнутого состояния кнопки.
+
+**Тип:** `String`  
+**По умолчанию:** `null`
+
+## Счётчики
+
+### leftCounterValue
+
+Числовое значение для счётчика слева.
+
+**Тип:** `Number`  
+**По умолчанию:** `0`
+
+### leftCounterColor
+
+Цвет счётчика слева.
+
+**Тип:** `String`  
+**По умолчанию:** `null`
+
+Доступные значения из `ButtonCounterColor`.
+
+### rightCounterValue
+
+Числовое значение для счётчика справа.
+
+**Тип:** `Number`  
+**По умолчанию:** `0`
+
+### rightCounterColor
+
+Цвет счётчика справа.
+
+**Тип:** `String`  
+**По умолчанию:** `null`
+
+## Дополнительные свойства
+
+### type
+
+HTML тип кнопки.
+
+**Тип:** `String`  
+**По умолчанию:** `'button'`
+
+Допустимые значения: `'button'`, `'submit'`, `'reset'`
+
+### link
+
+URL для создания кнопки-ссылки.
+
+**Тип:** `String`  
+**По умолчанию:** `''`
+
+### tag
+
+HTML тег для рендеринга кнопки.
+
+**Тип:** `String`  
+**По умолчанию:** `''`
+
+Доступные значения из `ButtonTag`.
+
+### dataset
+
+HTML data-атрибуты для кнопки.
+
+**Тип:** `Object`  
+**По умолчанию:** `{}`
+
+### removeLeftCorners
+
+Убирает скругление левых углов.
+
+**Тип:** `Boolean`  
+**По умолчанию:** `false`
+
+### removeRightCorners
+
+Убирает скругление правых углов.
+
+**Тип:** `Boolean`  
+**По умолчанию:** `false`
+
+### shimmer
+
+Включает эффект мерцания (shimmer effect).
+
+**Тип:** `Boolean`  
+**По умолчанию:** `false`
+
+## События
+
+### @click
+
+Срабатывает при клике на кнопку.
+
+```vue
+<Button @click="handleClick" />
+```
+
+### @clickSecondary
+
+Срабатывает при вторичном клике.
+
+```vue
+<Button @clickSecondary="handleSecondaryClick" />
+```
+
+## Примеры использования
+
+### Базовый пример
+
+```vue
+<Button 
+  text="Сохранить"
+  :size="ButtonSize.MEDIUM"
+  @click="save"
+/>
+```
+
+### Кнопка с иконкой
+
+```vue
+<Button 
+  text="Добавить"
+  :leftIcon="ButtonIcon.ADD"
+  @click="add"
+/>
+```
+
+### Кнопка в состоянии загрузки
+
+```vue
+<Button 
+  text="Отправка..."
+  :loading="isLoading"
+  :disabled="isLoading"
+/>
+```
+
+### Кнопка со счётчиками
+
+```vue
+<Button 
+  text="Уведомления"
+  :leftCounterValue="5"
+  :leftCounterColor="ButtonCounterColor.SUCCESS"
+/>
+```
+
+### Широкая кнопка с эффектом мерцания
+
+```vue
+<Button 
+  text="Загрузка данных"
+  :wide="true"
+  :shimmer="true"
+/>
+```
+
+### Свёрнутая кнопка (только иконка)
+
+```vue
+<Button 
+  :collapsed="true"
+  :collapsedIcon="ButtonIcon.SETTINGS"
+  @click="openSettings"
+/>
+```
+
+### Кнопка-ссылка
+
+```vue
+<Button 
+  text="Перейти"
+  link="/dashboard"
+  :tag="ButtonTag.LINK"
+/>
+```
+
+### Кнопка с выпадающим меню
+
+```vue
+<Button 
+  text="Действия"
+  :dropdown="true"
+  @click="toggleMenu"
+/>
+```
+
+### Группа кнопок без скругления
+
+```vue
+<Button 
+  text="Первая"
+  :removeRightCorners="true"
+/>
+<Button 
+  text="Вторая"
+  :removeLeftCorners="true"
+  :removeRightCorners="true"
+/>
+<Button 
+  text="Третья"
+  :removeLeftCorners="true"
+/>
+```
+
+## Экспортируемые модули
+
+- `Button` - основной Vue-компонент кнопки
+- `ButtonColor` - константы цветов кнопок
+- `ButtonSize` - константы размеров кнопок
+- `ButtonIcon` - константы стандартных иконок
+- `ButtonState` - константы состояний кнопок
+- `AirButtonStyle` - константы стилей Air Design
+- `ButtonCounterColor` - константы цветов счётчиков
+- `ButtonTag` - константы HTML-тегов для кнопок
\ No newline at end of file