Component for creating interactive list items with flexible content structure and multiple display areas.

ListItem provides uniform presentation of items in lists, menus, and navigation structures. The component supports labels, descriptions, icons, status badges, interactive states (focus, selection, disabled), loading with progress and skeleton, and ripple effect for enhanced feedback.

**Key features:**

- 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)
- Loading states with progress and skeleton
- Ripple effect for visual feedback
- Flexible tag variants (button, link, div, span)
- Built-in accessibility support

**Common use cases:**

- List items and navigation menus
- Settings and configuration options
- Lists with multiple selection
- Contact lists and catalogs
- Mobile interfaces and action lists

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

const items = ref([
  { text: 'List item 1', value: '1', selected: false },
  { text: 'List item 2', value: '2', selected: true },
  { text: 'List item 3', value: '3', selected: false }
])

const handleClick = (item) => {
  item.selected = !item.selected
  console.log('Item selected:', 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>
```
