@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/mdx/Badge/primary.ru.mdx

@@ -1,16 +1,16 @@
-## Primary Badge
+## Основные бейджи (primary)
 
-Основной вариант — это наиболее заметный стиль бейджа, предназначенный для привлечения внимания и обозначения высокоприоритетной информации или статуса.
+Компонент Badge поддерживает основной режим через свойство `primary`. В этом режиме бейджи имеют наиболее заметный визуальный стиль с яркими цветами бренда:
 
-### Когда использовать
+- **Высокий контраст** - использует основные цвета бренда для максимальной видимости
+- **Яркий внешний вид** - привлекает внимание к важной информации
+- **Повышенная видимость** - разработан для выделения на различных фонах
+- **Поддержка доступности** - сильные контрастные соотношения для читаемости
 
-- **Критические уведомления**: Когда нужно выделить срочную или важную информацию
-- **Индикаторы статуса**: Для отображения активных, включенных или положительных состояний
-- **Элементы призыва к действию**: Когда бейдж служит интерактивным элементом, требующим внимания пользователя
-- **Акцент бренда**: Для поддержания согласованности бренда с основными цветовыми схемами
+Primary режим особенно полезен для создания критических индикаторов уведомлений, активных статусов и высокоприоритетных маркеров, которые требуют немедленного внимания пользователя в интерфейсе.
 
-### Визуальные характеристики
-
-- **Высокий контраст**: Использует основные цвета бренда с сильными контрастными соотношениями для доступности
-- **Яркий внешний вид**: Более визуально заметный, чем второстепенные или контурные варианты
-- **Повышенная видимость**: Разработан для выделения на различных цветах фона
+```html
+<Badge primary overlap="static">5</Badge>
+<Badge primary overlap="static" icon="warning">Важно</Badge>
+<Badge primary dot overlap="static"/>
+```

package/src/media/mdx/Badge/secondary.en.mdx

@@ -1,17 +1,16 @@
-## Secondary Badge
+## Secondary badges (secondary)
 
-The secondary variant offers a balanced approach between primary and outline styles, providing moderate visual emphasis that supports the main content without competing for attention.
+The Badge component supports secondary mode via the `secondary` property. In this mode, badges have a balanced visual style between primary and outline variants:
 
-### When to use
+- **Moderate contrast** - balanced color treatment for noticeability without overwhelming
+- **Softer appearance** - less intense than primary while maintaining clear visibility
+- **Versatile styling** - works well in various interface contexts
+- **Content harmony** - complements primary elements without visual competition
 
-- **Supporting information**: When displaying important but non-critical data alongside primary content
-- **Status updates**: For showing progress, warnings, or informational states that need visibility
-- **Content categorization**: To organize and label content with moderate emphasis
-- **Hierarchical displays**: When creating visual hierarchy where secondary elements need distinction
+Secondary mode is especially useful for creating supporting information indicators, status updates, and categorical labels that are important but don't require critical attention in the visual hierarchy.
 
-### Visual characteristics
-
-- **Moderate contrast**: Balanced color treatment that's noticeable but not overwhelming
-- **Softer appearance**: Less intense than primary variants while maintaining clear visibility
-- **Versatile styling**: Works well in various contexts and color schemes
-- **Content harmony**: Complements primary elements without creating visual competition
+```html
+<Badge secondary overlap="static">12</Badge>
+<Badge secondary overlap="static" icon="info">Updated</Badge>
+<Badge secondary dot overlap="static"/>
+```

package/src/media/mdx/Badge/secondary.ru.mdx

@@ -1,17 +1,16 @@
-## Secondary Badge
+## Второстепенные бейджи (secondary)
 
-Второстепенный вариант предлагает сбалансированный подход между основным и контурным стилями, обеспечивая умеренный визуальный акцент, который поддерживает основной контент, не конкурируя за внимание.
+Компонент Badge поддерживает второстепенный режим через свойство `secondary`. В этом режиме бейджи имеют сбалансированный визуальный стиль между primary и outline вариантами:
 
-### Когда использовать
+- **Умеренный контраст** - сбалансированная цветовая обработка для заметности без подавления
+- **Более мягкий внешний вид** - менее интенсивный, чем primary, сохраняя четкую видимость
+- **Универсальная стилизация** - хорошо работает в различных контекстах интерфейса
+- **Гармония контента** - дополняет основные элементы без визуальной конкуренции
 
-- **Поддерживающая информация**: При отображении важных, но не критичных данных рядом с основным контентом
-- **Обновления статуса**: Для отображения прогресса, предупреждений или информационных состояний, требующих видимости
-- **Категоризация контента**: Для организации и маркировки контента с умеренным акцентом
-- **Иерархические отображения**: При создании визуальной иерархии, где второстепенные элементы нуждаются в различении
+Secondary режим особенно полезен для создания поддерживающих индикаторов информации, статусных обновлений и категориальных меток, которые важны, но не требуют критического внимания в визуальной иерархии.
 
-### Визуальные характеристики
-
-- **Умеренный контраст**: Сбалансированная цветовая обработка, которая заметна, но не подавляющая
-- **Более мягкий внешний вид**: Менее интенсивный, чем основные варианты, при сохранении четкой видимости
-- **Универсальная стилизация**: Хорошо работает в различных контекстах и цветовых схемах
-- **Гармония контента**: Дополняет основные элементы, не создавая визуальной конкуренции
+```html
+<Badge secondary overlap="static">12</Badge>
+<Badge secondary overlap="static" icon="info">Обновлено</Badge>
+<Badge secondary dot overlap="static"/>
+```

package/src/media/mdx/Bars/action.en.mdx

@@ -1,40 +1,84 @@
 ## Action mode
 
-Properties that switch Bars into a contextual action bar when selecting items or entering bulk-edit mode: `action` activates the mode, `actionLabel` and `actionDescription` replace the main content, `actionBars` provides a specialized button set for operations.
+Properties `action`, `actionLabel`, `actionDescription`, and `actionBars` are designed for switching Bars into contextual action mode when selecting items or performing bulk operations.
 
-```
-action?: boolean
-actionLabel?: string | number
-actionDescription?: string
-actionBars?: Button[]
-```
+**Properties:**
 
-### Properties
+- `action` — activates action mode with full content replacement
+- `actionLabel` — primary title for action mode (typically count of selected items)
+- `actionDescription` — additional description or instruction for current action
+- `actionBars` — array of action buttons for operations on selected elements
 
-- **`action`** — Switches the bar into action context with full content replacement
-- **`actionLabel`** — Primary action mode title (typically a count of selected items)
-- **`actionDescription`** — Additional description or instruction for the current action
-- **`actionBars`** — Array of action buttons for operations on selected elements
+Properties work together: when `action = true`, the component replaces standard content (label, description, bars) with action variants (actionLabel, actionDescription, actionBars). The back button automatically transforms into an exit button (iconClose) for leaving action mode. All shared button attributes from `buttonAttrs` apply to `actionBars`, maintaining consistent styling. Action mode is typically controlled by external selection state and is used for temporary focused operations with the ability to exit back to normal view.
 
-### When to use
+```html
+<script setup>
+import { ref, computed } from 'vue'
 
-- **Item selection** — User has selected one or more items in a list or table
-- **Bulk operations** — Actions are needed on a group of selected objects
-- **Contextual menus** — Replace the standard bar with specialized actions
-- **Temporary modes** — Focus the interface on a specific task with exit capability
+const selectedItems = ref([])
+const actionMode = computed(() => selectedItems.value.length > 0)
 
-### Comparison
+const handleSelect = (id) => {
+  const index = selectedItems.value.indexOf(id)
+  if (index > -1) {
+    selectedItems.value.splice(index, 1)
+  } else {
+    selectedItems.value.push(id)
+  }
+}
 
-- **`label` vs `actionLabel`** — Regular title is replaced with selection count or description
-- **`description` vs `actionDescription`** — Standard description becomes action instruction
-- **`bars` vs `actionBars`** — Regular buttons are replaced with context-specific ones
-- **Navigation** — Back button becomes an exit button for leaving action mode
+const handleShare = () => {
+  console.log('Share selected:', selectedItems.value)
+}
 
-### Features
+const handleDelete = () => {
+  console.log('Delete selected:', selectedItems.value)
+  selectedItems.value = []
+}
+</script>
 
-- **Complete content replacement** — All text areas and buttons are replaced with action variants
-- **Configuration preservation** — Shared button attributes (buttonAttrs) apply to actionBars
-- **Unified styling** — Action mode inherits all styling and behavior from the main component
-- **Programmatic control** — Mode is controlled by external selection state
+<template>
+  <!-- Standard mode with regular navigation -->
+  <Bars
+    :action="actionMode"
+    label="Contacts"
+    description="Manage your contacts"
+    icon-back="arrow_back"
+    icon-close="close"
+    :bars="[
+      { icon: 'add', label: 'Add' },
+      { icon: 'search', label: 'Search' }
+    ]"
+    :action-label="`${selectedItems.length} selected`"
+    action-description="Choose an action to apply"
+    :action-bars="[
+      { icon: 'share', onClick: handleShare },
+      { icon: 'delete', onClick: handleDelete }
+    ]"
+  />
 
-> Use short, clear labels in actionLabel and limit actionBars to 3–4 key actions for better user experience.
+  <!-- Action mode always active -->
+  <Bars
+    action
+    action-label="5 items selected"
+    action-description="Select an action"
+    icon-close="close"
+    :action-bars="[
+      { icon: 'edit', label: 'Edit' },
+      { icon: 'archive', label: 'Archive' },
+      { icon: 'delete', label: 'Delete' }
+    ]"
+  />
+
+  <!-- With v-model for two-way binding -->
+  <Bars
+    v-model:action="actionMode"
+    label="Messages"
+    :action-label="`${selectedItems.length} messages`"
+    :action-bars="[
+      { icon: 'mark_email_read' },
+      { icon: 'delete' }
+    ]"
+  />
+</template>
+```

package/src/media/mdx/Bars/action.ru.mdx

@@ -1,40 +1,84 @@
-## Режим действия
+## Режим действий
 
-Свойства для переключения Bars в контекстную панель действий при выборе элементов или массовом редактировании: `action` активирует режим, `actionLabel` и `actionDescription` заменяют основной контент, `actionBars` предоставляет специализированный набор кнопок для операций.
+Свойства `action`, `actionLabel`, `actionDescription` и `actionBars` предназначены для переключения Bars в контекстный режим действий при выборе элементов или выполнении массовых операций.
 
-```
-action?: boolean
-actionLabel?: string | number
-actionDescription?: string
-actionBars?: Button[]
-```
+**Свойства:**
 
-### Свойства
+- `action` — активирует режим действий с полной заменой контента
+- `actionLabel` — основной заголовок для режима действий (обычно счётчик выбранных элементов)
+- `actionDescription` — дополнительное описание или инструкция для текущего действия
+- `actionBars` — массив кнопок действий для операций над выбранными элементами
 
-- **`action`** — Переключает панель в контекст действий с заменой всего контента
-- **`actionLabel`** — Основной заголовок режима действий (обычно счётчик выбранных элементов)
-- **`actionDescription`** — Дополнительное описание или инструкция для текущего действия
-- **`actionBars`** — Массив кнопок действий для операций над выбранными элементами
+Свойства работают совместно: когда `action = true`, компонент заменяет стандартный контент (label, description, bars) на варианты для действий (actionLabel, actionDescription, actionBars). Кнопка назад автоматически трансформируется в кнопку выхода (iconClose) для возврата из режима действий. Все общие атрибуты кнопок из `buttonAttrs` применяются к `actionBars`, сохраняя согласованную стилизацию. Режим действий обычно контролируется внешним состоянием выбора и используется для временных фокусированных операций с возможностью выхода обратно в обычный вид.
 
-### Когда использовать
+```html
+<script setup>
+import { ref, computed } from 'vue'
 
-- **Выбор элементов** — Пользователь выделил один или несколько элементов в списке или таблице
-- **Массовые операции** — Необходимы действия над группой выбранных объектов
-- **Контекстные меню** — Замена стандартной панели на специализированные действия
-- **Временные режимы** — Фокусировка интерфейса на конкретной задаче с возможностью выхода
+const selectedItems = ref([])
+const actionMode = computed(() => selectedItems.value.length > 0)
 
-### Сравнение
+const handleSelect = (id) => {
+  const index = selectedItems.value.indexOf(id)
+  if (index > -1) {
+    selectedItems.value.splice(index, 1)
+  } else {
+    selectedItems.value.push(id)
+  }
+}
 
-- **`label` vs `actionLabel`** — Обычный заголовок заменяется на счётчик или описание выбора
-- **`description` vs `actionDescription`** — Стандартное описание сменяется инструкцией для действий
-- **`bars` vs `actionBars`** — Обычные кнопки заменяются специализированными для текущего контекста
-- **Навигация** — Кнопка назад становится кнопкой выхода из режима действий
+const handleShare = () => {
+  console.log('Поделиться выбранными:', selectedItems.value)
+}
 
-### Особенности
+const handleDelete = () => {
+  console.log('Удалить выбранные:', selectedItems.value)
+  selectedItems.value = []
+}
+</script>
 
-- **Полная замена контента** — Все текстовые области и кнопки заменяются action‑вариантами
-- **Сохранение конфигурации** — Общие атрибуты кнопок (buttonAttrs) применяются к actionBars
-- **Единый стиль** — Action‑режим наследует всю стилизацию и поведение основного компонента
-- **Программное управление** — Режим контролируется внешним состоянием выбора элементов
+<template>
+  <!-- Стандартный режим с обычной навигацией -->
+  <Bars
+    :action="actionMode"
+    label="Контакты"
+    description="Управление контактами"
+    icon-back="arrow_back"
+    icon-close="close"
+    :bars="[
+      { icon: 'add', label: 'Добавить' },
+      { icon: 'search', label: 'Поиск' }
+    ]"
+    :action-label="`Выбрано: ${selectedItems.length}`"
+    action-description="Выберите действие"
+    :action-bars="[
+      { icon: 'share', onClick: handleShare },
+      { icon: 'delete', onClick: handleDelete }
+    ]"
+  />
 
-> Используйте короткие, понятные метки в actionLabel и ограничивайте actionBars 3–4 ключевыми действиями для лучшего пользовательского опыта.
+  <!-- Режим действий всегда активен -->
+  <Bars
+    action
+    action-label="Выбрано 5 элементов"
+    action-description="Выберите действие"
+    icon-close="close"
+    :action-bars="[
+      { icon: 'edit', label: 'Изменить' },
+      { icon: 'archive', label: 'Архивировать' },
+      { icon: 'delete', label: 'Удалить' }
+    ]"
+  />
+
+  <!-- С v-model для двусторонней привязки -->
+  <Bars
+    v-model:action="actionMode"
+    label="Сообщения"
+    :action-label="`Сообщений: ${selectedItems.length}`"
+    :action-bars="[
+      { icon: 'mark_email_read' },
+      { icon: 'delete' }
+    ]"
+  />
+</template>
+```

package/src/media/mdx/Bars/bars.en.mdx

@@ -1,22 +1,97 @@
-Bars is a top-level bar component for headers, toolbars, and contextual action bars. It provides a structured layout for titles, descriptions, back buttons, and interactive button sets with support for action mode for bulk operations.
+## Description
 
-### Purpose
+Versatile bar component for application headers, toolbars, and contextual action bars with support for navigation, action buttons, and bulk operation modes.
 
-- **Application headers** — Unified top bar for screens, sections, and pages with consistent navigation
-- **Toolbars** — Placement of primary actions and functional interface elements
-- **Contextual actions** — Special mode for bulk operations on selected items
-- **Structured navigation** — Standardized back button behavior and screen transitions
+Bars provides a comprehensive solution for creating consistent top-level interface elements with structured layout for titles, descriptions, back navigation, and interactive button sets. The component integrates action mode switching for contextual operations, unified button configuration, and skeleton loading states for creating modern application headers and toolbars.
 
-### Core capabilities
+**Key features:**
 
-- **Text content** — Primary label and secondary description with dynamic update support
-- **Navigation button** — Configurable back button with hiding options and icon customization
-- **Action set** — Button array (bars) for right-side placement with flexible configuration
-- **Action mode** — Switching to action mode with separate labels, description, and button set
-- **Unified attributes** — Shared settings for all buttons via buttonAttrs with event support
+- Structured text hierarchy (label and description with dynamic updates)
+- Configurable back button with navigation and close icon switching
+- Flexible button arrays (bars) for primary actions on the right side
+- Action mode with separate content and button set for bulk operations
+- Two-way binding (v-model:action) for state synchronization
+- Unified button attributes (buttonAttrs) for consistent styling
+- Event handling for click interactions and navigation
+- Skeleton system integration for loading states
+- Icon customization for back and close buttons
 
-### Integration
+**Typical use cases:**
 
-Bars is designed for creating consistent headers and toolbars in applications. Use it as a foundation for screens when you need standardized navigation, action placement, and support for contextual operations with selected elements.
+- Application screen headers with navigation and actions
+- Toolbar panels for sections and pages
+- Contextual action bars for selected item operations
+- Search headers with filter and sort controls
+- Settings screens with back navigation
+- List headers with bulk action support
+- Multi-selection interfaces with action mode
 
-> This is a top-level UI component intended for direct use in application interfaces and design systems.
+```html
+<script setup>
+import { ref } from 'vue'
+
+const actionMode = ref(false)
+const selectedCount = ref(0)
+
+const handleSearch = () => {
+  console.log('Search clicked')
+}
+
+const handleFilter = () => {
+  console.log('Filter clicked')
+}
+
+const handleDelete = () => {
+  console.log('Delete selected items')
+  actionMode.value = false
+  selectedCount.value = 0
+}
+</script>
+
+<template>
+  <div class="app-layout">
+    <!-- Standard header with navigation and actions -->
+    <Bars
+      label="Messages"
+      description="Your conversations"
+      icon-back="arrow_back"
+      :bars="[
+        { icon: 'search', onClick: handleSearch },
+        { icon: 'filter_list', onClick: handleFilter },
+        { icon: 'more_vert' }
+      ]"
+    />
+
+    <!-- Header with action mode for bulk operations -->
+    <Bars
+      v-model:action="actionMode"
+      label="Contacts"
+      description="Manage your contacts"
+      :action-label="`${selectedCount} selected`"
+      action-description="Choose an action"
+      icon-back="arrow_back"
+      icon-close="close"
+      :bars="[
+        { icon: 'add' },
+        { icon: 'search' }
+      ]"
+      :action-bars="[
+        { icon: 'share' },
+        { icon: 'delete', onClick: handleDelete }
+      ]"
+    />
+
+    <!-- Toolbar with custom button attributes -->
+    <Bars
+      label="Settings"
+      :button-attrs="{ secondary: true }"
+      :bars="[
+        { icon: 'sync', label: 'Sync' },
+        { icon: 'info', label: 'Info' }
+      ]"
+    />
+  </div>
+</template>
+```
+
+> Bars is designed as a top-level UI component for creating consistent application headers, toolbars, and contextual action interfaces with comprehensive navigation, action management, and bulk operation support.

package/src/media/mdx/Bars/bars.ru.mdx

@@ -1,22 +1,98 @@
-Bars — компонент панели верхнего уровня для заголовков, панелей инструментов и контекстных панелей действий. Обеспечивает структурированный макет для заголовка, описания, кнопки назад и набора интерактивных кнопок с поддержкой режима действий для массовых операций.
+## Описание
 
-### Назначение
+Универсальный компонент панели для заголовков приложений, панелей инструментов и контекстных панелей действий с поддержкой навигации, кнопок действий и режимов массовых операций.
 
-- **Заголовки приложений** — Единый верхний бар для экранов, разделов и страниц с консистентной навигацией
-- **Панели инструментов** — Размещение основных действий и функциональных элементов интерфейса
-- **Контекстные действия** — Специальный режим для массовых операций над выбранными элементами
-- **Структурированная навигация** — Стандартизированное поведение кнопки назад и переходов между экранами
+Bars предоставляет комплексное решение для создания согласованных элементов интерфейса верхнего уровня со структурированным макетом для заголовков, описаний, обратной навигации и интерактивных наборов кнопок. Компонент интегрирует переключение режима действий для контекстных операций, единую конфигурацию кнопок и состояния загрузки скелетонов для создания современных заголовков приложений и панелей инструментов.
 
-### Основные возможности
+**Основные возможности:**
 
-- **Текстовый контент** — Основная метка (label) и дополнительное описание (description) с поддержкой динамического обновления
-- **Навигационная кнопка** — Настраиваемая кнопка назад с возможностью скрытия и кастомизации иконок
-- **Набор действий** — Массив кнопок (bars) для размещения справа с гибкой конфигурацией
-- **Режим действий** — Переключение в action‑режим с отдельными метками, описанием и набором кнопок
-- **Единые атрибуты** — Общие настройки для всех кнопок через buttonAttrs с поддержкой событий
+- Структурированная текстовая иерархия (метка и описание с динамическим обновлением)
+- Настраиваемая кнопка назад с навигацией и переключением иконки закрытия
+- Гибкие массивы кнопок (bars) для основных действий справа
+- Режим действий с отдельным контентом и набором кнопок для массовых операций
+- Двусторонняя привязка (v-model:action) для синхронизации состояния
+- Единые атрибуты кнопок (buttonAttrs) для согласованной стилизации
+- Обработка событий для взаимодействий кликов и навигации
+- Интеграция системы скелетонов для состояний загрузки
+- Кастомизация иконок для кнопок назад и закрытия
 
-### Интеграция
+**Типичные сценарии использования:**
 
-Bars предназначен для создания консистентных заголовков и панелей инструментов в приложениях. Используйте его в качестве основы для экранов, когда нужна стандартизированная навигация, размещение действий и поддержка контекстных операций с выделенными элементами.
+- Заголовки экранов приложения с навигацией и действиями
+- Панели инструментов для разделов и страниц
+- Контекстные панели действий для операций с выбранными элементами
+- Заголовки поиска с элементами управления фильтрами и сортировкой
+- Экраны настроек с обратной навигацией
+- Заголовки списков с поддержкой массовых действий
+- Интерфейсы множественного выбора с режимом действий
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const actionMode = ref(false)
+const selectedCount = ref(0)
+
+const handleSearch = () => {
+  console.log('Нажат поиск')
+}
+
+const handleFilter = () => {
+  console.log('Нажат фильтр')
+}
+
+const handleDelete = () => {
+  console.log('Удалить выбранные элементы')
+  actionMode.value = false
+  selectedCount.value = 0
+}
+</script>
+
+<template>
+  <div class="app-layout">
+    <!-- Стандартный заголовок с навигацией и действиями -->
+    <Bars
+      label="Сообщения"
+      description="Ваши беседы"
+      icon-back="arrow_back"
+      :bars="[
+        { icon: 'search', onClick: handleSearch },
+        { icon: 'filter_list', onClick: handleFilter },
+        { icon: 'more_vert' }
+      ]"
+    />
+
+    <!-- Заголовок с режимом действий для массовых операций -->
+    <Bars
+      v-model:action="actionMode"
+      label="Контакты"
+      description="Управление контактами"
+      :action-label="`Выбрано: ${selectedCount}`"
+      action-description="Выберите действие"
+      icon-back="arrow_back"
+      icon-close="close"
+      :bars="[
+        { icon: 'add' },
+        { icon: 'search' }
+      ]"
+      :action-bars="[
+        { icon: 'share' },
+        { icon: 'delete', onClick: handleDelete }
+      ]"
+    />
+
+    <!-- Панель инструментов с пользовательскими атрибутами кнопок -->
+    <Bars
+      label="Настройки"
+      :button-attrs="{ secondary: true }"
+      :bars="[
+        { icon: 'sync', label: 'Синхр.' },
+        { icon: 'info', label: 'Инфо' }
+      ]"
+    />
+  </div>
+</template>
+```
+
+> Bars разработан как UI-компонент верхнего уровня для создания согласованных заголовков приложений, панелей инструментов и контекстных интерфейсов действий с комплексной поддержкой навигации, управления действиями и массовых операций.
 
-> Это UI‑компонент верхнего уровня, предназначенный для прямого использования в интерфейсах приложений и дизайн‑системах.

package/src/media/mdx/Bars/slots.en.mdx

@@ -0,0 +1,33 @@
+```html
+<Bars>
+  <template #bars>
+    <Button icon="search" />
+    <Button icon="refresh" />
+    <Button icon="more_vert" />
+  </template>
+
+  <template #actionBars>
+    <Button icon="share" />
+    <Button icon="edit" />
+    <Button icon="delete" />
+  </template>
+</Bars>
+```
+
+### `bars`
+
+Slot for placing action buttons in regular mode.
+
+Allows you to fully override the composition, order, and appearance of buttons positioned to the right of the label and description. The `bars` area is right-aligned and inherits sizing/spacing from the base Bars component styles.
+
+**Parameters:**
+- Slot does not pass parameters (static slot)
+
+### `actionBars`
+
+Slot for placing buttons in action mode.
+
+Allows you to fully redefine specialized actions displayed when item selection mode is active. The `actionBars` area is shown instead of regular `bars` when action mode is enabled (via `v-model:action` or the `action` property).
+
+**Parameters:**
+- Slot does not pass parameters (static slot)

package/src/media/mdx/Bars/slots.ru.mdx

@@ -0,0 +1,33 @@
+```html
+<Bars>
+  <template #bars>
+    <Button icon="search" />
+    <Button icon="refresh" />
+    <Button icon="more_vert" />
+  </template>
+
+  <template #actionBars>
+    <Button icon="share" />
+    <Button icon="edit" />
+    <Button icon="delete" />
+  </template>
+</Bars>
+```
+
+### `bars`
+
+Слот для размещения кнопок панели действий в обычном режиме.
+
+Позволяет полностью переопределить состав, порядок и внешний вид кнопок, которые располагаются справа от заголовка и описания. Область `bars` выравнивается по правому краю панели и наследует размеры/отступы от базового стиля компонента Bars.
+
+**Параметры:**
+- Слот не передает параметры (статический слот)
+
+### `actionBars`
+
+Слот для размещения кнопок в режиме действий (action mode).
+
+Позволяет полностью переопределить специализированные действия, которые отображаются при активированном режиме выбора элементов. Область `actionBars` отображается вместо обычного `bars`, когда включён action-режим (через `v-model:action` или свойство `action`).
+
+**Параметры:**
+- Слот не передает параметры (статический слот)