@dxtmisha/wiki 0.25.1 → 0.39.2

package/src/media/functional/wiki/styles/layout/layout.ru.mdx

@@ -0,0 +1,121 @@
+import {Meta, Unstyled} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/wiki/styles/# Макетные утилиты'/>
+
+# Макетные утилиты
+
+Набор CSS-классов для организации пространственной структуры демонстрационных зон в Storybook и Wiki. Эти классы позволяют быстро создавать сетки, флекс-контейнеры и ограничивать ширину контента.
+
+Все классы имеют префикс `.wiki-storybook-`.
+
+
+## Контейнер
+
+Класс `.wiki-storybook-container` инициализирует контейнер типа `inline-size`. Это позволяет вложенным элементам использовать `@container` запросы.
+
+```html
+<div class="wiki-storybook-container">
+  <!-- Контент, реагирующий на ширину этого контейнера -->
+</div>
+```
+
+## Сетка
+
+Класс `.wiki-storybook-group` создает CSS Grid контейнер с 12 колонками и стандартным отступом `8px`.
+
+```html
+<div class="wiki-storybook-group">
+  <div class="wiki-storybook-item wiki-storybook-item--squared--xs">Span XS</div>
+  <div class="wiki-storybook-item wiki-storybook-item--squared--xs">Span XS</div>
+  <div class="wiki-storybook-item wiki-storybook-item--squared--sm">Span SM</div>
+</div>
+```
+
+<Unstyled>
+  <div class="wiki-storybook-group">
+    <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding wiki-storybook-item--squared--xs">Span XS</div>
+    <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding wiki-storybook-item--squared--xs">Span XS</div>
+    <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding wiki-storybook-item--squared--sm">Span SM</div>
+  </div>
+</Unstyled>
+
+
+## Флекс-слои
+
+Утилиты для быстрого выравнивания элементов по горизонтали или вертикали.
+
+### Стандартный Flex
+Класс `.wiki-storybook-flex` — горизонтальный стек с переносом и отступом `8px`.
+
+```html
+<div class="wiki-storybook-flex">
+    <div class="wiki-storybook-item">1</div>
+    <div class="wiki-storybook-item">2</div>
+    <div class="wiki-storybook-item">3</div>
+</div>
+```
+
+<Unstyled>
+  <div class="wiki-storybook-flex">
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
+  </div>
+</Unstyled>
+
+### Центрирование (Flex Center)
+Класс `.wiki-storybook-flex-center` выравнивает контент строго по центру.
+
+```html
+<div class="wiki-storybook-flex-center">
+    <div class="wiki-storybook-item">1</div>
+    <div class="wiki-storybook-item">2</div>
+    <div class="wiki-storybook-item">3</div>
+</div>
+```
+
+<Unstyled>
+  <div class="wiki-storybook-flex-center">
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
+  </div>
+</Unstyled>
+
+### Выравнивание по центру (Flex Align Center)
+Класс `.wiki-storybook-flex-align-center` выравнивает элементы по горизонтали с центрированием по вертикали.
+
+```html
+<div class="wiki-storybook-flex-align-center">
+    <div class="wiki-storybook-item">1</div>
+    <div class="wiki-storybook-item">2</div>
+    <div class="wiki-storybook-item">3</div>
+</div>
+```
+
+<Unstyled>
+  <div class="wiki-storybook-flex-align-center">
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
+  </div>
+</Unstyled>
+
+### Вертикальный стек (Flex Column)
+Класс `.wiki-storybook-flex-column` располагает элементы вертикально с отступом `16px`.
+
+```html
+<div class="wiki-storybook-flex-column">
+    <div class="wiki-storybook-item">1</div>
+    <div class="wiki-storybook-item">2</div>
+    <div class="wiki-storybook-item">3</div>
+</div>
+```
+
+<Unstyled>
+  <div class="wiki-storybook-flex-column">
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
+  </div>
+</Unstyled>

package/src/media/functional/wiki/styles/layout/layout.vi.mdx

@@ -0,0 +1,122 @@
+import {Meta, Unstyled} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/wiki/styles/# Tiện ích Bố cục'/>
+
+# Tiện ích Bố cục
+
+Tập hợp các class CSS để tổ chức cấu trúc không gian cho các khu vực trình diễn trong Storybook và Wiki. Những class này giúp bạn nhanh chóng tạo lưới (grid), khung linh hoạt (flex) và giới hạn chiều rộng nội dung.
+
+Tất cả các class đều có tiền tố `.wiki-storybook-`.
+
+
+## Thẻ chứa
+
+Class `.wiki-storybook-container` khởi tạo một thẻ chứa loại `inline-size`. Điều này cho phép các phần tử con sử dụng các truy vấn `@container`.
+
+```html
+<div class="wiki-storybook-container">
+  <!-- Nội dung phản hồi theo chiều rộng của thẻ chứa này -->
+</div>
+```
+
+
+## Lưới
+
+Class `.wiki-storybook-group` tạo ra một thẻ chứa CSS Grid với 12 cột và khoảng cách (gap) tiêu chuẩn là `8px`.
+
+```html
+<div class="wiki-storybook-group">
+  <div class="wiki-storybook-item wiki-storybook-item--squared--xs">Span XS</div>
+  <div class="wiki-storybook-item wiki-storybook-item--squared--xs">Span XS</div>
+  <div class="wiki-storybook-item wiki-storybook-item--squared--sm">Span SM</div>
+</div>
+```
+
+<Unstyled>
+  <div class="wiki-storybook-group">
+    <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding wiki-storybook-item--squared--xs">Span XS</div>
+    <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding wiki-storybook-item--squared--xs">Span XS</div>
+    <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding wiki-storybook-item--squared--sm">Span SM</div>
+  </div>
+</Unstyled>
+
+
+## Bố cục linh hoạt
+
+Các tiện ích để nhanh chóng căn chỉnh các phần tử theo chiều ngang hoặc chiều dọc.
+
+### Flex tiêu chuẩn
+Class `.wiki-storybook-flex` — sắp xếp theo hàng ngang, tự động xuống dòng với khoảng cách `8px`.
+
+```html
+<div class="wiki-storybook-flex">
+    <div class="wiki-storybook-item">1</div>
+    <div class="wiki-storybook-item">2</div>
+    <div class="wiki-storybook-item">3</div>
+</div>
+```
+
+<Unstyled>
+  <div class="wiki-storybook-flex">
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
+  </div>
+</Unstyled>
+
+### Căn giữa (Flex Center)
+Class `.wiki-storybook-flex-center` căn chỉnh nội dung chính xác ở giữa.
+
+```html
+<div class="wiki-storybook-flex-center">
+    <div class="wiki-storybook-item">1</div>
+    <div class="wiki-storybook-item">2</div>
+    <div class="wiki-storybook-item">3</div>
+</div>
+```
+
+<Unstyled>
+  <div class="wiki-storybook-flex-center">
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
+  </div>
+</Unstyled>
+
+### Căn giữa theo chiều dọc (Flex Align Center)
+Class `.wiki-storybook-flex-align-center` căn chỉnh các phần tử theo chiều ngang với căn giữa theo chiều dọc.
+
+```html
+<div class="wiki-storybook-flex-align-center">
+    <div class="wiki-storybook-item">1</div>
+    <div class="wiki-storybook-item">2</div>
+    <div class="wiki-storybook-item">3</div>
+</div>
+```
+
+<Unstyled>
+  <div class="wiki-storybook-flex-align-center">
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
+  </div>
+</Unstyled>
+
+### Xếp chồng dọc (Flex Column)
+Class `.wiki-storybook-flex-column` sắp xếp các phần tử theo chiều dọc với khoảng cách `16px`.
+
+```html
+<div class="wiki-storybook-flex-column">
+    <div class="wiki-storybook-item">1</div>
+    <div class="wiki-storybook-item">2</div>
+    <div class="wiki-storybook-item">3</div>
+</div>
+```
+
+<Unstyled>
+  <div class="wiki-storybook-flex-column">
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
+    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
+  </div>
+</Unstyled>

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

@@ -1,6 +1,9 @@
-### `default`
+- `default(props: MotionTransformControlItem): any` — Slot for placing the main accordion content that appears when the section is expanded.
 
-Slot for placing the main accordion content that appears when the section is expanded.
-
-**Parameters:**
-- `props: MotionTransformControlItem` — object with state management data (isOpen, isShow, classes)
+> **MotionTransformControlItem:**
+> - `isOpen: ComputedRef<boolean>` — reactive open state.
+> - `isShow: ComputedRef<boolean>` — visible or preparing to show.
+> - `classes: MotionTransformClassList` — helper CSS classes.
+> - `idControl: string` — identifier for the control element.
+> - `idBody: string` — identifier for the body element.
+> - `binds: AriaRoleControlPropsInclude` — binding attributes for accessibility.

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

@@ -1,6 +1,9 @@
-### `default`
+- `default(props: MotionTransformControlItem): any` — Слот для размещения основного содержимого аккордеона, которое появляется при раскрытии секции.
 
-Слот для размещения основного содержимого аккордеона, которое появляется при раскрытии секции.
-
-**Параметры:**
-- `props: MotionTransformControlItem` — объект с данными управления состоянием (isOpen, isShow, classes)
+> **MotionTransformControlItem:**
+> - `isOpen: ComputedRef<boolean>` — реактивное состояние открытия.
+> - `isShow: ComputedRef<boolean>` — видим либо готовится к показу.
+> - `classes: MotionTransformClassList` — вспомогательные CSS‑классы.
+> - `idControl: string` — идентификатор элемента управления.
+> - `idBody: string` — идентификатор элемента тела.
+> - `binds: AriaRoleControlPropsInclude` — атрибуты привязки для доступности.

package/src/media/mdx/Anchor/expose.go.en.mdx

@@ -1,6 +1 @@
-### `go`
-
-Method for scrolling the page to the current anchor element. Uses scroll settings (`behavior`, `block`, `inline`, `shift`) and updates the page URL.
-
-**Type:** `() => void`
-
+- `go(): void` — Method for scrolling the page to the current anchor element. Uses scroll settings (`behavior`, `block`, `inline`, `shift`) and updates the page URL.

package/src/media/mdx/Anchor/expose.go.ru.mdx

@@ -1,6 +1 @@
-### `go`
-**Тип:** `() => void`
-
-Метод для прокрутки страницы к текущему элементу якоря. Использует настройки прокрутки (`behavior`, `block`, `inline`, `shift`) и обновляет URL страницы.
-
-
+- `go(): void` — Метод для прокрутки страницы к текущему элементу якоря. Использует настройки прокрутки (`behavior`, `block`, `inline`, `shift`) и обновляет URL страницы.

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

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

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

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

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

@@ -0,0 +1,47 @@
+## Differences between Page, Section, Block, and Group
+
+All components are built on top of **Block** and differ in semantics and header levels:
+
+### Page
+This is the root structural component that serves as the main wrapper for all page content. Its primary purpose is to define the main theme and semantically link content to the first-level heading. Its main difference is its uniqueness (used once per page); therefore, choose it as the primary container when creating a new page (`<main>`, `h1`).
+
+### Section
+A container for major thematic division of the page into independent semantic blocks. It is needed for logical partitioning of content into parts like "About Us" or "Services". Unlike Block and Group, it carries higher semantic weight, so use it to form the page structure and highlight its main sections (`<section>`, `h2`).
+
+### Block
+A universal and highly flexible building block for grouping any related content. It is the base element for creating independent functional units, cards, or informational inserts. Use it in any scenario where you need to organize content without strict adherence to global page divisions (`<div>`, `h3`).
+
+### Group
+An auxiliary component for combining small thematic elements into logical groups. Its main goal is to structure details, such as form fields or sub-sections within a card. It ranks at the bottom of the hierarchy and is used for fine-tuning content structure within larger blocks or sections (`<div>`, `h4`).
+
+### Hierarchy Example
+
+```html
+<Page headline="User Account">
+  <Section label="User Profile" description="Manage personal data" icon="person">
+    <Block label="Basic Information">
+      <p>Configure your display name and bio for other users.</p>
+      
+      <Group label="Contact Details">
+        <p>Email: user@example.com</p>
+        <p>Phone: +7 (999) 000-00-00</p>
+      </Group>
+    </Block>
+    
+    <Block label="Security" description="Password and authentication settings">
+      <p>Regular password updates improve your account security.</p>
+    </Block>
+  </Section>
+
+  <Section label="Notifications" icon="notifications">
+    <Block label="Subscriptions">
+      <Group label="Email">
+        <p>Weekly news and promotions.</p>
+      </Group>
+      <Group label="SMS">
+        <p>Critical system messages only.</p>
+      </Group>
+    </Block>
+  </Section>
+</Page>
+```

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

@@ -0,0 +1,47 @@
+## Различия между Page, Section, Block и Group
+
+Все компоненты построены на базе **Block** и различаются семантикой и уровнями заголовков:
+
+### Page
+Это корневой структурный компонент, который служит главной оберткой для всего контента страницы. Он предназначен для определения основной темы и семантической привязки содержимого к заголовку первого уровня. Его главное отличие — уникальность (используется один раз), поэтому выбирайте его как основной контейнер при создании новой страницы (`<main>`, `h1`).
+
+### Section
+Раздел для крупного тематического деления страницы на независимые смысловые блоки. Он нужен для логического разграничения контента на такие части, как «О нас» или «Услуги». В отличие от Block и Group, имеет более высокую семантическую значимость, поэтому используйте его для формирования скелета страницы и выделения её основных разделов (`<section>`, `h2`).
+
+### Block
+Универсальный и максимально гибкий строительный блок для группировки любого связанного контента. Это базовый элемент для создания независимых функциональных единиц, карточек или информационных вставок. Используйте его в любых сценариях, где требуется организовать контент без строгой привязки к глобальным разделам страницы (`<div>`, `h3`).
+
+### Group
+Вспомогательный компонент для объединения мелких тематических элементов в логические группы. Его основная цель — структурирование деталей, таких как поля формы или подразделы внутри карточки. Он находится внизу иерархии и применяется для тонкой настройки структуры контента внутри более крупных блоков или секций (`<div>`, `h4`).
+
+### Пример иерархии
+
+```html
+<Page headline="Личный кабинет">
+  <Section label="Профиль пользователя" description="Управление персональными данными" icon="person">
+    <Block label="Основная информация">
+      <p>Настройте свое отображаемое имя и биографию для других пользователей.</p>
+      
+      <Group label="Контактные данные">
+        <p>Email: user@example.com</p>
+        <p>Телефон: +7 (999) 000-00-00</p>
+      </Group>
+    </Block>
+    
+    <Block label="Безопасность" description="Настройки пароля и аутентификации">
+      <p>Регулярное обновление пароля повышает защищенность вашего аккаунта.</p>
+    </Block>
+  </Section>
+
+  <Section label="Уведомления" icon="notifications">
+    <Block label="Рассылки">
+      <Group label="Email">
+        <p>Еженедельные новости и акции.</p>
+      </Group>
+      <Group label="SMS">
+        <p>Только критические системные сообщения.</p>
+      </Group>
+    </Block>
+  </Section>
+</Page>
+```

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

@@ -2,6 +2,8 @@ import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
 
 import blockEn from './block.en.mdx'
 import blockRu from './block.ru.mdx'
+import differencesEn from './differences.en.mdx'
+import differencesRu from './differences.ru.mdx'
 
 /**
  * MDX files for Block component
@@ -14,6 +16,10 @@ export const wikiMdxBlock: StorybookComponentsMdxItem = {
     block: {
       en: blockEn,
       ru: blockRu
+    },
+    differences: {
+      en: differencesEn,
+      ru: differencesRu
     }
   }
 }

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

@@ -26,66 +26,4 @@ Button provides a comprehensive solution for creating consistent, accessible act
 - 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

@@ -26,66 +26,4 @@ Button предоставляет комплексное решение для
 - Индикаторы состояния загрузки
 - Действия подтверждения и отмены
 
-```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 разработан как универсальный интерактивный элемент с комплексным управлением состояниями, визуальными вариантами и функциями доступности для создания согласованных интерфейсов действий.