@dxtmisha/wiki 0.25.1 → 0.39.1

package/src/media/descriptions/wikiDescriptionsBars.ts

@@ -136,5 +136,38 @@ export const wikiDescriptionsBars: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'default'}/>
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
     `
+  },
+  ai: {
+    description: `
+Bars is a structural component used as a header, toolbar, or action bar.
+It typically sits at the top of a page, card, or window to provide context (title) and actions.
+
+**Key Features:**
+1. **Content Structure:**
+   - \`label\`: The main title (e.g., page name).
+   - \`description\`: Subtitle or additional context.
+   - \`backButton\`: Configuration for the navigation button on the left (e.g., arrow back, menu).
+
+2. **Action Buttons (\`bars\`):**
+   - Accepts an array of button configurations (props for \`Button\` component).
+   - Rendered on the right side.
+   - Useful for primary page actions (Search, Filter, Settings).
+
+3. **Action Mode (Contextual State):**
+   - Activated via \`action\` prop (boolean).
+   - Switches the UI to a specific state (e.g., when items are selected in a list).
+   - **Overrides:**
+     - \`label\` -> \`actionLabel\`
+     - \`description\` -> \`actionDescription\`
+     - \`bars\` -> \`actionBars\`
+   - The back button usually transforms into a "Close" or "Cancel" action in this mode.
+
+**Usage Examples:**
+
+- **Standard Header:** \`<Bars label="Dashboard" :bars="[{ icon: 'notifications' }]" />\`
+- **With Back Button:** \`<Bars label="Settings" :back-button="{ icon: 'arrow_back' }" />\`
+- **Contextual Action Bar:**
+  \`<Bars :action="selectedCount > 0" :action-label="\`\${selectedCount} selected\`" :action-bars="[{ icon: 'delete' }]" />\`
+      `
   }
 }

package/src/media/descriptions/wikiDescriptionsBlock.ts

@@ -50,11 +50,19 @@ export const wikiDescriptionsBlock: StorybookComponentsDescriptionItem = {
         ru: 'Базовые'
       },
       template: `
-        <div class="wiki-storybook-flex">
-          <DesignComponent>Content</DesignComponent>
-          <DesignComponent label="Label" description="Description">Content</DesignComponent>
-          <DesignComponent headline="Headline" label="Label">Content</DesignComponent>
-          <DesignComponent icon="home" label="Label">Content</DesignComponent>
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent>
+            Simple content wrapper
+          </DesignComponent>
+          <DesignComponent label="User Profile" description="Manage your personal information">
+            <button class="wiki-storybook-button">Edit Profile</button>
+          </DesignComponent>
+          <DesignComponent headline="Notifications" label="Settings">
+            <label><input type="checkbox" checked> Email Notifications</label>
+          </DesignComponent>
+          <DesignComponent icon="home" label="Dashboard">
+            <p>Welcome to your dashboard overview.</p>
+          </DesignComponent>
         </div>
       `
     },
@@ -79,6 +87,7 @@ export const wikiDescriptionsBlock: StorybookComponentsDescriptionItem = {
   documentation: {
     body: `
 <StorybookDescriptions componentName={'Block'} type={'block'}/>
+<Canvas of={Component.BlockBasic}/>
 `,
     slots: `
 <Canvas of={Component.BlockSlots}/>
@@ -93,5 +102,58 @@ export const wikiDescriptionsBlock: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Expose'} type={'labelId'}/>
 <StorybookDescriptions componentName={'Expose'} type={'descriptionId'}/>
 `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <Block v-bind="args">
+      Main content goes here.
+  </Block>
+</div>
+    `,
+    description: `
+Block is a versatile structural component used to organize content with a standardized layout.
+It acts as a container that automatically arranges headers, labels, descriptions, icons, and body content.
+
+**Key Features:**
+1. **Layout Structure:**
+   - **Headline:** Top-most text area (prop \`headline\` or slot \`#headline\`).
+   - **Header Area:** Contains the icon, label, caption, and trailing actions.
+   - **Description:** Text block below the header.
+   - **Content:** The \`#default\` slot allows placing custom content inside the block.
+
+2. **Content Props:**
+   - \`label\`: Main title.
+   - \`caption\`: Auxiliary text next to or below the label.
+   - \`description\`: Detailed text description.
+   - \`icon\`: Visual indicator (icon name).
+   - \`headline\`: Section heading above the main header.
+
+3. **Customization:**
+   - \`tag\`: Changes the root HTML element (e.g., \`section\`, \`article\`, \`div\`).
+   - \`#trailing\`: Slot for actions or content on the right side of the header.
+
+**When to use:**
+- **Cards:** To structure the header and content of a card.
+- **List Items:** For complex list items with icons and text.
+- **Sections:** To define titled sections within a page or modal.
+
+**Usage Examples:**
+
+- **Simple Card Header:**
+  \`<Block label="Card Title" description="Subtitle text" icon="info" />\`
+
+- **Section with Content:**
+  \`<Block headline="Section 1" label="Details">
+     <p>Custom content...</p>
+   </Block>\`
+
+- **List Item with Action:**
+  \`<Block label="Item Name" caption="Status: Active">
+     <template #trailing>
+       <button>Edit</button>
+     </template>
+   </Block>\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsButton.ts

@@ -189,5 +189,37 @@ export const wikiDescriptionsButton: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'Slot'} type={'default'}/>
     `
+  },
+  ai: {
+    description: `
+Button is a fundamental interactive component used for user actions, navigation, and submitting forms.
+It supports various visual styles, states, and content configurations.
+
+**Key Features:**
+1. **Content:**
+   - \`label\`: The text displayed inside the button.
+   - \`icon\`: Name of the icon to display *before* the label (Material Symbols).
+   - \`iconTrailing\`: Name of the icon to display *after* the label.
+
+2. **States:**
+   - \`disabled\`: Prevents user interaction and visually grays out the button.
+   - \`selected\`: Indicates an active or toggled state.
+   - \`loading\`: Replaces content or adds a spinner to indicate processing.
+
+3. **Navigation:**
+   - \`to\`: Vue Router path. Renders as an \`<a>\` tag or uses router push.
+   - \`href\`: External URL. Renders as an \`<a>\` tag.
+
+4. **Sizing & Layout:**
+   - \`adaptive\`: Makes the button fill the container width or adapt to specific breakpoints.
+
+**Usage Examples:**
+
+- **Main Action:** \`<Button label="Confirm" primary icon="check" />\`
+- **Secondary Action:** \`<Button label="Cancel" secondary />\`
+- **Navigation:** \`<Button label="Read More" to="/details" text iconTrailing="arrow_forward" />\`
+- **Icon Only:** \`<Button icon="menu" text />\` (Ensure aria-label is provided for accessibility)
+- **Loading:** \`<Button label="Saving..." primary loading />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsCell.ts

@@ -110,5 +110,29 @@ export const wikiDescriptionsCell: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
 <StorybookDescriptions componentName={'Cell'} type={'slots'}/>
 `
+  },
+  ai: {
+    description: `
+Cell is a universal list item component used for building menus, settings panels, and data lists.
+It provides a structured layout with slots for icons, text content, and actions.
+
+**Structure:**
+1. **Icon (Left):** Defined by \`icon\` prop.
+2. **Context (Center):**
+   - **Label:** Main text/title (prop \`label\`).
+   - **Caption:** Small text above/below the label (prop \`caption\`).
+   - **Description:** Secondary text below the label (prop \`description\`).
+3. **Trailing (Right):** Slot \`#trailing\` for actions (switch, checkbox, button) or meta-info.
+4. **Body:** Slot \`#body\` for additional content below the main row.
+
+**Key Features:**
+- **Interactive:** Supports \`to\`, \`href\`, and click events with Ripple effect.
+- **States:** Handles \`disabled\`, \`selected\`, and \`loading\` (skeleton) states.
+
+**When to use:**
+- **List Items:** For navigation menus or settings.
+- **Data Rows:** To display structured data entities.
+- **Action Items:** Clickable rows with icons and text.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsChip.ts

@@ -217,5 +217,47 @@ export const wikiDescriptionsChip: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'Slot'} type={'default'}/>
     `
+  },
+  ai: {
+    description: `
+Chip is a compact interactive element used for inputs, attributes, or actions.
+It allows users to enter information, make selections, filter content, or trigger actions.
+
+**Key Features:**
+1. **Variants:**
+   - **Action (Default):** Triggers an action or displays a read-only tag.
+   - **Input (\`input\`):** Represents a complex piece of information, such as an entity (person, place, or thing) or text, often used in input fields.
+   - **Assistive (\`assistive\`):** Provides suggestions or smart replies to the user.
+   - **Filter (via \`selected\`):** Allows users to select multiple options from a set.
+
+2. **Content & Styling:**
+   - **Label:** Main text content (prop \`label\` or default slot).
+   - **Icon:** Leading icon (prop \`icon\`).
+   - **State:** Supports \`selected\` (active/checked) and \`disabled\` states.
+
+3. **Interaction:**
+   - Emits \`click\` events with \`value\` and \`detail\` data.
+   - Can be used as a toggle button.
+
+**When to use:**
+- **Filters:** To allow users to refine search results.
+- **Choice:** To select one or multiple options (like radio buttons or checkboxes but more compact).
+- **Action:** To trigger immediate actions (e.g., "Play", "Save").
+- **Input:** To display tags or contacts in a form.
+
+**Usage Examples:**
+
+- **Basic Action:**
+  \`<Chip icon="settings">Settings</Chip>\`
+
+- **Filter Chip (Selected):**
+  \`<Chip icon="check" selected>Completed</Chip>\`
+
+- **Input Tag:**
+  \`<Chip input>Vue.js</Chip>\`
+
+- **Assistive Suggestion:**
+  \`<Chip assistive icon="lightbulb">Did you mean...?</Chip>\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsChipGroup.ts

@@ -8,25 +8,23 @@ import type { StorybookComponentsDescriptionItem } from '../../types/storybookTy
 export const wikiDescriptionsChipGroup: StorybookComponentsDescriptionItem = {
   name: 'ChipGroup',
   description: {
-    en: 'Container for managing a collection of chips with selection functionality',
-    ru: 'Контейнер для управления коллекцией чипов с функциональностью выбора'
+    en: 'Component for managing a group of interactive chips with support for selection and data binding',
+    ru: 'Компонент для управления группой интерактивных чипов с поддержкой выбора и привязки данных'
   },
   possibilities: {
     en: [
-      'single or multiple chip selection',
-      'dynamic list rendering from data',
-      'customizable chip appearance through chipAttrs',
-      'conditional icon display based on selection state',
-      'flexible data binding with keyLabel and keyValue',
-      'event handling for user interactions'
+      'rendering a list of chips from a data array',
+      'managing selection state (single or multiple)',
+      'customizing the appearance of all chips in the group via chipAttrs',
+      'handling click events and value updates',
+      'controlling icon visibility based on selection'
     ],
     ru: [
-      'одиночный или множественный выбор чипов',
-      'динамический рендеринг списка из данных',
-      'настраиваемый внешний вид чипов через chipAttrs',
-      'условное отображение иконок в зависимости от состояния выбора',
-      'гибкое связывание данных через keyLabel и keyValue',
-      'обработка событий для взаимодействия пользователя'
+      'рендеринг списка чипов из массива данных',
+      'управление состоянием выбора (одиночный или множественный)',
+      'настройка внешнего вида всех чипов в группе через chipAttrs',
+      'обработка событий клика и обновлений значений',
+      'управление видимостью иконки в зависимости от выбора'
     ]
   },
   import: [
@@ -164,5 +162,38 @@ export const wikiDescriptionsChipGroup: StorybookComponentsDescriptionItem = {
     slots: `
     <StorybookDescriptions componentName={'Slot'} type={'default'}/>
     `
+  },
+  ai: {
+    description: `
+ChipGroup is a wrapper component that manages a collection of Chip elements based on a data list.
+It streamlines the creation of filter sets, choice groups, and tag lists by handling data iteration and selection logic.
+
+**Key Features:**
+1. **Data Binding:**
+   - \`list\`: Array of objects defining the chips (e.g., \`[{ label: 'A', value: 'a' }]\`).
+   - \`v-model:selected\`: Tracks the selected value(s).
+
+2. **Selection Modes:**
+   - Supports single and multiple selection (depending on configuration, typically inferred from the initial value type or explicit props).
+
+3. **Styling & Customization:**
+   - \`chipAttrs\`: Object containing props to be passed to every child Chip (e.g., \`{ outline: true, icon: 'check' }\`).
+   - \`iconWhenSelected\`: If true, displays the icon only when the chip is selected.
+
+**Usage Examples:**
+
+- **Basic Selection:**
+  \`<ChipGroup
+      :list="items"
+      v-model:selected="selectedItem"
+   />\`
+
+- **Filter Group (Multiple):**
+  \`<ChipGroup
+      :list="filters"
+      v-model:selected="activeFilters"
+      :chip-attrs="{ outline: true }"
+   />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsDialog.ts

@@ -178,5 +178,49 @@ export const wikiDescriptionsDialog: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
 <StorybookDescriptions componentName={'Window'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <Dialog embedded open label="Dialog Title" description="This is a description text." v-bind="args"/>
+</div>
+    `,
+    description: `
+Dialog is a specialized modal component designed for standard user interactions such as alerts, confirmations, and status messages.
+It extends the functionality of the Modal component by providing a pre-defined layout for icons, titles, descriptions, and action buttons.
+
+**Note:** The \`embedded\` prop is used only for documentation examples to render the component inline. Do not use it in production code.
+
+**Key Features:**
+1. **Standardized Layout:**
+   - Automatically arranges elements: Icon -> Title (\`label\`) -> Description (\`description\`) -> Content (\`default\`) -> Actions (\`footer\`).
+   - Supports positioning the image/icon via \`imagePosition\` (e.g., top or left).
+
+2. **State Presets:**
+   - **Success:** Setting the \`success\` prop automatically displays a success icon and applies relevant styling.
+   - **Error:** Setting the \`error\` prop automatically displays an error icon and applies relevant styling.
+   - **Custom:** You can provide a custom icon via the \`icon\` prop.
+
+3. **Content Props:**
+   - \`label\`: The main heading or title of the dialog.
+   - \`description\`: Subtitle or explanatory text.
+   - \`open\`: Controls visibility (v-model).
+
+4. **Slots:**
+   - \`#control\`: Trigger element.
+   - \`#default\`: Custom content area.
+   - \`#footer\`: Area for action buttons (Cancel, OK).
+
+**Usage Examples:**
+
+- **Simple Confirmation:**
+  \`<Dialog v-model:open="isOpen" label="Confirm Action" description="Are you sure you want to proceed?" />\`
+
+- **Success Alert:**
+  \`<Dialog success label="Operation Successful" description="Your data has been saved." />\`
+
+- **Error Alert:**
+  \`<Dialog error label="Error" description="Failed to connect to the server." />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsField.ts

@@ -34,8 +34,8 @@ export const wikiDescriptionsField: StorybookComponentsDescriptionItem = {
   import: [],
   render: `
       <DesignComponent v-bind="args">
-        <template v-slot:default="{id, className}">
-          <input :value="args.value" :id="id" :class="className" readonly/>
+        <template v-slot:default="{binds}">
+          <input :value="args.value" readonly v-bind="binds"/>
         </template>
       </DesignComponent>
     `,
@@ -234,5 +234,58 @@ export const wikiDescriptionsField: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'trailing'} />
 <StorybookDescriptions componentName={'Field'} type={'slots'} />
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <Field label="Field Label" helper-message="Helper text" v-bind="args">
+    <template v-slot:default="{binds}">
+      <input :value="args.value" readonly v-bind="binds as any"/>
+    </template>
+  </Field>
+</div>
+    `,
+    description: `
+Field is the foundational wrapper component for all form inputs.
+It provides the structural layout, styling, and state management for labels, messages, icons, and the input container.
+
+**Key Features:**
+1. **Layout Structure:**
+   - **Label:** Displays the field label (\`label\`).
+   - **Body:** The main container for the input.
+     - **Prefix/Suffix:** Content before/after the input (\`prefix\`, \`suffix\`).
+     - **Icons:** Leading (\`icon\`) and trailing (\`iconTrailing\`) icons.
+     - **Input Slot:** The \`#default\` slot for the actual form control (input, select, etc.).
+   - **Footer:** Displays helper text (\`helperMessage\`), validation errors (\`validationMessage\`), and character counter.
+
+2. **Input Integration:**
+   - The \`#default\` slot exposes \`binds\` (id, class, aria-attributes).
+   - These \`binds\` **must** be applied to the native \`<input>\` or the focusable element within the slot to ensure proper styling and accessibility.
+
+3. **States & Validation:**
+   - **Loading:** \`loading\` prop shows a progress bar.
+   - **Validation:** \`validationMessage\` turns the field red and displays the error.
+   - **Disabled/Readonly:** \`disabled\`, \`readonly\` props style the wrapper accordingly.
+
+**When to use:**
+- When creating a custom form component (e.g., DatePicker, ColorPicker) that needs to match the design system's input style.
+- Do not use for standard text inputs; use \`Input\` instead.
+
+**Usage Examples:**
+
+- **Custom Input Wrapper:**
+  \`<Field label="Username" icon="person">
+     <template #default="{ binds }">
+       <input v-bind="binds" type="text" />
+     </template>
+   </Field>\`
+
+- **With Validation:**
+  \`<Field label="Email" validation-message="Invalid email">
+     <template #default="{ binds }">
+       <input v-bind="binds" type="email" />
+     </template>
+   </Field>\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsFieldCounter.ts

@@ -63,5 +63,37 @@ export const wikiDescriptionsFieldCounter: StorybookComponentsDescriptionItem =
 <StorybookDescriptions componentName={'FieldCounter'} type={'templates'}/>
 <Canvas of={Component.FieldCounterTemplate}/>
     `
+  },
+  ai: {
+    description: `
+**Note:** This is a subcomponent of \`Field\`. You should generally not use it directly.
+          It is automatically integrated into components like \`Input\` and \`Textarea\`.
+
+FieldCounter is a utility component designed to display character counts and limits for input fields.
+It provides visual feedback to users about the length of their input and includes accessibility features for screen readers.
+
+**Key Features:**
+1. **Display Logic:**
+   - **Counter Only:** If \`maxlength\` is not set, displays the current count (e.g., "10").
+   - **With Limit:** If \`maxlength\` is set, displays "current / max" (e.g., "10 / 100").
+   - **Template:** The \`template\` prop allows custom formatting using placeholders \`[c]\` (counter) and \`[m]\` (max).
+
+2. **Accessibility:**
+   - Automatically manages ARIA live regions to announce status to screen readers.
+   - \`maxlengthOnce\`: Determines when to start announcing remaining characters (default is 10% of max).
+   - Provides specific messages for "remaining characters" and "limit exceeded".
+
+3. **Integration:**
+   - Typically used within \`Input\`, \`Textarea\`, or custom form wrappers.
+   - Accepts \`counter\` (current length) and \`maxlength\` (limit) as numbers or strings.
+
+**Usage Examples:**
+
+- **Standard Limit:**
+  \`<FieldCounter :counter="currentLength" :maxlength="50" />\`
+
+- **Custom Format:**
+  \`<FieldCounter :counter="5" :maxlength="10" template="[c] of [m] chars" />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsFieldLabel.ts

@@ -34,5 +34,27 @@ export const wikiDescriptionsFieldLabel: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'Slot'} type={'label'} />
     `
+  },
+  ai: {
+    description: `
+**Note:** This is a subcomponent of \`Field\`. You should generally not use it directly.
+          It is automatically integrated into components like \`Input\` and \`Textarea\`.
+
+FieldLabel is a component responsible for rendering the label of a form field.
+It ensures consistent styling, positioning, and accessibility for field labels.
+
+**Key Features:**
+1. **Label Text:**
+   - Displays the text provided in the \`label\` prop.
+   - Can be customized via the \`#label\` slot.
+
+2. **Required Indicator:**
+   - If the \`required\` prop is true, it visually indicates that the field is mandatory (usually with an asterisk).
+
+**Usage Examples:**
+
+- **Standard Label:**
+  \`<FieldLabel label="Username" />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsFieldMessage.ts

@@ -59,5 +59,30 @@ export const wikiDescriptionsFieldMessage: StorybookComponentsDescriptionItem =
 <Canvas of={Component.FieldMessageSlots}/>
 <StorybookDescriptions componentName={'FieldMessage'} type={'slots'}/>
     `
+  },
+  ai: {
+    description: `
+**Note:** This component is part of the \`Field\` component and should not be used directly.
+
+FieldMessage is a component used to display informational text below form input fields.
+It can show helper text, validation errors, and a character counter.
+
+**When to use:**
+1.  **Helper Text:** When a form field needs a hint or an explanation. This is controlled by the \`helperMessage\` prop.
+2.  **Validation Error:** When a form field has an invalid value. This is controlled by the \`validationMessage\` prop. The component will automatically style itself to indicate an error (usually by changing the text color to red). The validation message has priority over the helper message.
+3.  **Character Counter:** When you need to show the user how many characters they have typed, typically in relation to a \`maxlength\`. This is enabled with the \`counter: true\` prop.
+
+**Key Features:**
+- **Priority:** \`validationMessage\` is always shown if present. \`helperMessage\` is shown only if there is no validation message.
+- **Styling:** Automatically applies error styling when a \`validationMessage\` is provided.
+- **Counter:** Integrates a character counter that works with the \`maxlength\` prop.
+- **Accessibility:** It's designed to be linked with an input field via ARIA attributes, which is handled automatically when used within components like TextField.
+
+**How to identify in a design:**
+- Look for small text directly beneath an input, textarea, or select.
+- If the text is red or has an error-like appearance, it corresponds to the \`validationMessage\` prop.
+- If the text is a neutral color, it corresponds to the \`helperMessage\` prop.
+- If you see a "current/max" number format (e.g., "12/100"), this is the character counter, enabled by the \`counter\` prop.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsIcon.ts

@@ -3,19 +3,23 @@ import type { StorybookComponentsDescriptionItem } from '../../types/storybookTy
 export const wikiDescriptionsIcon: StorybookComponentsDescriptionItem = {
   name: 'Icon',
   description: {
-    en: 'Component for displaying icons',
-    ru: 'Компонент для отображения иконок'
+    en: 'A component for displaying vector icons with support for state management, automatic directionality adaptation, and design system styling.',
+    ru: 'Компонент для отображения векторных иконок с поддержкой управления состоянием, автоматической адаптацией направления и стилизацией дизайн-системы.'
   },
   possibilities: {
     en: [
-      'displaying icons by name',
-      'switching icons on active state',
-      'animation support'
+      'rendering icons by identifier',
+      'toggling between two icons based on the active state',
+      'automatic mirroring for RTL languages',
+      'integration with the color palette and inverse mode',
+      'displaying a skeleton loader placeholder'
     ],
     ru: [
-      'отображение иконок по имени',
-      'переключение иконок в активном состоянии',
-      'поддержка анимации'
+      'рендеринг иконок по идентификатору',
+      'переключение между двумя иконками в зависимости от активного состояния',
+      'автоматическое зеркалирование для RTL языков',
+      'интеграция с цветовой палитрой и инверсный режим',
+      'отображение заполнителя (скелетона) при загрузке'
     ]
   },
   import: [],
@@ -136,5 +140,39 @@ export const wikiDescriptionsIcon: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'Slot'} type={'default'}/>
     `
+  },
+  ai: {
+    description: `
+Icon is a component for displaying vector icons, typically from the Material Symbols library.
+It supports state switching (active/inactive), directionality (RTL), and integration with the design system's palette.
+
+**Key Features:**
+1. **Icon Source:**
+   - \`icon\`: The name of the icon to display (e.g., "home", "menu", "arrow_forward").
+     Uses the project's icon set (usually Material Symbols).
+
+2. **Interactive States:**
+   - \`active\`: Boolean flag to toggle the active state.
+   - \`iconActive\`: The icon name to show when \`active\` is \`true\`.
+     Ideal for toggle buttons (e.g., "favorite_border" vs "favorite").
+
+3. **Styling:**
+   - \`size\`: Controls the dimensions of the icon (e.g., "sm", "md", "lg").
+   - \`asPalette\`: Applies the active palette color to the icon.
+   - \`inverse\`: Inverts the colors, useful for dark backgrounds or contrast.
+
+4. **Directionality (\`dir\`):**
+   - Automatically mirrors the icon for RTL (Right-to-Left) languages if the icon is directional (like arrows).
+
+5. **Loading:**
+   - \`isSkeleton\`: Renders a loading placeholder (skeleton) instead of the icon.
+
+**Usage Examples:**
+
+- **Simple Icon:** \`<Icon icon="search" />\`
+- **Toggle Icon:** \`<Icon icon="visibility_off" iconActive="visibility" :active="isVisible" />\`
+- **Directional Arrow:** \`<Icon icon="arrow_forward" dir />\`
+- **Large Palette Icon:** \`<Icon icon="star" size="xl" asPalette />\`
+    `
   }
 }