# Collapsible: Стилизация

## Обзор

У `Collapsible` небольшой контракт стилизации, построенный вокруг переходов высоты содержимого. Сам корень не предоставляет большого набора переменных, поэтому большая часть темизации делается через триггер и окружающую раскладку.

## Публичные CSS-переменные

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--transition-state-delay` | `CollapsibleContent` | Тайминг перехода высоты. |
| `--content-height` | `CollapsibleContent` | Измеренная высота содержимого, используемая при переходе открытия. |

## Переменные уровня частей

- `Collapsible`: владелец состояния корня без отдельного модуля стилей.
- `CollapsibleTrigger`: стили берутся из отрендеренного элемента триггера или поверхности `asChild`.
- `CollapsibleContent`: владеет переходом высоты, обрезкой переполнения и поведением скрытого состояния.

## Взаимодействие состояний и вариантов

- Состояния открытия и скрытия связаны, но во время переходов не совпадают.
- При композиции через `asChild` видимый стиль триггера часто приходит из другого компонента, например `Button`.
- Динамический размер содержимого может изменить фактическое поведение перехода, если содержимое растёт после первого рендера.

## Примеры

```css
.slowCollapsible {
  --transition-state-delay: 220ms;
}
```

```css
.compactDisclosureButton {
  font-size: 14px;
}
```

## Не переопределяйте

- Не задавайте `--content-height` жёстко: она измеряется во время выполнения.
- Не убирайте правила переполнения, если раздел по-прежнему опирается на анимацию высоты.
- Не считайте, что стили триггера принадлежат `Collapsible`, когда используется `asChild`.