## Описание

Компактный интерактивный элемент для представления ввода, атрибутов, действий и фильтров в пользовательском интерфейсе.

Chip предоставляет унифицированный компонент для отображения дискретной информации в компактном формате с поддержкой состояний выбора, иконок, адаптивного поведения и различных визуальных вариантов (input, assistive). Наследует функциональность Button, добавляя специализированную стилизацию и семантику для работы с тегами, фильтрами, статусами и пользовательским вводом. Обеспечивает согласованный API для создания интерактивных чипов с поддержкой кликов, состояния disabled/selected и интеграцией иконок.

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

- Наследование от Button (иконки, прогресс, события клика)
- Визуальные варианты (input, assistive) для разных контекстов
- Управление состояниями (selected, disabled, focus, readonly)
- Адаптивное поведение (adaptive, container) для разных размеров экрана
- Настраиваемое выравнивание текста (textAlign: left/center/right)
- Поддержка иконок (icon, iconTrailing) и прогресс-индикатора
- Интеграция скелетон-состояния для загрузки
- Передача value и detail для идентификации элементов

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

- Теги и метки для категоризации контента
- Фильтры в поисковых интерфейсах и каталогах
- Отображение введенных пользователем данных (email, контакты)
- Статусы и индикаторы состояния
- Вспомогательные элементы (подсказки, рекомендации)
- Выбираемые опции в формах и списках

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

const selectedFilters = ref(['active', 'verified'])
const tags = ref(['Vue', 'TypeScript', 'UI'])

const toggleFilter = (filter) => {
  const index = selectedFilters.value.indexOf(filter)
  if (index > -1) {
    selectedFilters.value.splice(index, 1)
  } else {
    selectedFilters.value.push(filter)
  }
}
</script>

<template>
  <!-- Базовый чип -->
  <Chip>Стандарт</Chip>

  <!-- Input чип для пользовательского ввода -->
  <Chip input icon="person">Контакт</Chip>

  <!-- Assistive чип для подсказок -->
  <Chip assistive icon="lightbulb">Рекомендация</Chip>

  <!-- Фильтры с состоянием выбора -->
  <Chip
    v-for="filter in ['active', 'pending', 'verified']"
    :key="filter"
    :selected="selectedFilters.includes(filter)"
    @click="toggleFilter(filter)"
  >
    {{ filter }}
  </Chip>

  <!-- С передачей данных -->
  <Chip
    value="filter-tag"
    :detail="{ category: 'status', type: 'active' }"
    @click="handleChipClick"
  >
    Активный
  </Chip>
</template>
```

> Chip наследует всю функциональность Button, включая события, иконки и прогресс-индикаторы, добавляя специализированную стилизацию для компактных элементов интерфейса.
