@dxtmisha/wiki 0.39.5 → 0.39.7

package/src/media/descriptions/wikiDescriptionsPage.ts

@@ -1,116 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Page component properties
- *
- * Описания свойств компонента Page
- */
-export const wikiDescriptionsPage: StorybookComponentsDescriptionItem = {
-  name: 'Page',
-  description: {
-    en: 'A top-level semantic container component representing the main content of a document. It uses the <main> tag by default and supports high-level headers and descriptions.',
-    ru: 'Семантический компонент-контейнер верхнего уровня, представляющий основное содержимое документа. По умолчанию использует тег <main> и поддерживает заголовки высокого уровня.'
-  },
-  possibilities: {
-    en: [
-      'semantic wrapper for main content using <main> tag',
-      'support for main titles (h1 by default), labels, descriptions, and captions',
-      'customizable layout and spacing',
-      'support for icons',
-      'flexible content organization'
-    ],
-    ru: [
-      'семантическая обертка для основного контента с использованием тега <main>',
-      'поддержка главных заголовков (h1 по умолчанию), меток, описаний и подписей',
-      'настраиваемый макет и отступы',
-      'поддержка иконок',
-      'гибкая организация контента'
-    ]
-  },
-  import: [],
-  render: `
-      <DesignComponent v-bind="args">
-        <p>
-          The Page component is designed to wrap the unique content of a document.
-          It defaults to using the <code>&lt;main&gt;</code> HTML tag, ensuring that the primary content is correctly identified by assistive technologies and search engines.
-        </p>
-        <p>
-          It provides a comprehensive set of features for page-level content presentation, including headlines, labels, descriptions, and icons.
-          The default tag for the headline is set to <code>&lt;h1&gt;</code>, establishing the top-level heading for the page.
-        </p>
-        <p>
-          Use Page to encapsulate the core content of your view, separating it from repeated elements like navigation bars or footers.
-        </p>
-      </DesignComponent>
-    `,
-  stories: [
-    {
-      id: 'PageBasic',
-      name: {
-        en: 'Basic',
-        ru: 'Базовые'
-      },
-      template: `
-        <DesignComponent
-          headline="User Dashboard"
-          label="Overview"
-          description="View your account analytics and recent activity."
-        >
-          <p>Welcome to your dashboard. Here you can find a summary of your performance and manage your account settings.</p>
-        </DesignComponent>
-      `
-    },
-    {
-      id: 'PageSlots',
-      name: {
-        en: 'Slots usage',
-        ru: 'Использование слотов'
-      },
-      template: `
-        <DesignComponent>
-          <template #default>Default slot</template>
-          <template #headline>Headline slot</template>
-          <template #label>Label slot</template>
-          <template #description>Description slot</template>
-          <template #caption>Caption slot</template>
-          <template #trailing>Trailing slot</template>
-        </DesignComponent>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Page'} type={'block'}/>
-<Canvas of={Component.PageBasic}/>
-
-<StorybookDescriptions componentName={'Block'} type={'differences'}/>
-`,
-    slots: `
-<Canvas of={Component.PageSlots}/>
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-<StorybookDescriptions componentName={'Slot'} type={'headline'}/>
-<StorybookDescriptions componentName={'Slot'} type={'label'}/>
-<StorybookDescriptions componentName={'Slot'} type={'description'}/>
-<StorybookDescriptions componentName={'Slot'} type={'caption'}/>
-<StorybookDescriptions componentName={'Slot'} type={'trailing'}/>
-`,
-    expose: `
-<StorybookDescriptions componentName={'Expose'} type={'labelId'}/>
-<StorybookDescriptions componentName={'Expose'} type={'descriptionId'}/>
-`
-  },
-  ai: {
-    render: `
-<div :class="classDemo.item">
-  <Page v-bind="args">
-      Main page content.
-  </Page>
-</div>
-    `,
-    description: `
-Top-level structural container designed to wrap the primary content of a view or document. Serves as a semantic root (typically rendering a <main> tag) and establishes the high-level document hierarchy with standardized headers.
-Features a comprehensive header structure inherited from the Block component, including support for headlines (h1), labels (page titles), descriptions, and trailing action areas. Automatically manages spacing and layout consistency for page-level navigation and identity.
-Controlled via headline, label, and icon props, with dedicated slots for content and actions (#default, #trailing). Use as the foundational wrapper for any route or unique screen to ensure accessibility and consistent information architecture.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsProgress.ts

@@ -1,220 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-export const wikiDescriptionsProgress: StorybookComponentsDescriptionItem = {
-  name: 'Progress',
-  description: {
-    en: 'Component for displaying progress of operations or loading states',
-    ru: 'Компонент для отображения прогресса операций или состояний загрузки'
-  },
-  possibilities: {
-    en: [
-      'linear and circular progress indicators',
-      'determinate and indeterminate progress states',
-      'customizable value and maximum values',
-      'different positioning options (top, bottom, static)',
-      'delay settings for showing and hiding',
-      'dense and inverse styling variants',
-      'point mode for minimal display'
-    ],
-    ru: [
-      'линейные и круглые индикаторы прогресса',
-      'детерминированные и неопределенные состояния прогресса',
-      'настраиваемые значения прогресса и максимума',
-      'различные варианты позиционирования (сверху, снизу, статично)',
-      'настройки задержки для показа и скрытия',
-      'компактный и инвертированный варианты стилизации',
-      'точечный режим для минимального отображения'
-    ]
-  },
-  render: `
-      <div class="wiki-storybook-item wiki-storybook-item--widescreen wiki-storybook-item--center">
-        <DesignComponent v-bind="args"/>
-      </div>
-    `,
-  import: [
-    'import { ref } from \'vue\''
-  ],
-  stories: [
-    {
-      id: 'ProgressTypes',
-      name: {
-        en: 'Types',
-        ru: 'Типы'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Linear Progress</div>
-            <DesignComponent visible indeterminate="type2" linear position="static"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen">
-            <div class="wiki-storybook-item__label">Circular Progress</div>
-            <DesignComponent visible indeterminate="type2" circular/>
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'ProgressLinear',
-      name: {
-        en: 'Linear Progress',
-        ru: 'Линейный прогресс'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Value: 50</div>
-            <DesignComponent visible linear position="static" :value="50" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Point</div>
-            <DesignComponent visible linear position="static" point :value="75" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Position: bottom</div>
-            <DesignComponent visible linear position="bottom" :value="60" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Indeterminate: type1</div>
-            <DesignComponent visible linear position="static" indeterminate="type1" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Indeterminate: type2</div>
-            <DesignComponent visible linear position="static" indeterminate="type2" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Indeterminate: type3</div>
-            <DesignComponent visible linear position="static" indeterminate="type3" />
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'ProgressCircular',
-      name: {
-        en: 'Circular Progress',
-        ru: 'Круглый прогресс'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Basic</div>
-            <DesignComponent visible circular :value="50" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Dense</div>
-            <DesignComponent visible circular dense :value="75" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Indeterminate</div>
-            <DesignComponent visible circular indeterminate="type1" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Dense Indeterminate</div>
-            <DesignComponent visible circular dense indeterminate="type2" />
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'ProgressValues',
-      name: {
-        en: 'Values',
-        ru: 'Значения'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">value: 25, max: 100</div>
-            <DesignComponent visible position="static" :value="25" :max="100"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">value: 75, max: 100</div>
-            <DesignComponent visible position="static" :value="75" :max="100"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen">
-            <div class="wiki-storybook-item__label">value: 50, max: 200</div>
-            <DesignComponent visible circular :value="50" :max="200"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen">
-            <div class="wiki-storybook-item__label">value: 75, max: 100</div>
-            <DesignComponent visible circular :value="75" :max="200"/>
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'ProgressDelays',
-      name: {
-        en: 'Delays',
-        ru: 'Задержки'
-      },
-      setup: `
-      const visible = ref(false)
-      return {
-        visible,
-        onClick: () => {
-          visible.value = !visible.value
-        }
-      }
-      `,
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <div class="wiki-storybook-flex">
-            <button class="wiki-storybook-button" @click="onClick">Visible: {{ visible }}</button>
-          </div>
-
-          <div>
-            <div class="wiki-storybook-group">
-              <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-                <div class="wiki-storybook-item__label">Standard delays (360/200)</div>
-                <DesignComponent :visible="visible" circular position="static" delay="360" delayHide="200" />
-              </div>
-              <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-                <div class="wiki-storybook-item__label">Fast appearance (100/200)</div>
-                <DesignComponent :visible="visible" linear position="static" delay="100" delayHide="200" />
-              </div>
-              <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-                <div class="wiki-storybook-item__label">No delays (0/0)</div>
-                <DesignComponent :visible="visible" linear position="static" delay="0" delayHide="0" />
-              </div>
-            </div>
-          </div>
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Progress'} type={'progress'}/>
-<Canvas of={Component.ProgressTypes}/>
-
-<StorybookDescriptions componentName={'Progress'} type={'linear'}/>
-<Canvas of={Component.ProgressLinear}/>
-
-<StorybookDescriptions componentName={'Progress'} type={'circular'}/>
-<Canvas of={Component.ProgressCircular}/>
-
-<StorybookDescriptions componentName={'Progress'} type={'values'}/>
-<Canvas of={Component.ProgressValues}/>
-
-<StorybookDescriptions componentName={'Progress'} type={'delays'}/>
-<Canvas of={Component.ProgressDelays}/>
-    `
-  },
-  ai: {
-    render: `
-<div
-  :class="classDemo.item"
-  style="position: relative; width: 64px; height: 40px;"
->
-  <Progress v-bind="args"/>
-</div>
-    `,
-    description: `
-Status indicator for ongoing processes, supporting both linear and circular visual styles. Capable of representing determinate (known percentage) and indeterminate (loading) states with customizable delays for showing/hiding.
-Features horizontal bars (linear) and spinner rings (circular) with multiple indeterminate animation types. Includes advanced positioning (top, bottom, static), dense styling for compact UIs, and a point mode for minimal pulsating indicators.
-Controlled via the visible, value, and indeterminate props, with support for custom min/max bounds. Use for page-level loading bars, button action feedback, or inline file upload progress.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsRipple.ts

@@ -1,52 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-export const wikiDescriptionsRipple: StorybookComponentsDescriptionItem = {
-  name: 'Ripple',
-  description: {
-    en: 'Component for creating a ripple wave effect on click interactions',
-    ru: 'Компонент для создания эффекта волны при взаимодействии с элементом'
-  },
-  possibilities: {
-    en: [
-      'it creates a ripple wave effect on click',
-      'automatic positioning based on click coordinates',
-      'disabling effect with `disabled` property',
-      'Material Design inspired animation',
-      'it works with any interactive elements'
-    ],
-    ru: [
-      'создает эффект волны при клике',
-      'автоматическое позиционирование по координатам клика',
-      'отключение эффекта свойством `disabled`',
-      'анимация в стиле Material Design',
-      'работает с любыми интерактивными элементами'
-    ]
-  },
-  render: `
-      <div class="wiki-storybook-item wiki-storybook-item--widescreen wiki-storybook-item--center">
-        <DesignComponent v-bind="args"/>
-      </div>
-    `,
-  import: [],
-  stories: [],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Ripple'} type={'ripple'}/>
-    `
-  },
-  ai: {
-    render: `
-<div
-  :class="classDemo.item"
-  style="position: relative; width: 64px; height: 48px;"
->
-  <Ripple v-bind="args"/>
-</div>
-    `,
-    description: `
-Low-level decorative utility that provides Material Design-style visual feedback on user interactions. Automatically generates a dynamic wave effect at the exact coordinates of a pointerdown event within its parent container.
-Features automated animation lifecycle management, including expansion, fade-out, and DOM cleanup. Inherits visual styling directly from the host element via currentColor and requires the parent to have relative positioning and hidden overflow to function correctly.
-Primarily integrated within interactive components like Buttons, ListItems, and Cards; should generally not be manually implemented. Controlled via the disabled prop, serving as a subtle but high-polish affordance for touch and click actions.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsScrollbar.ts

@@ -1,111 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Scrollbar component properties
- *
- * Описания свойств компонента Scrollbar
- */
-export const wikiDescriptionsScrollbar: StorybookComponentsDescriptionItem = {
-  name: 'Scrollbar',
-  description: {
-    en: 'Custom scrollbar component for enhanced user experience',
-    ru: 'Компонент кастомного скроллбара для улучшения пользовательского опыта'
-  },
-  possibilities: {
-    en: [
-      'custom scrollbar styling and appearance',
-      'dynamic divider lines based on scroll position',
-      'static divider lines at top and bottom',
-      'visibility control for scrolling behavior',
-      'inverse divider behavior options',
-      'hide all divider lines functionality'
-    ],
-    ru: [
-      'кастомная стилизация и внешний вид скроллбара',
-      'динамические разделительные линии в зависимости от позиции скролла',
-      'статичные разделительные линии сверху и снизу',
-      'управление видимостью для поведения прокрутки',
-      'опции инвертированного поведения разделителей',
-      'функция скрытия всех разделительных линий'
-    ]
-  },
-  render: `
-      <D1Scrollbar
-        class="wiki-storybook-item--widescreen wiki-storybook-item--squared--sm"
-        v-bind="args"
-      >
-        <div class="wiki-storybook-scrollbar-content">
-          <h3>Modern Web Interfaces and User Experience Design</h3>
-          <p>In today's digital landscape, creating high-quality user interfaces has become a critical aspect of web application development. User interface components must not only be functional but also provide intuitive interaction patterns that enhance the overall user experience. The evolution of web technologies has enabled developers to create more sophisticated and engaging interfaces.</p>
-
-          <p>Scrollbars play a particularly important role in content navigation and information architecture. They allow users to easily navigate through large volumes of information while maintaining context and orientation within the document structure. Modern scrollbars should be adaptive, responsive, and visually appealing while providing consistent behavior across different platforms and devices.</p>
-
-          <h4>Principles of Effective Design Implementation</h4>
-          <p>Effective scrollbar design takes into account multiple factors ranging from performance optimization to accessibility compliance. It's essential to ensure smooth animations, proper handling of various input devices, and comprehensive keyboard navigation support. Cross-browser compatibility remains a top priority, especially when dealing with custom scrollbar implementations that need to work consistently across different rendering engines.</p>
-
-          <p>Users expect scrollbars to work predictably and uniformly throughout all parts of an application. This requires thorough testing and optimization for various usage scenarios, including mobile devices, desktop computers, and touch-enabled interfaces. The component must handle edge cases gracefully and provide appropriate feedback for user interactions.</p>
-
-          <h4>Technical Implementation Considerations</h4>
-          <p>When developing scrollbar components, it's crucial to consider rendering performance, especially when working with large datasets or dynamically generated content. Content virtualization, lazy loading strategies, and DOM operation optimization help ensure smooth performance even on less powerful devices. Memory management becomes particularly important in single-page applications where components may be mounted and unmounted frequently.</p>
-
-          <p>Modern frameworks provide numerous tools for creating customizable scrollbars, but it's important to find the right balance between functionality and ease of use. The component should be easily integrable into existing projects while supporting various configuration options and customization possibilities. API design should be intuitive and follow established patterns within the framework ecosystem.</p>
-
-          <h4>Future Trends and Accessibility</h4>
-          <p>The future of web development is moving towards creating more inclusive and accessible interfaces, where every element, including scrollbars, contributes to improving the overall user experience. This includes support for screen readers, high contrast modes, and reduced motion preferences. Progressive enhancement ensures that the scrollbar functionality works across all user scenarios.</p>
-
-          <p>Emerging technologies like CSS container queries and new scrolling APIs continue to expand the possibilities for creating more sophisticated scrolling experiences. The integration of these technologies with existing design systems requires careful planning and consideration of backward compatibility.</p>
-        </div>
-      </D1Scrollbar>
-    `,
-  import: [],
-  stories: [],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Scrollbar'} type={'scrollbar'}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Scrollbar'} type={'emits'}/>
-    `
-  },
-  ai: {
-    render: `
-<div :class="classDemo.item">
-  <Scrollbar v-bind="args" style="height: 128px">
-    <h3>Modern Web Interfaces and User Experience Design</h3>
-    <p>In today's digital landscape, creating high-quality user
-    interfaces has become a critical aspect of web application development.
-    User interface components must not only be functional but also provide
-    intuitive interaction patterns that enhance the overall user experience.
-    The evolution of web technologies has enabled developers to create more
-    sophisticated and engaging interfaces.</p>
-
-    <p>Scrollbars play a particularly important role in content navigation
-    and information architecture. They allow users to easily navigate through
-    large volumes of information while maintaining context and orientation within
-    the document structure. Modern scrollbars should be adaptive, responsive,
-    and visually appealing while providing consistent behavior across different
-    platforms and devices.</p>
-
-    <h4>Principles of Effective Design Implementation</h4>
-    <p>Effective scrollbar design takes into account multiple factors ranging
-    from performance optimization to accessibility compliance. It's essential
-    to ensure smooth animations, proper handling of various input devices, and
-    comprehensive keyboard navigation support. Cross-browser compatibility remains
-    a top priority, especially when dealing with custom scrollbar implementations
-    that need to work consistently across different rendering engines.</p>
-
-    <p>Users expect scrollbars to work predictably and uniformly throughout
-    all parts of an application. This requires thorough testing and optimization
-    for various usage scenarios, including mobile devices, desktop computers,
-    and touch-enabled interfaces. The component must handle edge cases gracefully
-    and provide appropriate feedback for user interactions.</p>
-  </Scrollbar>
-</div>
-    `,
-    description: `
-Structural container that provides custom scrolling behavior and visual status indicators (borders/dividers) based on content overflow. Essential for maintaining spatial context in fixed-height areas like menus, modals, and sidebars.
-Features dynamic scroll position detection to show/hide top and bottom dividers based on visibility of content edges. Supports custom border styling, inverse divider logic, and specialized visibility controls for different scroll states.
-Controlled via the tag and divider props, requiring a defined height or max-height to enable active scrolling. Use as a base wrapper for any dense content block requiring clear visual cues that more data is available above or below.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsSection.ts

@@ -1,116 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Section component properties
- *
- * Описания свойств компонента Section
- */
-export const wikiDescriptionsSection: StorybookComponentsDescriptionItem = {
-  name: 'Section',
-  description: {
-    en: 'A semantic container component designed to group related content with support for headers, descriptions, and flexible layout options. It uses the <section> tag by default.',
-    ru: 'Семантический компонент-контейнер, предназначенный для группировки связанного контента с поддержкой заголовков, описаний и гибких настроек макета. По умолчанию использует тег <section>.'
-  },
-  possibilities: {
-    en: [
-      'semantic grouping of content using <section> tag',
-      'support for titles (h2 by default), labels, descriptions, and captions',
-      'customizable layout and spacing',
-      'support for icons',
-      'flexible content organization'
-    ],
-    ru: [
-      'семантическая группировка контента с использованием тега <section>',
-      'поддержка заголовков (h2 по умолчанию), меток, описаний и подписей',
-      'настраиваемый макет и отступы',
-      'поддержка иконок',
-      'гибкая организация контента'
-    ]
-  },
-  import: [],
-  render: `
-      <DesignComponent v-bind="args">
-        <p>
-          The Section component is a fundamental building block for structuring web pages.
-          It defaults to using the <code>&lt;section&gt;</code> HTML tag, making it semantically appropriate for grouping thematic content.
-        </p>
-        <p>
-          It provides a rich set of features for content presentation, including headlines, labels, descriptions, and icons.
-          The default tag for the headline is set to <code>&lt;h2&gt;</code>, which fits the typical document outline structure.
-        </p>
-        <p>
-          Use Section to divide your page into distinct thematic areas, improving both the visual structure and the accessibility of your application.
-        </p>
-      </DesignComponent>
-    `,
-  stories: [
-    {
-      id: 'SectionBasic',
-      name: {
-        en: 'Basic',
-        ru: 'Базовые'
-      },
-      template: `
-        <DesignComponent
-          headline="User Profile Settings"
-          label="Personalization"
-          description="Customize your experience and notification preferences."
-        >
-          <p>This section allows you to manage your personal display settings, theme selection, and language preferences. Changes are saved automatically as you update them.</p>
-        </DesignComponent>
-      `
-    },
-    {
-      id: 'SectionSlots',
-      name: {
-        en: 'Slots usage',
-        ru: 'Использование слотов'
-      },
-      template: `
-        <DesignComponent>
-          <template #default>Default slot</template>
-          <template #headline>Headline slot</template>
-          <template #label>Label slot</template>
-          <template #description>Description slot</template>
-          <template #caption>Caption slot</template>
-          <template #trailing>Trailing slot</template>
-        </DesignComponent>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Section'} type={'block'}/>
-<Canvas of={Component.SectionBasic}/>
-
-<StorybookDescriptions componentName={'Block'} type={'differences'}/>
-`,
-    slots: `
-<Canvas of={Component.SectionSlots}/>
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-<StorybookDescriptions componentName={'Slot'} type={'headline'}/>
-<StorybookDescriptions componentName={'Slot'} type={'label'}/>
-<StorybookDescriptions componentName={'Slot'} type={'description'}/>
-<StorybookDescriptions componentName={'Slot'} type={'caption'}/>
-<StorybookDescriptions componentName={'Slot'} type={'trailing'}/>
-`,
-    expose: `
-<StorybookDescriptions componentName={'Expose'} type={'labelId'}/>
-<StorybookDescriptions componentName={'Expose'} type={'descriptionId'}/>
-`
-  },
-  ai: {
-    render: `
-<div :class="classDemo.item">
-  <Section v-bind="args">
-      Content of the section.
-  </Section>
-</div>
-    `,
-    description: `
-Structural component used to divide a page into distinct thematic areas, serving as a semantic alias for the Block component. Provides a standardized header structure for grouping related content within a coherent layout.
-Features a flexible header with support for icons, labels (titles), captions, and trailing action areas. Inherits all layout and styling capabilities from the Block component, including support for custom semantic tags (defaulting to <section>) and high-level category headlines.
-Controlled via headline, label, and icon props, with dedicated slots for primary content and secondary actions. Use to logically organize and category-label information within the flow of a Page or complex Dashboard.
-    `
-  }
-}