@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/mdx/slot/default.ru.mdx

@@ -1,10 +1,5 @@
 ### `default`
 
-Основной слот для размещения контента внутри компонента.
+Основной слот для размещения главного содержимого компонента.
 
-Этот слот позволяет:
-- Размещать любой пользовательский контент внутри компонента
-- Передавать текст, HTML-элементы или другие Vue-компоненты
-- Настраивать внутреннее содержимое компонента
-
-Слот `default` является основным способом добавления контента в компонент и поддерживает все стандартные возможности Vue слотов.
+**Возвращает:** `VNode` — основное содержимое компонента

package/src/media/mdx/slot/description.en.mdx

@@ -1,10 +1,5 @@
 ### `description`
 
-Slot for passing description content to the component. It's an alternative to the `description` prop and allows passing elements instead of plain text.
+Slot for placing component description or additional information.
 
-This slot allows you to:
-- Use an alternative to the `description` property
-- Pass elements instead of plain text
-- Use HTML or components in the description
-
-The `description` slot works as a replacement for the `description` prop and allows passing any elements for more flexible description content setup.
+**Returns:** `VNode` — element with class `{className}__description`

package/src/media/mdx/slot/description.ru.mdx

@@ -1,10 +1,5 @@
 ### `description`
 
-Слот для передачи содержимого описания компонента. Является альтернативой props `description` и позволяет передавать элементы вместо простого текста.
+Слот для размещения описания компонента или дополнительной информации.
 
-Этот слот позволяет:
-- Использовать альтернативу свойству `description`
-- Передавать элементы вместо простого текста
-- Использовать HTML или компоненты в описании
-
-Слот `description` работает как замена props `description` и позволяет передавать любые элементы для более гибкого задания описания.
+**Возвращает:** `VNode` — элемент с классом `{className}__description`

package/src/media/mdx/slot/footer.en.mdx

@@ -1,9 +1,8 @@
 ### `footer`
 
-Footer slot for rendering the component’s bottom area.
+Slot for placing content at the bottom of the component.
 
-This slot lets you:
-- Place action buttons, hints, or status
-- Receive scoped data from the component (if available)
-- Customize the bottom area layout and styles
+**Parameters:**
+- `props: ControlItem` — object with component data
 
+**Returns:** `VNode` — footer element

package/src/media/mdx/slot/footer.ru.mdx

@@ -1,9 +1,8 @@
 ### `footer`
 
-Слот подвала для отображения нижней области компонента.
+Слот для размещения содержимого в нижней части компонента.
 
-Этот слот позволяет:
-- Разместить кнопки действий, подсказки или статус
-- Получать данные из компонента через scoped‑slot (если доступны)
-- Настроить компоновку и стили нижней области
+**Параметры:**
+- `props: ControlItem` — объект с данными компонента
 
+**Возвращает:** `VNode` — элемент подвала

package/src/media/mdx/slot/headline.en.mdx

@@ -0,0 +1,7 @@
+### `headline`
+
+Slot for placing custom headline content.
+
+**Returns:** `VNode` — element with class `{className}__headline`
+
+

package/src/media/mdx/slot/headline.ru.mdx

@@ -0,0 +1,6 @@
+### `headline`
+
+Слот для размещения пользовательского содержимого заголовка.
+
+**Возвращает:** `VNode` — элемент с классом `{className}__headline`
+

package/src/media/mdx/slot/label.en.mdx

@@ -1,11 +1,5 @@
 ### `label`
 
-Slot for passing label content to the component. It's an alternative to the `label` prop and allows passing elements instead of plain text.
-
-This slot allows you to:
-- Use an alternative to the `label` property
-- Pass elements instead of plain text
-- Use HTML or components in the label
-
-The `label` slot works as a replacement for the `label` prop and allows passing any elements for more flexible label content setup.
+Slot for placing custom label content instead of text value.
 
+**Returns:** `VNode` — element with class `{className}__label`

package/src/media/mdx/slot/label.ru.mdx

@@ -1,11 +1,5 @@
 ### `label`
 
-Слот для передачи содержимого метки (label) компонента. Является альтернативой props `label` и позволяет передавать элементы вместо простого текста.
-
-Этот слот позволяет:
-- Использовать альтернативу свойству `label`
-- Передавать элементы вместо простого текста
-- Использовать HTML или компоненты в метке
-
-Слот `label` работает как замена props `label` и позволяет передавать любые элементы для более гибкой настройки содержимого метки.
+Слот для размещения пользовательского содержимого метки компонента вместо текстового значения.
 
+**Возвращает:** `VNode` — элемент с классом `{className}__label`

package/src/media/mdx/slot/leading.en.mdx

@@ -0,0 +1,7 @@
+### `leading`
+
+Slot for placing content at the start of the interactive field area, before the main input element.
+
+**Parameters:**
+- `props: FieldControl` — object with data for binding
+

package/src/media/mdx/slot/leading.ru.mdx

@@ -0,0 +1,7 @@
+### `leading`
+
+Слот для размещения контента в начале интерактивной области поля, перед основным элементом ввода.
+
+**Параметры:**
+- `props: FieldControl` — объект с данными для связывания
+

package/src/media/mdx/slot/prefix.en.mdx

@@ -2,7 +2,4 @@
 
 Slot for placing content at the beginning of the component, before the main content.
 
-- Displayed on the left side of the component (or right in RTL mode)
-- Suitable for icons, numbers, indicators, or short labels
-- Does not affect the main structure of the component
-- Provides visual identification or additional information
+**Returns:** `VNode` — element with class `{className}__prefix` and attribute `data-event-type="prefix"`

package/src/media/mdx/slot/prefix.ru.mdx

@@ -2,7 +2,4 @@
 
 Слот для размещения контента в начале компонента, перед основным содержимым.
 
-- Отображается в левой части компонента (или справа в RTL режиме)
-- Подходит для иконок, номеров, индикаторов или коротких меток
-- Не влияет на основную структуру компонента
-- Обеспечивает визуальную идентификацию или дополнительную информацию
+**Возвращает:** `VNode` — элемент с классом `{className}__prefix` и атрибутом `data-event-type="prefix"`

package/src/media/mdx/slot/secondary.en.mdx

@@ -0,0 +1,5 @@
+### `secondary`
+
+Slot for placing secondary content or additional component elements.
+
+**Returns:** `VNode` — secondary component content

package/src/media/mdx/slot/secondary.ru.mdx

@@ -0,0 +1,5 @@
+### `secondary`
+
+Слот для размещения вторичного содержимого или дополнительных элементов компонента.
+
+**Возвращает:** `VNode` — вторичное содержимое компонента

package/src/media/mdx/slot/suffix.en.mdx

@@ -2,7 +2,4 @@
 
 Slot for placing content at the end of the component, after the main content.
 
-- Displayed on the right side of the component (or left in RTL mode)
-- Suitable for action icons, status indicators, or additional information
-- Does not affect the main structure of the component
-- Provides concluding information or functionality
+**Returns:** `VNode` — element with class `{className}__suffix` and attribute `data-event-type="suffix"`

package/src/media/mdx/slot/suffix.ru.mdx

@@ -2,7 +2,4 @@
 
 Слот для размещения контента в конце компонента, после основного содержимого.
 
-- Отображается в правой части компонента (или слева в RTL режиме)
-- Подходит для иконок действий, статусных индикаторов или дополнительной информации
-- Не влияет на основную структуру компонента
-- Обеспечивает завершающую информацию или функциональность
+**Возвращает:** `VNode` — элемент с классом `{className}__suffix` и атрибутом `data-event-type="suffix"`

package/src/media/mdx/slot/trailing.en.mdx

@@ -0,0 +1,7 @@
+### `trailing`
+
+Slot for placing content at the end of the interactive field area, after the main input element.
+
+**Parameters:**
+- `props: FieldControl` — object with data for binding
+

package/src/media/mdx/slot/trailing.ru.mdx

@@ -0,0 +1,7 @@
+### `trailing`
+
+Слот для размещения контента в конце интерактивной области поля, после основного элемента ввода.
+
+**Параметры:**
+- `props: FieldControl` — объект с данными для связывания
+

package/src/media/mdx/slot/wikiMdxSlot.ts

@@ -1,5 +1,7 @@
 import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
 
+import slotBodyEn from './body.en.mdx'
+import slotBodyRu from './body.ru.mdx'
 import slotCaptionEn from './caption.en.mdx'
 import slotCaptionRu from './caption.ru.mdx'
 import slotControlEn from './control.en.mdx'
@@ -10,18 +12,28 @@ import slotDescriptionEn from './description.en.mdx'
 import slotDescriptionRu from './description.ru.mdx'
 import slotFooterEn from './footer.en.mdx'
 import slotFooterRu from './footer.ru.mdx'
+import slotHeadlineEn from './headline.en.mdx'
+import slotHeadlineRu from './headline.ru.mdx'
 import slotLabelEn from './label.en.mdx'
 import slotLabelRu from './label.ru.mdx'
+import slotLeadingEn from './leading.en.mdx'
+import slotLeadingRu from './leading.ru.mdx'
 import slotPrefixEn from './prefix.en.mdx'
 import slotPrefixRu from './prefix.ru.mdx'
+import slotSecondaryEn from './secondary.en.mdx'
+import slotSecondaryRu from './secondary.ru.mdx'
 import slotSuffixEn from './suffix.en.mdx'
 import slotSuffixRu from './suffix.ru.mdx'
-import slotTitleEn from './title.en.mdx'
-import slotTitleRu from './title.ru.mdx'
+import slotTrailingEn from './trailing.en.mdx'
+import slotTrailingRu from './trailing.ru.mdx'
 
 export const wikiMdxSlot: StorybookComponentsMdxItem = {
   name: 'Slot',
   descriptions: {
+    body: {
+      en: slotBodyEn,
+      ru: slotBodyRu
+    },
     caption: {
       en: slotCaptionEn,
       ru: slotCaptionRu
@@ -42,21 +54,33 @@ export const wikiMdxSlot: StorybookComponentsMdxItem = {
       en: slotFooterEn,
       ru: slotFooterRu
     },
+    headline: {
+      en: slotHeadlineEn,
+      ru: slotHeadlineRu
+    },
     label: {
       en: slotLabelEn,
       ru: slotLabelRu
     },
+    leading: {
+      en: slotLeadingEn,
+      ru: slotLeadingRu
+    },
     prefix: {
       en: slotPrefixEn,
       ru: slotPrefixRu
     },
+    secondary: {
+      en: slotSecondaryEn,
+      ru: slotSecondaryRu
+    },
     suffix: {
       en: slotSuffixEn,
       ru: slotSuffixRu
     },
-    title: {
-      en: slotTitleEn,
-      ru: slotTitleRu
+    trailing: {
+      en: slotTrailingEn,
+      ru: slotTrailingRu
     }
   }
 }

package/src/media/mdx/style/adaptive.en.mdx

@@ -1,20 +1,10 @@
-## Adaptive Layout and Container Constraints
+## Adaptive Behavior
 
-The `adaptive` and `container` properties control component behavior at different screen sizes and container constraints. These properties allow creating flexible adaptive interfaces that display correctly on all devices.
+The `adaptive` and `container` properties are designed to control component behavior at different screen sizes and container constraints.
 
-### Properties
+**Properties:**
 
-- **adaptive** — Controls adaptive display behavior for different screen sizes and media queries. Allows the component to automatically adjust to different display conditions.
-- **container** — Controls container-based layout behavior with adaptive width constraints and containment context. Enables a special container mode with width limitations.
+- `adaptive` — controls adaptive behavior for different screen sizes and media queries
+- `container` — controls container layout with adaptive width constraints
 
-### Description
-
-- The `adaptive` property provides automatic adaptation to various screen sizes with media query support for precise display control.
-- `container` creates a container layout with automatic width constraints, adaptive behavior, and content centering.
-- Properties can be used together to create complex adaptive layouts, where `container` provides the structural foundation and `adaptive` adds flexible behavior.
-
-### Recommendations
-
-- Use `adaptive` for components that should change their behavior depending on screen size.
-- Apply `container` for creating main blocks with limited width and centering.
-- Combine both properties to achieve maximum flexibility in adaptive layout.
+Properties work together: `adaptive` provides automatic component adaptation to different screen sizes with media query support for precise display control. `container` creates a container layout with automatic width constraints, adaptive behavior, and content centering. Both properties can be used together to create complex adaptive layouts, where `container` provides the structural foundation and `adaptive` adds flexible behavior for different devices.

package/src/media/mdx/style/adaptive.ru.mdx

@@ -1,20 +1,10 @@
-## Адаптивная раскладка и контейнерные ограничения
+## Адаптивное поведение
 
-Свойства `adaptive` и `container` управляют поведением компонентов при различных размерах экрана и контейнерных ограничениях. Эти свойства позволяют создавать гибкие адаптивные интерфейсы, которые корректно отображаются на всех устройствах.
+Свойства `adaptive` и `container` предназначены для управления поведением компонентов при различных размерах экрана и контейнерных ограничениях.
 
-### Свойства
+**Свойства:**
 
-- **adaptive** — Управляет адаптивным поведением отображения для различных размеров экрана и медиа-запросов. Позволяет компоненту автоматически подстраиваться под разные условия отображения.
-- **container** — Управляет поведением контейнерной раскладки с адаптивными ограничениями ширины и контекстом сдерживания. Включает специальный режим контейнера с ограничениями по ширине.
+- `adaptive` — управляет адаптивным поведением для различных размеров экрана и медиа-запросов
+- `container` — управляет контейнерной раскладкой с адаптивными ограничениями ширины
 
-### Описание
-
-- Свойство `adaptive` обеспечивает автоматическую адаптацию под различные размеры экрана с поддержкой медиа-запросов для точного контроля отображения.
-- `container` создает контейнерную раскладку с автоматическими ограничениями ширины, адаптивным поведением и центрированием содержимого.
-- Свойства могут использоваться совместно для создания сложных адаптивных раскладок, где `container` обеспечивает структурную основу, а `adaptive` добавляет гибкое поведение.
-
-### Рекомендации
-
-- Используйте `adaptive` для компонентов, которые должны изменять свое поведение в зависимости от размера экрана.
-- Применяйте `container` для создания основных блоков с ограниченной шириной и центрированием.
-- Комбинируйте оба свойства для достижения максимальной гибкости в адаптивной верстке.
+Свойства работают совместно: `adaptive` обеспечивает автоматическую адаптацию компонента под различные размеры экрана с поддержкой медиа-запросов для точного контроля отображения. `container` создает контейнерную раскладку с автоматическими ограничениями ширины, адаптивным поведением и центрированием содержимого. Оба свойства могут использоваться вместе для создания сложных адаптивных раскладок, где `container` обеспечивает структурную основу, а `adaptive` добавляет гибкое поведение для разных устройств.

package/src/media/mdx/style/asPalette.en.mdx

@@ -1,9 +1,17 @@
-## Managing Component Palette
+## Color Palette
 
-The `asPalette` property applies the parent element's palette color to the component while preserving its base saturation.
+Property `asPalette` enables color scheme inheritance from the parent element while maintaining base saturation.
 
-### Recommendations
+**Usage:**
 
-- Use this property to automatically adapt components to the application's theme.
-- Ensure the parent element has a valid palette class.
+Allows automatic color adaptation to placement context. The element adopts the parent's color palette without losing its saturation characteristics.
 
+**Values:**
+
+- `false` (default) — uses its own color scheme
+- `true` — inherits palette from parent element
+
+```html
+<!-- Inherit palette from parent -->
+<Component asPalette />
+```

package/src/media/mdx/style/asPalette.ru.mdx

@@ -1,9 +1,17 @@
-## Управление палитрой компонента
+## Цветовая палитра
 
-Свойство `asPalette` отвечает за изменение цвета компонента в соответствии с классом палитры его родителя, сохраняя базовую насыщенность цвета.
+Свойство `asPalette` активирует наследование цветовой схемы от родительского элемента с сохранением базовой насыщенности.
 
-### Рекомендации
+**Применение:**
 
-- Применяйте для автоматической адаптации компонентов к теме приложения.
-- Убедитесь, что у родительского элемента задан корректный класс палитры.
+Позволяет автоматически адаптировать цвета к контексту размещения. Элемент принимает цветовую палитру родителя, не теряя своих характеристик насыщенности.
 
+**Значения:**
+
+- `false` (по умолчанию) — используется собственная цветовая схема
+- `true` — наследует палитру от родительского элемента
+
+```html
+<!-- Наследование палитры от родителя -->
+<Component asPalette />
+```

package/src/media/mdx/style/dir.en.mdx

@@ -1,10 +1,17 @@
-## Managing Component Direction
+## Direction
 
-The `dir` property controls the mirroring of the component based on the site's text direction (LTR/RTL).
-It ensures the correct interface display for right-to-left languages.
+Property `dir` controls mirroring of the element based on text direction (LTR/RTL).
 
-### Recommendations
+**Usage:**
 
-- Use alongside your app's localization settings.
-- Particularly useful for arrow icons that also need to flip when a direction changes.
-- Verify third-party SVG icons as they might have preset directions.
+Automatically inverts the visual representation when switching between left-to-right and right-to-left languages. Especially important for elements containing directional graphic symbols (arrows, pointers).
+
+**Values:**
+
+- `false` (default) — standard display
+- `true` — enables text direction adaptation
+
+```html
+<!-- Text direction adaptation -->
+<Component dir />
+```

package/src/media/mdx/style/dir.ru.mdx

@@ -1,10 +1,17 @@
-## Управление направлением компонента
+## Направление
 
-Свойство `dir` отвечает за зеркальное отображение компонента в зависимости от направления сайта (LTR/RTL).
-Это обеспечивает корректное отображение интерфейсов для языков с правосторонним письмом.
+Свойство `dir` управляет зеркальным отображением элемента в зависимости от направления текста (LTR/RTL).
 
-### Рекомендации
+**Применение:**
 
-- Используйте вместе с настройками локализации приложения.
-- Особенно полезно для стрелочных иконок, которые также нужно отразить при смене направления.
-- Проверяйте отображение сторонних SVG-иконок, так как они могут иметь собственные направления.
+Автоматически инвертирует визуальное представление при переключении между языками с левосторонним и правосторонним письмом. Особенно важно для элементов, содержащих направленные графические символы (стрелки, указатели).
+
+**Значения:**
+
+- `false` (по умолчанию) — стандартное отображение
+- `true` — включает адаптацию к направлению текста
+
+```html
+<!-- Адаптация под направление текста -->
+<Component dir />
+```

package/src/media/mdx/style/isSkeleton.en.mdx

@@ -1,8 +1,22 @@
-## Skeleton Mode
+## Skeleton mode
 
-The `isSkeleton` property works in conjunction with the `Skeleton` component. When an element is a child of the `Skeleton` component and has the `isSkeleton` property, its display depends on the parent `Skeleton`'s state.
+The `isSkeleton` property defines element behavior when interacting with the parent Skeleton component.
 
-- When `active=false` on the `Skeleton` component, all child elements display normally, regardless of the `isSkeleton` value.
-- When `active=true` on the `Skeleton` component, all child elements enter skeleton mode, but behavior depends on `isSkeleton`:
-  - If the element has `isSkeleton=true` — the element displays as a skeleton
-  - If the element has `isSkeleton=false` — the element becomes invisible
+**Possible values:**
+
+- `true` — element displays as skeleton when Skeleton is in active state
+- `false` — element becomes invisible when Skeleton is in active state
+
+Works in conjunction with the Skeleton component to control visibility and display mode of child elements. When parent Skeleton has `active=false`, all child elements display normally regardless of `isSkeleton` value. When `active=true`, elements with `isSkeleton=true` are shown as skeleton placeholders, while elements with `isSkeleton=false` are completely hidden.
+
+```html
+<!-- Element will display as skeleton -->
+<Skeleton active>
+  <Component isSkeleton text="Loading..." />
+</Skeleton>
+
+<!-- Element will be hidden -->
+<Skeleton active>
+  <Component :isSkeleton="false" text="Hidden text" />
+</Skeleton>
+```

package/src/media/mdx/style/isSkeleton.ru.mdx

@@ -1,8 +1,22 @@
 ## Режим скелетона
 
-Свойство `isSkeleton` работает в паре с компонентом `Skeleton`. Когда элемент является дочерним элементом компонента `Skeleton` и имеет свойство `isSkeleton`, его отображение зависит от состояния родительского `Skeleton`.
+Свойство `isSkeleton` определяет поведение элемента при взаимодействии с родительским компонентом Skeleton.
 
-- При `active=false` у компонента `Skeleton` все дочерние элементы отображаются, как обычно, независимо от значения `isSkeleton`.
-- При `active=true` у компонента `Skeleton` все дочерние элементы переходят в режим скелетона, но поведение зависит от `isSkeleton`:
-  - Если у элемента `isSkeleton=true` — элемент отображается как скелетон
-  - Если у элемента `isSkeleton=false` — элемент становится невидимым
+**Возможные значения:**
+
+- `true` — элемент отображается как скелетон при активном состоянии Skeleton
+- `false` — элемент становится невидимым при активном состоянии Skeleton
+
+Работает в паре с компонентом Skeleton для управления видимостью и режимом отображения дочерних элементов. При `active=false` у родительского Skeleton все дочерние элементы отображаются нормально независимо от значения `isSkeleton`. При `active=true` элементы с `isSkeleton=true` показываются как скелетон-заглушки, а элементы с `isSkeleton=false` скрываются полностью.
+
+```html
+<!-- Элемент будет отображаться как скелетон -->
+<Skeleton active>
+  <Component isSkeleton text="Загрузка..." />
+</Skeleton>
+
+<!-- Элемент будет скрыт -->
+<Skeleton active>
+  <Component :isSkeleton="false" text="Скрытый текст" />
+</Skeleton>
+```

package/src/media/mdx/value/highlight.en.mdx

@@ -1,18 +1,25 @@
-## Text Highlighting Properties
+## Managing search and highlighting
 
-The `highlight` and `highlightLengthStart` properties are designed to control text highlighting functionality in components.
+The `highlight` and `highlightLengthStart` properties work together to control match highlighting when searching through list items. They set the search string and minimum query length for activating visual highlighting of found fragments.
 
-### Properties
+**Properties:**
 
-- **highlight** — Text to highlight within the component content
-- **highlightLengthStart** — Minimum length of highlight value to start highlighting
+- `highlight` — search string for finding and highlighting in list items
+- `highlightLengthStart` — minimum search string length to start highlighting, defaults to `2`
 
-### Property Relationships
+Match highlighting is activated automatically: when the `highlight` length is less than `highlightLengthStart`, search works but visual highlighting is not applied. When the minimum length is reached, the component begins highlighting found fragments across the entire list hierarchy. Search works in real-time and considers nested items in groups and menus. Use `highlightLengthStart` to prevent excessive highlighting with short queries.
 
-The properties work together to provide intelligent text highlighting. `highlight` defines what to highlight, while `highlightLengthStart` controls when to start highlighting.
+```html
+<!-- Standard search with highlighting from 2 characters -->
+<List :list="items" highlight="text" />
+
+<!-- Search with highlighting from 3 characters -->
+<List :list="items" highlight="abc" :highlightLengthStart="3" />
+
+<!-- Dynamic search with v-model -->
+<List :list="items" :highlight="searchQuery" :highlightLengthStart="1" />
+
+<!-- Search without minimum threshold -->
+<List :list="products" :highlight="filter" :highlightLengthStart="0" />
+```
 
-- `highlight` contains the text string that needs to be found and highlighted in the component
-- `highlightLengthStart` sets the minimum search string length to activate the highlighting function
-- Highlighting is activated only when the length of `highlight` reaches the `highlightLengthStart` value
-- This prevents unwanted highlighting when entering short search strings
-- Both properties ensure optimal user experience when working with search and filtering

package/src/media/mdx/value/highlight.ru.mdx

@@ -1,18 +1,25 @@
-## Свойства выделения текста
+## Управление поиском и выделением
 
-Свойства `highlight` и `highlightLengthStart` предназначены для управления выделением текста в компонентах.
+Свойства `highlight` и `highlightLengthStart` работают в связке для управления подсветкой совпадений при поиске по элементам списка. Они устанавливают строку поиска и минимальную длину запроса для активации визуального выделения найденных фрагментов.
 
-### Свойства
+**Свойства:**
 
-- **highlight** — Текст для выделения в содержимом компоненте
-- **highlightLengthStart** — Минимальная длина значения highlight для начала выделения
+- `highlight` — строка для поиска и подсветки в элементах списка
+- `highlightLengthStart` — минимальная длина строки поиска для начала выделения, по умолчанию `2`
 
-### Взаимосвязь свойств
+Выделение совпадений активируется автоматически: когда длина `highlight` меньше `highlightLengthStart`, поиск работает, но визуальное выделение не применяется. При достижении минимальной длины компонент начинает подсвечивать найденные фрагменты во всей иерархии списка. Поиск работает в реальном времени и учитывает вложенные элементы в группах и меню. Используйте `highlightLengthStart` для предотвращения чрезмерного выделения при коротких запросах.
 
-Свойства работают совместно для обеспечения интеллектуального выделения текста. `highlight` определяет что выделять, а `highlightLengthStart` контролирует когда начинать выделение.
+```html
+<!-- Стандартный поиск с выделением от 2 символов -->
+<List :list="items" highlight="текст" />
+
+<!-- Поиск с выделением от 3 символов -->
+<List :list="items" highlight="abc" :highlightLengthStart="3" />
+
+<!-- Динамический поиск с v-model -->
+<List :list="items" :highlight="searchQuery" :highlightLengthStart="1" />
+
+<!-- Поиск без минимального порога -->
+<List :list="products" :highlight="filter" :highlightLengthStart="0" />
+```
 
-- `highlight` содержит строку текста, которую нужно найти и выделить в компоненте
-- `highlightLengthStart` устанавливает минимальную длину строки поиска для активации функции выделения
-- Выделение активируется только когда длина `highlight` достигает значения `highlightLengthStart`
-- Это предотвращает нежелательное выделение при вводе коротких строк поиска
-- Оба свойства обеспечивают оптимальный пользовательский опыт при работе с поиском и фильтрацией