@dxtmisha/wiki 0.24.3 → 0.39.1

package/src/media/descriptions/wikiDescriptionsImage.ts

@@ -3,7 +3,7 @@ import type { StorybookComponentsDescriptionItem } from '../../types/storybookTy
 export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
   name: 'Image',
   description: {
-    en: 'Image component for displaying images',
+    en: 'Component for displaying images and icons. Based on `ImageDesign` and supports working with files, links, and icon names.',
     ru: 'Компонент для отображения изображений и иконок. Основан на `ImageDesign` и поддерживает работу с файлами, ссылками и именами икон'
   },
   possibilities: {
@@ -75,23 +75,55 @@ export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
         <div class="wiki-storybook-group">
           <div class="wiki-storybook-item wiki-storybook-item--squared--md">
             <div class="wiki-storybook-item__label">size: auto (default)</div>
-            <DesignComponent :value="image1" size="auto"/>
+            <DesignComponent :value="image1" size="auto" tag-img/>
           </div>
           <div class="wiki-storybook-item wiki-storybook-item--squared--md">
             <div class="wiki-storybook-item__label">size: contain</div>
-            <DesignComponent :value="image1" size="contain"/>
+            <DesignComponent :value="image1" size="contain" tag-img/>
           </div>
           <div class="wiki-storybook-item wiki-storybook-item--squared--md">
             <div class="wiki-storybook-item__label">size: cover</div>
-            <DesignComponent :value="image1" size="cover"/>
+            <DesignComponent :value="image1" size="cover" tag-img/>
           </div>
           <div class="wiki-storybook-item wiki-storybook-item--squared--md">
             <div class="wiki-storybook-item__label">coordinator</div>
-            <DesignComponent :value="image1" :coordinator="[60, 10, 10, 40]"/>
+            <DesignComponent :value="image1" :coordinator="[60, 10, 10, 40]" tag-img/>
           </div>
           <div class="wiki-storybook-item wiki-storybook-item--squared--md">
             <div class="wiki-storybook-item__label">x, y</div>
-            <DesignComponent :value="image1" x="20" y="-10"/>
+            <DesignComponent :value="image1" x="20%" y="-10%" tag-img/>
+          </div>
+        </div>
+      `
+    },
+    {
+      id: 'ImageTagImg',
+      name: {
+        en: 'Using img tag',
+        ru: 'Использование тега img'
+      },
+      setup: `
+      return {
+        image1
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-group">
+          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
+            <div class="wiki-storybook-item__label">Background (default)</div>
+            <DesignComponent :value="image1"/>
+          </div>
+          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
+            <div class="wiki-storybook-item__label">tag-img + alt</div>
+            <DesignComponent :value="image1" tag-img alt="Example image"/>
+          </div>
+          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
+            <div class="wiki-storybook-item__label">tag-img + lazy + srcset</div>
+            <DesignComponent :value="image1" tag-img lazy alt="Responsive image" :srcset="{ '1x': image1, '2x': image1 }"/>
+          </div>
+          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
+            <div class="wiki-storybook-item__label">tag-img + picture</div>
+            <DesignComponent :value="image1" tag-img alt="Adaptive image" :picture="{ 768: image1, 1024: image1 }"/>
           </div>
         </div>
       `
@@ -118,7 +150,7 @@ export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
             <DesignComponent :value="phone2" adaptive object-width="71.9"/>
           </div>
           <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <DesignComponent :value="phone3" adaptive object-width="129.9"/>
+            <DesignComponent :value="phone3" adaptive object-width="129.9" tag-img/>
           </div>
         </div>
       `
@@ -128,8 +160,12 @@ export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
     body: `
 <StorybookDescriptions componentName={'Image'} type={'image'}/>
 <StorybookDescriptions componentName={'Image'} type={'value'}/>
+<StorybookDescriptions componentName={'Image'} type={'flag'}/>
 <Canvas of={Component.ImageType}/>
 
+<StorybookDescriptions componentName={'Image'} type={'img-tag'}/>
+<Canvas of={Component.ImageTagImg}/>
+
 <StorybookDescriptions componentName={'Image'} type={'size'}/>
 <Canvas of={Component.ImageSize}/>
 
@@ -142,5 +178,53 @@ export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
     expose: `
 <StorybookDescriptions componentName={'Image'} type={'expose'}/>
     `
+  },
+  ai: {
+    render: `
+<div
+  :class="classDemo.item"
+  style="position: relative; width: 48px; height: 48px;"
+>
+  <Image v-bind="args"/>
+</div>
+    `,
+    description: `
+Image is a universal component for displaying graphic content.
+It automatically determines the type of content (image, icon, file, PDF)
+based on the \`value\` property.
+
+**Key Features:**
+1. **Automatic Type Detection:**
+   - **Image:** If \`value\` is a URL to an image or a File object.
+   - **Icon:** If \`value\` is a string matching an icon name
+     (e.g., "home", "filled-home"). Supports Material Symbols/Icons.
+   - **PDF:** If \`value\` is a URL to a PDF file.
+   - **Color:** If \`value\` is a color string (e.g., "#ff0000").
+
+2. **Display Modes (\`size\`):**
+   - \`auto\` (default): Standard behavior.
+   - \`contain\`: Scales the image to fit within the container while maintaining aspect ratio.
+   - \`cover\`: Scales the image to cover the container, cropping if necessary.
+
+3. **Rendering Method (\`tagImg\`):**
+   - \`false\` (default): Renders as a background image (\`background-image\`) on a \`<span>\`.
+     Useful for precise positioning and sizing.
+   - \`true\`: Renders as a standard \`<img>\` tag. Required for SEO (alt text), lazy loading,
+     and accessibility.
+
+4. **Adaptivity (\`adaptive\`):**
+   - Allows scaling the image relative to its original size using \`objectWidth\` and \`objectHeight\`.
+
+5. **Advanced Positioning:**
+   - \`coordinator\`: Array \`[top, right, bottom, left]\` for cropping or positioning the background.
+   - \`x\`, \`y\`: Direct control over background position.
+
+**Usage Examples:**
+
+- **Icon:** \`<Image value="home" />\`
+- **Image (Background):** \`<Image value="https://example.com/img.jpg" size="cover" />\`
+- **Image (Tag):** \`<Image value="https://example.com/img.jpg" tag-img alt="Description" />\`
+- **PDF:** \`<Image value="https://example.com/doc.pdf" />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsInput.ts

@@ -0,0 +1,313 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Input component
+ *
+ * Описания свойств компонента Input
+ */
+export const wikiDescriptionsInput: StorybookComponentsDescriptionItem = {
+  name: 'Input',
+  description: {
+    en: 'Text input field component with validation, masking and formatting support',
+    ru: 'Компонент текстового поля ввода с поддержкой валидации, маскирования и форматирования'
+  },
+  possibilities: {
+    en: [
+      'multiple input types: text, number, email, password, tel, url, date, time and more',
+      'built-in validation with custom messages',
+      'mask support for formatted input (phone, date, custom patterns)',
+      'currency and number formatting',
+      'password visibility toggle',
+      'prefix and suffix support',
+      'counter for character limits',
+      'navigation arrows for numeric and selection inputs',
+      'autocomplete, spellcheck and autocorrect support',
+      'integrated with Field component for consistent styling'
+    ],
+    ru: [
+      'множественные типы ввода: text, number, email, password, tel, url, date, time и другие',
+      'встроенная валидация с пользовательскими сообщениями',
+      'поддержка маскирования для форматированного ввода (телефон, дата, пользовательские паттерны)',
+      'форматирование валюты и чисел',
+      'переключатель видимости пароля',
+      'поддержка префикса и суффикса',
+      'счётчик для ограничения символов',
+      'стрелки навигации для числовых и выборочных полей',
+      'поддержка автозаполнения, проверки орфографии и автокоррекции',
+      'интегрирован с компонентом Field для единообразной стилизации'
+    ]
+  },
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  render: `
+      <DesignComponent v-bind="args" />
+    `,
+  stories: [
+    {
+      id: 'InputTypes',
+      name: {
+        en: 'Input types',
+        ru: 'Типы ввода'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent type="text" label="Text" placeholder="Enter text" />
+          <DesignComponent type="email" label="Email" placeholder="email@example.com" />
+          <DesignComponent type="password" label="Password" placeholder="Enter password" />
+          <DesignComponent type="number" label="Number" placeholder="0" />
+          <DesignComponent type="text" label="Phone" mask="+1 (***) ***-****" placeholder="+1 (555) 000-0000" />
+          <DesignComponent type="date" label="Date" />
+          <DesignComponent type="search" label="Search" placeholder="Search..." />
+        </div>
+      `
+    },
+    {
+      id: 'InputNumber',
+      name: {
+        en: 'Number formatting',
+        ru: 'Форматирование чисел'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent type="number" value="1234567" label="Number" />
+          <DesignComponent type="number-format" value="1234567" language="en-US" label="Formatted" />
+          <DesignComponent type="number" value="50" :min="0" :max="100" label="From 0 to 100" />
+          <DesignComponent type="number" value="10" arrow="stepper" :step="5" :arrow-step="10" label="Step 5/10" />
+          <DesignComponent type="number-format" value="1234567.89" align="center" :fraction="2" label="Centered" />
+        </div>
+      `
+    },
+    {
+      id: 'InputCurrency',
+      name: {
+        en: 'Currency & number formatting',
+        ru: 'Валюта и форматирование чисел'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent
+            type="currency"
+            label="Price (USD)"
+            currency="USD"
+          />
+          <DesignComponent
+            type="currency"
+            label="Price (USD)"
+            currency="USD"
+            value="1234.56"
+          />
+          <DesignComponent
+            type="currency"
+            label="Price (currency-hide)"
+            currency="EUR"
+            currency-hide
+            value="1234.56"
+          />
+        </div>
+      `
+    },
+    {
+      id: 'InputDate',
+      name: {
+        en: 'Date and time',
+        ru: 'Дата и время'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent type="date" label="Date" language="ru-RU" />
+          <DesignComponent type="datetime" label="Date and Time" language="en-US" />
+          <DesignComponent type="year-month" label="Period" language="ru-RU" />
+          <DesignComponent type="time" label="Time" />
+          <DesignComponent type="hour-minute" label="Hours:Minutes" />
+          <DesignComponent type="date" label="Limited Date" language="ru-RU" min="2024-01-01" max="2024-12-31" />
+        </div>
+      `
+    },
+    {
+      id: 'InputMask',
+      name: {
+        en: 'Masked input',
+        ru: 'Маскированный ввод'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent type="tel" mask="+1 (###) ###-####" placeholder="+1 (555) 000-0000" label="Phone" />
+          <DesignComponent type="text" mask="#### #### #### ####" placeholder="0000 0000 0000 0000" label="Card" />
+          <DesignComponent type="tel" mask="+1 (###) ###-####" :mask-visible="false" label="No placeholder" />
+        </div>
+      `
+    },
+    {
+      id: 'InputVModel',
+      name: {
+        en: 'Two-way binding (v-model)',
+        ru: 'Двусторонняя привязка (v-model)'
+      },
+      setup: `
+      return {
+        inputValue: ref('Initial value'),
+        maskValue: ref(''),
+        numberValue: ref(42)
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="inputValue = 'Changed value'">Set text</button>
+            <button class="wiki-storybook-button" @click="inputValue = ''">Clear</button>
+          </div>
+          <DesignComponent
+            v-model="inputValue"
+            type="text"
+            label="Text input"
+            placeholder="Enter text"
+          />
+          <div>Value: {{ inputValue }}</div>
+
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="maskValue = '2022-05-13'">Set date</button>
+            <button class="wiki-storybook-button" @click="maskValue = ''">Clear</button>
+          </div>
+          <DesignComponent
+            v-model="maskValue"
+            type="date"
+            label="Date input"
+          />
+          <div>Mask: {{ maskValue }}</div>
+
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="numberValue += 10">+10</button>
+            <button class="wiki-storybook-button" @click="numberValue -= 10">-10</button>
+          </div>
+          <DesignComponent
+            v-model="numberValue"
+            type="number"
+            label="Number input"
+            :step="1"
+          />
+          <div>Number: {{ numberValue }}</div>
+        </div>
+      `
+    },
+    {
+      id: 'InputSkeleton',
+      name: {
+        en: 'Skeleton',
+        ru: 'Скелетон'
+      },
+      components: ['Skeleton'],
+      template: `
+        <DesignSkeleton :active="true" style="max-width:320px">
+          <div class="wiki-storybook-flex-column">
+            <DesignComponent
+              isSkeleton
+              label="Loading field"
+              helperMessage="This field is loading..."
+            />
+            <DesignComponent
+              isSkeleton
+              label="Another field"
+              counterShow
+            />
+          </div>
+        </DesignSkeleton>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Input'} type={'input'}/>
+
+<StorybookDescriptions componentName={'Input'} type={'type'}/>
+<Canvas of={Component.InputTypes}/>
+
+<StorybookDescriptions componentName={'Input'} type={'number'}/>
+<Canvas of={Component.InputNumber}/>
+
+<StorybookDescriptions componentName={'Input'} type={'currency'}/>
+<Canvas of={Component.InputCurrency}/>
+
+<StorybookDescriptions componentName={'Input'} type={'date'}/>
+<Canvas of={Component.InputDate}/>
+
+<StorybookDescriptions componentName={'Input'} type={'mask'}/>
+<Canvas of={Component.InputMask}/>
+
+<StorybookDescriptions componentName={'Value'} type={'value'}/>
+<StorybookDescriptions componentName={'Value'} type={'v-model'}/>
+<Canvas of={Component.InputVModel}/>
+
+<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>
+<Canvas of={Component.InputSkeleton}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Event'} type={'input'}/>
+<StorybookDescriptions componentName={'Event'} type={'change'}/>
+    `,
+    slots: `
+<StorybookDescriptions componentName={'Slot'} type={'label'} />
+<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'} />
+    `
+  },
+  ai: {
+    description: `
+Input is the primary component for getting user data. It wraps the native \`<input>\` element and adds support for floating labels, validation, masking, and formatting.
+
+**When to use:**
+1. **Text Fields:** Names, emails, addresses, search queries.
+2. **Numeric Data:** Quantities, prices (use \`type="number"\` or \`type="currency"\`).
+3. **Formatted Inputs:** Phone numbers, credit cards (use \`mask\`).
+4. **Passwords:** Secure entry with visibility toggle (use \`type="password"\`).
+5. **Date/Time:** Date selection (use \`type="date"\`, \`type="time"\`).
+
+**Key Properties & Logic:**
+
+1. **Input Types (\`type\`):**
+   - **Standard:** \`text\`, \`email\`, \`search\`, \`url\`, \`tel\`.
+   - **Password:** \`password\`. Automatically adds a "show/hide" eye icon.
+   - **Native Number:** \`number\`. Uses browser's native number input.
+   - **Formatted Number:** \`number-format\`. A text input that formats numbers with thousands separators (e.g., "1,234.56") based on \`language\`.
+   - **Currency:** \`currency\`. Formats input as money. Requires \`currency\` prop (e.g., "USD").
+   - **Date/Time:** \`date\`, \`datetime\`, \`time\`, \`year-month\`.
+
+2. **Masking (\`mask\`):**
+   - Applies a strict pattern to the input.
+   - Example: \`mask="+1 (###) ###-####"\` for phones.
+   - The component automatically handles placeholder characters and cursor movement.
+   - Use \`match\` to restrict allowed characters (e.g., \`match="[0-9]"\`).
+
+3. **Validation:**
+   - **Error State:** Set \`validationMessage\` to show an error text and turn the field red.
+   - **Regex Pattern:** Use \`pattern\` to validate the final value.
+   - **Input Filter:** Use \`match\` to prevent typing invalid characters.
+
+4. **Field Structure (Visuals):**
+   - **Label:** \`label\` prop. Can be floating or static.
+   - **Placeholder:** \`placeholder\` prop. Shown when empty.
+   - **Helper Text:** \`helperMessage\` prop. Shown below the input.
+   - **Icons:** \`icon\` (left/leading) and \`iconTrailing\` (right/trailing).
+   - **Affixes:** \`prefix\` (text before value, e.g., "$") and \`suffix\` (text after value, e.g., "kg").
+   - **Counter:** \`counter\` prop. Shows character count (requires \`maxlength\`).
+
+5. **Behavior:**
+   - **Loading:** \`loading\` prop shows a spinner/skeleton.
+   - **Clearable:** \`cancel\` prop adds a clear (X) button.
+   - **Read-only/Disabled:** \`readonly\` and \`disabled\` props.
+
+**Design Identification:**
+- **Standard Input:** A box or underline with text.
+- **With Icon:** Input with a symbol on the left or right.
+- **With Prefix/Suffix:** Input containing fixed text like "$" or "items".
+- **Error State:** Input with red border/text and a message below.
+- **Password:** Input with dots and an eye icon.
+
+**Example:**
+\`<Input label="Email" type="email" icon="mail" />\`
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsList.ts

@@ -116,5 +116,36 @@ export const wikiDescriptionsList: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'List'} type={'slot.html'}/>
     `
+  },
+  ai: {
+    description: `
+List is a core structural component for rendering interactive lists.
+It is the engine behind Dropdowns, Selects, and Navigation Menus.
+
+**Key Features:**
+1. **Data Structure:**
+   - \`list\`: Array of objects. Supports types: \`item\` (default), \`group\`, \`menu\`, \`line\` (separator), \`space\`, \`subtitle\`, \`html\`.
+   - Items properties: \`label\`, \`value\`, \`icon\`, \`description\`, \`disabled\`, \`to\` (link).
+
+2. **Interaction:**
+   - **Selection:** \`v-model:selected\` (single or array).
+   - **Keyboard:** Full arrow key navigation, Enter to select.
+   - **Focus:** Manages internal focus.
+
+3. **Search & Filtering:**
+   - \`highlight\`: Text to highlight.
+   - \`filterMode\`: Hides non-matching items.
+
+**Usage Examples:**
+
+- **Basic List:**
+  \`<List :list="[{ label: 'Home', icon: 'home' }, { label: 'Settings', icon: 'settings' }]" />\`
+
+- **With Selection:**
+  \`<List v-model:selected="current" :list="options" />\`
+
+- **Filtered List:**
+  \`<List :list="data" :highlight="searchText" filter-mode />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsListGroup.ts

@@ -75,5 +75,62 @@ export const wikiDescriptionsListGroup: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'ListGroup'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <ListGroup v-bind="args">
+    <template #head="{ binds }">
+      <span v-bind="binds">head</span>
+    </template>
+    <template #list>
+      list
+    </template>
+  </ListGroup>
+</div>
+    `,
+    description: `
+ListGroup is a structural component designed to group related list items, often providing collapsible/expandable functionality.
+It serves as a container that manages the visibility of nested items, creating a hierarchical structure within lists or menus.
+
+**Key Features:**
+1. **Collapsible Logic:**
+   - Wraps content in a \`MotionTransform\` component for smooth height animations.
+   - Can be controlled programmatically via the \`open\` prop or interactively via the header.
+
+2. **Slots Structure:**
+   - \`#head\`: The header area acting as the trigger. It receives \`binds\` (click handlers, ARIA attributes) that **must** be applied to the interactive element (e.g., \`ListItem\`) to enable toggling.
+   - \`#list\`: The content area where nested \`ListItem\` or other components are placed.
+
+3. **Styling:**
+   - \`divider\`: Adds a visual separator if enabled.
+   - Automatically handles ARIA roles (\`role="group"\`).
+
+**When to use:**
+- **Navigation Menus:** To create submenus or grouped links (e.g., "Settings" -> "Profile", "Security").
+- **Categorized Lists:** To group items under a common heading.
+- **Accordions within Lists:** When list items need to expand to show details.
+
+**Usage Examples:**
+
+- **Basic Group:**
+  \`<ListGroup>
+     <template #head="{ binds }">
+       <ListItem v-bind="binds" label="My Group" icon="folder" />
+     </template>
+     <template #list>
+       <ListItem label="File 1" />
+       <ListItem label="File 2" />
+     </template>
+   </ListGroup>\`
+
+- **Open by Default:**
+  \`<ListGroup open>
+     <template #head="{ binds }">
+       <ListItem v-bind="binds" label="Always Open" />
+     </template>
+     <template #list>...</template>
+   </ListGroup>\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsListItem.ts

@@ -144,5 +144,47 @@ export const wikiDescriptionsListItem: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
 <StorybookDescriptions componentName={'ListItem'} type={'slots'}/>
     `
+  },
+  ai: {
+    description: `
+ListItem is a versatile structural component used to render items within lists, menus, or navigation bars.
+It provides a standardized layout with slots for leading (prefix) and trailing (suffix) elements, along with a central content area.
+
+**Key Features:**
+1. **Layout Structure:**
+   - **Prefix:** Left-most area (e.g., for avatars, checkboxes, or icons).
+   - **Content:** Central area containing:
+     - \`label\`: Main title.
+     - \`caption\`: Meta text (above or next to label).
+     - \`description\`: Subtitle text (below label).
+   - **Suffix:** Right-side meta content (e.g., timestamp, status).
+   - **Trailing:** Far-right action area (e.g., arrow icon, badge).
+
+2. **Interaction:**
+   - **Navigation:** Renders as an \`<a>\` tag if \`href\` is provided.
+   - **Selection:** Supports \`selected\` state (useful for menus).
+   - **Feedback:** Includes ripple effect and hover/active states.
+   - **Disabled:** \`disabled\` prop prevents interaction.
+
+3. **Styling:**
+   - \`divider\` adds a bottom border.
+   - Supports \`badge\` integration via props.
+
+**Usage Examples:**
+
+- **Navigation Link:**
+  \`<ListItem href="/home" label="Home" icon="chevron_right">
+     <template #prefix>prefix</template>
+   </ListItem>\`
+
+- **User List Item:**
+  \`<ListItem label="John Doe" description="Online" divider>
+     <template #prefix><Avatar src="..."/></template>
+     <template #suffix>12:30 PM</template>
+   </ListItem>\`
+
+- **Menu Item:**
+  \`<ListItem label="Settings" icon="settings" selected />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsListMenu.ts

@@ -73,5 +73,46 @@ export const wikiDescriptionsListMenu: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'ListGroup'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <ListMenu v-bind="args">
+    <template #head="{ binds }">
+      <span v-bind="binds as any">head</span>
+    </template>
+    <template #list>
+      list
+    </template>
+  </ListMenu>
+</div>
+    `,
+    description: `
+ListMenu is a specialized wrapper component designed to create dropdown menus or nested navigation lists.
+It utilizes the \`Window\` component logic with a menu preset to manage the visibility and positioning of a list of items relative to a trigger.
+
+**Key Features:**
+1. **Structure:**
+   - \`#head\`: The trigger area (Control). It exposes \`binds\` which **must** be applied to the interactive element (e.g., \`ListItem\`, \`Button\`) to toggle the menu.
+   - \`#list\`: The content area containing the menu items.
+
+2. **Behavior:**
+   - **Popup/Dropdown:** By default, it behaves like a dropdown menu (\`adaptive="menu"\`).
+   - **Interaction:** Manages click/hover events via \`binds\` to open/close the list.
+   - **Accessibility:** Automatically applies \`role="menu"\` and \`aria-haspopup\`.
+
+**Usage Examples:**
+
+- **List Item with Submenu:**
+  \`<ListMenu>
+     <template #head="{ binds }">
+       <ListItem v-bind="binds" label="Settings" icon="settings" />
+     </template>
+     <template #list>
+       <ListItem label="Profile" />
+       <ListItem label="Account" />
+     </template>
+   </ListMenu>\`
+    `
   }
 }