@dxtmisha/wiki 0.24.2 → 0.25.1

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

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

@@ -1,18 +1,16 @@
-## Assistive чипы
+## Вспомогательные чипы (assistive)
 
-Assistive чипы предназначены для помощи пользователям в выполнении задач или предоставления дополнительной информации. Они имеют специальный внешний вид, который подчеркивает их вспомогательную роль в интерфейсе.
+Компонент Chip поддерживает вспомогательный режим через свойство `assistive`. В этом режиме чипы имеют специальный визуальный стиль для помощи пользователям в выполнении задач:
 
-### Особенности
+- **Отличительный стиль** - визуально выделяются среди других элементов
+- **Подсказки и рекомендации** - предлагают варианты действий или автодополнения
+- **Направление пользователя** - помогают ориентироваться в интерфейсе
+- **Поддержка иконок** - улучшают понимание назначения через визуальные элементы
 
-- Визуально отличаются от стандартных чипов
-- Используются для подсказок и рекомендаций
-- Помогают направлять пользователя к нужным действиям
-- Могут содержать иконки для лучшего понимания
+Assistive режим особенно полезен для создания систем подсказок, рекомендаций и вспомогательных действий, которые направляют пользователя к нужным решениям без излишнего визуального шума.
 
-### Применение
-
-Используйте assistive чипы для:
-- Предложения автодополнения
-- Рекомендаций системы
-- Подсказок по навигации
-- Вспомогательных действий в формах
+```html
+<Chip assistive icon="lightbulb">Рекомендация</Chip>
+<Chip assistive icon="check">Подсказка</Chip>
+<Chip assistive>Автодополнение</Chip>
+```

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

@@ -1,15 +1,75 @@
 ## Description
 
-A compact element that represents an input, attribute, or action. Chips allow users to enter information, make selections, filter content, or trigger actions.
+Compact interactive element for representing input, attributes, actions, and filters in the user interface.
 
-### Key Features
+Chip provides a unified component for displaying discrete information in a compact format with support for selection states, icons, adaptive behavior, and various visual variants (input, assistive). Inherits Button functionality while adding specialized styling and semantics for working with tags, filters, statuses, and user input. Ensures a consistent API for creating interactive chips with support for clicks, disabled/selected states, and icon integration.
 
-- Display information in a compact format
-- Support for various states (selected, disabled)
-- Icon support capability
-- Adaptive behavior
-- Customizable styling
+**Core capabilities:**
 
-### Recommendations
+- Button inheritance (icons, progress, click events)
+- Visual variants (input, assistive) for different contexts
+- State management (selected, disabled, focus, readonly)
+- Adaptive behavior (adaptive, container) for different screen sizes
+- Customizable text alignment (textAlign: left/center/right)
+- Icon support (icon, iconTrailing) and progress indicator
+- Skeleton state integration for loading
+- Value and detail passing for element identification
 
-Use chips to display tags, filters, statuses, or other compact interface elements. They are particularly useful in lists, search forms, and filtering systems.
+**Typical use cases:**
+
+- Tags and labels for content categorization
+- Filters in search interfaces and catalogs
+- Displaying user-entered data (emails, contacts)
+- Statuses and state indicators
+- Assistive elements (hints, recommendations)
+- Selectable options in forms and lists
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedFilters = ref(['active', 'verified'])
+const tags = ref(['Vue', 'TypeScript', 'UI'])
+
+const toggleFilter = (filter) => {
+  const index = selectedFilters.value.indexOf(filter)
+  if (index > -1) {
+    selectedFilters.value.splice(index, 1)
+  } else {
+    selectedFilters.value.push(filter)
+  }
+}
+</script>
+
+<template>
+  <!-- Basic chip -->
+  <Chip>Standard</Chip>
+
+  <!-- Input chip for user input -->
+  <Chip input icon="person">Contact</Chip>
+
+  <!-- Assistive chip for hints -->
+  <Chip assistive icon="lightbulb">Recommendation</Chip>
+
+  <!-- Filters with selection state -->
+  <Chip
+    v-for="filter in ['active', 'pending', 'verified']"
+    :key="filter"
+    :selected="selectedFilters.includes(filter)"
+    @click="toggleFilter(filter)"
+  >
+    {{ filter }}
+  </Chip>
+
+  <!-- With data passing -->
+  <Chip
+    value="filter-tag"
+    :detail="{ category: 'status', type: 'active' }"
+    @click="handleChipClick"
+  >
+    Active
+  </Chip>
+</template>
+```
+
+> Chip inherits all Button functionality, including events, icons, and progress indicators, while adding specialized styling for compact interface elements.

package/src/media/mdx/Chip/chip.ru.mdx

@@ -1,15 +1,75 @@
 ## Описание
 
-Компактный элемент, представляющий ввод, атрибут или действие. Чипы позволяют пользователям вводить информацию, делать выбор, фильтровать контент или запускать действия.
+Компактный интерактивный элемент для представления ввода, атрибутов, действий и фильтров в пользовательском интерфейсе.
 
-### Основные возможности
+Chip предоставляет унифицированный компонент для отображения дискретной информации в компактном формате с поддержкой состояний выбора, иконок, адаптивного поведения и различных визуальных вариантов (input, assistive). Наследует функциональность Button, добавляя специализированную стилизацию и семантику для работы с тегами, фильтрами, статусами и пользовательским вводом. Обеспечивает согласованный API для создания интерактивных чипов с поддержкой кликов, состояния disabled/selected и интеграцией иконок.
 
-- Отображение информации в компактном формате
-- Поддержка различных состояний (выбранный, отключенный)
-- Возможность добавления иконок
-- Адаптивное поведение
-- Настраиваемая стилизация
+**Основные возможности:**
 
-### Рекомендации
+- Наследование от Button (иконки, прогресс, события клика)
+- Визуальные варианты (input, assistive) для разных контекстов
+- Управление состояниями (selected, disabled, focus, readonly)
+- Адаптивное поведение (adaptive, container) для разных размеров экрана
+- Настраиваемое выравнивание текста (textAlign: left/center/right)
+- Поддержка иконок (icon, iconTrailing) и прогресс-индикатора
+- Интеграция скелетон-состояния для загрузки
+- Передача value и detail для идентификации элементов
 
-Используйте чипы для отображения тегов, фильтров, статусов или других компактных элементов интерфейса. Они особенно полезны в списках, формах поиска и системах фильтрации.
+**Типичные сценарии использования:**
+
+- Теги и метки для категоризации контента
+- Фильтры в поисковых интерфейсах и каталогах
+- Отображение введенных пользователем данных (email, контакты)
+- Статусы и индикаторы состояния
+- Вспомогательные элементы (подсказки, рекомендации)
+- Выбираемые опции в формах и списках
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const selectedFilters = ref(['active', 'verified'])
+const tags = ref(['Vue', 'TypeScript', 'UI'])
+
+const toggleFilter = (filter) => {
+  const index = selectedFilters.value.indexOf(filter)
+  if (index > -1) {
+    selectedFilters.value.splice(index, 1)
+  } else {
+    selectedFilters.value.push(filter)
+  }
+}
+</script>
+
+<template>
+  <!-- Базовый чип -->
+  <Chip>Стандарт</Chip>
+
+  <!-- Input чип для пользовательского ввода -->
+  <Chip input icon="person">Контакт</Chip>
+
+  <!-- Assistive чип для подсказок -->
+  <Chip assistive icon="lightbulb">Рекомендация</Chip>
+
+  <!-- Фильтры с состоянием выбора -->
+  <Chip
+    v-for="filter in ['active', 'pending', 'verified']"
+    :key="filter"
+    :selected="selectedFilters.includes(filter)"
+    @click="toggleFilter(filter)"
+  >
+    {{ filter }}
+  </Chip>
+
+  <!-- С передачей данных -->
+  <Chip
+    value="filter-tag"
+    :detail="{ category: 'status', type: 'active' }"
+    @click="handleChipClick"
+  >
+    Активный
+  </Chip>
+</template>
+```
+
+> Chip наследует всю функциональность Button, включая события, иконки и прогресс-индикаторы, добавляя специализированную стилизацию для компактных элементов интерфейса.