Компонент для создания интерактивных элементов списков с гибкой структурой контента и множественными областями отображения.

ListItem обеспечивает единообразное представление элементов в списках, меню и навигационных структурах. Компонент поддерживает метки, описания, иконки, значки состояния, интерактивные состояния (фокус, выбор, отключение), загрузку с прогрессом и скелетоном, а также эффект пульсации для улучшенной обратной связи.

**Основные возможности:**

- Множественные области контента (метка, описание, префикс, суффикс, заголовок)
- Поддержка иконок с гибким позиционированием и выравниванием
- Интеграция значков для индикаторов статуса
- Интерактивные состояния (фокус, выбранный, отключенный, только чтение)
- Состояния загрузки с прогрессом и скелетоном
- Эффект пульсации для визуальной обратной связи
- Гибкие варианты тегов (button, link, div, span)
- Встроенная поддержка доступности

**Типичные сценарии использования:**

- Элементы списков и меню навигации
- Пункты настроек и конфигурации
- Списки с множественным выбором
- Контактные списки и каталоги
- Мобильные интерфейсы и action lists

```html
<script setup>
import { ref } from 'vue'

const items = ref([
  { text: 'Элемент списка 1', value: '1', selected: false },
  { text: 'Элемент списка 2', value: '2', selected: true },
  { text: 'Элемент списка 3', value: '3', selected: false }
])

const handleClick = (item) => {
  item.selected = !item.selected
  console.log('Элемент выбран:', item.text)
}
</script>

<template>
  <List>
    <ListItem
      v-for="item in items"
      :key="item.value"
      :text="item.text"
      :selected="item.selected"
      @click="handleClick(item)"
    >
      <template #prefix>
        <Icon name="check" v-if="item.selected" />
      </template>
    </ListItem>
  </List>
</template>
```
