@dxtmisha/wiki 0.25.1 → 0.39.2

package/src/media/descriptions/wikiDescriptionsChip.ts

@@ -31,33 +31,6 @@ export const wikiDescriptionsChip: StorybookComponentsDescriptionItem = {
   },
   import: [],
   stories: [
-    {
-      id: 'ChipBasic',
-      name: {
-        en: 'Basic',
-        ru: 'Базовые'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Default</div>
-            <DesignComponent>Chip</DesignComponent>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">With icon</div>
-            <DesignComponent icon="star">Chip</DesignComponent>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Selected</div>
-            <DesignComponent selected>Chip</DesignComponent>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Disabled</div>
-            <DesignComponent disabled>Chip</DesignComponent>
-          </div>
-        </div>
-      `
-    },
     {
       id: 'ChipInput',
       name: {
@@ -65,23 +38,11 @@ export const wikiDescriptionsChip: StorybookComponentsDescriptionItem = {
         ru: 'Ввод (input)'
       },
       template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Default</div>
-            <DesignComponent>Chip</DesignComponent>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Input</div>
-            <DesignComponent input>Tag</DesignComponent>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">With icon</div>
-            <DesignComponent input icon="person">Contact</DesignComponent>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Selected</div>
-            <DesignComponent input selected icon="tag">Keyword</DesignComponent>
-          </div>
+        <div class="wiki-storybook-flex">
+          <DesignComponent>Chip</DesignComponent>
+          <DesignComponent input>Tag</DesignComponent>
+          <DesignComponent input icon="person">Contact</DesignComponent>
+          <DesignComponent input selected icon="tag">Keyword</DesignComponent>
         </div>
       `,
       propsName: 'input'
@@ -93,23 +54,11 @@ export const wikiDescriptionsChip: StorybookComponentsDescriptionItem = {
         ru: 'Вспомогательные (assistive)'
       },
       template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Default</div>
-            <DesignComponent>Chip</DesignComponent>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Assistive</div>
-            <DesignComponent assistive>Chip</DesignComponent>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">With icon</div>
-            <DesignComponent assistive icon="lightbulb">Suggestion</DesignComponent>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Selected</div>
-            <DesignComponent assistive selected icon="check">Recommended</DesignComponent>
-          </div>
+        <div class="wiki-storybook-flex">
+          <DesignComponent>Chip</DesignComponent>
+          <DesignComponent assistive>Chip</DesignComponent>
+          <DesignComponent assistive icon="lightbulb">Suggestion</DesignComponent>
+          <DesignComponent assistive selected icon="check">Recommended</DesignComponent>
         </div>
       `,
       propsName: 'assistive'
@@ -146,34 +95,15 @@ export const wikiDescriptionsChip: StorybookComponentsDescriptionItem = {
       },
       components: ['Skeleton'],
       template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Basic</div>
-            <DesignSkeleton>
-              <DesignComponent>Chip</DesignComponent>
-            </DesignSkeleton>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Active</div>
-            <DesignSkeleton :active="true">
-              <DesignComponent isSkeleton>Chip</DesignComponent>
-            </DesignSkeleton>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Hidden</div>
-            <DesignSkeleton :active="true">
-              <DesignComponent>Chip</DesignComponent>
-            </DesignSkeleton>
-          </div>
-        </div>
-      `,
-      propsName: 'isSkeleton'
+        <DesignSkeleton :active="true">
+          <DesignComponent isSkeleton>Chip</DesignComponent>
+        </DesignSkeleton>
+      `
     }
   ],
   documentation: {
     body: `
 <StorybookDescriptions componentName={'Chip'} type={'chip'}/>
-<Canvas of={Component.ChipBasic}/>
 
 <template prop="input">
 <StorybookDescriptions componentName={'Chip'} type={'input'}/>
@@ -187,20 +117,6 @@ export const wikiDescriptionsChip: StorybookComponentsDescriptionItem = {
 
 <StorybookDescriptions componentName={'Value'} type={'value'}/>
 
-\`\`\`html
-<DesignComponent
-  value="filter-tag"
-  :detail="{ category: 'filters', type: 'status' }"
-  @click="handleChipClick"
-/>
-
-<DesignComponent
-  :value="chipValue"
-  :detail="{ chipId: chip.id, timestamp: Date.now() }"
-  @click="handleSelection"
-/>
-\`\`\`
-
 <StorybookDescriptions componentName={'Style'} type={'adaptive'}/>
 <Canvas of={Component.ChipAdaptive}/>
 
@@ -217,5 +133,12 @@ export const wikiDescriptionsChip: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'Slot'} type={'default'}/>
     `
+  },
+  ai: {
+    description: `
+Compact interactive element representing an input, attribute, or action. Used for entering information, making selections, filtering content, or triggering immediate actions in a space-efficient way.
+Features multiple functional variants (Action, Input, Assistive, Filter) with support for leading icons and selection states. Includes built-in support for disabled/selected states and adaptive layout options.
+Controlled via value/label props and emits @click events with detailed data. Use for filter tags, choice groups (like radio buttons), or representing entities like contacts in input fields.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsChipGroup.ts

@@ -8,56 +8,29 @@ 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: [
     '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: {
@@ -66,26 +39,17 @@ export const wikiDescriptionsChipGroup: StorybookComponentsDescriptionItem = {
       },
       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>
+          <DesignComponent :list="['Option 1', 'Option 2', 'Option 3']" selected="2"/>
+          <DesignComponent :list="['Option 1', 'Option 2', 'Option 3', 'Option 4']" :selected="['2', '3']"/>
+          <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>
       `
     },
@@ -97,52 +61,27 @@ export const wikiDescriptionsChipGroup: StorybookComponentsDescriptionItem = {
       },
       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 class="wiki-storybook-flex">
+            <span>Current value: {{ multipleSelected }}</span>
+            <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 wiki-storybook-button--warning" @click="multipleSelected = []">Clear all</button>
           </div>
+          <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>
       `
     }
@@ -150,7 +89,6 @@ export const wikiDescriptionsChipGroup: StorybookComponentsDescriptionItem = {
   documentation: {
     body: `
     <StorybookDescriptions componentName={'ChipGroup'} type={'chipGroup'}/>
-    <Canvas of={Component.ChipGroupBasic}/>
 
     <StorybookDescriptions componentName={'ChipGroup'} type={'selected'}/>
     <Canvas of={Component.ChipGroupSelection}/>
@@ -164,5 +102,12 @@ export const wikiDescriptionsChipGroup: StorybookComponentsDescriptionItem = {
     slots: `
     <StorybookDescriptions componentName={'Slot'} type={'default'}/>
     `
+  },
+  ai: {
+    description: `
+Wrapper component for managing collections of Chip elements based on an array of data. Streamlines the creation of filter sets, choice groups, and tag lists by automating iteration and selection logic.
+Features support for single and multiple selection modes, shared chip attributes (via chipAttrs), and icon visibility control. Includes built-in data binding for selected values and @click event propagation.
+Controlled via the list prop for data and v-model:selected for state. Use for dynamic filtering interfaces, selecting multiple categories, or building interactive tag lists from API data.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsDialog.ts

@@ -104,13 +104,17 @@ export const wikiDescriptionsDialog: StorybookComponentsDescriptionItem = {
       }
       `,
       template: `
-        <button class="wiki-storybook-button" @click="open = true">Open via v-model ({{ open }})</button>
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="open = true">Open via v-model ({{ open }})</button>
+          </div>
 
-        <DesignComponent
-          v-model:open="open"
-          label="Confirmation"
-          description="Are you sure you want to proceed with this action?"
-        />
+          <DesignComponent
+            v-model:open="open"
+            label="Confirmation"
+            description="Are you sure you want to proceed with this action?"
+          />
+        </div>
       `
     },
     {
@@ -178,5 +182,17 @@ 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: `
+Specialized modal component for standardized user interactions such as alerts, confirmations, and status messages. Extends the Modal component with a predefined layout for icons, titles, and action buttons.
+Features built-in success/error states with automatic icon switching and content styling. Supports flexible positioning of images (top/left) and integrates with Window, Bars, and Actions for a consistent footer.
+Controlled via v-model:open and various content props (label, description). Use for critical operations requiring user confirmation, operation success/fail alerts, or informative system messages.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsDummy.ts

@@ -0,0 +1,42 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Dummy component properties
+ *
+ * Описания свойств компонента Dummy
+ */
+export const wikiDescriptionsDummy: StorybookComponentsDescriptionItem = {
+  name: 'Dummy',
+  description: {
+    en: 'A placeholder component used for structural presentation or testing',
+    ru: 'Компонент-заглушка, используемый для структурного представления или тестирования'
+  },
+  possibilities: {
+    en: [
+      'multiple sizes from extra small to 5xl',
+      'various color palettes'
+    ],
+    ru: [
+      'множественные размеры от очень маленького до 5xl',
+      'различные цветовые палитры'
+    ]
+  },
+  import: [],
+  stories: [],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Dummy'} type={'dummy'}/>
+    `,
+    slots: `
+<StorybookDescriptions componentName={'Slot'} type={'default'}/>
+    `
+  },
+  ai: {
+    description: `
+Placeholder component used for structural presentation, testing, or laying out interfaces early in development. Provides a simple geometric shape to represent where a future component will be placed.
+Features configurable sizes (from 'xs' to '5xl') and customizable color palettes. Acts as a lightweight visual anchor without complex logic or dependencies.
+Controlled via size and palette props. Use during prototyping to define layout structures before final components are implemented or for testing responsive container behavior.
+    `,
+    hide: true
+  }
+}

package/src/media/descriptions/wikiDescriptionsField.ts

@@ -34,12 +34,43 @@ 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>
     `,
   stories: [
+    {
+      id: 'FieldWidth',
+      name: {
+        en: 'Width',
+        ru: 'Ширина'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent label="auto">
+            <template #default="{id, className}">
+              <input :id="id" :class="className" value="" readonly/>
+            </template>
+          </DesignComponent>
+          <DesignComponent width="320px" label="320px">
+            <template #default="{id, className}">
+              <input :id="id" :class="className" value="" readonly/>
+            </template>
+          </DesignComponent>
+          <DesignComponent width="50%" label="50%">
+            <template #default="{id, className}">
+              <input :id="id" :class="className" value="" readonly/>
+            </template>
+          </DesignComponent>
+          <DesignComponent width="min(100%,320px)" label="min(...)" >
+            <template #default="{id, className}">
+              <input :id="id" :class="className" value="" readonly/>
+            </template>
+          </DesignComponent>
+        </div>
+      `
+    },
     {
       id: 'FieldCancel',
       name: {
@@ -53,14 +84,14 @@ export const wikiDescriptionsField: StorybookComponentsDescriptionItem = {
               <input :id="id" :class="className" value="" readonly/>
             </template>
           </DesignComponent>
-          <DesignComponent cancel="auto" :cancel-show="true" label="auto + show">
+          <DesignComponent cancel="auto" :cancel-show="true" label="auto + value">
             <template #default="{id, className}">
               <input :id="id" :class="className" value="Value" readonly/>
             </template>
           </DesignComponent>
           <DesignComponent cancel="always" label="always">
             <template #default="{id, className}">
-              <input :id="id" :class="className" value="Value" readonly/>
+              <input :id="id" :class="className" value="" readonly/>
             </template>
           </DesignComponent>
         </div>
@@ -114,68 +145,6 @@ export const wikiDescriptionsField: StorybookComponentsDescriptionItem = {
         </DesignSkeleton>
       `
     },
-    {
-      id: 'FieldValue',
-      name: {
-        en: 'Value state',
-        ru: 'Состояние значения'
-      },
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent label="empty" :is-value="false">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="" readonly/>
-            </template>
-          </DesignComponent>
-          <DesignComponent label="value" :is-value="false">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="Hello" readonly/>
-            </template>
-          </DesignComponent>
-          <DesignComponent label="forced (isValue)" :is-value="true">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="" placeholder="" readonly/>
-            </template>
-          </DesignComponent>
-          <DesignComponent label="value + isValue" :is-value="true">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="Data" readonly/>
-            </template>
-          </DesignComponent>
-        </div>
-      `
-    },
-    {
-      id: 'FieldWidth',
-      name: {
-        en: 'Width',
-        ru: 'Ширина'
-      },
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent label="auto">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="" readonly/>
-            </template>
-          </DesignComponent>
-          <DesignComponent width="320px" label="320px">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="" readonly/>
-            </template>
-          </DesignComponent>
-          <DesignComponent width="50%" label="50%">
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="" readonly/>
-            </template>
-          </DesignComponent>
-          <DesignComponent width="min(100%,320px)" label="min(...)" >
-            <template #default="{id, className}">
-              <input :id="id" :class="className" value="" readonly/>
-            </template>
-          </DesignComponent>
-        </div>
-      `
-    },
     {
       id: 'FieldSlots',
       name: {
@@ -188,6 +157,7 @@ export const wikiDescriptionsField: StorybookComponentsDescriptionItem = {
           label="Label prop"
           icon="home"
           icon-trailing="close"
+          value="Value"
         >
           <template #default="{id, className}">
             <input :id="id" :class="className" value="Value" readonly/>
@@ -207,7 +177,6 @@ export const wikiDescriptionsField: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Field'} type={'field'}/>
 
 <StorybookDescriptions componentName={'Field'} type={'value'}/>
-<Canvas of={Component.FieldValue}/>
 
 <StorybookDescriptions componentName={'Field'} type={'width'}/>
 <Canvas of={Component.FieldWidth}/>
@@ -230,9 +199,24 @@ 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: `
+Foundational wrapper component for all form inputs. Provides the structural layout, styling, and state management for labels, helper messages, validation errors, icons, and progress indicators.
+Features a composable structure with prefix/suffix slots, leading/trailing icons, and a character counter. Automatically handles validation states, loading spinners, and disabled/readonly appearances.
+Integrates with native inputs via the #default slot, exposing essential bindings (id, class, aria) to maintain design consistency and accessibility. Use as a base when creating custom form controls.
+    `,
+    hide: true
   }
 }

package/src/media/descriptions/wikiDescriptionsFieldCounter.ts

@@ -63,5 +63,13 @@ export const wikiDescriptionsFieldCounter: StorybookComponentsDescriptionItem =
 <StorybookDescriptions componentName={'FieldCounter'} type={'templates'}/>
 <Canvas of={Component.FieldCounterTemplate}/>
     `
+  },
+  ai: {
+    description: `
+Utility subcomponent for displaying character counts and input limits. Provides visual feedback to users and accessibility status to screen readers during formal data entry.
+Features customizable display templates with placeholders ([c] for counter, [m] for max) and automated visibility based on maxlength. Includes ARIA live region management for screen reader announcements.
+Integrated automatically into components like Input and Textarea; should generally not be used directly. Controlled via counter and maxlength props within the Field wrapper.
+    `,
+    hide: true
   }
 }

package/src/media/descriptions/wikiDescriptionsFieldLabel.ts

@@ -34,5 +34,13 @@ export const wikiDescriptionsFieldLabel: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'Slot'} type={'label'} />
     `
+  },
+  ai: {
+    description: `
+Subcomponent of the Field wrapper responsible for rendering form field labels and required markers. Ensures consistent styling, positioning, and accessibility for all input headings.
+Features automated support for the "required" property (showing an asterisk) and works seamlessly with character counters and progress bars within the Field header.
+Controlled through the label prop or #label slot. Primarily used within Input, Textarea, and other field-based controls; should generally not be used as a standalone component.
+    `,
+    hide: true
   }
 }