@dxtmisha/wiki 0.39.1 → 0.39.2

package/src/media/descriptions/wikiDescriptionsSnackbar.ts

@@ -0,0 +1,86 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Snackbar component properties
+ *
+ * Описания свойств компонента Snackbar
+ */
+export const wikiDescriptionsSnackbar: StorybookComponentsDescriptionItem = {
+  name: 'Snackbar',
+  description: {
+    en: 'An orchestration component for managing and displaying a queue of temporary notification messages (Snackbars).',
+    ru: 'Компонент-оркестратор для управления и отображения очереди временных уведомлений (Snackbars).'
+  },
+  possibilities: {
+    en: [
+      'automatic lifecycle management for notifications',
+      'flexible anchor positioning (top/bottom, left/right/block)',
+      'priority-based visual separation of messages',
+      'configurable auto-hide timeout',
+      'teleport-based rendering to ensure overlay on top of all elements',
+      'full programmatic control over the notification queue'
+    ],
+    ru: [
+      'автоматическое управление жизненным циклом уведомлений',
+      'гибкое позиционирование (сверху/снизу, слева/справа/блоком)',
+      'визуальное разделение сообщений по приоритету',
+      'настраиваемое время автоматического скрытия',
+      'рендер через Teleport для гарантированного отображения поверх всех элементов',
+      'полный программный контроль над очередью уведомлений'
+    ]
+  },
+  import: [],
+  render: `
+    <div class="wiki-storybook-flex-column">
+      <div class="wiki-storybook-flex">
+        <button
+          class="wiki-storybook-button"
+          @click="() => $refs.snackbar.add({ data: { label: 'Action completed', icon: 'check_circle' }, delay: 3000 })"
+        >
+          Success Message
+        </button>
+        <button
+          class="wiki-storybook-button"
+          @click="() => $refs.snackbar.add({ data: { label: 'Connection timeout', description: 'Retrying in 5s...', icon: 'error' }, highPriority: true })"
+        >
+          System Error
+        </button>
+        <button
+          class="wiki-storybook-button wiki-storybook-button--warning"
+          @click="() => $refs.snackbar.clear()"
+        >
+          Clear Queue
+        </button>
+      </div>
+      <DesignComponent ref="snackbar" v-bind="args" />
+    </div>
+  `,
+  stories: [],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Snackbar'} type={'snackbar'}/>
+<StorybookDescriptions componentName={'Snackbar'} type={'add'}/>
+
+<StorybookDescriptions componentName={'Snackbar'} type={'adaptation'}/>
+<StorybookDescriptions componentName={'Snackbar'} type={'position'}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Snackbar'} type={'event.show'}/>
+<StorybookDescriptions componentName={'Snackbar'} type={'event.hide'}/>
+    `,
+    expose: `
+<StorybookDescriptions componentName={'Snackbar'} type={'expose.isItem'}/>
+<StorybookDescriptions componentName={'Snackbar'} type={'expose.add'}/>
+<StorybookDescriptions componentName={'Snackbar'} type={'expose.remove'}/>
+<StorybookDescriptions componentName={'Snackbar'} type={'expose.clear'}/>
+    `,
+    slots: ``
+  },
+  ai: {
+    description: `
+Centralized notification management system (orchestrator) that coordinates the lifecycle and queue of temporary messages. Ideal for global system alerts, user feedback, and asynchronous status updates across the application.
+Features an intelligent queue manager with support for priority containers, automatic lifecycle hooks (show/hide), and flexible screen anchoring (vertical/horizontal positioning). Includes programmatic control over message stack, custom auto-hide delays, and teleport-based rendering to ensure overlay priority over all content.
+Controlled via an exposed API (add, remove, clear) and configurable global settings like delay and origin. Place a single instance at the root of the application (e.g., App.vue) to manage consistent notification patterns throughout the entire user session.
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsSnackbarItem.ts

@@ -0,0 +1,96 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for SnackbarItem component properties
+ *
+ * Описания свойств компонента SnackbarItem
+ */
+export const wikiDescriptionsSnackbarItem: StorybookComponentsDescriptionItem = {
+  name: 'SnackbarItem',
+  description: {
+    en: 'Individual notification message element used within a Snackbar.',
+    ru: 'Элемент индивидуального уведомления, используемый внутри Snackbar.'
+  },
+  possibilities: {
+    en: [
+      'support for label and detailed description text',
+      'leading and trailing icons support',
+      'action buttons support',
+      'custom HTML or component rendering',
+      'built-in close button with customizable icon',
+      'accessible ARIA status by default'
+    ],
+    ru: [
+      'поддержка заголовка и подробного текста описания',
+      'поддержка начальных и конечных иконок',
+      'поддержка кнопок действий',
+      'рендер произвольного HTML или компонентов',
+      'встроенная кнопка закрытия с настраиваемой иконкой',
+      'доступный ARIA статус по умолчанию'
+    ]
+  },
+  import: [],
+  stories: [
+    {
+      id: 'SnackbarItemBasic',
+      name: {
+        en: 'Basic',
+        ru: 'Базовые'
+      },
+      template: `
+        <div class="wiki-storybook-group">
+          <DesignComponent
+            label="Detailed notification"
+            description="Description text provides more context for the user."
+            class="wiki-storybook-item--squared--lg"
+          />
+          <DesignComponent
+            label="Success message"
+            icon="check_circle"
+            class="wiki-storybook-item--squared--lg"
+          />
+          <DesignComponent
+            label="File deleted"
+            icon="delete"
+            button="Undo"
+            class="wiki-storybook-item--squared--lg"
+          />
+          <DesignComponent
+            label="Connection lost"
+            icon="wifi_off"
+            :actions-list="[{ label: 'Retry', primary: true }]"
+            class="wiki-storybook-item--squared--lg"
+          />
+        </div>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'SnackbarItem'} type={'snackbarItem'}/>
+<Canvas of={Component.SnackbarItemBasic}/>
+
+<StorybookDescriptions componentName={'SnackbarItem'} type={'component'}/>
+<StorybookDescriptions componentName={'SnackbarItem'} type={'html'}/>
+<StorybookDescriptions componentName={'SnackbarItem'} type={'role'}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Event'} type={'click'}/>
+<StorybookDescriptions componentName={'Event'} type={'actions'}/>
+<StorybookDescriptions componentName={'SnackbarItem'} type={'eventClose'}/>
+    `,
+    expose: '',
+    slots: `
+<StorybookDescriptions componentName={'Slot'} type={'default'}/>
+<StorybookDescriptions componentName={'Slot'} type={'description'}/>
+<StorybookDescriptions componentName={'Slot'} type={'body'}/>
+`
+  },
+  ai: {
+    description: `
+Visual representation element for a single notification message, typically orchestrated by the Snackbar component. Designed for concise informational alerts, success messages, or quick-action prompts.
+Features a flexible internal structure with support for labels, detailed descriptions, and material-symbol icons (leading/trailing). Includes integrated action button support, a mandatory close button, and support for rendering custom HTML or Vue components as message bodies.
+Controlled via simple content props or an actions-list array for complex button configurations. Use as the base message unit for all system feedback, ensuring high visibility and accessibility through automatic ARIA status role implementation.
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsTabItem.ts

@@ -0,0 +1,79 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+export const wikiDescriptionsTabItem: StorybookComponentsDescriptionItem = {
+  name: 'TabItem',
+  description: {
+    en: 'A versatile component for creating tabs, navigation links, or list items. Supports icons, badges, labels, and various interactive states.',
+    ru: 'Универсальный компонент для создания вкладок, навигационных ссылок или элементов списка. Поддерживает иконки, бейджи, метки и различные интерактивные состояния.'
+  },
+  possibilities: {
+    en: [
+      'displaying a label (`label`)',
+      'leading and trailing icons (`icon`, `iconTrailing`)',
+      'integrated badge support (`badge`)',
+      'selection state (`selected`)',
+      'disabled state (`disabled`)',
+      'navigation support (`href`, `to`)',
+      'customizable root tag (`tag`)',
+      'ripple effect on click',
+      'skeleton loading state'
+    ],
+    ru: [
+      'отображение метки (`label`)',
+      'иконки слева и справа (`icon`, `iconTrailing`)',
+      'встроенная поддержка бейджа (`badge`)',
+      'состояние выбора (`selected`)',
+      'отключенное состояние (`disabled`)',
+      'поддержка навигации (`href`, `to`)',
+      'настраиваемый корневой тег (`tag`)',
+      'эффект ряби при клике',
+      'состояние загрузки (скелетон)'
+    ]
+  },
+  render: `
+    <div class="wiki-storybook-flex">
+      <DesignComponent v-bind="args" />
+      <DesignComponent v-bind="args" />
+      <DesignComponent v-bind="args" />
+    </div>
+  `,
+  stories: [
+    {
+      id: 'TabItemSkeleton',
+      name: {
+        en: 'Skeleton',
+        ru: 'Скелетон'
+      },
+      components: ['Skeleton'],
+      template: `
+        <DesignSkeleton :active="true">
+          <DesignComponent isSkeleton>Tab item</DesignComponent>
+        </DesignSkeleton>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'TabItem'} type={'tabItem'}/>
+<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>
+<Canvas of={Component.TabItemSkeleton}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Event'} type={'click'}/>
+    `,
+    expose: `
+<StorybookDescriptions componentName={'Expose'} type={'value'}/>
+<StorybookDescriptions componentName={'Expose'} type={'detail'}/>
+    `,
+    slots: `
+<StorybookDescriptions componentName={'Slot'} type={'default'}/>
+    `
+  },
+  ai: {
+    description: `
+Foundational interactive building block for multi-item navigation structures like tabs, list menus, and sidebars. Encapsulates a label, optional icons, and status indicators (badges) into a single semantic unit with integrated state management.
+Features built-in support for selected, disabled, and loading (skeleton) states, along with automated navigation logic for href and router-link. Includes a Material-style ripple effect for high-polish click feedback and flexible tag rendering to support various HTML roles (button, a, li).
+Controlled via label, icon, and badge props, with v-model or selected prop integration. Use within Tabs or List components to create cohesive, accessible navigation interfaces with consistent visual affordance and spatial organization.
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsTabs.ts

@@ -0,0 +1,115 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Tabs component
+ *
+ * Описания свойств компонента Tabs
+ */
+export const wikiDescriptionsTabs: StorybookComponentsDescriptionItem = {
+  name: 'Tabs',
+  description: {
+    en: 'Tabs component for switching between different views with animation',
+    ru: 'Компонент вкладок для переключения между различными представлениями с анимацией'
+  },
+  possibilities: {
+    en: [
+      'switching between content sections',
+      'animated transitions via MotionAxis',
+      'navigation via TabsNavigation',
+      'customizable tabs list',
+      'dynamic content slots'
+    ],
+    ru: [
+      'переключение между разделами контента',
+      'анимированные переходы через MotionAxis',
+      'навигация через TabsNavigation',
+      'настраиваемый список вкладок',
+      'динамические слоты контента'
+    ]
+  },
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  render: `
+<DesignComponent v-bind="args">
+  <template #home>Welcome to your personal dashboard! Here you can see an overview of your activity.</template>
+  <template #profile>Manage your personal information, security settings, and preferences.</template>
+  <template #messages>You have 3 unread messages. Connect with your colleagues and friends.</template>
+  <template #settings>Adjust your application settings to suit your needs.</template>
+  <template #dashboard>View your analytics and performance metrics in real-time.</template>
+  <template #notifications>Stay updated with the latest alerts and announcements.</template>
+</DesignComponent>
+  `,
+  stories: [
+    {
+      id: 'TabsBasic',
+      name: {
+        en: 'Basic',
+        ru: 'Базовый'
+      },
+      template: `
+        <DesignComponent
+          :tabs="[
+            { label: 'Home', value: 'home' },
+            { label: 'Profile', value: 'profile' }
+          ]"
+          selected="home"
+        >
+          <template #home>Home</template>
+          <template #profile>Profile</template>
+        </DesignComponent>
+      `
+    },
+    {
+      id: 'TabsVModel',
+      name: {
+        en: 'v-model',
+        ru: 'v-model'
+      },
+      setup: `
+      return {
+        selected: ref('tab1')
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex-align-center">
+            <span>Current value: {{ selected }}</span>
+            <button class="wiki-storybook-button" @click="selected = 'tab1'">Tab 1</button>
+            <button class="wiki-storybook-button" @click="selected = 'tab2'">Tab 2</button>
+            <button class="wiki-storybook-button" @click="selected = 'tab3'">Tab 3</button>
+          </div>
+
+          <DesignComponent
+            :tabs="[
+            { label: 'Tab 1', value: 'tab1' },
+            { label: 'Tab 2', value: 'tab2' },
+            { label: 'Tab 3', value: 'tab3' }
+          ]"
+            v-model:selected="selected"
+          >
+            <template #tab1>Content 1</template>
+            <template #tab2>Content 2</template>
+            <template #tab3>Content 3</template>
+          </DesignComponent>
+        </div>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Tabs'} type={'tabs'}/>
+<Canvas of={Component.TabsBasic}/>
+
+<StorybookDescriptions componentName={'Tabs'} type={'v-model'}/>
+<Canvas of={Component.TabsVModel}/>
+    `
+  },
+  ai: {
+    description: `
+High-level compound component that integrates TabsNavigation and MotionAxis to provide a complete, animated tabbed interface. Simplifies the creation of multi-view layouts where each section is logically separated and visually transitioned.
+Features automated coordination between the navigation bar and the content area, including direction-aware sliding animations and lazy loading. Supports dynamic tab lists, centralized state management via v-model, and modular content distribution through named slots matching tab values.
+Controlled via the tabs prop for structure and v-model:selected for active state. Use for main dashboard views, complex settings panels, or any multi-step interface requiring a polished, interactive navigation experience with high performance.
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsTabsNavigation.ts

@@ -0,0 +1,102 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+export const wikiDescriptionsTabsNavigation: StorybookComponentsDescriptionItem = {
+  name: 'TabsNavigation',
+  description: {
+    en: 'Component for managing navigation between tabs. Supports horizontal scrolling, selection management, and focus.',
+    ru: 'Компонент для управления навигацией между вкладками. Поддерживает горизонтальную прокрутку, управление выделением и фокусом.'
+  },
+  possibilities: {
+    en: [
+      'horizontal scrolling of tabs',
+      'management of the selected tab via `selected` and `list`',
+      'keyboard support (arrows, Enter, Space)',
+      'customization of tab appearance via `tag` and `itemAttrs`',
+      'event support: `update:selected`, `update:modelSelected`'
+    ],
+    ru: [
+      'горизонтальная прокрутка вкладок',
+      'управление выбранной вкладкой через `selected` и `list`',
+      'поддержка клавиатуры (стрелки, Enter, Пробел)',
+      'настройка внешнего вида вкладок через `tag` и `itemAttrs`',
+      'поддержка событий: `update:selected`, `update:modelSelected`'
+    ]
+  },
+  render: `
+    <DesignComponent v-bind="args"/>
+  `,
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  stories: [
+    {
+      id: 'TabsNavigationBasic',
+      name: {
+        en: 'Basic usage',
+        ru: 'Базовое использование'
+      },
+      setup: `
+      const list = [
+        { label: 'Tab 1', value: '1' },
+        { label: 'Tab 2', value: '2' },
+        { label: 'Tab 3', value: '3' }
+      ]
+      const selected = ref('2')
+      return { list, selected }
+      `,
+      template: `
+        <DesignComponent :list="list" v-model:selected="selected"/>
+      `
+    },
+    {
+      id: 'TabsNavigationVModel',
+      name: {
+        en: 'Two-way binding (v-model)',
+        ru: 'Двусторонняя привязка (v-model)'
+      },
+      setup: `
+      const list = [
+        { label: 'Tab 1', value: '1' },
+        { label: 'Tab 2', value: '2' },
+        { label: 'Tab 3', value: '3' }
+      ]
+      const selected = ref('1')
+      return { list, selected }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex-align-center">
+            <span>Current value: {{ selected }}</span>
+            <button class="wiki-storybook-button" @click="selected = '1'">Select Tab 1</button>
+            <button class="wiki-storybook-button" @click="selected = '2'">Select Tab 2</button>
+            <button class="wiki-storybook-button" @click="selected = '3'">Select Tab 3</button>
+          </div>
+
+          <DesignComponent :list="list" v-model:selected="selected"/>
+        </div>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'TabsNavigation'} type={'tabsNavigation'}/>
+<Canvas of={Component.TabsNavigationBasic}/>
+<StorybookDescriptions componentName={'TabsNavigation'} type={'v-model'}/>
+<Canvas of={Component.TabsNavigationVModel}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Event'} type={'click'}/>
+    `,
+    slots: `
+<StorybookDescriptions componentName={'Slot'} type={'leading'} />
+<StorybookDescriptions componentName={'Slot'} type={'trailing'} />
+    `
+  },
+  ai: {
+    description: `
+Specialized navigation container for creating horizontal tab bars with automated scrolling and focus management. Designed for switching between filtered views, dashboard sections, or multi-step form progress indicators.
+Features intelligent horizontal scrolling with alignment control, keyboard navigation support (arrows, Enter, Space), and customizable tab item rendering via the tag and itemAttrs props. Automatically synchronizes active state through two-way binding and provides leading/trailing slots for auxiliary navigation actions.
+Controlled via the list prop for tab definitions and v-model:selected for active state tracking. Use as the base header for complex tabbed layouts or standalone navigation bars requiring high accessibility and smooth interaction across mobile and desktop.
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsTextarea.ts

@@ -0,0 +1,58 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+export const wikiDescriptionsTextarea: StorybookComponentsDescriptionItem = {
+  name: 'Textarea',
+  description: {
+    en: 'A multi-line text input component. Supports auto-sizing, validation, icons, labels, messages, and counters.',
+    ru: 'Компонент многострочного ввода текста. Поддерживает авто-размер, валидацию, иконки, метки, сообщения и счетчики.'
+  },
+  possibilities: {
+    en: [
+      'multi-line text input',
+      'auto-sizing based on content (`autosize`)',
+      'validation support (`validationMessage`, `required`)',
+      'label and helper message support',
+      'character counter (`counter`, `maxlength`)',
+      'icons support',
+      'disabled and readonly states'
+    ],
+    ru: [
+      'многострочный ввод текста',
+      'авто-размер в зависимости от контента (`autosize`)',
+      'поддержка валидации (`validationMessage`, `required`)',
+      'поддержка метки и вспомогательного сообщения',
+      'счетчик символов (`counter`, `maxlength`)',
+      'поддержка иконок',
+      'состояния отключения и только для чтения'
+    ]
+  },
+  render: `
+    <DesignComponent v-bind="args" />
+  `,
+  stories: [],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Textarea'} type={'textarea'}/>
+<StorybookDescriptions componentName={'Textarea'} type={'autosize'}/>
+    `,
+    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: `
+Versatile multi-line text input control with automated spatial management and comprehensive validation support. Designed for feedback forms, detailed descriptions, and any scenario requiring a flexible, high-volume data entry area.
+Features an intelligent autosize engine that grows/shrinks dynamically based on content, along with character counter integration and Material symbol icons (leading/trailing). Inherits full Field component functionality including floating labels, helper messages, and reactive error states.
+Controlled via the v-model for content and autosize prop for height behavior. Use for user biographies, multi-row comments, or complex data entry views where standard single-line inputs lack sufficient capacity.
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsTextareaAutosize.ts

@@ -49,32 +49,9 @@ export const wikiDescriptionsTextareaAutosize: StorybookComponentsDescriptionIte
   },
   ai: {
     description: `
-**Note:** This is a subcomponent of \`Textarea\`. You should generally not use it directly.
-          It is automatically integrated into the \`Textarea\` component to provide auto-resizing capabilities.
-
-TextareaAutosize is a functional component that renders a \`<textarea>\` element capable of automatically adjusting its height to fit the content.
-
-**Key Features:**
-1. **Auto-Resizing Logic:**
-   - It renders a hidden "clone" element (a \`div\`) that mirrors the styles (font, padding, border, width) of the actual textarea.
-   - As text is entered, the content is copied to the clone, and the clone's height is measured.
-   - The textarea's height is then updated to match the clone's height, ensuring no scrollbars appear and the field grows/shrinks dynamically.
-
-2. **Input Attributes (\`inputAttrs\`):**
-   - Standard HTML attributes for the textarea (like \`placeholder\`, \`rows\`, \`disabled\`, \`readonly\`, \`style\`) should be passed via the \`inputAttrs\` prop.
-   - This ensures they are applied directly to the native \`<textarea>\` element.
-
-3. **Value Management:**
-   - It manages the input value and emits updates, allowing for reactive data binding.
-
-**When to use:**
-- This component is designed to be the internal engine for the \`Textarea\` component.
-- Use \`Textarea\` instead for a complete form field with labels, validation, and styling.
-
-**Usage Examples:**
-
-- **Internal Usage:**
-  \`<TextareaAutosize :value="modelValue" :inputAttrs="{ rows: 1 }" />\`
+Low-level functional engine for multi-line inputs that provides precise, real-time height adjustment based on content. Implements a reliable cloning mechanism to calculate scroll-free container heights while respecting parent padding and font styles.
+Features automated height synchronization during content changes, supporting smooth CSS transitions and native textarea attributes via inputAttrs. Operates as a foundational tool for the Textarea component, ensuring character entry never triggers unwanted shift or overflow.
+Primarily integrated as a subcomponent; should generally not be manually used for standalone input fields. Controlled via reactive value bindings, serving as the high-performance core for any dynamic data entry element requiring responsive layout scaling.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsTooltip.ts

@@ -97,40 +97,9 @@ export const wikiDescriptionsTooltip: StorybookComponentsDescriptionItem = {
 </div>
     `,
     description: `
-Tooltip is a floating component that displays contextual information when a user interacts with a trigger element (hover or focus).
-It is designed to provide auxiliary descriptions, labels, or helper text.
-
-**Key Features:**
-1. **Trigger Integration:**
-   - Uses the \`#control\` slot to wrap the target element.
-   - Provides \`binds\` (events and ARIA attributes) that **must** be applied to the trigger element using \`v-bind="binds"\`.
-
-2. **Content & Layout:**
-   - \`label\`: Primary text content.
-   - \`description\`: Secondary text content.
-   - \`#default\`: Slot for custom HTML content.
-   - Includes a built-in \`Arrow\` component pointing to the trigger.
-
-3. **Behavior:**
-   - **Positioning:** Automatically calculates position (top, bottom, left, right) to stay within the viewport.
-   - **Timing:** Configurable \`delay\` (open) and \`delayHide\` (close).
-   - **Interaction:** Supports \`interactive\` mode (allows hovering the tooltip content) and \`disabled\` state.
-
-**Usage Examples:**
-
-- **Basic Label:**
-  \`<Tooltip label="Save changes">
-     <template #control="{ binds }">
-       <button v-bind="binds">Save</button>
-     </template>
-   </Tooltip>\`
-
-- **With Description:**
-  \`<Tooltip label="User Profile" description="Click to edit settings">
-     <template #control="{ binds }">
-       <Avatar v-bind="binds" />
-     </template>
-   </Tooltip>\`
+Contextual informational overlay that appears when a user interacts with a trigger element via hover or focus. Designed for auxiliary labels, helper text, and secondary descriptive titles that enhance functional awareness without crowding the UI.
+Features automated high-precision positioning (top, bottom, left, right) with viewport collision detection and customizable delay/interactive behaviors. Includes a built-in arrow indicator and requires trigger binding via the #control slot's binds object for proper event synchronization.
+Controlled via simple content props (label, description) and supports complex HTML structures within the #default slot. Use to provide non-critical supplemental information, keyboard shortcuts, or detailed affordance for icon-only buttons.
     `
   }
 }