Аккордеон сворачивает длинный контент в компактный список заголовков: пользователь видит структуру страницы целиком и открывает только нужный блок. Берите для FAQ, настроек и групп параметров, где важно не перегружать экран. По умолчанию открыта одна секция («радио»-режим); multiple: true разрешает несколько открытых одновременно.

Технические детали: состояние — массив строковых ключей открытых секций (индексы items в виде '0', '1', …), синхронизируется через v-model. disabled: true у секции отключает хедер (не раскрывается, приглушён). Индикатор: проп icon (дефолт chevron-down) или icon у секции; слот #icon ({ item, index, open }) — свой рендер; rotate-icon: false отключает поворот на 180° (для кастомных иконок). Контент секции — слот #default ({ item, index, open }) или поле content секции (текст без слота — для MDC-контента; слот перекрывает); панели рендерятся через v-show, поэтому состояние слота не теряется при закрытии. Доступность: хедер — button с aria-expanded/aria-controls, панель — role="region" c aria-label из заголовка; уникальный префикс id через useId() не ломает aria-controls при нескольких аккордеонах на странице. Ховер хедера — только на устройствах с настоящим hover (@media (hover: hover)); поворот индикатора анимирован (transition: transform 0.2s).