Popover

Popover раскрывает локальные сведения или несколько связанных контролов, не блокируя остальной экран.

Статус: experimental · в системе с 2026-07 · интерактивность: always (всегда)

Когда использовать

Небольшой набор сведений или контролов относится к одному trigger.
Панель должна закрываться по Escape и внешнему клику без модального режима.

Не использовать:

Нужно только короткое неинтерактивное пояснение — используй Tooltip.
Панель содержит список команд или ссылок — используй Menu.
Задача должна блокировать экран до завершения — используй Dialog.

Альтернативы:

tooltip — Tooltip объясняет trigger без интерактивного содержимого.
menu — Menu даёт клавиатурную модель списка команд и переходов.
dialog — Dialog изолирует задачу и блокирует взаимодействие с экраном.

Локальные сведения

Панель раскрывается у trigger и закрывается внутренним действием.

<!--
  🟢

  Базовый Popover раскрывает компактные сведения рядом с кнопкой.
  Внутренняя кнопка использует переданный close без дополнительного состояния.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Button from "$lib/ui/Button.svelte";
import Popover from "$lib/ui/Popover.svelte";
</script>

<Popover align="start">
	{#snippet trigger({ props })}
		<Button {...props}>{t("Сведения о кампании")}</Button>
	{/snippet}

	{#snippet children({ close })}
		<p>{t("Кампания обновлена сегодня и использует общий дневной лимит.")}</p>
		<Button size="s" onclick={close}>{t("Понятно")}</Button>
	{/snippet}
</Popover>

Управляемое состояние

Родитель синхронизирует bindable open с внешним интерфейсом.

Popover закрыт.

<!--
  🟢

  Управляемый Popover синхронизирует bindable open с внешним текстом.
  Trigger остаётся источником открытия, Escape и внешний клик — закрытия.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Button from "$lib/ui/Button.svelte";
import Popover from "$lib/ui/Popover.svelte";

let open = $state(false);
</script>

<Popover bind:open>
	{#snippet trigger({ props })}
		<Button variant="ghost" {...props}>{t("Фильтры")}</Button>
	{/snippet}

	{#snippet children({ close })}
		<p>{t("В продукте здесь размещаются несколько связанных контролов.")}</p>
		<Button size="s" onclick={close}>{t("Применить")}</Button>
	{/snippet}
</Popover>

<p aria-live="polite">{open ? t("Popover открыт.") : t("Popover закрыт.")}</p>

Заголовок и подвал

title над содержимым и footer под линией — как поповер легаси.

<!--
  🟢

  Заголовок и подвал панели (эталон: Vue-легаси structures/popover title +
  слот footer): заголовок над содержимым, подвал под линией с действием.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Button from "$lib/ui/Button.svelte";
import Popover from "$lib/ui/Popover.svelte";

let open = $state(false);
</script>

<Popover bind:open title={t("Лимит бюджета")}>
	{#snippet trigger({ props })}
		<Button {...props} variant="default">{t("Подробнее")}</Button>
	{/snippet}
	{#snippet children()}
		<p style="margin: 0; font-size: var(--fs-s);">{t("Дневной лимит достигнут в 14:20, показы остановлены до полуночи.")}</p>
	{/snippet}
	{#snippet footer({ close })}
		<Button variant="ghost" size="s" onclick={close}>{t("Понятно")}</Button>
	{/snippet}
</Popover>