@dxtmisha/wiki 0.25.1 → 0.39.1

package/src/media/descriptions/wikiDescriptionsPage.ts

@@ -0,0 +1,155 @@
+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: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent>
+            <p>Simple page content wrapper.</p>
+          </DesignComponent>
+          <DesignComponent label="Documentation" description="Learn how to use the library">
+            <p>Welcome to the documentation page.</p>
+          </DesignComponent>
+          <DesignComponent headline="Dashboard Overview" label="Analytics">
+            <div style="height: 100px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">
+              Chart Placeholder
+            </div>
+          </DesignComponent>
+        </div>
+      `
+    },
+    {
+      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}/>
+`,
+    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: `
+Page is a top-level structural component designed to wrap the main content of a view or document.
+It acts as a semantic container (typically rendering a \`<main>\` tag) and provides a standardized header structure.
+It inherits all functionality from the \`Block\` component.
+
+**Key Features:**
+1. **Semantic Structure:**
+   - Represents the main content area of the application.
+   - Provides a consistent layout for page headers.
+
+2. **Header Layout:**
+   - **Headline:** High-level category or breadcrumb-like text.
+   - **Label:** The primary page title.
+   - **Description:** Subtitle or page summary.
+   - **Icon:** Page icon.
+   - **Trailing:** Area for page-level actions (e.g., "Save", "Edit").
+
+3. **Customization:**
+   - Supports all \`Block\` props.
+   - Flexible content slot (\`#default\`).
+
+**When to use:**
+- As the root container for a route or view.
+- To provide a consistent title and action bar for a page.
+
+**Usage Examples:**
+
+- **Standard Page:**
+  \`<Page label="Home" description="Welcome back">
+     <DashboardWidgets />
+   </Page>\`
+
+- **Page with Actions:**
+  \`<Page headline="Settings" label="Profile">
+     <template #trailing>
+       <button>Save Changes</button>
+     </template>
+     <ProfileForm />
+   </Page>\`
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsProgress.ts

@@ -196,5 +196,44 @@ 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: `
+Progress is a component for indicating the status of a process.
+It supports both linear and circular styles and can represent determinate (known percentage) or indeterminate (loading) states.
+
+**Key Features:**
+1. **Type:**
+   - \`linear\`: A horizontal bar. Standard for page loading, file uploads, or headers.
+   - \`circular\`: A spinner ring. Standard for button actions, block loading, or overlays.
+
+2. **State:**
+   - **Determinate:** Set \`value\` (number) and optionally \`max\`. Used when the progress percentage is known.
+   - **Indeterminate:** Set \`indeterminate\` ('type1', 'type2', 'type3'). Used when the wait time is unknown.
+
+3. **Positioning (\`position\`):**
+   - \`static\` (default): Renders in the normal document flow.
+   - \`top\`: Absolutely positioned at the top of the parent container.
+   - \`bottom\`: Absolutely positioned at the bottom of the parent container.
+
+4. **Styling:**
+   - \`dense\`: Reduces the height/size of the indicator.
+   - \`inverse\`: Adjusts colors for dark backgrounds.
+   - \`point\`: Adds a pulsing dot at the end of the bar (linear only).
+
+**Usage Examples:**
+
+- **Linear Indeterminate (Page Load):** \`<Progress linear indeterminate="type1" position="top" visible />\`
+- **Circular Determinate (Upload):** \`<Progress circular :value="45" visible />\`
+- **Button Loading:** \`<Progress circular dense indeterminate="type2" visible />\` (inside a button)
+    `
   }
 }

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,44 @@ 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: `
+**Note:** This is a low-level decorative component. You should not use it directly.
+          It is automatically integrated into interactive components like \`Button\`, \`ListItem\`,
+          and \`Card\` to provide feedback. This documentation is for informational purposes.
+
+Ripple is a decorative component that adds a Material Design-style wave effect to provide
+visual feedback on user interaction (clicks, taps). It should be placed inside an interactive container.
+
+**Key Features:**
+1.  **Placement:** It is designed to be placed as the last child inside a host element
+                   (like a button, card, or list item). The host element MUST have \`position:
+                   relative\` and \`overflow: hidden\` for the effect to work correctly.
+
+2.  **Automatic Effect:** The ripple animation starts automatically from the point of a \`pointerdown\`
+                          event (click or tap) on its parent container.
+
+3.  **Self-Managing:** The component handles the creation, animation (expansion and fade-out),
+                       and removal of ripple elements from the DOM automatically.
+
+4.  **Styling:** The ripple's color is determined by the CSS \`color\` property of its host element
+                 (\`currentColor\`). It can be styled by changing the text color of the parent.
+
+5.  **Control:** The effect can be completely disabled by passing the \`disabled: true\` prop.
+
+**When to Use:**
+- Use inside buttons, cards, list items, or any other clickable surface to provide clear,
+  tangible feedback that the user's action was registered.
+- It is purely a visual enhancement and adds no functionality on its own.
+`
   }
 }

package/src/media/descriptions/wikiDescriptionsScrollbar.ts

@@ -66,5 +66,53 @@ 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: `
+Scrollbar is a structural component that wraps content to provide custom scrolling behavior and visual indicators.
+It is designed to handle overflow content within a fixed-height container, adding dynamic dividers (borders) that indicate scroll position.
+
+**Key Features:**
+1. **Scroll Indicators (Dividers):**
+   - Automatically detects scroll position.
+   - Displays a top divider when scrolled down.
+   - Displays a bottom divider when there is more content below.
+   - Configurable via props (e.g., \`divider\`, \`border\`).
+
+2. **Layout:**
+   - Renders as a block container (default \`div\`).
+   - Must have a defined height or max-height (inherited or set) to enable scrolling.
+
+3. **Usage:**
+   - Essential for **Modals**, **Dropdowns**, and **Sidebars** where content length varies.
+   - Provides visual cues to users that more content is available.
+
+**Usage Examples:**
+
+- **Basic Scroll Area:**
+  \`<Scrollbar style="height: 200px">
+     <p>Long content...</p>
+   </Scrollbar>\`
+
+- **With Custom Tag:**
+  \`<Scrollbar tag="section" class="my-scroll-area">
+     <List :list="items" />
+   </Scrollbar>\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsSection.ts

@@ -0,0 +1,152 @@
+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: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent>
+            <p>Generic section content without header.</p>
+          </DesignComponent>
+          <DesignComponent label="Contact Information" description="Get in touch with us">
+            <p>Email: support@example.com</p>
+            <p>Phone: +1 234 567 890</p>
+          </DesignComponent>
+          <DesignComponent headline="Our Services" label="What we do">
+            <ul>
+              <li>Web Development</li>
+              <li>Mobile Apps</li>
+              <li>UI/UX Design</li>
+            </ul>
+          </DesignComponent>
+        </div>
+      `
+    },
+    {
+      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}/>
+`,
+    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: `
+Section is a structural component used to divide a page into distinct thematic areas.
+It is a semantic alias for the \`Block\` component, inheriting all its layout and styling capabilities.
+
+**Key Features:**
+1. **Structure:**
+   - **Headline:** Top-level category text (\`headline\`).
+   - **Header:** Contains Icon, Label (Title), Caption, and Trailing actions.
+   - **Description:** Subtitle or explanatory text.
+   - **Content:** The main body of the section.
+
+2. **Usage:**
+   - Use \`Section\` to group related content within a Page.
+   - It provides a consistent header structure for page blocks.
+
+3. **Props & Slots:**
+   - Inherits all props from \`Block\` (\`label\`, \`icon\`, \`tag\`, etc.).
+   - Supports slots: \`#headline\`, \`#trailing\`, \`#default\`.
+
+**Usage Examples:**
+
+- **Standard Section:**
+  \`<Section headline="Account" label="Profile Settings">
+     <ProfileForm />
+   </Section>\`
+
+- **Section with Actions:**
+  \`<Section label="Recent Activity">
+     <template #trailing>
+       <button>View All</button>
+     </template>
+     <ActivityList />
+   </Section>\`
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsSelect.ts

@@ -205,5 +205,49 @@ export const wikiDescriptionsSelect: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'List'} type={'slot.html'}/>
 <StorybookDescriptions componentName={'Menu'} type={'slots'}/>
     `
+  },
+  ai: {
+    description: `
+The select is a comprehensive form component used for choosing one or multiple values from a collection of options.
+It integrates a trigger field, a dropdown menu, and value display logic into a single cohesive control.
+
+**Key Features:**
+1. **Data Handling (\`option\`):**
+   - **Static Data:** Accepts an array of objects or strings via the \`option\` prop.
+   - **Mapping:** Use \`keyLabel\` and \`keyValue\` to specify which properties to use for display and value (defaults to 'label' and 'value').
+   - **Async Data:** Use the \`ajax\` prop to provide a function that returns a Promise with the list of options. Supports caching via \`cache\`.
+
+2. **Selection Modes:**
+   - **Single Selection:** Default. Displays the selected item's label as text.
+   - **Multiple Selection (\`multiple\`):** Allows selecting multiple items. Displays them as Chips. Use \`max\` to limit the number of selections.
+   - **Editable (\`editValue\`):** Allows the user to type into the input field, acting like a Combobox.
+
+3. **Search & Filtering:**
+   - **Filter Mode (\`filterMode\`):** Filters the list options in real-time as the user types.
+   - **Show Search (\`showSearch\`):** Adds a dedicated search input field inside the dropdown menu (useful for mobile or when \`editValue\` is false).
+
+4. **Appearance & Feedback:**
+   - **Field Integration:** Inherits all \`Field\` styling props (\`label\`, \`helperMessage\`, \`validationMessage\`, \`icon\`, \`loading\`).
+   - **Placeholder:** Text shown when no value is selected.
+   - **Cancel:** The \`cancel\` prop controls the visibility of the clear button ('auto', 'always', 'none').
+
+**Usage Examples:**
+
+- **Standard Select:**
+  \`<Select label="Choose a fruit" :option="['Apple', 'Banana', 'Orange']" />\`
+
+- **Multiple Select with Object Data:**
+  \`<Select
+      label="Assignees"
+      multiple
+      :option="users"
+      key-label="name"
+      key-value="id"
+      v-model="selectedUserIds"
+   />\`
+
+- **Searchable Select:**
+  \`<Select label="Country" :option="countries" filter-mode />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsSelectValue.ts

@@ -74,5 +74,34 @@ export const wikiDescriptionsSelectValue: StorybookComponentsDescriptionItem = {
     events: `
 <StorybookDescriptions componentName={'Event'} type={'click'}/>
     `
+  },
+  ai: {
+    description: `
+SelectValue is a specialized display component used primarily within Select-like inputs to render the selected value(s).
+It handles the visual representation of selection, switching between a simple text label (single selection) and a group of chips (multiple selection).
+
+**Key Features:**
+1. **Display Modes:**
+   - **Single Selection (default):** Renders the label of the first item in the \`value\` array as text.
+   - **Multiple Selection (\`multiple\`):** Renders each item in the \`value\` array as a \`Chip\` component.
+
+2. **Data Handling (\`value\`):**
+   - Accepts an array of objects: \`[{ label: 'Text', value: 'val', ... }]\`.
+   - Even for single selection, it expects an array (uses the first item).
+   - If \`value\` is empty, it displays the \`placeholder\`.
+
+3. **Chip Customization (Multiple Mode):**
+   - \`chipAttrs\`: Allows passing props to the internal \`Chip\` components (e.g., \`{ outline: true, icon: 'check' }\`).
+   - Handles chip removal events automatically if not disabled/readonly.
+
+**When to use:**
+- Inside the trigger area of a **Select**, **Combobox**, or **Autocomplete** component.
+- To display a list of selected tags or tokens.
+
+**Usage Examples:**
+
+- **Multiple Values (Chips):**
+  \`<SelectValue multiple :value="[{ label: 'Apple' }, { label: 'Banana' }]" />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsSkeleton.ts

@@ -10,7 +10,7 @@ export const wikiDescriptionsSkeleton: StorybookComponentsDescriptionItem = {
     en: [
       'animated loading placeholders for content',
       'control visibility with `active` property',
-      'child elements react to skeleton state via `isSkeleton` property or special classes',
+      'child elements react to the skeleton state via `isSkeleton` property or special classes',
       'customizable appearance and animation'
     ],
     ru: [
@@ -129,5 +129,46 @@ export const wikiDescriptionsSkeleton: StorybookComponentsDescriptionItem = {
     expose: `
 <StorybookDescriptions componentName={'Skeleton'} type={'expose.isActive'}/>
     `
+  },
+  ai: {
+    description: `
+Skeleton is a structural component used to display a loading state (placeholder) for content.
+It creates an animated "ghost" version of the UI to improve perceived performance and prevent layout shifts (CLS).
+
+**Key Features:**
+1. **Activation (\`active\`):**
+   - The \`active\` prop controls the visibility of the skeleton effect.
+   - When \`true\`, the component applies loading styles and accessibility attributes.
+
+2. **Context & Inheritance:**
+   - Uses Vue's \`provide\`/\`inject\` mechanism.
+   - Child components (like \`Image\`, \`Field\`, \`Chip\`) automatically detect if they are inside an active \`Skeleton\` and switch to their own skeleton view without needing individual props.
+
+3. **Styling Classes (Slot Props):**
+   - The component exposes CSS classes via the default slot to style raw HTML elements.
+   - **Text:** \`classText\` (lines), \`classTextVariant\` (headings).
+   - **Background:** \`classBackground\` (blocks, images), \`classBackgroundVariant\`.
+   - **Border:** \`classBorder\` (outlines).
+
+4. **Accessibility:**
+   - Automatically applies \`aria-busy="true"\` and \`aria-live="polite"\` to the wrapper.
+
+**Usage Examples:**
+
+- **Wrapping Smart Components:**
+  \`<Skeleton :active="isLoading">
+     <div class="profile">
+       <Image :value="user.avatar" /> <!-- Auto-skeleton -->
+       <Field :value="user.name" readonly /> <!-- Auto-skeleton -->
+     </div>
+   </Skeleton>\`
+
+- **Manual Structure (using slot classes):**
+  \`<Skeleton :active="isLoading" v-slot="{ classes }">
+     <div :class="classes.classBackground" style="height: 200px"></div>
+     <h3 :class="classes.classTextVariant"></h3>
+     <p :class="classes.classText"></p>
+   </Skeleton>\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsTextareaAutosize.ts

@@ -46,5 +46,35 @@ export const wikiDescriptionsTextareaAutosize: StorybookComponentsDescriptionIte
     expose: `
 <StorybookDescriptions componentName={'Expose'} type={'value'}/>
     `
+  },
+  ai: {
+    description: `
+**Note:** This is a subcomponent of \`Textarea\`. You should generally not use it directly.
+          It is automatically integrated into the \`Textarea\` component to provide auto-resizing capabilities.
+
+TextareaAutosize is a functional component that renders a \`<textarea>\` element capable of automatically adjusting its height to fit the content.
+
+**Key Features:**
+1. **Auto-Resizing Logic:**
+   - It renders a hidden "clone" element (a \`div\`) that mirrors the styles (font, padding, border, width) of the actual textarea.
+   - As text is entered, the content is copied to the clone, and the clone's height is measured.
+   - The textarea's height is then updated to match the clone's height, ensuring no scrollbars appear and the field grows/shrinks dynamically.
+
+2. **Input Attributes (\`inputAttrs\`):**
+   - Standard HTML attributes for the textarea (like \`placeholder\`, \`rows\`, \`disabled\`, \`readonly\`, \`style\`) should be passed via the \`inputAttrs\` prop.
+   - This ensures they are applied directly to the native \`<textarea>\` element.
+
+3. **Value Management:**
+   - It manages the input value and emits updates, allowing for reactive data binding.
+
+**When to use:**
+- This component is designed to be the internal engine for the \`Textarea\` component.
+- Use \`Textarea\` instead for a complete form field with labels, validation, and styling.
+
+**Usage Examples:**
+
+- **Internal Usage:**
+  \`<TextareaAutosize :value="modelValue" :inputAttrs="{ rows: 1 }" />\`
+    `
   }
 }