# Vuetify 3 (Лидерра)

Проект использует **Vuetify 3** как единственную UI-библиотеку (CTO-11 в реестре открытых вопросов).

## НЕ использовать (CLAUDE.md §5 п.2)

- Tailwind CSS / shadcn-vue / Element UI / Naive UI / Quasar / PrimeVue / Bootstrap / Vuestic
- Inertia.js / Livewire / Filament / Flux UI / Nova / Folio / Volt / Wayfinder
- jQuery / Vue 2

## Палитра — v8 Forest

Источник: `liderra_v8_handoff/docs/BRANDBOOK_v2.md` §3 + DEVELOPER_HANDOFF.md §3.

| Токен | Значение | Назначение |
|---|---|---|
| primary | `#0F6E56` (Teal 600) | Кнопки, акценты, активные состояния — неоспариваемый |
| primary-dark | `#012019` | Sidebar (теало-нуар) |
| background | `#F6F3EC` (warm ivory) | Page background |
| surface | `#FFFFFF` | Карточки, диалоги |
| on-surface | OKLCH-токены см. BRANDBOOK_v2 §3.5 | Текст, иконки |

Vuetify-тема `liderraLight` (и опционально `liderraDark`) — определена в `resources/js/plugins/vuetify.ts` (создаётся в фазе 2).

**14 статусов воронки** имеют свои OKLCH-цвета — но **slug'и брать ТОЛЬКО из `db/schema.sql:2076`** (источник истины — schema/ТЗ §6.4, не handoff). Палитру маппить на slug'и при реализации.

## Шрифты

- **UI:** Inter (variable, axis `opsz` 14..32). Подключение — Google Fonts с `subset cyrillic`.
- **Numerics + код:** JetBrains Mono с `font-feature-settings: "tnum"` (табличные цифры).

Шрифты задаются на `:root` через CSS-переменные, Vuetify темы подхватывают через `defaultTheme.variables`.

## Иконки

- **Lucide** (через `lucide-vue-next`). НЕ Material Icons, НЕ Font Awesome.

## Компоненты

Использовать **только** Vuetify 3 компоненты:

- Формы: `v-text-field`, `v-select`, `v-autocomplete`, `v-checkbox`, `v-radio-group`, `v-switch`, `v-textarea`
- Кнопки/действия: `v-btn`, `v-btn-toggle`, `v-fab`
- Layout: `v-app`, `v-app-bar`, `v-navigation-drawer`, `v-main`, `v-container`, `v-row`, `v-col`
- Данные: `v-data-table`, `v-data-table-server`, `v-data-iterator`
- Карточки/диалоги: `v-card`, `v-dialog`, `v-bottom-sheet`, `v-snackbar`
- Навигация: `v-tabs`, `v-stepper`, `v-breadcrumbs`, `v-pagination`
- Канбан: `v-row` + `v-col` + `v-card` (drag-and-drop через `vuedraggable@next` или `@vueuse/integrations`)

Дефолтный material-стиль переопределяется через `:root` CSS-переменные из BRANDBOOK_v2 + `defaults` в Vuetify-плагине.

## A11y (WCAG 2.1 AA)

- Все компоненты должны проходить **Pa11y 9.x + axe** (см. CLAUDE.md §5 п.3 — Pa11y единственный источник истины, НЕ Lighthouse).
- Контраст текста на белом — минимум **4.5:1** для обычного текста, **3:1** для крупного (≥18pt или ≥14pt bold).
- Все интерактивные элементы должны иметь `aria-label` или видимый текст.
- Focus-стили НЕ удалять — Vuetify 3 рисует ring через `--v-focus-opacity`.

## Тестирование

- Vitest для unit-тестов компонентов.
- **Histoire** (НЕ Storybook, см. CLAUDE.md §5 п.6 / Tooling Прил. Н #24) для каталога компонентов.
- Pa11y-CI на `histoire build` output перед merge'ом.

## Связанные документы

- `liderra_v8_handoff/docs/BRANDBOOK_v2.md` — палитра, типографика, spacing, статусы (брендинг)
- `liderra_v8_handoff/docs/DEVELOPER_HANDOFF.md` — токены, компоненты, 25 экранов
- `db/schema.sql:2076` — 14 slug'ов статусов воронки (источник истины)
- `docs/CRM_bp-gr_Инструкция_v8_5.md` — функционал и состав экранов (источник истины)
- `web/v8/v8_*.html` — 13 HTML-концептов как референс

При расхождении handoff vs ТЗ — приоритет **ТЗ + schema** (см. CLAUDE.md §0 + memory `reference_handoff.md`).
