@dxtmisha/wiki 0.24.1 → 0.24.3

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

@@ -1,11 +1,89 @@
 ## Описание
 
-Компонент Badge представляет собой небольшой визуальный индикатор, используемый для отображения статуса, количества или уведомлений на элементах интерфейса. Он обеспечивает компактный способ передачи важной информации, не занимая много места.
+Компактный визуальный индикатор для отображения статуса, количества уведомлений или маркеров на элементах интерфейса с поддержкой различных режимов отображения и автоматическим управлением переполнением.
 
-### Основные возможности
+Badge предоставляет универсальное решение для создания информативных индикаторов с гибкой настройкой содержимого, позиционирования и внешнего вида. Компонент поддерживает отображение текста, чисел с ограничением максимального значения, иконок и точечных индикаторов, автоматически скрывается при отсутствии контента и интегрируется с системой слотов для кастомизации.
 
-- **Индикация статуса**: Отображение различных состояний с помощью цветовых вариантов
-- **Гибкость содержимого**: Отображение текста, чисел или пустого индикатора-точки
-- **Умное переполнение**: Автоматическая обработка больших чисел с отображением максимального значения
-- **Позиционирование**: Гибкое размещение относительно родительских элементов
-- **Доступность**: Встроенная поддержка программ чтения с экрана и навигации с клавиатуры
+**Основные возможности:**
+
+- Множественные режимы отображения (текст, числа, иконки, точечный индикатор)
+- Автоматическое управление переполнением с настройкой максимального значения
+- Гибкое позиционирование относительно родительских элементов (overlap, vertical, horizontal)
+- Автоматическое скрытие при отсутствии контента (dot, icon, label)
+- Интеграция с LabelNumberInclude для обработки числовых значений
+- Поддержка иконок через IconInclude
+- Цветовые варианты для различных типов статуса
+- Управление видимостью через свойство hide
+- Кастомизация через слоты для полного контроля над содержимым
+
+**Типичные сценарии использования:**
+
+- Индикаторы количества непрочитанных уведомлений
+- Маркеры статуса на аватарах пользователей (онлайн/оффлайн)
+- Счетчики элементов в корзине или списках
+- Индикаторы новых сообщений в чатах
+- Статусные маркеры на карточках товаров
+- Визуальные подсказки о наличии обновлений
+- Числовые индикаторы на вкладках и пунктах меню
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const cartCount = ref(5)
+const unreadMessages = ref(127)
+const isOnline = ref(true)
+
+const addToCart = () => {
+  cartCount.value++
+}
+</script>
+
+<template>
+  <div class="badge-examples">
+    <!-- Базовый бейдж с числом -->
+    <div style="position: relative; display: inline-block;">
+      <IconButton icon="shopping_cart" @click="addToCart"/>
+      <Badge :label="cartCount"/>
+    </div>
+
+    <!-- Бейдж с ограничением максимального значения -->
+    <div style="position: relative; display: inline-block;">
+      <IconButton icon="notifications"/>
+      <Badge :label="unreadMessages" :label-max="99"/>
+    </div>
+
+    <!-- Точечный индикатор статуса -->
+    <div style="position: relative; display: inline-block;">
+      <Avatar src="/user-avatar.jpg"/>
+      <Badge
+        dot
+        :selected="isOnline"
+        overlap="circular"
+      />
+    </div>
+
+    <!-- Бейдж с иконкой и текстом -->
+    <div style="position: relative; display: inline-block;">
+      <Button>Профиль</Button>
+      <Badge
+        icon="verified"
+        label="Pro"
+        overlap="static"
+      />
+    </div>
+
+    <!-- Бейдж с кастомным позиционированием -->
+    <div style="position: relative; display: inline-block;">
+      <Card>Контент</Card>
+      <Badge
+        label="Новое"
+        vertical="bottom"
+        horizontal="left"
+      />
+    </div>
+  </div>
+</template>
+```
+
+> Badge разработан как универсальный UI-компонент для создания компактных визуальных индикаторов с комплексной поддержкой различных типов контента, автоматическим управлением отображением и гибкими настройками позиционирования.

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

@@ -1,17 +1,21 @@
-## Dot Badge
+## Dot indicator
 
-The dot variant displays the badge as a small circular indicator without any text content, perfect for simple status notifications and presence indicators.
+The `dot` property transforms Badge into a compact circular indicator without text content, used for simple visual status notifications.
 
-### When to use
+**Possible values:**
 
-- **Presence indicators**: To show online/offline status or activity states
-- **Notification markers**: For indicating new messages, updates, or alerts without specific counts
-- **Status dots**: To display simple on/off or active/inactive states
-- **Minimalist design**: When space is limited and only basic indication is needed
+- `true` — displays Badge as a dot indicator
+- `false` — displays Badge in standard mode with content (default)
 
-### Visual characteristics
+Creates a minimalist visual marker for indicating states, activity, or notifications without displaying specific values. Ideal for user presence indicators (online/offline), unread notification markers, and status dots on interface elements. When the `dot` property is activated, any text content or numeric values are ignored, displaying only the color indicator.
 
-- **Compact size**: Takes minimal space while maintaining visibility
-- **No text content**: Pure visual indicator without labels or numbers
-- **Clean appearance**: Simple circular shape that integrates seamlessly
-- **Focus on state**: Emphasizes status rather than specific information
+```html
+<!-- Standard Badge with content -->
+<Badge label="5" />
+
+<!-- Dot indicator -->
+<Badge dot />
+
+<!-- Dot indicator for online status -->
+<Badge dot :selected="isOnline" overlap="circular" />
+```

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

@@ -1,17 +1,21 @@
-## Dot Badge
+## Точечный индикатор
 
-Точечный вариант отображает бейдж как небольшой круглый индикатор без текстового содержимого, идеально подходящий для простых уведомлений о статусе и индикаторов присутствия.
+Свойство `dot` преобразует Badge в компактный круглый индикатор без текстового содержимого, используемый для простых визуальных уведомлений о статусе.
 
-### Когда использовать
+**Возможные значения:**
 
-- **Индикаторы присутствия**: Для отображения статуса онлайн/офлайн или состояний активности
-- **Маркеры уведомлений**: Для обозначения новых сообщений, обновлений или предупреждений без конкретных чисел
-- **Точки статуса**: Для отображения простых состояний включено/выключено или активно/неактивно
-- **Минималистичный дизайн**: Когда пространство ограничено и нужно только базовое обозначение
+- `true` — отображает Badge как точечный индикатор
+- `false` — отображает Badge в стандартном режиме с контентом (по умолчанию)
 
-### Визуальные характеристики
+Создает минималистичный визуальный маркер для индикации состояний, активности или уведомлений без отображения конкретных значений. Идеально подходит для индикаторов присутствия пользователей (онлайн/оффлайн), маркеров непрочитанных уведомлений и статусных точек на элементах интерфейса. При активации свойства `dot` любое текстовое содержимое или числовые значения игнорируются, отображается только цветовой индикатор.
 
-- **Компактный размер**: Занимает минимальное пространство, сохраняя видимость
-- **Без текстового содержимого**: Чистый визуальный индикатор без меток или цифр
-- **Аккуратный внешний вид**: Простая круглая форма, которая органично интегрируется
-- **Фокус на состоянии**: Подчеркивает статус, а не конкретную информацию
+```html
+<!-- Стандартный Badge с контентом -->
+<Badge label="5" />
+
+<!-- Точечный индикатор -->
+<Badge dot />
+
+<!-- Точечный индикатор статуса онлайн -->
+<Badge dot :selected="isOnline" overlap="circular" />
+```

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

@@ -1,17 +1,16 @@
-## Outline Badge
+## Outline badges (outline)
 
-The outline variant provides a subtle badge style with transparent background and visible border, perfect for secondary information that needs to be noticeable but not dominant.
+The Badge component supports outline mode via the `outline` property. In this mode, badges have a minimalist visual style with transparent background and colored border:
 
-### When to use
+- **Minimalist design** - suitable for interfaces requiring reduced visual load
+- **Transparent background** - maintains clean appearance when displaying secondary information
+- **Subtle presence** - less visually prominent than filled variants
+- **Flexible adaptation** - works well with various background colors and themes
 
-- **Secondary information**: When you need to display supplementary data without overwhelming the main content
-- **Status indicators**: For showing neutral or informational states that don't require immediate attention
-- **Grouping elements**: To categorize or tag content in a non-intrusive way
-- **Light theme compatibility**: When working with light backgrounds where solid badges might be too heavy
+Outline mode is especially useful for creating secondary indicators, informational labels, and status markers that should be noticeable but not dominant in the interface's visual hierarchy.
 
-### Visual characteristics
-
-- **Transparent background**: Maintains the underlying design while adding informational value
-- **Visible border**: Uses border styling to define the badge boundaries
-- **Subtle presence**: Less visually prominent than primary or secondary filled variants
-- **Flexible appearance**: Adapts well to different background colors and themes
+```html
+<Badge outline overlap="static">99+</Badge>
+<Badge outline overlap="static" icon="info">Info</Badge>
+<Badge outline dot overlap="static"/>
+```

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

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

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

@@ -1,16 +1,16 @@
-## Primary Badge
+## Primary badges (primary)
 
-The primary variant is the most prominent badge style, designed to draw attention and indicate high-priority information or status.
+The Badge component supports primary mode via the `primary` property. In this mode, badges have the most prominent visual style with bright brand colors:
 
-### When to use
+- **High contrast** - uses primary brand colors for maximum visibility
+- **Bold appearance** - draws attention to important information
+- **Enhanced visibility** - designed to stand out against various backgrounds
+- **Accessibility support** - strong contrast ratios for readability
 
-- **Critical notifications**: When you need to highlight urgent or important information
-- **Status indicators**: For showing active, enabled, or positive states
-- **Call-to-action elements**: When the badge serves as an interactive element requiring user attention
-- **Brand emphasis**: To maintain brand consistency with primary color schemes
+Primary mode is especially useful for creating critical notification indicators, active statuses, and high-priority markers that require immediate user attention in the interface.
 
-### Visual characteristics
-
-- **High contrast**: Uses primary brand colors with strong contrast ratios for accessibility
-- **Bold appearance**: More visually prominent than secondary or outline variants
-- **Enhanced visibility**: Designed to stand out against various background colors
+```html
+<Badge primary overlap="static">5</Badge>
+<Badge primary overlap="static" icon="warning">Important</Badge>
+<Badge primary dot overlap="static"/>
+```

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>
+```