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

## Обзор

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

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

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--surface-primary` | `SheetContent` | Основная поверхность шторки. |
| `--sheet-background` | `SheetContent` | Цвет поверхности шторки; по умолчанию `--surface-primary`. |
| `--surface-shadow` | `SheetContent` | Необязательная тень приподнятой поверхности. |
| `--separator-opaque` | `SheetHandle` | Цвет ручки. |
| `--overlay` | `SheetContent::backdrop` | Затемнение подложки. |
| `--sheet-inset` | `SheetContent` | Зазор по бокам и снизу, пока шторка находится ниже верха вьюпорта; `0` оставляет шторку во всю ширину. |

## Переменные частей

- `SheetContent` использует токены поверхностей темы и внутренние правила размеров. Это flex-колонка с горизонтальными отступами `clamp(var(--spacing-12), 3vw, var(--spacing-16))` и нижним отступом `var(--spacing-12)` плюс отступ безопасной зоны, поэтому содержимому не нужна обёртка; прокручиваемая область — элемент с `overflow: auto`.
- `SheetHandle` опирается на семантику стилей разделителя.
- Задайте прокручиваемой области внутри шторки `overscroll-behavior: contain`, чтобы её прокрутка не передавалась странице позади.
- Поверхность шторки — отдельный слой позади её содержимого. Задавайте её цвет через `--sheet-background` на `SheetContent`, а не через `background`. `::after` у `SheetContent` — часть этой поверхности, поэтому для ваших стилей он недоступен.
- Задавайте `--sheet-inset` и `--sheet-background` на самом `SheetContent`: значение от предка до них не доходит.
- Подложка — это `::backdrop` у `SheetContent`. Она использует `--overlay`, размытие при `blurred`, равном `true`, и не имеет фона при `overlay`, равном `false`. Стилизуйте её через класс `SheetContent` (`.my-sheet::backdrop`).
- Как шторка в iOS, `SheetContent` парит карточкой со скруглёнными углами на расстоянии `--sheet-inset` (по умолчанию `var(--spacing-8)`) от боков и низа, пока находится ниже верха вьюпорта, и расширяется до краёв, поднимаясь к верху. Содержимое всё это время сохраняет ширину, поэтому не перестраивается между точками привязки: `SheetContent` добавляет `--sheet-inset` к своим боковым отступам. На нижней точке привязки часть ниже зазора обрезается, поэтому карточка растёт от нижнего края по мере подъёма. Задайте `--sheet-inset: 0`, чтобы оставить её во всю ширину. Пока карточка обрезана, `shadowed` не показывает тень. Шторка высотой во весь вьюпорт всегда во всю ширину.
- `SheetContent` выставляет на себе `--sheet-expansion`, и эта переменная не наследуется: `0` в самом нижнем положении и `1`, когда верх шторки достигает верха вьюпорта, следуя за перетаскиванием. Используйте её для собственных стилей, которые меняются по мере подъёма шторки, а `data-dragging` читайте, чтобы пропускать переходы, пока палец движется. Чтобы прочитать её в дочернем элементе или `::before`, скопируйте её в свою переменную на `SheetContent`; эта переменная наследуется, поэтому всё внутри пересчитывает стили при каждом движении перетаскивания.

```css
.full-width-sheet {
  --sheet-inset: 0;
}

.sheet-with-top-line {
  --top-line-opacity: var(--sheet-expansion);
}

.sheet-with-top-line::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--separator-opaque);
  opacity: var(--top-line-opacity);
}
```

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

- Точки привязки и возможность закрытия — контракты взаимодействия.
- `overlay={false}` и `blurred` на `SheetContent` меняют подачу подложки, а не модальное поведение.
- Стили должны оставлять ручку достаточно заметной, чтобы шторка читалась как перетаскиваемая там, где это поведение есть.

## Примеры

```css
.brand-theme {
  --surface-primary: oklch(99.2% 0.006 80);
  --separator-opaque: oklch(45% 0.02 75 / 0.35);
}
```

### Шапка в стиле Apple

Шапка с небольшим заголовком и круглой кнопкой закрытия 24px в углу — обычная композиция: `Heading` с `size={4}` и `fontWeight={600}` и `SheetClose asChild` вокруг `IconButton`, абсолютно позиционированного в верхнем конечном углу (`position: absolute`, `insetBlockStart: 16`, `insetInlineEnd: 'calc(16px + var(--sheet-inset, var(--spacing-8)))'`, потому что поверхность держит `--sheet-inset` от боков `<dialog>`); содержащий блок для неё — открытый модальный `<dialog>`. У `IconButton` нет для этого опции размера или формы; круглая кнопка 24px получается из двух CSS-переменных, заданных на ней, — `--icon-button-size: 24px` и `--icon-button-br-ratio: 0.5`, — с `Icon size='xs'` внутри.

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

- Не делайте ручку настолько незаметной, что пропадает подсказка о перетаскивании.
- Не считайте поведение точек привязки чисто вопросом стилей.
- Не делайте поверхность шторки настолько плоской, что она визуально сливается с содержимым страницы.