Popover

Popover — составной компонент для немодального плавающего содержимого, привязанного к триггеру.

Обзор

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

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

Переменная	Значение	Влияет на
Поверхность поповера.`PopoverContent`		В этом состоянии изменений не видно
Приподнятость плавающего слоя.`PopoverContent`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

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

PopoverContent использует семантику плавающих поверхностей темы, а не большой набор переменных --popover-*.

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

Плотность содержимого часто влияет сильнее, чем изменения токенов, поэтому отступы и ширина важны не меньше цвета.

Примеры

.brand-theme {
  --surface-primary: oklch(99.2% 0.006 80);
  --surface-shadow: 0 20px 60px oklch(20% 0.02 60 / 0.14);
}

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

Не превращайте поповер стилями в псевдодиалог, не поменяв сам выбор компонента.
Не сглаживайте тень и контраст поверхности до того, что плавающий слой перестаёт ощущаться привязанным.