Accordion

Accordion — составной компонент сворачиваемых секций на список заголовков, под каждым — содержимое, которое раскрывается по клику.

Accordion.Root держит состояние и задаёт цвет, подачу, размер и скругление всем секциям сразу. Секция — Accordion.Item с обязательным value: по нему она раскрывается и по нему приезжает в onValueChange. Внутри секции две части: Accordion.Trigger — шапка (единственная интерактивная часть, стрелку раскрытия она рисует сама) и Accordion.Content — содержимое.

Состояние ведётся контролируемо (пара value / onValueChange) или неконтролируемо (defaultValue); и там, и там значение — массив value раскрытых секций, даже когда раскрытой может быть только одна. По умолчанию секции раскрываются по одной и одна всегда остаётся открытой: collapsible разрешает закрыть последнюю, multiple — держать раскрытыми несколько.

Клавиатура и доступность — на стороне Ark: стрелки перемещают фокус между шапками, Home и End прыгают к первой и последней, шапка связана со своим содержимым через aria-controls.

multiple разрешает держать раскрытыми сколько угодно секций сразу — так собирают панели фильтров и настроек, где разделы смотрят вместе. Закрыть можно любую: при multiple collapsible не нужен.

Пара value / onValueChange отдаёт раскрытые секции наружу: их можно менять программно — открыть нужный шаг после сохранения формы или из соседнего элемента интерфейса. Колбэк получает { value } — массив значений раскрытых секций.

Если управлять состоянием снаружи не нужно, хватит defaultValue: аккордеон ведёт его сам.

disabled на Accordion.Item тушит одну секцию — она не раскрывается и пропускается при переходе по стрелкам, остальные работают. Тот же проп на Accordion.Root отключает аккордеон целиком.

Смысловой вариант — задаёт цвет шапки секции: primary — акцент, secondary — второстепенный, success / warning / danger — семантические статусы, default — нейтральный (по умолчанию). Содержимое остаётся на фоне страницы: цвет — признак раздела, а не подложка под текст.

Внешний вид шапки: solid — сплошная заливка, outline — обводка без заливки, dashed — та же обводка пунктиром, ghost — прозрачная шапка с приглушённой подложкой на ховере (по умолчанию). Раскрытая секция подсвечена насыщеннее наведённой, поэтому открытая шапка видна и без стрелки.

Размер задаётся на Accordion.Root и управляет высотой шапки, её отступами и кеглем, а также типографикой содержимого. xs — для плотных боковых панелей, sm — базовый, md и выше — для крупных разделов на странице.

Скругление углов шапки — от прямых none до circle («таблетка»). На прозрачной шапке разница не видна, поэтому проп имеет смысл вместе с solid, outline или dashed.

color — цвет секций вне стандартного набора вариантов, принимает любое CSS-значение и перекрывает цвет из variant. Цвет текста при сплошной заливке подбирается автоматически: на светлом фоне — чёрный, на тёмном — белый.

Секция: шапка и содержимое. value обязателен — по нему секция раскрывается и приезжает в onValueChange.

Шапка секции — кнопка раскрытия. Заголовок не переносится, стрелку шапка рисует сама.

Содержимое секции — произвольная разметка; раскрывается и сворачивается анимацией по высоте.