# Accordion: API

## Пропсы корня

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `className` | `string` | — | Нет | Необязательный собственный CSS-класс для обёртки аккордеона. Полезен для переопределения стилей или локальной стилизации. |
| `size` | `AccordionSize` | `'md'` | Нет | Определяет размер аккордеона. Влияет на отступы и размер шрифта. |
| `children` | `ReactElement<AccordionItemProps> \| ReactElement<AccordionItemProps>[]` | — | Нет | Элементы аккордеона для рендера. Должны быть одним или несколькими компонентами `<AccordionItem>`. Принимает один элемент или массив элементов. |
| `opened` | `string[]` | — | Нет | ID открытых сейчас элементов. Если задан, включает контролируемый режим. |
| `onChangeOpened` | `(opened?: string[]) => void` | — | Нет | Вызывается при изменении ID открытых элементов. |
| `defaultOpened` | `string[]` | `[]` | Нет | Массив `id` элементов, которые должны быть открыты по умолчанию при монтировании аккордеона. |
| `multiple` | `boolean` | `false` | Нет | Позволяет одновременно открывать несколько элементов аккордеона. Если `false`, открытым может быть только один элемент (классическое поведение аккордеона). |

Также принимает все атрибуты `<ul>`.

## Дочерние части

- `AccordionItem`: один раскрывающийся элемент со стабильным `value`.
- `AccordionHeader`: семантическая обёртка-заголовок для каждого элемента.
- `AccordionTrigger`: кнопка-переключатель элемента.
- `AccordionContent`: раскрывающаяся область содержимого.
- `AccordionIcon`: необязательный визуальный индикатор состояния.

### `AccordionItem`

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `open` | `boolean` | — | Нет | Управляет тем, открыт (развёрнут) ли элемент аккордеона. Если задан, компонент становится контролируемым. |
| `onChangeOpen` | `(value: string, state: boolean) => void` | — | Нет | Колбэк, вызываемый при изменении состояния открытия. |
| `value` | `string` | — | Да | Уникальный идентификатор этого элемента аккордеона. Используется для управления состоянием открытия в группе аккордеона. |
| `size` | `AccordionSize` | — | Нет | Управляет размером триггера и влияет на типографику и интервалы. Если не задан, берётся значение из контекста. |
| `contentId` | `string` | — | Нет | ID элемента сворачиваемого содержимого. Используется, чтобы: связать триггер и содержимое атрибутами доступности (`aria-controls`); открыть развёрнутую область вспомогательным технологиям; дать стабильный идентификатор для тестов и запросов к DOM. Если не задан, ID генерируется внутри. |

Также принимает все атрибуты `<li>`.

### `AccordionTrigger`

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `asChild` | `boolean` | — | Нет | Если true, рендерит триггер как дочерний компонент через `Slot` (например, `<a>` или `<div>`). Это позволяет задать собственную семантику или стили, сохранив поведение сворачивания. |
| `ref` | `Ref<HTMLButtonElement>` | — | Нет | Ref, передаваемый на нативный элемент триггера (обычно кнопку). |

Также принимает все HTML-атрибуты.

### `AccordionContent`

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `ref` | `Ref<HTMLDivElement>` | — | Нет | Ref на корневой div содержимого. |

Также принимает все атрибуты `<div>`.

### `AccordionHeader`

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `as` | `HeadingAs` | — | Нет | HTML-тег заголовка для рендера (например, 'h1', 'h2'). Определяет семантическую структуру и уровень для доступности. |
| `size` | `HeadingSize` | — | Нет | Визуальный размер заголовка, независимый от тега `as`. Обычно соответствует типографической шкале дизайн-системы. Принимает значения от 1 (наименьший) до 11 (наибольший). |
| `fontWeight` | `400 \| 500 \| 600 \| 700 \| 900` | — | Нет | Насыщенность шрифта текста заголовка. 400: обычный; 500: средний; 600: полужирный; 700: жирный; 900: сверхжирный |
| `ref` | `Ref<HTMLHeadingElement>` | — | Нет | Ref на нативный HTML-элемент заголовка. Полезен для доступа к DOM или управления фокусом. |

Также принимает все атрибуты `<h1>–<h6>`.

### `AccordionIcon`

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `size` | `IconSize` | — | Нет | Предопределённый токен размера иконки. Может быть переопределён явными шириной и высотой. |
| `ref` | `Ref<SVGSVGElement>` | — | Нет | Ref на SVG-элемент |
| `strokeWidth` | `number` | — | Нет | Толщина обводки линий и фигур SVG (в px или pt). |
| `children` | `ReactNode` | — | Нет | Содержимое иконки (обязательно). Принимает: иконки из `~/icons`; собственный встроенный SVG; компоненты иконок сторонних библиотек (например, Lucide, Tabler) |

Также принимает все HTML-атрибуты.

## Типы

- `AccordionProps`
- `AccordionItemProps`
- `AccordionHeaderProps`
- `AccordionTriggerProps`
- `AccordionContentProps`
- `AccordionIconProps`

## Модель состояния

- `Accordion` может быть неконтролируемым через `defaultOpened` или [контролируемым](https://vega-ui.dev/ru/docs/glossary/#контролируемый-controlled) через `opened` и `onChangeOpened`.
- `multiple={false}` ведёт себя как классический аккордеон: открытие одного элемента закрывает остальные.
- `multiple={true}` позволяет корню работать как группа независимых раскрывающихся блоков.
- Для продвинутых обёрток и собственных композиций доступны `useAccordionContext` и `useAccordionItemContext`.