@dxtmisha/wiki 0.39.4 → 0.39.5

package/src/media/mdx/Input/input.ru.mdx

@@ -0,0 +1,71 @@
+Компонент текстового поля ввода с поддержкой валидации, маскирования и форматирования.
+
+Input предоставляет гибкий интерфейс для ввода данных различных типов: текст, числа, email, пароли, телефоны, URL, даты и время. Компонент автоматически применяет соответствующую валидацию, форматирование и клавиатуру в зависимости от указанного типа. Поддерживает маскирование для структурированного ввода (телефоны, даты, кастомные паттерны), форматирование валют и чисел, управление видимостью пароля и интеграцию с компонентом Field для единообразной стилизации.
+
+**Основные возможности:**
+
+- Множественные типы ввода (text, number, email, password, tel, url, date, time и другие)
+- Встроенная валидация с пользовательскими сообщениями
+- Маскирование для форматированного ввода
+- Форматирование валюты и чисел с локализацией
+- Переключатель видимости пароля
+- Префикс и суффикс для дополнительного контекста
+- Счётчик символов для ограничения длины
+- Стрелки навигации для числовых значений
+- Поддержка автозаполнения и проверки орфографии
+- Кнопка очистки значения
+
+**Типичные сценарии использования:**
+
+- Формы регистрации и авторизации
+- Поля ввода контактных данных (email, телефон)
+- Числовые поля (количество, цена, возраст)
+- Поля для ввода паролей с переключением видимости
+- Поля поиска с быстрой очисткой
+- Форматированный ввод (телефоны, даты, карты)
+- Валютные поля с автоматическим форматированием
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const email = ref('')
+const password = ref('')
+
+const handleInput = (event, validation) => {
+  console.log('Введённое значение:', validation.value)
+  console.log('Валидно:', validation.status)
+}
+</script>
+
+<template>
+  <div class="form">
+    <Input
+      v-model="email"
+      type="email"
+      label="Email"
+      placeholder="example@mail.com"
+      required
+      @input="handleInput"
+    />
+
+    <Input
+      v-model="password"
+      type="password"
+      label="Пароль"
+      placeholder="Введите пароль"
+      minlength="8"
+      required
+      iconVisibility="visibility"
+      iconVisibilityOff="visibility_off"
+    />
+
+    <Input
+      type="currency"
+      label="Цена"
+      currency="RUB"
+      language="ru-RU"
+    />
+  </div>
+</template>
+```

package/src/media/mdx/Input/mask.en.mdx

@@ -0,0 +1,30 @@
+## Input Masking
+
+Properties `mask`, `maskVisible`, `maskNone`, and `maskAttrs` are designed to manage formatted input with automatic separator insertion and character control at specified positions.
+
+**Properties:**
+
+- `mask` — mask template as a string (e.g., `+1 (***) ***-****`)
+- `maskVisible` — controls placeholder characters display (default `true`)
+- `maskNone` — completely disables the mask
+- `maskAttrs` — object with extended mask settings
+
+Properties work together: `mask` defines the formatting structure, where special character (default `*`) defines positions for digit input, and other characters (spaces, brackets, hyphens) are automatically inserted as fixed separators. `maskVisible` controls the display of unfilled positions, where when set to `true` they are displayed with placeholder characters `_`, and when `false` only entered characters with separators are shown. `maskNone` allows completely disabling masking logic, converting the field to a regular text input. `maskAttrs` provides access to extended settings, allowing configuration of special characters (`special`), regular expressions for validation (`match`), custom placeholder characters (`view`), validation patterns (`pattern`), and rubber groups (`rubber`).
+
+```html
+<script setup>
+import { ref } from 'vue'
+const value = ref('')
+</script>
+
+<template>
+  <!-- US Phone -->
+  <Input v-model="value" type="tel" mask="+1 (###) ###-####" placeholder="+1 (555) 000-0000" label="Phone" />
+
+  <!-- Credit Card -->
+  <Input v-model="value" type="text" mask="#### #### #### ####" placeholder="0000 0000 0000 0000" label="Card" />
+
+  <!-- Without placeholder display -->
+  <Input v-model="value" type="tel" mask="+1 (###) ###-####" :mask-visible="false" label="No placeholder" />
+</template>
+```

package/src/media/mdx/Input/mask.ru.mdx

@@ -0,0 +1,30 @@
+## Маскирование ввода
+
+Свойства `mask`, `maskVisible`, `maskNone` и `maskAttrs` предназначены для управления форматированным вводом с автоматической подстановкой разделителей и контролем символов в заданных позициях.
+
+**Свойства:**
+
+- `mask` — шаблон маски в виде строки (например, `+1 (***) ***-****`)
+- `maskVisible` — управляет отображением символов-заполнителей (по умолчанию `true`)
+- `maskNone` — полностью отключает маску
+- `maskAttrs` — объект с расширенными настройками маски
+
+Свойства работают совместно: `mask` определяет структуру форматирования, где специальный символ (по умолчанию `*`) определяет позиции для ввода цифр, а остальные символы (пробелы, скобки, дефисы) автоматически подставляются как фиксированные разделители. `maskVisible` управляет отображением незаполненных позиций, где при значении `true` они отображаются символами-заполнителями `_`, а при `false` показываются только введённые символы с разделителями. `maskNone` позволяет полностью отключить логику маскирования, превращая поле в обычный текстовый инпут. `maskAttrs` обеспечивает доступ к расширенным настройкам, позволяя настраивать специальные символы (`special`), регулярные выражения для проверки (`match`), кастомные символы-заполнители (`view`), паттерны валидации (`pattern`) и резиновые группы (`rubber`).
+
+```html
+<script setup>
+import { ref } from 'vue'
+const value = ref('')
+</script>
+
+<template>
+  <!-- Телефон США -->
+  <Input v-model="value" type="tel" mask="+1 (###) ###-####" placeholder="+1 (555) 000-0000" label="Телефон" />
+
+  <!-- Кредитная карта -->
+  <Input v-model="value" type="text" mask="#### #### #### ####" placeholder="0000 0000 0000 0000" label="Карта" />
+
+  <!-- Без отображения символов-заполнителей -->
+  <Input v-model="value" type="tel" mask="+1 (###) ###-####" :mask-visible="false" label="Без заполнителя" />
+</template>
+```

package/src/media/mdx/Input/number.en.mdx

@@ -0,0 +1,41 @@
+## Working with Numbers
+
+Properties `type`, `fraction`, `language`, `min`, `max`, `step`, `arrow`, `arrowStep`, and `align` are designed to manage numeric value input and formatting with localization support and interactive control elements.
+
+**Properties:**
+
+- `type` — input type (`number` or `number-format`)
+- `fraction` — number of decimal places (number, `true` for dynamic fractional part)
+- `language` — locale code for formatting (e.g., `ru-RU`, `en-US`)
+- `min` — minimum allowed value
+- `max` — maximum allowed value
+- `step` — step size for keyboard input
+- `arrow` — control arrows type (`auto`, `stepper`, `carousel`, `none`)
+- `arrowStep` — step size for arrow clicks
+- `align` — arrows placement (`left`, `center`, `right`)
+
+Properties work together: `type` defines the base input mode, where `number` activates simple numeric input with basic validation without formatting, and `number-format` enables automatic formatting with thousands separators and decimal places depending on locale. `language` defines regional rules for thousands separators (space, comma, period) and decimal separator (period or comma). Properties `min` and `max` activate built-in range validation. `step` defines increment/decrement magnitude when using arrow keys up/down and Page Up/Down. Properties `arrow` and `arrowStep` add visual control elements (± buttons or < > arrows) with customizable step size, where if `arrowStep` is not specified, `step` value is used. `align` controls arrows placement in the input field.
+
+```html
+<script setup>
+import { ref } from 'vue'
+const value = ref('1234567.89')
+</script>
+
+<template>
+  <!-- Simple numeric input -->
+  <Input v-model="value" type="number" label="Number" />
+
+  <!-- Formatted number with locale -->
+  <Input v-model="value" type="number-format" language="en-US" label="Formatted" />
+
+  <!-- With range constraints -->
+  <Input v-model="value" type="number" :min="0" :max="100" label="From 0 to 100" />
+
+  <!-- With step and stepper arrows -->
+  <Input v-model="value" type="number" arrow="stepper" :step="5" :arrow-step="10" label="Step 5/10" />
+
+  <!-- With center alignment -->
+  <Input v-model="value" type="number-format" align="center" :fraction="2" label="Centered" />
+</template>
+```

package/src/media/mdx/Input/number.ru.mdx

@@ -0,0 +1,41 @@
+## Работа с числами
+
+Свойства `type`, `fraction`, `language`, `min`, `max`, `step`, `arrow`, `arrowStep` и `align` предназначены для управления вводом и форматированием числовых значений с поддержкой локализации и интерактивных элементов управления.
+
+**Свойства:**
+
+- `type` — тип инпута (`number` или `number-format`)
+- `fraction` — количество знаков после запятой (число, `true` для динамической дробной части)
+- `language` — код локали для форматирования (например, `ru-RU`, `en-US`)
+- `min` — минимальное допустимое значение
+- `max` — максимальное допустимое значение
+- `step` — шаг изменения при клавиатурном вводе
+- `arrow` — тип управляющих стрелок (`auto`, `stepper`, `carousel`, `none`)
+- `arrowStep` — шаг изменения при нажатии на стрелки
+- `align` — расположение стрелок (`left`, `center`, `right`)
+
+Свойства работают совместно: `type` определяет базовый режим ввода, где `number` активирует простой числовой ввод с базовой валидацией без форматирования, а `number-format` включает автоматическое форматирование с разделителями тысяч и десятичными знаками в зависимости от локали. `language` определяет региональные правила для разделителей тысяч (пробел, запятая, точка) и десятичного разделителя (точка или запятая). Свойства `min` и `max` активируют встроенную валидацию диапазона. `step` определяет величину инкремента/декремента при использовании клавиш стрелок вверх/вниз и Page Up/Down. Свойства `arrow` и `arrowStep` добавляют визуальные элементы управления (кнопки ± или стрелки < >) с настраиваемым шагом изменения, где если `arrowStep` не указан, используется значение `step`. `align` управляет расположением стрелок в поле ввода.
+
+```html
+<script setup>
+import { ref } from 'vue'
+const value = ref('1234567.89')
+</script>
+
+<template>
+  <!-- Простой числовой ввод -->
+  <Input v-model="value" type="number" label="Число" />
+
+  <!-- Форматированное число с локалью -->
+  <Input v-model="value" type="number-format" language="ru-RU" label="Форматированное" />
+
+  <!-- С ограничениями диапазона -->
+  <Input v-model="value" type="number" :min="0" :max="100" label="От 0 до 100" />
+
+  <!-- С шагом и стрелками stepper -->
+  <Input v-model="value" type="number" arrow="stepper" :step="5" :arrow-step="10" label="Шаг 5/10" />
+
+  <!-- С выравниванием по центру -->
+  <Input v-model="value" type="number-format" align="center" :fraction="2" label="По центру" />
+</template>
+```

package/src/media/mdx/Input/type.en.mdx

@@ -0,0 +1,26 @@
+## Input Field Type
+
+The `type` property defines the type and behavior of the Input field.
+
+**Available values:**
+
+- `'text'` — standard text field (default value)
+- `'search'` — search field with quick clear functionality
+- `'number'` — numeric field with basic number validation
+- `'number-format'` — numeric field with formatting (thousands separators)
+- `'currency'` — field for currency input with currency formatting
+- `'email'` — field for email input with corresponding validation
+- `'password'` — field for password input (hides characters)
+- `'datetime'` — field for date and time input
+- `'date'` — field for date input
+- `'year-month'` — field for year and month input
+- `'time'` — field for time input
+- `'hour-minute'` — field for hours and minutes input
+- `'tel'` — field for telephone number input
+- `'url'` — field for web address input with URL validation
+- `'checkbox'` — checkbox (used for boolean values)
+- `'radio'` — radio button (used for selecting one option from a group)
+
+Each type activates corresponding validation, formatting, and input mechanisms. For the `password` type, a visibility toggle function is available through a special icon. Types `number`, `number-format`, and `currency` automatically enable formatting and restrict input to numeric values only. Types `email`, `tel`, and `url` apply built-in HTML5 validation and set the appropriate `inputMode` for mobile keyboards. Date and time related types (`datetime`, `date`, `year-month`, `time`, `hour-minute`) activate special input masks and value formatting.
+
+

package/src/media/mdx/Input/type.ru.mdx

@@ -0,0 +1,26 @@
+## Тип поля ввода
+
+Свойство `type` определяет тип и поведение поля ввода Input.
+
+**Возможные значения:**
+
+- `'text'` — обычное текстовое поле (значение по умолчанию)
+- `'search'` — поле для поиска с возможностью быстрой очистки
+- `'number'` — числовое поле с базовой валидацией чисел
+- `'number-format'` — числовое поле с форматированием (разделители тысяч)
+- `'currency'` — поле для ввода денежных значений с форматированием валюты
+- `'email'` — поле для ввода электронной почты с соответствующей валидацией
+- `'password'` — поле для ввода пароля (скрывает символы)
+- `'datetime'` — поле для ввода даты и времени
+- `'date'` — поле для ввода даты
+- `'year-month'` — поле для ввода года и месяца
+- `'time'` — поле для ввода времени
+- `'hour-minute'` — поле для ввода часов и минут
+- `'tel'` — поле для ввода телефонного номера
+- `'url'` — поле для ввода веб-адреса с валидацией URL
+- `'checkbox'` — чекбокс (используется для булевых значений)
+- `'radio'` — радиокнопка (используется для выбора одного варианта из группы)
+
+Каждый тип активирует соответствующие механизмы валидации, форматирования и ввода. Для типа `password` доступна функция переключения видимости через специальную иконку. Типы `number`, `number-format` и `currency` автоматически включают форматирование и ограничивают ввод только числовыми значениями. Типы `email`, `tel` и `url` применяют встроенную HTML5-валидацию и устанавливают соответствующий `inputMode` для мобильных клавиатур. Типы, связанные с датой и временем (`datetime`, `date`, `year-month`, `time`, `hour-minute`), активируют специальные маски ввода и форматирование значений.
+
+

package/src/media/mdx/Input/wikiMdxInput.ts

@@ -0,0 +1,49 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import currencyEn from './currency.en.mdx'
+import currencyRu from './currency.ru.mdx'
+import dateEn from './date.en.mdx'
+import dateRu from './date.ru.mdx'
+import inputEn from './input.en.mdx'
+import inputRu from './input.ru.mdx'
+import maskEn from './mask.en.mdx'
+import maskRu from './mask.ru.mdx'
+import numberEn from './number.en.mdx'
+import numberRu from './number.ru.mdx'
+import typeEn from './type.en.mdx'
+import typeRu from './type.ru.mdx'
+
+/**
+ * MDX files for Input component
+ *
+ * MDX файлы для компонента Input
+ */
+export const wikiMdxInput: StorybookComponentsMdxItem = {
+  name: 'Input',
+  descriptions: {
+    currency: {
+      en: currencyEn,
+      ru: currencyRu
+    },
+    date: {
+      en: dateEn,
+      ru: dateRu
+    },
+    input: {
+      en: inputEn,
+      ru: inputRu
+    },
+    mask: {
+      en: maskEn,
+      ru: maskRu
+    },
+    number: {
+      en: numberEn,
+      ru: numberRu
+    },
+    type: {
+      en: typeEn,
+      ru: typeRu
+    }
+  }
+}

package/src/media/mdx/List/event.close.en.mdx

@@ -0,0 +1,8 @@
+### `close`
+
+Event fires when attempting to close the list after navigation has reached the root level.
+
+**When it fires:**
+- Pressing the **Escape** key at the root level of the list
+- Pressing the **←** (left arrow) key when there are no open submenus/groups
+- Attempting to navigate back when there are no nested items

package/src/media/mdx/List/event.close.ru.mdx

@@ -0,0 +1,8 @@
+### `close`
+
+Событие срабатывает при попытке закрыть список, когда навигация достигла корневого уровня.
+
+**Когда срабатывает:**
+- Нажатие клавиши **Escape** на корневом уровне списка
+- Нажатие клавиши **←** (стрелка влево), когда нет открытых подменю/групп
+- Попытка навигации назад при отсутствии вложенных элементов

package/src/media/mdx/List/list.en.mdx

@@ -0,0 +1,64 @@
+A component for creating interactive lists with support for hierarchical data, keyboard navigation, and search functionality.
+
+List manages the display of structured data with navigation capabilities, item selection, and interaction through keyboard and mouse. The component supports various item types (regular items, groups, menus, dividers, subtitles, HTML content), automatically handles complex hierarchical structures, and provides intuitive navigation. The built-in search system works in real-time with match highlighting across the entire data hierarchy.
+
+**Key features:**
+
+- Various item types (item, group, menu, line, subtitle, html)
+- Hierarchical structure with nested groups and menus
+- Full keyboard navigation (↑/↓, Enter, →, ←)
+- Built-in real-time search with match highlighting
+- Item selection control via v-model:selected
+- Focus control via v-model:focus
+- Lightweight mode for large lists (lite)
+- Display axis configuration (x/y) and dividers
+- Click and menu close events
+
+**Typical use cases:**
+
+- Navigation menus and option lists
+- Dropdown lists with hierarchical structure
+- Product and category catalogs
+- Settings lists with grouping
+- Context menus with submenus
+- File and folder lists
+- Filters with multiple selection
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(['item2'])
+const focus = ref(null)
+
+const listData = ref([
+  { label: 'First item', value: 'item1' },
+  { label: 'Second item', value: 'item2' },
+  { type: 'line' },
+  { type: 'subtitle', label: 'Item group' },
+  {
+    label: 'Group with submenu',
+    value: 'group1',
+    type: 'group',
+    list: [
+      { label: 'Nested item 1', value: 'nested1' },
+      { label: 'Nested item 2', value: 'nested2' }
+    ]
+  }
+])
+
+const handleClick = (event) => {
+  console.log('Item clicked:', event.detail.value)
+}
+</script>
+
+<template>
+  <List
+    v-model:selected="selected"
+    v-model:focus="focus"
+    :list="listData"
+    highlight="text"
+    @click="handleClick"
+  />
+</template>
+```

package/src/media/mdx/List/list.ru.mdx

@@ -0,0 +1,64 @@
+Компонент для создания интерактивных списков с поддержкой иерархических данных, клавиатурной навигации и функциональности поиска.
+
+List управляет отображением структурированных данных с возможностью навигации, выбора элементов и взаимодействия через клавиатуру и мышь. Компонент поддерживает различные типы элементов (обычные элементы, группы, меню, разделители, подзаголовки, HTML-контент), автоматически обрабатывает сложные иерархические структуры и предоставляет интуитивную навигацию. Встроенная система поиска работает в реальном времени с выделением совпадений по всей иерархии данных.
+
+**Основные возможности:**
+
+- Различные типы элементов (item, group, menu, line, subtitle, html)
+- Иерархическая структура с вложенными группами и меню
+- Полная клавиатурная навигация (↑/↓, Enter, →, ←)
+- Встроенный поиск в реальном времени с подсветкой совпадений
+- Управление выбором элементов через v-model:selected
+- Управление фокусом через v-model:focus
+- Облегченный режим для больших списков (lite)
+- Настройка осей отображения (x/y) и разделителей
+- События клика и закрытия меню
+
+**Типичные сценарии использования:**
+
+- Навигационные меню и списки опций
+- Выпадающие списки с иерархической структурой
+- Каталоги товаров и категорий
+- Списки настроек с группировкой
+- Контекстные меню с подменю
+- Списки файлов и папок
+- Фильтры с множественным выбором
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(['item2'])
+const focus = ref(null)
+
+const listData = ref([
+  { label: 'Первый элемент', value: 'item1' },
+  { label: 'Второй элемент', value: 'item2' },
+  { type: 'line' },
+  { type: 'subtitle', label: 'Группа элементов' },
+  {
+    label: 'Группа с подменю',
+    value: 'group1',
+    type: 'group',
+    list: [
+      { label: 'Вложенный элемент 1', value: 'nested1' },
+      { label: 'Вложенный элемент 2', value: 'nested2' }
+    ]
+  }
+])
+
+const handleClick = (event) => {
+  console.log('Клик по элементу:', event.detail.value)
+}
+</script>
+
+<template>
+  <List
+    v-model:selected="selected"
+    v-model:focus="focus"
+    :list="listData"
+    highlight="text"
+    @click="handleClick"
+  />
+</template>
+```

package/src/media/mdx/List/lite.en.mdx

@@ -0,0 +1,24 @@
+## Managing list performance
+
+The `lite` and `liteThreshold` properties work together to optimize rendering of large lists. They enable a lightweight display mode that reduces visual complexity and improves performance when the threshold number of items is exceeded.
+
+**Properties:**
+
+- `lite` — enables lightweight list display mode
+- `liteThreshold` — item count threshold for activating simplified mode, defaults to configuration value
+
+Display mode is determined automatically: when `lite=false`, the list always renders in full mode. When `lite=true`, the component compares the total item count with `liteThreshold`. If the item count does not exceed the threshold, full mode with extended visualization is used. When the threshold is exceeded, lightweight mode is activated to reduce rendering load. Use `lite` for working with dynamic data of variable size.
+
+```html
+<!-- Automatic mode switching -->
+<List :list="items" :lite="true" :liteThreshold="50" />
+
+<!-- Always full mode -->
+<List :list="items" :lite="false" />
+
+<!-- Lightweight mode for large catalogs -->
+<List :list="products" :lite="true" :liteThreshold="100" />
+
+<!-- Custom threshold for mobile devices -->
+<List :list="data" :lite="true" :liteThreshold="30" />
+```

package/src/media/mdx/List/lite.ru.mdx

@@ -0,0 +1,24 @@
+## Управление производительностью списка
+
+Свойства `lite` и `liteThreshold` работают в связке для оптимизации рендеринга больших списков. Они включают облегченный режим отображения, который снижает визуальную сложность и ускоряет производительность при превышении порогового количества элементов.
+
+**Свойства:**
+
+- `lite` — включает облегченный режим отображения списка
+- `liteThreshold` — порог количества элементов для активации упрощенного режима, по умолчанию зависит от конфигурации
+
+Режим отображения определяется автоматически: при `lite=false` список всегда рендерится в полном режиме. При `lite=true` компонент сравнивает общее количество элементов с `liteThreshold`. Если количество элементов не превышает порог, используется полный режим с расширенной визуализацией. При превышении порога включается облегченный режим для снижения нагрузки на рендеринг. Используйте `lite` для работы с динамическими данными переменного размера.
+
+```html
+<!-- Автоматическое переключение режима -->
+<List :list="items" :lite="true" :liteThreshold="50" />
+
+<!-- Всегда полный режим -->
+<List :list="items" :lite="false" />
+
+<!-- Облегченный режим для больших каталогов -->
+<List :list="products" :lite="true" :liteThreshold="100" />
+
+<!-- Пользовательский порог для мобильных устройств -->
+<List :list="data" :lite="true" :liteThreshold="30" />
+```

package/src/media/mdx/List/slot.html.en.mdx

@@ -0,0 +1 @@
+- `[value]: any` — Dynamic slot for rendering custom content (Vue components or HTML) when item `type` is `'html'`. Item's `value` is used as slot name.

package/src/media/mdx/List/slot.html.ru.mdx

@@ -0,0 +1 @@
+- `[value]: any` — Динамический слот для рендеринга пользовательского контента (Vue-компонентов или HTML), когда `type` элемента равен `'html'`. Поле `value` элемента используется как имя слота.

package/src/media/mdx/List/wikiMdxList.ts

@@ -0,0 +1,37 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import listEn from './list.en.mdx'
+import listRu from './list.ru.mdx'
+import liteEn from './lite.en.mdx'
+import liteRu from './lite.ru.mdx'
+import eventCloseEn from './event.close.en.mdx'
+import eventCloseRu from './event.close.ru.mdx'
+import slotHtmlEn from './slot.html.en.mdx'
+import slotHtmlRu from './slot.html.ru.mdx'
+
+/**
+ * MDX documentation for List component
+ *
+ * MDX документация для компонента List
+ */
+export const wikiMdxList: StorybookComponentsMdxItem = {
+  name: 'List',
+  descriptions: {
+    'list': {
+      en: listEn,
+      ru: listRu
+    },
+    'lite': {
+      en: liteEn,
+      ru: liteRu
+    },
+    'event.close': {
+      en: eventCloseEn,
+      ru: eventCloseRu
+    },
+    'slot.html': {
+      en: slotHtmlEn,
+      ru: slotHtmlRu
+    }
+  }
+}

package/src/media/mdx/ListGroup/listGroup.en.mdx

@@ -0,0 +1,56 @@
+Component for grouping and organizing list items with collapsible structure.
+
+ListGroup is an auxiliary component for List, managing hierarchical content organization with expand/collapse functionality. The component integrates with MotionTransform for smooth animations, supports unlimited nesting levels, and provides convenient navigation through structured data.
+
+**Key features:**
+
+- Hierarchical content organization with unlimited nesting
+- Expand/collapse animations via MotionTransform
+- State management via props or internal state
+- Automatic group content visibility control
+- Integration with List component ecosystem
+- Customization support via head and list slots
+- Group state change events
+
+**Common use cases:**
+
+- Grouping list items by categories
+- Creating tree-like navigation structures
+- Organizing settings and options by sections
+- Multi-level menus and catalogs
+- FAQ sections with expandable answers
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const items = [
+  { text: 'Item 1', value: '1' },
+  { text: 'Item 2', value: '2' },
+  { text: 'Item 3', value: '3' }
+]
+
+const isOpen = ref(true)
+</script>
+
+<template>
+  <List>
+    <ListGroup v-model:open="isOpen">
+      <template #head="{ open }">
+        <div class="group-header">
+          <span>{{ open ? '▼' : '▶' }}</span>
+          <span>Group Items</span>
+        </div>
+      </template>
+
+      <template #list>
+        <ListItem
+          v-for="item in items"
+          :key="item.value"
+          :text="item.text"
+        />
+      </template>
+    </ListGroup>
+  </List>
+</template>
+```