@dxtmisha/wiki 0.39.2 → 0.39.3

package/src/media/descriptions/wikiDescriptionsInput.ts

@@ -1,264 +0,0 @@
-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 a 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">
-            <span>Current value: {{ inputValue }}</span>
-            <button class="wiki-storybook-button" @click="inputValue = 'Changed value'">Set text</button>
-            <button class="wiki-storybook-button wiki-storybook-button-warning" @click="inputValue = ''">Clear</button>
-          </div>
-          <DesignComponent
-            v-model="inputValue"
-            type="text"
-            label="Text input"
-            placeholder="Enter text"
-          />
-
-          <div class="wiki-storybook-flex">
-            <span>Current value: {{ maskValue }}</span>
-            <button class="wiki-storybook-button" @click="maskValue = '2022-05-13'">Set date</button>
-            <button class="wiki-storybook-button wiki-storybook-button-warning" @click="maskValue = ''">Clear</button>
-          </div>
-          <DesignComponent
-            v-model="maskValue"
-            type="date"
-            label="Date input"
-          />
-
-          <div class="wiki-storybook-flex">
-            <span>Current value: {{ numberValue }}</span>
-            <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>
-      `
-    },
-    {
-      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: `
-Primary component for user data entry, wrapping the native <input> element with enhanced functionality. Supports floating labels, validation, masking, and multiple formatting modes (numeric, currency, password).
-Features built-in support for input masks (e.g., phone numbers), automatic currency/number formatting, and password visibility toggles. Includes field affixes (prefix/suffix), leading/trailing icons, and a character counter.
-Controlled via v-model and type props, emitting standard input/change events. Use for all text-based data collection, from simple names to complex formatted financial or identification data.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsList.ts

@@ -1,131 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for List component properties
- *
- * Описания свойств компонента List
- */
-export const wikiDescriptionsList: StorybookComponentsDescriptionItem = {
-  name: 'List',
-  description: {
-    en: 'Advanced list component with keyboard navigation, search functionality, and hierarchical data support',
-    ru: 'Продвинутый компонент списка с навигацией с клавиатуры, функциональностью поиска и поддержкой иерархических данных'
-  },
-  possibilities: {
-    en: [
-      'keyboard navigation with arrow keys and shortcuts',
-      'real-time search and highlight functionality',
-      'hierarchical data structure with groups and menus',
-      'focus management and item selection',
-      'lightweight rendering mode for large datasets',
-      'customizable item types and rendering',
-      'event-driven interaction system',
-      'accessibility support with ARIA attributes',
-      'automatic scroll management and viewport optimization',
-      'integration with icons, badges, and other components'
-    ],
-    ru: [
-      'навигация с клавиатуры со стрелками и горячими клавишами',
-      'поиск в реальном времени и функциональность выделения',
-      'иерархическая структура данных с группами и меню',
-      'управление фокусом и выбором элементов',
-      'облегченный режим рендеринга для больших наборов данных',
-      'настраиваемые типы элементов и рендеринг',
-      'событийно-ориентированная система взаимодействия',
-      'поддержка доступности с ARIA атрибутами',
-      'автоматическое управление прокруткой и оптимизация области просмотра',
-      'интеграция с иконками, бейджами и другими компонентами'
-    ]
-  },
-  stories: [
-    {
-      id: 'ListLiteMode',
-      name: {
-        en: 'Lite mode',
-        ru: 'Облегчённый режим'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Without lite</div>
-            <DesignComponent
-              :liteThreshold="3"
-              :list="[
-                {label: 'Alpha', value: 'a', icon: 'bookmark'},
-                {label: 'Beta', value: 'b', icon: 'label'},
-                {label: 'Gamma', value: 'g', icon: 'flag'},
-                {label: 'Delta', value: 'd', icon: 'star'},
-                {label: 'Epsilon', value: 'e', icon: 'bolt'}
-              ]"
-            />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
-            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">With lite</div>
-            <DesignComponent
-              :lite="true"
-              :liteThreshold="3"
-              :list="[
-                {label: 'Alpha', value: 'a', icon: 'bookmark'},
-                {label: 'Beta', value: 'b', icon: 'label'},
-                {label: 'Gamma', value: 'g', icon: 'flag'},
-                {label: 'Delta', value: 'd', icon: 'star'},
-                {label: 'Epsilon', value: 'e', icon: 'bolt'}
-              ]"
-            />
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'ListHighlight',
-      name: {
-        en: 'Highlighting',
-        ru: 'Выделение'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
-            <DesignComponent
-              :list="[
-                {label: 'Project index example', value: 'projects', icon: 'folder'},
-                {label: 'Advanced context options', value: 'experiments', icon: 'tune'},
-                {label: 'Next examination notes', value: 'example', icon: 'description'},
-                {label: 'User experience metrics', value: 'express', icon: 'insights'}
-              ]"
-              highlight="exam"
-              :highlightLengthStart="4"
-            />
-          </div>
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'List'} type={'list'}/>
-
-<StorybookDescriptions componentName={'List'} type={'lite'}/>
-<Canvas of={Component.ListLiteMode}/>
-
-<StorybookDescriptions componentName={'Value'} type={'highlight'}/>
-<Canvas of={Component.ListHighlight}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Event'} type={'click'}/>
-<StorybookDescriptions componentName={'List'} type={'event.close'}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'Expose'} type={'selected'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'List'} type={'slot.html'}/>
-    `
-  },
-  ai: {
-    description: `
-Core engine for rendering interactive, searchable, and hierarchical lists. Serves as the foundation for complex components like Selects, Dropdowns, and multi-level Navigation Menus.
-Features support for multiple item types (group, menu, line, html), real-time search highlighting, and full keyboard navigation. Includes automatic focus management, ARIA accessibility roles, and a "lite" rendering mode for performance optimization with large datasets.
-Controlled via the list prop for data and v-model:selected for state tracking. Use as the primary building block for any interface requiring item selection, structured data display, or interactive command menus.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsListGroup.ts

@@ -1,99 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for ListGroup component properties
- *
- * Описания свойств компонента ListGroup
- */
-export const wikiDescriptionsListGroup: StorybookComponentsDescriptionItem = {
-  name: 'ListGroup',
-  description: {
-    en: 'Auxiliary component for the List component to group and organize list items with collapsible structure',
-    ru: 'Вспомогательный компонент для компонента List для группировки и организации элементов списка со сворачиваемой структурой'
-  },
-  possibilities: {
-    en: [
-      'grouping helper for List component items',
-      'collapsible/expandable group functionality',
-      'customizable group header with icon support',
-      'automatic arrow icon rotation based on state',
-      'nested group support for complex hierarchies',
-      'seamless integration with List ecosystem',
-      'keyboard navigation and accessibility',
-      'smooth animation transitions',
-      'flexible content management through slots'
-    ],
-    ru: [
-      'помощник группировки для элементов компонента List',
-      'функциональность сворачиваемой/разворачиваемой группы',
-      'настраиваемый заголовок группы с поддержкой иконок',
-      'автоматический поворот стрелки в зависимости от состояния',
-      'поддержка вложенных групп для сложных иерархий',
-      'бесшовная интеграция с экосистемой List',
-      'навигация с клавиатуры и доступность',
-      'плавные анимационные переходы',
-      'гибкое управление контентом через слоты'
-    ]
-  },
-  render: `
-    <DesignComponent v-bind="args">
-      <template v-slot:head="{open}">
-        Primary group header with expand/collapse toggle
-      </template>
-      <template v-slot:list>
-        Main content area for grouped list items
-      </template>
-    </DesignComponent>
-
-    <DesignComponent v-bind="args">
-      <template v-slot:head="{open}">
-        Secondary group header with custom styling
-      </template>
-      <template v-slot:list>
-        Alternative layout for nested components
-      </template>
-    </DesignComponent>
-
-    <DesignComponent v-bind="args">
-      <template v-slot:head="{open}">
-        Tertiary group header with advanced options
-      </template>
-      <template v-slot:list>
-        Extended content area with additional features
-      </template>
-    </DesignComponent>
-    `,
-  import: [],
-  stories: [],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'ListGroup'} type={'listGroup'}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'Expose'} type={'open'}/>
-    `,
-    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: `
-Structural component for grouping related list items into collapsible/expandable hierarchies. Manages the visual nesting and visibility of child elements, providing organized categorization within dense lists.
-Features smooth height animations via MotionTransform and integrated header functionality with automatic arrow rotation. Exposes localized bindings in the #head slot to correctly link triggers with their collapsible content.
-Controlled via the open prop and utilizes #head and #list slots for content distribution. Use for navigation submenus, categorized data lists, or accordion-style expanding rows.
-    `,
-    hide: true
-  }
-}

package/src/media/descriptions/wikiDescriptionsListItem.ts

@@ -1,167 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for ListItem component properties
- *
- * Описания свойств компонента ListItem
- */
-export const wikiDescriptionsListItem: StorybookComponentsDescriptionItem = {
-  name: 'ListItem',
-  description: {
-    en: 'Versatile list item component for displaying structured content',
-    ru: 'Универсальный компонент элемента списка для отображения структурированного контента'
-  },
-  possibilities: {
-    en: [
-      'multiple content areas: label, description, prefix, suffix, caption',
-      'icon support with flexible positioning and alignment',
-      'badge integration for status indicators',
-      'interactive states: focus, selected, disabled, readonly',
-      'progress and skeleton loading states',
-      'ripple effect for enhanced user feedback',
-      'flexible tag options: button, link, div, span',
-      'built-in accessibility support',
-      'customizable through design tokens'
-    ],
-    ru: [
-      'множественные области контента: метка, описание, префикс, суффикс, заголовок',
-      'поддержка иконок с гибким позиционированием и выравниванием',
-      'интеграция значков для индикаторов статуса',
-      'интерактивные состояния: фокус, выбранный, отключенный, только для чтения',
-      'состояния загрузки с прогрессом и скелетоном',
-      'эффект пульсации для улучшенной обратной связи',
-      'гибкие варианты тегов: кнопка, ссылка, div, span',
-      'встроенная поддержка доступности',
-      'настраиваемый через токены дизайна'
-    ]
-  },
-  render: `
-    <DesignComponent v-bind="args"/>
-    <DesignComponent v-bind="args"/>
-    <DesignComponent v-bind="args"/>
-    `,
-  import: [],
-  stories: [
-    {
-      id: 'ListItemBasic',
-      name: {
-        en: 'Basic',
-        ru: 'Базовые'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
-            <DesignComponent>Simple Item</DesignComponent>
-            <DesignComponent icon="person">Item with Icon</DesignComponent>
-            <DesignComponent description="Additional information">Item with Description</DesignComponent>
-            <DesignComponent focus>Focus</DesignComponent>
-            <DesignComponent selected>Selected</DesignComponent>
-            <DesignComponent disabled>Disabled</DesignComponent>
-            <DesignComponent readonly>Readonly</DesignComponent>
-            <DesignComponent prefix="01" suffix="Info">With Prefix & Suffix</DesignComponent>
-            <DesignComponent caption="Caption" description="Description text here">Full Content</DesignComponent>
-            <DesignComponent icon="star" badge="new">Icon with Badge</DesignComponent>
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'ListItemHighlight',
-      name: {
-        en: 'Highlighting',
-        ru: 'Выделение'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
-            <DesignComponent highlight="search" label="Search result item"/>
-            <DesignComponent highlight="tex" :highlightLengthStart="3" label="Text with highlighting"/>
-            <DesignComponent highlight="te" :highlightLengthStart="3" label="Text without highlighting (too short)"/>
-            <DesignComponent highlight="example" :highlightLengthStart="2" label="Example text for highlighting"/>
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'ListItemFill',
-      name: {
-        en: 'Fill',
-        ru: 'Заливка'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
-            <DesignComponent label="Default fill"/>
-            <DesignComponent fill="#ff0000" label="Red fill"/>
-            <DesignComponent fill="rgb(0, 128, 255)" label="Blue fill"/>
-            <DesignComponent fill="rgba(255, 165, 0, 0.7)" label="Orange transparent fill"/>
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'ListItemSkeleton',
-      name: {
-        en: 'Skeleton loading',
-        ru: 'Загрузка скелетона'
-      },
-      components: ['Skeleton'],
-      template: `
-        <DesignSkeleton :active="true">
-          <DesignComponent
-            :isSkeleton="true"
-            caption="Caption"
-            description="Short desc."
-          >Item A</DesignComponent>
-          <DesignComponent
-            :isSkeleton="true"
-            caption="Caption"
-            description="A bit longer description for the list item component."
-          >Item Label Example</DesignComponent>
-          <DesignComponent
-            :isSkeleton="true"
-            caption="Caption"
-            description="This is a much longer description to demonstrate how the skeleton adapts to different content lengths in the list item."
-          >Very Long Item Label Example for Skeleton</DesignComponent>
-        </DesignSkeleton>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'ListItem'} type={'basic'}/>
-<Canvas of={Component.ListItemBasic}/>
-
-<StorybookDescriptions componentName={'Value'} type={'highlight'}/>
-<Canvas of={Component.ListItemHighlight}/>
-
-<StorybookDescriptions componentName={'ListItem'} type={'fill'}/>
-<Canvas of={Component.ListItemFill}/>
-
-<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>
-<Canvas of={Component.ListItemSkeleton}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Event'} type={'click'}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'Expose'} type={'value'}/>
-<StorybookDescriptions componentName={'Expose'} type={'detail'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-<StorybookDescriptions componentName={'Slot'} type={'prefix'}/>
-<StorybookDescriptions componentName={'Slot'} type={'caption'}/>
-<StorybookDescriptions componentName={'Slot'} type={'suffix'}/>
-<StorybookDescriptions componentName={'Slot'} type={'description'}/>
-<StorybookDescriptions componentName={'ListItem'} type={'slots'}/>
-    `
-  },
-  ai: {
-    description: `
-Versatile structural component for rendering items within lists, menus, or navigation bars. Provides a standardized layout with high-density content support for labels, descriptions, and metadata.
-Features dedicated slots for prefix (leading), content (central), suffix (trailing metadata), and trailing (action indicators). Includes built-in support for icons, badges, selected states, and interactive feedback like ripple effects.
-Controlled via label, description, and href/to props; renders as an <a> tag when navigating. Use for building navigation menus, data-rich list rows, or simple clickable interactive elements.
-    `
-  }
-}