@dxtmisha/wiki 0.24.1 → 0.24.3

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

@@ -1,18 +1,16 @@
-## Контурный стиль кнопки
+## Контурные кнопки (outline)
 
-Свойство `outline` применяет контурный стиль к кнопке. Этот стиль обычно используется для действий, которые должны быть менее заметными, чем `secondary`, но все же доступными.
+Компонент Button поддерживает контурный режим через свойство `outline`. В этом режиме кнопки имеют минималистичный визуальный стиль с прозрачным фоном и цветной границей:
 
-### Назначение
+- **Минималистичный дизайн** - подходит для интерфейсов, требующих сниженной визуальной нагрузки
+- **Прозрачный фон** - поддерживает чистый внешний вид, оставаясь интерактивными
+- **Обратная связь при наведении** - фон появляется при наведении для лучшего взаимодействия с пользователем
+- **Поддержка иконок** - бесшовно работает с иконками для улучшенной ясности
 
-- **Дополнительные действия** — Для действий, которые не являются основными или второстепенными.
-- **Минималистичный дизайн** — Подходит для интерфейсов, где требуется минимальная визуальная нагрузка.
+Outline режим особенно полезен для создания третичных действий, элементов управления фильтрами и второстепенных опций в карточках или списках, которые должны быть доступны без излишнего визуального шума.
 
-### Применение
-
-- Кнопки сброса фильтров.
-- Второстепенные действия в карточках или списках.
-
-### Особенности
-
-- **Прозрачный фон** — Кнопка имеет прозрачный фон и цветную рамку.
-- **Контрастность при наведении** — Фон появляется при наведении для лучшего отклика.
+```html
+<Button outline icon="filter">Фильтр</Button>
+<Button outline icon="sort">Сортировка</Button>
+<Button outline>Дополнительно</Button>
+```

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

@@ -1,23 +1,16 @@
-## Primary Button Style
+## Primary buttons
 
-The `primary` property activates the main visual style of the button, making it more prominent and drawing user attention to important actions.
+Button component supports primary mode through the `primary` property. In this mode, buttons have a distinctive visual style for the most important actions:
 
-### Purpose
+- **Visual emphasis** - stands out prominently among other interface elements
+- **Action hierarchy** - indicates the main or priority action on the page
+- **High contrast** - automatically applies high-contrast colors for better visibility
+- **Icon support** - enhances understanding of purpose through visual elements
 
-- **Visual accent** — Makes the button stand out among other interface elements
-- **Action hierarchy** — Indicates the main or priority action on the page
-- **Enhanced visibility** — Provides better distinction of important controls
+Primary mode is especially useful for creating main call-to-action buttons, form submissions, and confirmation actions that require user attention and should be immediately recognizable in the interface.
 
-### Usage
-
-The property is recommended for:
-- Main actions in forms (submit, save)
-- Call-to-Action buttons
-- Confirmation of important operations
-- Navigation to key sections
-
-### Features
-
-- **Contrast** — Automatically applies high-contrast colors for better visibility
-- **Accessibility** — Complies with accessibility standards for users with disabilities
-- **Responsiveness** — Maintains style across different screen sizes and devices
+```html
+<Button primary icon="send">Submit</Button>
+<Button primary icon="save">Save</Button>
+<Button primary>Confirm</Button>
+```

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

@@ -1,23 +1,16 @@
-## Основной стиль кнопки
+## Основные кнопки (primary)
 
-Свойство `primary` активирует основной визуальный стиль кнопки, делая её более заметной и акцентирующей внимание пользователя на важном действии.
+Компонент Button поддерживает основной режим через свойство `primary`. В этом режиме кнопки имеют выделяющийся визуальный стиль для самых важных действий:
 
-### Назначение
+- **Визуальный акцент** - выделяются заметно среди других элементов интерфейса
+- **Иерархия действий** - указывают на основное или приоритетное действие на странице
+- **Высокая контрастность** - автоматически применяются высококонтрастные цвета для лучшей видимости
+- **Поддержка иконок** - улучшают понимание назначения через визуальные элементы
 
-- **Визуальный акцент** — Выделяет кнопку среди других элементов интерфейса
-- **Иерархия действий** — Указывает на основное или приоритетное действие на странице
-- **Улучшенная видимость** — Обеспечивает лучшую различимость важных элементов управления
+Primary режим особенно полезен для создания основных кнопок призыва к действию, отправки форм и подтверждающих действий, которые требуют внимания пользователя и должны быть сразу узнаваемы в интерфейсе.
 
-### Применение
-
-Свойство рекомендуется использовать для:
-- Основных действий в формах (отправка, сохранение)
-- Призывов к действию (Call-to-Action)
-- Подтверждения важных операций
-- Навигации к ключевым разделам
-
-### Особенности
-
-- **Контрастность** — Автоматически применяет высококонтрастные цвета для лучшей видимости
-- **Доступность** — Соответствует стандартам доступности для пользователей с ограниченными возможностями
-- **Адаптивность** — Сохраняет стиль при различных размерах экрана и устройствах
+```html
+<Button primary icon="send">Отправить</Button>
+<Button primary icon="save">Сохранить</Button>
+<Button primary>Подтвердить</Button>
+```

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

@@ -1,21 +1,16 @@
-## Secondary Button Style
+## Secondary buttons
 
-The `secondary` property activates the secondary visual style of the button, which is less intrusive than the primary style and is used for alternative or less important actions.
+Button component supports secondary mode through the `secondary` property. In this mode, buttons have a less prominent visual style for alternative or supporting actions:
 
-### Purpose
+- **Moderate emphasis** - less intrusive than primary buttons while remaining clear
+- **Action alternatives** - provides users with alternative choices without overwhelming them
+- **Balanced contrast** - uses colors with moderate contrast for better visual hierarchy
+- **Icon support** - maintains consistency with other button variants through visual elements
 
-- **Alternative actions** — Provides the user with a choice of several actions
-- **Reduced visual load** — Helps to avoid overloading the interface with accent elements
-- **Grouping actions** — Used to group related but not primary actions
+Secondary mode is especially useful for creating cancel buttons, reset actions, and alternative choices that support the main flow without competing for primary attention in the interface.
 
-### Usage
-
-The property is recommended for:
-- Secondary actions in forms (cancel, reset)
-- Additional options or settings
-- Less priority actions on the page
-
-### Features
-
-- **Moderate contrast** — Uses colors with less contrast than the primary style
-- **Consistency** — Harmoniously combines with the primary style and other elements
+```html
+<Button secondary icon="close">Cancel</Button>
+<Button secondary icon="refresh">Reset</Button>
+<Button secondary>Skip</Button>
+```

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

@@ -1,21 +1,16 @@
-## Второстепенный стиль кнопки
+## Второстепенные кнопки (secondary)
 
-Свойство `secondary` активирует второстепенный визуальный стиль кнопки, который менее навязчив, чем основной, и используется для альтернативных или менее важных действий.
+Компонент Button поддерживает второстепенный режим через свойство `secondary`. В этом режиме кнопки имеют менее заметный визуальный стиль для альтернативных или поддерживающих действий:
 
-### Назначение
+- **Умеренный акцент** - менее навязчивы чем основные кнопки, оставаясь при этом понятными
+- **Альтернативные действия** - предоставляют пользователям альтернативный выбор без перегрузки
+- **Сбалансированная контрастность** - используют цвета с умеренным контрастом для лучшей визуальной иерархии
+- **Поддержка иконок** - поддерживают согласованность с другими вариантами кнопок через визуальные элементы
 
-- **Альтернативные действия** — Предоставляет пользователю выбор из нескольких действий
-- **Сниженная визуальная нагрузка** — Помогает избежать перегрузки интерфейса акцентными элементами
-- **Группировка действий** — Используется для группировки связанных, но не основных действий
+Secondary режим особенно полезен для создания кнопок отмены, действий сброса и альтернативных вариантов выбора, которые поддерживают основной поток без конкуренции за первичное внимание в интерфейсе.
 
-### Применение
-
-Свойство рекомендуется использовать для:
-- Второстепенных действий в формах (отмена, сброс)
-- Дополнительных опций или настроек
-- Менее приоритетных действий на странице
-
-### Особенности
-
-- **Умеренный контраст** — Использует цвета с меньшим контрастом, чем основной стиль
-- **Согласованность** — Гармонично сочетается с основным стилем и другими элементами
+```html
+<Button secondary icon="close">Отмена</Button>
+<Button secondary icon="refresh">Сброс</Button>
+<Button secondary>Пропустить</Button>
+```

package/src/media/mdx/Button/text.en.mdx

@@ -1,15 +1,16 @@
-## Text Button Style
+## Text buttons
 
-The `text` property applies a text style to the button, making it look like a link. This style is used for the least intrusive actions.
+Button component supports text mode through the `text` property. In this mode, buttons have a minimalist text-only style resembling links for the most unobtrusive actions:
 
-### Purpose
-- **Tertiary actions** — For actions that should look like text but be interactive.
-- **Unobtrusive design** — Ideal for actions within text or where the button should not be distracting.
+- **Unobtrusive design** - looks like plain text while remaining interactive
+- **No background or border** - maintains clean appearance without visual weight
+- **Hover feedback** - subtle background appears on hover for better interaction clarity
+- **Icon support** - seamlessly integrates icons while maintaining minimal visual impact
 
-### Usage
-- "Learn more" links.
-- Actions in a footer or menu.
+Text mode is especially useful for creating tertiary actions, inline navigation links, and supplementary options within text content or footers that need to be accessible without drawing excessive attention.
 
-### Features
-- **No background or border** — The button looks like plain text.
-- **Hover background** — A background appears on hover for better feedback.
+```html
+<Button text icon="info">Learn more</Button>
+<Button text icon="help">Help</Button>
+<Button text>Read details</Button>
+```

package/src/media/mdx/Button/text.ru.mdx

@@ -1,15 +1,16 @@
-## Текстовый стиль кнопки
+## Текстовые кнопки (text)
 
-Свойство `text` применяет текстовый стиль к кнопке, делая ее похожей на ссылку. Этот стиль используется для наименее навязчивых действий.
+Компонент Button поддерживает текстовый режим через свойство `text`. В этом режиме кнопки имеют минималистичный текстовый стиль, напоминающий ссылки, для самых ненавязчивых действий:
 
-### Назначение
-- **Второстепенные действия** — Для действий, которые должны выглядеть как текст, но быть интерактивными.
-- **Ненавязчивый дизайн** — Идеально подходит для действий внутри текста или там, где кнопка не должна отвлекать внимание.
+- **Ненавязчивый дизайн** - выглядит как обычный текст, оставаясь интерактивным
+- **Без фона и рамки** - поддерживает чистый внешний вид без визуальной нагрузки
+- **Обратная связь при наведении** - тонкий фон появляется при наведении для лучшей ясности взаимодействия
+- **Поддержка иконок** - бесшовно интегрирует иконки, сохраняя минимальное визуальное воздействие
 
-### Применение
-- Ссылки "Узнать больше".
-- Действия в футере или в меню.
+Text режим особенно полезен для создания третичных действий, встроенных навигационных ссылок и дополнительных опций внутри текстового контента или футеров, которые должны быть доступны без привлечения чрезмерного внимания.
 
-### Особенности
-- **Без фона и рамки** — Кнопка выглядит как обычный текст.
-- **Фон при наведении** — Появляется фон для лучшего отклика.
+```html
+<Button text icon="info">Узнать больше</Button>
+<Button text icon="help">Справка</Button>
+<Button text>Читать детали</Button>
+```

package/src/media/mdx/Cell/cell.en.mdx

@@ -1,16 +1,57 @@
 ## Description
 
-Versatile container component for displaying structured content with labels, descriptions, and actions. Cell provides consistent representation of information in lists, menus, and other interface elements.
+Universal container component for displaying structured content with labels, descriptions, and interactive actions in lists and interface elements.
 
-### Key Features
+Cell provides a consistent way to represent information blocks with support for text hierarchy (label, description, caption), interactive states, icons, and progress indicators. The component integrates ripple effects, skeleton states, and flexible content positioning for creating modern interface lists.
 
-- Flexible content structure with support for labels, descriptions, and captions
-- Interactive states (selected, disabled, read-only)
+**Key features:**
+
+- Structured content hierarchy (label, description, caption)
+- Interactive states (focus, selected, disabled, readonly)
 - Built-in icon and progress indicator support
-- Customizable dividers between elements
-- Dynamic behavior with hover effects
-- Skeleton system integration for loading states
+- Ripple effect integration for tactile feedback
+- Skeleton system for loading states
+- Customizable dividers and dynamic behavior
+- Flexible slot system for custom content
+- Optimized for list and menu interfaces
+
+**Typical use cases:**
+
+- List items in navigation menus and settings
+- Contact cards and profile entries
+- Action sheets and selection lists
+- Settings panels and configuration items
+- Data tables and structured information displays
+- Mobile-first interface components
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(false)
+const loading = ref(false)
+
+const handleClick = () => {
+  console.log('Cell clicked')
+  selected.value = !selected.value
+}
+</script>
 
-### Recommendations
+<template>
+  <Cell
+    label="Notification Settings"
+    description="Manage how you receive notifications"
+    caption="Updated today"
+    icon="notifications"
+    :selected="selected"
+    :skeleton="loading"
+    @click="handleClick"
+  >
+    <template #trailing>
+      <Icon name="chevron_right" />
+    </template>
+  </Cell>
+</template>
+```
 
-Use Cell to create structured lists, settings, navigation menus, and other interface elements that require consistent information display. Particularly effective in mobile interfaces and responsive designs.
+> Cell is designed as a universal building block for creating consistent list-based interfaces with rich content and interactive states.

package/src/media/mdx/Cell/cell.ru.mdx

@@ -1,16 +1,57 @@
 ## Описание
 
-Универсальный контейнерный компонент для отображения структурированного контента с метками, описаниями и действиями. Cell обеспечивает единообразное представление информации в списках, меню и других интерфейсных элементах.
+Универсальный контейнерный компонент для отображения структурированного контента с метками, описаниями и интерактивными действиями в списках и элементах интерфейса.
 
-### Основные возможности
+Cell обеспечивает единообразное представление информационных блоков с поддержкой текстовой иерархии (метка, описание, подпись), интерактивных состояний, иконок и индикаторов прогресса. Компонент интегрирует эффекты ripple, состояния скелетонов и гибкое позиционирование контента для создания современных интерфейсных списков.
 
-- Гибкая структура контента с поддержкой меток, описаний и подписей
-- Интерактивные состояния (выбранный, отключенный, только для чтения)
+**Основные возможности:**
+
+- Структурированная иерархия контента (метка, описание, подпись)
+- Интерактивные состояния (focus, selected, disabled, readonly)
 - Встроенная поддержка иконок и индикаторов прогресса
-- Настраиваемые разделители между элементами
-- Динамическое поведение с эффектами наведения
-- Интеграция с системой скелетонов для состояний загрузки
+- Интеграция эффекта ripple для тактильной обратной связи
+- Система скелетонов для состояний загрузки
+- Настраиваемые разделители и динамическое поведение
+- Гибкая система слотов для пользовательского контента
+- Оптимизирован для списковых и меню интерфейсов
+
+**Типичные сценарии использования:**
+
+- Элементы списков в меню навигации и настройках
+- Карточки контактов и профильные записи
+- Списки действий и выбора элементов
+- Панели настроек и элементы конфигурации
+- Таблицы данных и структурированные информационные блоки
+- Компоненты интерфейса mobile-first
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(false)
+const loading = ref(false)
+
+const handleClick = () => {
+  console.log('Ячейка нажата')
+  selected.value = !selected.value
+}
+</script>
 
-### Рекомендации
+<template>
+  <Cell
+    label="Настройки уведомлений"
+    description="Управление способами получения уведомлений"
+    caption="Обновлено сегодня"
+    icon="notifications"
+    :selected="selected"
+    :skeleton="loading"
+    @click="handleClick"
+  >
+    <template #trailing>
+      <Icon name="chevron_right" />
+    </template>
+  </Cell>
+</template>
+```
 
-Используйте Cell для создания структурированных списков, настроек, меню навигации и других элементов интерфейса, где требуется единообразное отображение информации. Особенно эффективен в мобильных интерфейсах и адаптивных дизайнах.
+> Cell разработан как универсальный строительный блок для создания единообразных списковых интерфейсов с богатым контентом и интерактивными состояниями.

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

@@ -0,0 +1,82 @@
+### `trailing`
+
+Slot for placing control elements or indicators at the end of the cell (icons, switches, buttons).
+
+**Parameters:**
+- `props: CellClassesSub` — object with CSS classes for cell sub-elements
+
+### `body`
+
+Slot for placing additional content at the bottom of the cell (metadata, secondary actions, details).
+
+**Parameters:**
+- `props: CellClassesSub` — object with CSS classes for cell sub-elements
+
+## CellClassesSub
+
+`CellClassesSub` — object passed to all Cell component slots, containing CSS classes for styling sub-elements.
+
+### Type Structure
+
+```typescript
+type CellClassesSub = {
+  /** CSS class for label element */
+  label: string
+
+  /** CSS class for description element */
+  description: string
+
+  /** CSS class for caption element */
+  caption: string
+
+  /** CSS class for trailing area element */
+  trailing: string
+}
+```
+
+### Properties
+
+- **`label`** — CSS class for the label element (`{className}__label`)
+- **`description`** — CSS class for the description element (`{className}__description`)
+- **`caption`** — CSS class for the caption element (`{className}__caption`)
+- **`trailing`** — CSS class for the trailing area element (`{className}__trailing`)
+
+### Usage Example
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(false)
+const notifications = ref(5)
+</script>
+
+<template>
+  <Cell
+    label="Notifications"
+    description="You have unread messages"
+    icon="notifications"
+    :selected="selected"
+    @click="selected = !selected"
+  >
+    <template #trailing="{ trailing }">
+      <div :class="trailing">
+        <Icon name="chevron_right" />
+      </div>
+    </template>
+
+    <template #body>
+      <div class="quick-actions">
+        <button @click.stop="markAllRead">Mark all as read</button>
+        <button @click.stop="clearAll">Clear all</button>
+      </div>
+    </template>
+  </Cell>
+</template>
+```
+
+In this example:
+- Each slot receives `CellClassesSub` with CSS classes for proper styling
+- `trailing` slot places interactive elements on the right side
+- `body` slot adds additional actions below the main content
+- All elements are properly integrated into the Cell structure

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

@@ -0,0 +1,83 @@
+### `trailing`
+
+Слот для размещения элементов управления или индикаторов в конце ячейки (иконки, переключатели, кнопки).
+
+**Параметры:**
+- `props: CellClassesSub` — объект с CSS классами для под-элементов ячейки
+
+### `body`
+
+Слот для размещения дополнительного контента в нижней части ячейки (метаданные, вторичные действия, детали).
+
+**Параметры:**
+- `props: CellClassesSub` — объект с CSS классами для под-элементов ячейки
+
+## CellClassesSub
+
+`CellClassesSub` — объект, передаваемый во все слоты компонента Cell, содержащий CSS классы для стилизации под-элементов.
+
+### Структура типа
+
+```typescript
+type CellClassesSub = {
+  /** CSS класс для элемента метки */
+  label: string
+
+  /** CSS класс для элемента описания */
+  description: string
+
+  /** CSS класс для элемента подписи */
+  caption: string
+
+  /** CSS класс для элемента области trailing */
+  trailing: string
+}
+```
+
+### Свойства
+
+- **`label`** — CSS класс для элемента метки (`{className}__label`)
+- **`description`** — CSS класс для элемента описания (`{className}__description`)
+- **`caption`** — CSS класс для элемента подписи (`{className}__caption`)
+- **`trailing`** — CSS класс для элемента области trailing (`{className}__trailing`)
+
+### Пример использования
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(false)
+const notifications = ref(5)
+</script>
+
+<template>
+  <Cell
+    label="Уведомления"
+    description="У вас есть непрочитанные сообщения"
+    icon="notifications"
+    :selected="selected"
+    @click="selected = !selected"
+  >
+    <template #trailing="{ trailing }">
+      <div :class="trailing">
+        <Icon name="chevron_right" />
+      </div>
+    </template>
+
+    <template #body>
+      <div class="quick-actions">
+        <button @click.stop="markAllRead">Отметить все как прочитанное</button>
+        <button @click.stop="clearAll">Очистить все</button>
+      </div>
+    </template>
+  </Cell>
+</template>
+```
+
+В этом примере:
+- Каждый слот получает `CellClassesSub` с CSS классами для правильной стилизации
+- Слот `trailing` размещает интерактивные элементы справа
+- Слот `body` добавляет дополнительные действия под основным контентом
+- Все элементы корректно интегрированы в структуру Cell
+

package/src/media/mdx/Cell/wikiMdxCell.ts

@@ -2,10 +2,8 @@ import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
 
 import cellEn from './cell.en.mdx'
 import cellRu from './cell.ru.mdx'
-import slotBodyEn from './slot.body.en.mdx'
-import slotBodyRu from './slot.body.ru.mdx'
-import slotTrailingEn from './slot.trailing.en.mdx'
-import slotTrailingRu from './slot.trailing.ru.mdx'
+import slotsEn from './slots.en.mdx'
+import slotsRu from './slots.ru.mdx'
 
 /**
  * MDX files for Cell component
@@ -15,17 +13,13 @@ import slotTrailingRu from './slot.trailing.ru.mdx'
 export const wikiMdxCell: StorybookComponentsMdxItem = {
   name: 'Cell',
   descriptions: {
-    'cell': {
+    cell: {
       en: cellEn,
       ru: cellRu
     },
-    'slot.body': {
-      en: slotBodyEn,
-      ru: slotBodyRu
-    },
-    'slot.trailing': {
-      en: slotTrailingEn,
-      ru: slotTrailingRu
+    slots: {
+      en: slotsEn,
+      ru: slotsRu
     }
   }
 }

package/src/media/mdx/Chip/assistive.en.mdx

@@ -1,18 +1,16 @@
-## Assistive Chips
+## Assistive chips (assistive)
 
-Assistive chips are designed to help users complete tasks or provide additional information. They have a special appearance that emphasizes their supportive role in the interface.
+The Chip component supports assistive mode through the `assistive` property. In this mode, chips have a special visual style to help users complete tasks:
 
-### Features
+- **Distinctive style** - visually stand out among other elements
+- **Hints and recommendations** - suggest action options or auto-completion
+- **User guidance** - help navigate the interface
+- **Icon support** - improve understanding of purpose through visual elements
 
-- Visually distinct from standard chips
-- Used for hints and recommendations
-- Help guide users to appropriate actions
-- Can contain icons for better understanding
+Assistive mode is especially useful for creating hint systems, recommendations, and helper actions that guide users to the right solutions without excessive visual noise.
 
-### Usage
-
-Use assistive chips for:
-- Auto-completion suggestions
-- System recommendations
-- Navigation hints
-- Helper actions in forms
+```html
+<Chip assistive icon="lightbulb">Recommendation</Chip>
+<Chip assistive icon="check">Hint</Chip>
+<Chip assistive>Auto-complete</Chip>
+```