@dxtmisha/wiki 0.25.1 → 0.39.2

package/src/media/descriptions/wikiDescriptionsMotionTransform.ts

@@ -61,35 +61,59 @@ export const wikiDescriptionsMotionTransform: StorybookComponentsDescriptionItem
   ],
   stories: [
     {
-      id: 'MotionTransformVModel',
+      id: 'MotionTransformAnimationHeadPosition',
       name: {
-        en: 'Two-way binding (v-model)',
-        ru: 'Двусторонняя привязка (v-model)'
+        en: 'Head position animation',
+        ru: 'Анимация позиции заголовка'
       },
-      setup: `
-      return {
-        open: ref(false)
-      }
-      `,
       template: `
-        <div class="wiki-storybook-item--padding">
-          <button class="wiki-storybook-button" @click="open = !open">Toggle ({{ open }})</button>
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent animationHeadPosition="top">
+            <template #head>
+              <div class="wiki-storybook-item--padding">
+                <h4>animationHeadPosition: top</h4>
+                <p>Click to open — Head stays at the top during transition</p>
+              </div>
+            </template>
+            <template #body>
+              <div class="wiki-storybook-item--padding">
+                <h5>Top Position Animation</h5>
+                <p>With <code>animationHeadPosition="top"</code>, the head element maintains its position at the top of the container throughout the entire show/hide animation sequence.</p>
+                <p>This behavior is ideal for interfaces where the header serves as a stable reference point, such as dropdown menus, navigation panels, or content that expands downward from a fixed trigger.</p>
+                <p>The animation creates a smooth vertical expansion effect while keeping the header visually anchored, providing users with a clear understanding of the content's origin point.</p>
+                <ul>
+                  <li>Header remains stationary during animation</li>
+                  <li>Content expands/collapses below the header</li>
+                  <li>Provides stable visual reference point</li>
+                  <li>Best for downward-expanding interfaces</li>
+                </ul>
+              </div>
+            </template>
+          </DesignComponent>
+
+          <DesignComponent animationHeadPosition="toBottom">
+            <template #head>
+              <div class="wiki-storybook-item--padding">
+                <h4>animationHeadPosition: toBottom</h4>
+                <p>Click to open — Head moves toward the bottom with content</p>
+              </div>
+            </template>
+            <template #body>
+              <div class="wiki-storybook-item--padding">
+                <h5>Bottom Movement Animation</h5>
+                <p>When using <code>animationHeadPosition="toBottom"</code>, the head element travels together with the content during the animation, creating a unified motion experience.</p>
+                <p>This approach is particularly effective for accordion-style interfaces, collapsible sections, or any scenario where the header and content should move as a cohesive unit.</p>
+                <p>The animation provides a more dynamic feeling, as both header and content participate in the motion, creating a sense of the entire section expanding or contracting as one entity.</p>
+                <ul>
+                  <li>Header and content move together</li>
+                  <li>Creates unified motion experience</li>
+                  <li>Ideal for accordion-style interfaces</li>
+                  <li>Provides cohesive visual feedback</li>
+                </ul>
+              </div>
+            </template>
+          </DesignComponent>
         </div>
-        <DesignComponent v-model:open="open">
-          <template #head>
-            <div class="wiki-storybook-item--padding">
-              <h4>v-model controlled</h4>
-              <p>This component's visibility is controlled by an external ref via v-model:open.</p>
-            </div>
-          </template>
-          <template #body>
-            <div class="wiki-storybook-item--padding">
-              <p>Content is {{ open ? 'visible' : 'hidden' }}</p>
-              <p>Using <code>v-model:open</code> provides a clean and declarative way to manage the component's state from the parent. It simplifies the logic by removing the need for manual event handling (<code>@update:open</code>) and prop binding (<code>:open</code>).</p>
-              <p>This two-way binding is ideal for scenarios where the parent component needs to know about and control the visibility of the MotionTransform component, such as in complex forms or coordinated UI interactions.</p>
-            </div>
-          </template>
-        </DesignComponent>
       `
     },
     {
@@ -131,55 +155,34 @@ export const wikiDescriptionsMotionTransform: StorybookComponentsDescriptionItem
       `
     },
     {
-      id: 'MotionTransformAnimationHeadPosition',
+      id: 'MotionTransformVModel',
       name: {
-        en: 'Head position animation',
-        ru: 'Анимация позиции заголовка'
+        en: 'Two-way binding (v-model)',
+        ru: 'Двусторонняя привязка (v-model)'
       },
+      setup: `
+      return {
+        open: ref(false)
+      }
+      `,
       template: `
         <div class="wiki-storybook-flex-column">
-          <DesignComponent animationHeadPosition="top">
-            <template #head>
-              <div class="wiki-storybook-item--padding">
-                <h4>animationHeadPosition: top</h4>
-                <p>Click to open — Head stays at the top during transition</p>
-              </div>
-            </template>
-            <template #body>
-              <div class="wiki-storybook-item--padding">
-                <h5>Top Position Animation</h5>
-                <p>With <code>animationHeadPosition="top"</code>, the head element maintains its position at the top of the container throughout the entire show/hide animation sequence.</p>
-                <p>This behavior is ideal for interfaces where the header serves as a stable reference point, such as dropdown menus, navigation panels, or content that expands downward from a fixed trigger.</p>
-                <p>The animation creates a smooth vertical expansion effect while keeping the header visually anchored, providing users with a clear understanding of the content's origin point.</p>
-                <ul>
-                  <li>Header remains stationary during animation</li>
-                  <li>Content expands/collapses below the header</li>
-                  <li>Provides stable visual reference point</li>
-                  <li>Best for downward-expanding interfaces</li>
-                </ul>
-              </div>
-            </template>
-          </DesignComponent>
-
-          <DesignComponent animationHeadPosition="toBottom">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="open = !open">Toggle ({{ open }})</button>
+          </div>
+          
+          <DesignComponent v-model:open="open">
             <template #head>
               <div class="wiki-storybook-item--padding">
-                <h4>animationHeadPosition: toBottom</h4>
-                <p>Click to open — Head moves toward the bottom with content</p>
+                <h4>v-model controlled</h4>
+                <p>This component's visibility is controlled by an external ref via v-model:open.</p>
               </div>
             </template>
             <template #body>
               <div class="wiki-storybook-item--padding">
-                <h5>Bottom Movement Animation</h5>
-                <p>When using <code>animationHeadPosition="toBottom"</code>, the head element travels together with the content during the animation, creating a unified motion experience.</p>
-                <p>This approach is particularly effective for accordion-style interfaces, collapsible sections, or any scenario where the header and content should move as a cohesive unit.</p>
-                <p>The animation provides a more dynamic feeling, as both header and content participate in the motion, creating a sense of the entire section expanding or contracting as one entity.</p>
-                <ul>
-                  <li>Header and content move together</li>
-                  <li>Creates unified motion experience</li>
-                  <li>Ideal for accordion-style interfaces</li>
-                  <li>Provides cohesive visual feedback</li>
-                </ul>
+                <p>Content is {{ open ? 'visible' : 'hidden' }}</p>
+                <p>Using <code>v-model:open</code> provides a clean and declarative way to manage the component's state from the parent. It simplifies the logic by removing the need for manual event handling (<code>@update:open</code>) and prop binding (<code>:open</code>).</p>
+                <p>This two-way binding is ideal for scenarios where the parent component needs to know about and control the visibility of the MotionTransform component, such as in complex forms or coordinated UI interactions.</p>
               </div>
             </template>
           </DesignComponent>
@@ -202,11 +205,31 @@ export const wikiDescriptionsMotionTransform: StorybookComponentsDescriptionItem
 <StorybookDescriptions componentName={'MotionTransform'} type={'events'}/>
     `,
     expose: `
-<StorybookDescriptions componentName={'MotionTransform'} type={'expose.isShow'}/>
-<StorybookDescriptions componentName={'Window'} type={'expose'}/>
+<StorybookDescriptions componentName={'MotionTransform'} type={'expose'}/>
     `,
     slots: `
 <StorybookDescriptions componentName={'MotionTransform'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <MotionTransform :auto-close="false" v-bind="args">
+    <template #head>
+      <button class="wiki-storybook-button">Toggle Content</button>
+    </template>
+    <template #body>
+      <div class="wiki-storybook-item--padding">
+        <p>Expandable content goes here.</p>
+      </div>
+    </template>
+  </MotionTransform>
+</div>
+    `,
+    description: `
+Low-level motion engine designed for complex component transitions like windows, dropdowns, and collapsible sections. Provides a unified system for managing element transforms, off-DOM teleportation, and interaction patterns (click-outside, etc.).
+Features dynamic size measurement with automatic CSS variable updates for smooth hardware-accelerated animations. Includes a robust state manager (open/show/teleport), focus trapping, and customizable interaction ignoring areas for triggers.
+Controlled via the v-model:open prop and utilizes #head and #body slots for layout. Use as a foundational utility when building custom interactive components requiring sophisticated motion, state transitions, and high-performance DOM manipulation.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsPage.ts

@@ -0,0 +1,116 @@
+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

@@ -159,21 +159,26 @@ export const wikiDescriptionsProgress: StorybookComponentsDescriptionItem = {
       }
       `,
       template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
             <button class="wiki-storybook-button" @click="onClick">Visible: {{ visible }}</button>
           </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">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 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>
       `
@@ -196,5 +201,20 @@ export const wikiDescriptionsProgress: StorybookComponentsDescriptionItem = {
 <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

@@ -3,16 +3,16 @@ import type { StorybookComponentsDescriptionItem } from '../../types/storybookTy
 export const wikiDescriptionsRipple: StorybookComponentsDescriptionItem = {
   name: 'Ripple',
   description: {
-    en: 'Component for creating ripple wave effect on click interactions',
+    en: 'Component for creating a ripple wave effect on click interactions',
     ru: 'Компонент для создания эффекта волны при взаимодействии с элементом'
   },
   possibilities: {
     en: [
-      'creates ripple wave effect on click',
+      'it creates a ripple wave effect on click',
       'automatic positioning based on click coordinates',
       'disabling effect with `disabled` property',
       'Material Design inspired animation',
-      'works with any interactive elements'
+      'it works with any interactive elements'
     ],
     ru: [
       'создает эффект волны при клике',
@@ -33,5 +33,20 @@ export const wikiDescriptionsRipple: StorybookComponentsDescriptionItem = {
     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

@@ -66,5 +66,46 @@ export const wikiDescriptionsScrollbar: StorybookComponentsDescriptionItem = {
     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

@@ -0,0 +1,116 @@
+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.
+    `
+  }
+}