@dxtmisha/wiki 0.24.3 → 0.39.1

package/src/media/descriptions/wikiDescriptionsChipGroup.ts

@@ -0,0 +1,199 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for ChipGroup component properties
+ *
+ * Описания свойств компонента ChipGroup
+ */
+export const wikiDescriptionsChipGroup: StorybookComponentsDescriptionItem = {
+  name: 'ChipGroup',
+  description: {
+    en: 'Component for managing a group of interactive chips with support for selection and data binding',
+    ru: 'Компонент для управления группой интерактивных чипов с поддержкой выбора и привязки данных'
+  },
+  possibilities: {
+    en: [
+      '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',
+      'обработка событий клика и обновлений значений',
+      'управление видимостью иконки в зависимости от выбора'
+    ]
+  },
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  stories: [
+    {
+      id: 'ChipGroupBasic',
+      name: {
+        en: 'Basic',
+        ru: 'Базовые'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Default</div>
+            <DesignComponent :list="['Option 1', 'Option 2', 'Option 3']"/>
+          </div>
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">With icons</div>
+            <DesignComponent
+              :list="[
+                { label: 'Home', icon: 'home' },
+                { label: 'Star', icon: 'star' },
+                { label: 'Heart', icon: 'favorite' }
+              ]"
+            />
+          </div>
+        </div>
+      `
+    },
+    {
+      id: 'ChipGroupSelection',
+      name: {
+        en: 'Selection States',
+        ru: 'Состояния выбора'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Single selection</div>
+            <DesignComponent :list="['Option 1', 'Option 2', 'Option 3']" selected="2"/>
+          </div>
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Multiple selection</div>
+            <DesignComponent :list="['Option 1', 'Option 2', 'Option 3', 'Option 4']" :selected="['2', '3']"/>
+          </div>
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Icon when selected</div>
+            <DesignComponent
+              :list="[
+                { label: 'Option 1', icon: 'check', value: 'option1' },
+                { label: 'Option 2', icon: 'check', value: 'option2' },
+                { label: 'Option 3', icon: 'check', value: 'option3' }
+              ]"
+              :selected="['option2']"
+              :icon-when-selected="true"
+            />
+          </div>
+        </div>
+      `
+    },
+    {
+      id: 'ChipGroupVModel',
+      name: {
+        en: 'Two-way binding (v-model)',
+        ru: 'Двусторонняя привязка (v-model)'
+      },
+      setup: `
+      return {
+        selectedValue: ref('option2'),
+        multipleSelected: ref(['option1', 'option3'])
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Selected: {{ selectedValue }}</div>
+            <div class="wiki-storybook-flex-column">
+              <DesignComponent
+                v-model:selected="selectedValue"
+                :list="[
+                  { label: 'Option 1', value: 'option1' },
+                  { label: 'Option 2', value: 'option2' },
+                  { label: 'Option 3', value: 'option3' }
+                ]"
+                :readonly="false"
+              />
+              <div class="wiki-storybook-flex">
+                <button class="wiki-storybook-button" @click="selectedValue = 'option1'">Select 1</button>
+                <button class="wiki-storybook-button" @click="selectedValue = 'option2'">Select 2</button>
+                <button class="wiki-storybook-button" @click="selectedValue = undefined">Clear</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--auto">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Selected: {{ multipleSelected }}</div>
+            <div class="wiki-storybook-flex-column">
+              <DesignComponent
+                v-model:selected="multipleSelected"
+                :list="[
+                  { label: 'Option 1', value: 'option1', icon: 'check' },
+                  { label: 'Option 2', value: 'option2', icon: 'check' },
+                  { label: 'Option 3', value: 'option3', icon: 'check' }
+                ]"
+                :readonly="false"
+                :icon-when-selected="true"
+              />
+              <div class="wiki-storybook-flex">
+                <button class="wiki-storybook-button" @click="multipleSelected = ['option1', 'option2']">Select 1,2</button>
+                <button class="wiki-storybook-button" @click="multipleSelected = ['option1', 'option2', 'option3']">Add 3</button>
+                <button class="wiki-storybook-button" @click="multipleSelected = []">Clear all</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+    <StorybookDescriptions componentName={'ChipGroup'} type={'chipGroup'}/>
+    <Canvas of={Component.ChipGroupBasic}/>
+
+    <StorybookDescriptions componentName={'ChipGroup'} type={'selected'}/>
+    <Canvas of={Component.ChipGroupSelection}/>
+
+    <StorybookDescriptions componentName={'Value'} type={'v-model:selected'}/>
+    <Canvas of={Component.ChipGroupVModel}/>
+    `,
+    events: `
+    <StorybookDescriptions componentName={'Event'} type={'click'}/>
+    `,
+    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

@@ -0,0 +1,226 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Dialog component properties
+ *
+ * Описания свойств компонента Dialog
+ */
+export const wikiDescriptionsDialog: StorybookComponentsDescriptionItem = {
+  name: 'Dialog',
+  description: {
+    en: 'Modal dialog component for displaying alerts, confirmations, and informational messages with icon and action buttons',
+    ru: 'Модальный диалоговый компонент для отображения предупреждений, подтверждений и информационных сообщений с иконкой и кнопками действий'
+  },
+  possibilities: {
+    en: [
+      'modal dialog with centered positioning and backdrop',
+      'icon support with predefined success and error states',
+      'customizable title, description, and content areas',
+      'action buttons with OK and Close presets',
+      'image positioning (top or left alignment)',
+      'integration with Window, Bars, Actions, Icon components',
+      'close on ESC key and backdrop click',
+      'programmatic control via v-model:open',
+      'automatic icon switching based on success/error states',
+      'flexible content layout with information block',
+      'customizable footer with action buttons',
+      'keyboard accessibility and focus management',
+      'responsive design with mobile optimization',
+      'support for custom button configurations'
+    ],
+    ru: [
+      'модальный диалог с центрированием и подложкой',
+      'поддержка иконок с предустановленными состояниями успеха и ошибки',
+      'настраиваемые области заголовка, описания и контента',
+      'кнопки действий с пресетами OK и Закрыть',
+      'позиционирование изображения (сверху или слева)',
+      'интеграция с компонентами Window, Bars, Actions, Icon',
+      'закрытие по ESC и клику на подложку',
+      'программное управление через v-model:open',
+      'автоматическое переключение иконки на основе состояний успеха/ошибки',
+      'гибкая компоновка контента с информационным блоком',
+      'настраиваемый футер с кнопками действий',
+      'доступность с клавиатуры и управление фокусом',
+      'адаптивный дизайн с оптимизацией для мобильных',
+      'поддержка пользовательских конфигураций кнопок'
+    ]
+  },
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  render: `
+      <DesignComponent v-bind="args">
+        <template #control="{binds}">
+          <button class="wiki-storybook-button" v-bind="binds">Open Dialog</button>
+        </template>
+      </DesignComponent>
+    `,
+  stories: [
+    {
+      id: 'DialogStates',
+      name: {
+        en: 'Success and error states',
+        ru: 'Состояния успеха и ошибки'
+      },
+      setup: `
+      return {
+        openSuccess: ref(false),
+        openError: ref(false)
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-flex">
+          <DesignComponent
+            :success="true"
+            label="Operation Successful"
+            description="Your changes have been saved successfully."
+          >
+            <template #control="{binds}">
+              <button class="wiki-storybook-button" v-bind="binds">Success Dialog</button>
+            </template>
+          </DesignComponent>
+
+          <DesignComponent
+            :error="true"
+            label="Operation Failed"
+            description="An error occurred while processing your request. Please try again."
+          >
+            <template #control="{binds}">
+              <button class="wiki-storybook-button" v-bind="binds">Error Dialog</button>
+            </template>
+          </DesignComponent>
+        </div>
+      `
+    },
+    {
+      id: 'DialogVModel',
+      name: {
+        en: 'Two-way binding (v-model)',
+        ru: 'Двусторонняя привязка (v-model)'
+      },
+      setup: `
+      return {
+        open: ref(false)
+      }
+      `,
+      template: `
+        <button class="wiki-storybook-button" @click="open = true">Open via v-model ({{ open }})</button>
+
+        <DesignComponent
+          v-model:open="open"
+          label="Confirmation"
+          description="Are you sure you want to proceed with this action?"
+        />
+      `
+    },
+    {
+      id: 'DialogAllSlots',
+      name: {
+        en: 'All slots demonstration',
+        ru: 'Демонстрация всех слотов'
+      },
+      template: `
+        <DesignComponent>
+          <template #control="{binds}">
+            <button class="wiki-storybook-button" v-bind="binds">Open Dialog with All Slots</button>
+          </template>
+
+          <template #title>
+            Title Slot
+          </template>
+
+          <template #label>
+            <strong>Label Slot</strong>
+          </template>
+
+          <template #description>
+            <em>Description Slot</em>
+          </template>
+
+          <template #default>
+            Default Slot
+          </template>
+
+          <template #footer="{classesWindow}">
+            Footer Slot
+          </template>
+        </DesignComponent>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Dialog'} type={'dialog'}/>
+
+<StorybookDescriptions componentName={'Dialog'} type={'states'}/>
+<Canvas of={Component.DialogStates}/>
+
+<StorybookDescriptions componentName={'Dialog'} type={'buttons'}/>
+
+<StorybookDescriptions componentName={'Window'} type={'v-model'}/>
+<Canvas of={Component.DialogVModel}/>
+
+<StorybookDescriptions componentName={'Modal'} type={'differences'}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Dialog'} type={'events'}/>
+<StorybookDescriptions componentName={'Dialog'} type={'event.dialog'}/>
+<StorybookDescriptions componentName={'Window'} type={'event.window'}/>
+<StorybookDescriptions componentName={'Event'} type={'bars'}/>
+<StorybookDescriptions componentName={'Event'} type={'actions'}/>
+    `,
+    expose: `
+<StorybookDescriptions componentName={'Window'} type={'expose'}/>
+    `,
+    slots: `
+<Canvas of={Component.DialogAllSlots}/>
+<StorybookDescriptions componentName={'Slot'} type={'label'}/>
+<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>
     `,
@@ -230,7 +230,62 @@ export const wikiDescriptionsField: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'prefix'} />
 <StorybookDescriptions componentName={'Slot'} type={'suffix'} />
 <StorybookDescriptions componentName={'Slot'} type={'caption'} />
+<StorybookDescriptions componentName={'Slot'} type={'leading'} />
+<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 />\`
+    `
   }
 }