@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/mdx/Bars/v-model.en.mdx

@@ -1,19 +1,28 @@
-## Two-way binding (v-model)
+## State management via v-model
 
-The Bars component supports two-way binding for the `action` state using the `v-model:action` directive.
+Two-way binding of action mode state via `v-model:action`.
 
-### Usage
-
-This allows you to synchronize the action mode of the bar with a local data property in your parent component.
+**Parameters:**
+- `action: boolean` — action mode state of the bar
 
 ```html
-<Bars v-model:action="isAction"/>
+<script setup>
+import { ref } from 'vue'
+
+const isAction = ref(false)
+</script>
+
+<template>
+  <button @click="isAction = true">Enable action mode</button>
+
+  <Bars v-model:action="isAction">
+    <template #bars>
+      <Button>Regular button</Button>
+    </template>
+    <template #actionBars>
+      <Button>Action button</Button>
+      <Button @click="isAction = false">Close</Button>
+    </template>
+  </Bars>
+</template>
 ```
-
-### How it works
-
-The `v-model:action` is a shorthand for binding the `action` prop and listening to the `update:action` event.
-
-- **`:action=\"isAction\"`** — The action mode is controlled by the `isAction` ref.
-- **`@update:action=\"isAction = $event\"`** — When the internal state changes, the component emits an event to update the parent’s `isAction` ref.
-

package/src/media/mdx/Bars/v-model.ru.mdx

@@ -1,19 +1,28 @@
-## Двусторонняя привязка (v-model)
+## Управление состоянием через v-model
 
-Компонент Bars поддерживает двустороннюю привязку для состояния `action` с использованием директивы `v-model:action`.
+Двусторонняя привязка состояния action-режима через `v-model:action`.
 
-### Использование
-
-Это позволяет синхронизировать режим действий панели с локальным свойством данных родительского компонента.
+**Параметры:**
+- `action: boolean` — состояние action-режима панели
 
 ```html
-<Bars v-model:action="isAction"/>
+<script setup>
+import { ref } from 'vue'
+
+const isAction = ref(false)
+</script>
+
+<template>
+  <button @click="isAction = true">Включить action-режим</button>
+
+  <Bars v-model:action="isAction">
+    <template #bars>
+      <Button>Обычная кнопка</Button>
+    </template>
+    <template #actionBars>
+      <Button>Action-кнопка</Button>
+      <Button @click="isAction = false">Закрыть</Button>
+    </template>
+  </Bars>
+</template>
 ```
-
-### Как это работает
-
-`v-model:action` — это сокращение для привязки свойства `action` и прослушивания события `update:action`.
-
-- **`:action="isAction"`** — Режим действий управляется ref `isAction`.
-- **`@update:action="isAction = $event"`** — Когда внутреннее состояние меняется, компонент генерирует событие для обновления `isAction` у родителя.
-

package/src/media/mdx/Bars/wikiMdxBars.ts

@@ -4,10 +4,8 @@ import barsEn from './bars.en.mdx'
 import barsRu from './bars.ru.mdx'
 import actionEn from './action.en.mdx'
 import actionRu from './action.ru.mdx'
-import slotBarsEn from './slot.bars.en.mdx'
-import slotBarsRu from './slot.bars.ru.mdx'
-import slotActionBarsEn from './slot.actionBars.en.mdx'
-import slotActionBarsRu from './slot.actionBars.ru.mdx'
+import slotsEn from './slots.en.mdx'
+import slotsRu from './slots.ru.mdx'
 import vModelEn from './v-model.en.mdx'
 import vModelRu from './v-model.ru.mdx'
 
@@ -27,13 +25,9 @@ export const wikiMdxBars: StorybookComponentsMdxItem = {
       en: actionEn,
       ru: actionRu
     },
-    'slot.bars': {
-      en: slotBarsEn,
-      ru: slotBarsRu
-    },
-    'slot.actionBars': {
-      en: slotActionBarsEn,
-      ru: slotActionBarsRu
+    'slots': {
+      en: slotsEn,
+      ru: slotsRu
     },
     'v-model': {
       en: vModelEn,

package/src/media/mdx/Block/block.en.mdx

@@ -0,0 +1,42 @@
+## Description
+
+A versatile structural component that serves as a container with support for labels, descriptions, captions, icons, and headlines.
+
+Block provides a flexible foundation for building complex interface components, allowing you to combine various information elements into a single unit. The component supports HTML tag customization and provides slots for content customization.
+
+**Key Features:**
+
+- Display of headline, label, description, and caption
+- Icon support
+- Customizable HTML tag
+- Flexible layout for content organization
+- Slot support for functionality extension
+
+**Typical Use Cases:**
+
+- Content cards
+- List items
+- Information blocks
+- Sections with headers and descriptions
+- Basic building block for other components
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Block
+    headline="Block Headline"
+    label="Label"
+    description="Block description with detailed information"
+    caption="Caption"
+    icon="info"
+  >
+    Main block content
+  </Block>
+</template>
+```
+
+> Block is a fundamental component for creating structured interfaces.
+

package/src/media/mdx/Block/block.ru.mdx

@@ -0,0 +1,42 @@
+## Описание
+
+Универсальный структурный компонент, служащий контейнером с поддержкой меток, описаний, подписей, иконок и заголовков.
+
+Block обеспечивает гибкую основу для построения сложных компонентов интерфейса, позволяя комбинировать различные информационные элементы в едином блоке. Компонент поддерживает настройку HTML-тега и предоставляет слоты для кастомизации контента.
+
+**Основные возможности:**
+
+- Отображение заголовка, метки, описания и подписи
+- Поддержка иконок
+- Настраиваемый HTML-тег
+- Гибкая компоновка для организации контента
+- Поддержка слотов для расширения функциональности
+
+**Типичные сценарии использования:**
+
+- Карточки контента
+- Элементы списков
+- Информационные блоки
+- Секции с заголовками и описаниями
+- Базовый строительный блок для других компонентов
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Block
+    headline="Заголовок блока"
+    label="Метка"
+    description="Описание блока с подробной информацией"
+    caption="Подпись"
+    icon="info"
+  >
+    Основной контент блока
+  </Block>
+</template>
+```
+
+> Block является фундаментальным компонентом для создания структурированных интерфейсов.
+

package/src/media/mdx/Block/wikiMdxBlock.ts

@@ -0,0 +1,19 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import blockEn from './block.en.mdx'
+import blockRu from './block.ru.mdx'
+
+/**
+ * MDX files for Block component
+ *
+ * MDX файлы для компонента Block
+ */
+export const wikiMdxBlock: StorybookComponentsMdxItem = {
+  name: 'Block',
+  descriptions: {
+    block: {
+      en: blockEn,
+      ru: blockRu
+    }
+  }
+}

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

@@ -1,3 +1,91 @@
 ## Description
 
-The Button component is an interactive element for user actions. It supports various visual styles, sizes, and states to create a consistent user interface.
+Interactive button component for triggering user actions with support for multiple visual variants, states, and accessibility features.
+
+Button provides a comprehensive solution for creating consistent, accessible action elements with built-in support for icons, loading states, ripple effects, and skeleton placeholders. The component integrates visual variants (primary, secondary, outline, text), state management (focus, hover, disabled, selected), and adaptive behavior for responsive interfaces.
+
+**Key features:**
+
+- Multiple visual variants (primary, secondary, outline, text)
+- Comprehensive state support (focus, hover, active, disabled, selected, readonly)
+- Built-in icon positioning (leading and trailing)
+- Progress indicator integration for loading states
+- Ripple effect for tactile feedback
+- Skeleton system for loading placeholders
+- Adaptive and responsive behavior options
+- Full accessibility support (ARIA, keyboard navigation)
+- Customizable through design tokens
+
+**Typical use cases:**
+
+- Primary actions in forms and dialogs
+- Navigation and menu items
+- Toolbars and action bars
+- Call-to-action elements
+- Icon-only action buttons
+- Loading state indicators
+- Confirmation and cancellation actions
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const loading = ref(false)
+const selected = ref(false)
+
+const handleClick = async () => {
+  loading.value = true
+  // Simulate async operation
+  await new Promise(resolve => setTimeout(resolve, 2000))
+  loading.value = false
+  selected.value = !selected.value
+}
+</script>
+
+<template>
+  <div class="actions">
+    <!-- Primary button with loading state -->
+    <Button
+      primary
+      :progress="loading"
+      @click="handleClick"
+    >
+      Submit
+    </Button>
+
+    <!-- Secondary button with icon -->
+    <Button
+      secondary
+      icon="settings"
+    >
+      Settings
+    </Button>
+
+    <!-- Outline button with trailing icon -->
+    <Button
+      outline
+      icon-trailing="arrow_forward"
+    >
+      Next
+    </Button>
+
+    <!-- Text button with selected state -->
+    <Button
+      text
+      :selected="selected"
+      @click="selected = !selected"
+    >
+      Toggle
+    </Button>
+
+    <!-- Icon-only button -->
+    <Button
+      primary
+      icon="favorite"
+      adaptive="iconAlways"
+    />
+  </div>
+</template>
+```
+
+> Button is designed as a universal interactive element with comprehensive state management, visual variants, and accessibility features for creating consistent action interfaces.

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

@@ -1,3 +1,91 @@
 ## Описание
 
-Компонент Button представляет собой интерактивный элемент для выполнения действий пользователя. Он поддерживает различные визуальные стили, размеры и состояния для создания согласованного пользовательского интерфейса.
+Интерактивный компонент кнопки для инициирования действий пользователя с поддержкой множественных визуальных вариантов, состояний и функций доступности.
+
+Button предоставляет комплексное решение для создания согласованных, доступных элементов действий со встроенной поддержкой иконок, состояний загрузки, эффектов ripple и плейсхолдеров-скелетонов. Компонент интегрирует визуальные варианты (primary, secondary, outline, text), управление состояниями (focus, hover, disabled, selected) и адаптивное поведение для отзывчивых интерфейсов.
+
+**Основные возможности:**
+
+- Множественные визуальные варианты (primary, secondary, outline, text)
+- Комплексная поддержка состояний (focus, hover, active, disabled, selected, readonly)
+- Встроенное позиционирование иконок (в начале и в конце)
+- Интеграция индикатора прогресса для состояний загрузки
+- Эффект ripple для тактильной обратной связи
+- Система скелетонов для плейсхолдеров загрузки
+- Опции адаптивного и отзывчивого поведения
+- Полная поддержка доступности (ARIA, клавиатурная навигация)
+- Настройка через токены дизайна
+
+**Типичные сценарии использования:**
+
+- Основные действия в формах и диалогах
+- Элементы навигации и меню
+- Панели инструментов и действий
+- Элементы призыва к действию
+- Кнопки только с иконками
+- Индикаторы состояния загрузки
+- Действия подтверждения и отмены
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const loading = ref(false)
+const selected = ref(false)
+
+const handleClick = async () => {
+  loading.value = true
+  // Имитация асинхронной операции
+  await new Promise(resolve => setTimeout(resolve, 2000))
+  loading.value = false
+  selected.value = !selected.value
+}
+</script>
+
+<template>
+  <div class="actions">
+    <!-- Основная кнопка с состоянием загрузки -->
+    <Button
+      primary
+      :progress="loading"
+      @click="handleClick"
+    >
+      Отправить
+    </Button>
+
+    <!-- Второстепенная кнопка с иконкой -->
+    <Button
+      secondary
+      icon="settings"
+    >
+      Настройки
+    </Button>
+
+    <!-- Контурная кнопка с иконкой справа -->
+    <Button
+      outline
+      icon-trailing="arrow_forward"
+    >
+      Далее
+    </Button>
+
+    <!-- Текстовая кнопка с выбранным состоянием -->
+    <Button
+      text
+      :selected="selected"
+      @click="selected = !selected"
+    >
+      Переключить
+    </Button>
+
+    <!-- Кнопка только с иконкой -->
+    <Button
+      primary
+      icon="favorite"
+      adaptive="iconAlways"
+    />
+  </div>
+</template>
+```
+
+> Button разработан как универсальный интерактивный элемент с комплексным управлением состояниями, визуальными вариантами и функциями доступности для создания согласованных интерфейсов действий.

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

@@ -1,18 +1,16 @@
-## Outline Button Style
+## Outline buttons
 
-The `outline` property applies an outline style to the button. This style is typically used for actions that should be less prominent than `secondary` but still accessible.
+Button component supports outline mode through the `outline` property. In this mode, buttons have a minimalist visual style with transparent background and colored border:
 
-### Purpose
+- **Minimalist design** - suitable for interfaces requiring reduced visual load
+- **Transparent background** - maintains clean appearance while remaining interactive
+- **Hover feedback** - background appears on hover for better user interaction
+- **Icon support** - works seamlessly with icons for enhanced clarity
 
-- **Additional actions** — For actions that are not primary or secondary.
-- **Minimalist design** — Suitable for interfaces where minimal visual load is required.
+Outline mode is especially useful for creating tertiary actions, filter controls, and secondary options in cards or lists that need to be accessible without excessive visual noise.
 
-### Usage
-
-- Filter reset buttons.
-- Secondary actions in cards or lists.
-
-### Features
-
-- **Transparent background** — The button has a transparent background and a colored border.
-- **Hover contrast** — The background appears on hover for better feedback.
+```html
+<Button outline icon="filter">Filter</Button>
+<Button outline icon="sort">Sort</Button>
+<Button outline>More options</Button>
+```

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