A component for creating interactive lists with support for hierarchical data, keyboard navigation, and search functionality.

List manages the display of structured data with navigation capabilities, item selection, and interaction through keyboard and mouse. The component supports various item types (regular items, groups, menus, dividers, subtitles, HTML content), automatically handles complex hierarchical structures, and provides intuitive navigation. The built-in search system works in real-time with match highlighting across the entire data hierarchy.

**Key features:**

- Various item types (item, group, menu, line, subtitle, html)
- Hierarchical structure with nested groups and menus
- Full keyboard navigation (↑/↓, Enter, →, ←)
- Built-in real-time search with match highlighting
- Item selection control via v-model:selected
- Focus control via v-model:focus
- Lightweight mode for large lists (lite)
- Display axis configuration (x/y) and dividers
- Click and menu close events

**Typical use cases:**

- Navigation menus and option lists
- Dropdown lists with hierarchical structure
- Product and category catalogs
- Settings lists with grouping
- Context menus with submenus
- File and folder lists
- Filters with multiple selection

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

const selected = ref(['item2'])
const focus = ref(null)

const listData = ref([
  { label: 'First item', value: 'item1' },
  { label: 'Second item', value: 'item2' },
  { type: 'line' },
  { type: 'subtitle', label: 'Item group' },
  {
    label: 'Group with submenu',
    value: 'group1',
    type: 'group',
    list: [
      { label: 'Nested item 1', value: 'nested1' },
      { label: 'Nested item 2', value: 'nested2' }
    ]
  }
])

const handleClick = (event) => {
  console.log('Item clicked:', event.detail.value)
}
</script>

<template>
  <List
    v-model:selected="selected"
    v-model:focus="focus"
    :list="listData"
    highlight="text"
    @click="handleClick"
  />
</template>
```
