## Описание

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

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

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

- Множественные режимы отображения (текст, числа, иконки, точечный индикатор)
- Автоматическое управление переполнением с настройкой максимального значения
- Гибкое позиционирование относительно родительских элементов (overlap, vertical, horizontal)
- Автоматическое скрытие при отсутствии контента (dot, icon, label)
- Интеграция с LabelNumberInclude для обработки числовых значений
- Поддержка иконок через IconInclude
- Цветовые варианты для различных типов статуса
- Управление видимостью через свойство hide
- Кастомизация через слоты для полного контроля над содержимым

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

- Индикаторы количества непрочитанных уведомлений
- Маркеры статуса на аватарах пользователей (онлайн/оффлайн)
- Счетчики элементов в корзине или списках
- Индикаторы новых сообщений в чатах
- Статусные маркеры на карточках товаров
- Визуальные подсказки о наличии обновлений
- Числовые индикаторы на вкладках и пунктах меню

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

const cartCount = ref(5)
const unreadMessages = ref(127)
const isOnline = ref(true)

const addToCart = () => {
  cartCount.value++
}
</script>

<template>
  <div class="badge-examples">
    <!-- Базовый бейдж с числом -->
    <div style="position: relative; display: inline-block;">
      <IconButton icon="shopping_cart" @click="addToCart"/>
      <Badge :label="cartCount"/>
    </div>

    <!-- Бейдж с ограничением максимального значения -->
    <div style="position: relative; display: inline-block;">
      <IconButton icon="notifications"/>
      <Badge :label="unreadMessages" :label-max="99"/>
    </div>

    <!-- Точечный индикатор статуса -->
    <div style="position: relative; display: inline-block;">
      <Avatar src="/user-avatar.jpg"/>
      <Badge
        dot
        :selected="isOnline"
        overlap="circular"
      />
    </div>

    <!-- Бейдж с иконкой и текстом -->
    <div style="position: relative; display: inline-block;">
      <Button>Профиль</Button>
      <Badge
        icon="verified"
        label="Pro"
        overlap="static"
      />
    </div>

    <!-- Бейдж с кастомным позиционированием -->
    <div style="position: relative; display: inline-block;">
      <Card>Контент</Card>
      <Badge
        label="Новое"
        vertical="bottom"
        horizontal="left"
      />
    </div>
  </div>
</template>
```

> Badge разработан как универсальный UI-компонент для создания компактных визуальных индикаторов с комплексной поддержкой различных типов контента, автоматическим управлением отображением и гибкими настройками позиционирования.
