Drawer

Drawer выезжает у правого края под шапкой и держит форму фильтров или настроек выдачи: сверху кнопка закрытия, в середине содержимое с прокруткой, внизу два действия — применить и сбросить. Панель не затемняет экран: страница остаётся видна, клик вне панели и Escape закрывают её.

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

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

Фильтры списка или таблицы, которых слишком много для панели над выдачей.
Настройки отчёта или выдачи, которые применяются одним действием.

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

Задача требует сосредоточиться и завершить действие до возврата — это Dialog.
Два-три фильтра — им место над выдачей в Toolbar, а не в панели.
Навигация по разделам — это Sidebar или Page Navigation.

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

dialog — модальная задача с блокировкой экрана
popover — компактная панель рядом с кнопкой
toolbar — несколько фильтров прямо над выдачей

Фильтры выдачи

Кнопка открывает панель с полями фильтров; применить закрывает её, сбросить — нет.

<!--
  🟢

  Панель фильтров: кнопка открывает её у правого края, внутри поля
  фильтров, внизу «применить» и «сбросить».
-->

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

let open = $state(false);
let geo = $state("");
let active = $state(true);
</script>

<Drawer bind:open label={t("Фильтры кампаний")} onapply={() => {}} onreset={() => {
	geo = "";
	active = true;
}}>
	{#snippet trigger({ props })}
		<Button {...props} icon="Funnel">{t("Фильтры")}</Button>
	{/snippet}
	<Input label="GEO" bind:value={geo} />
	<Switch label={t("Только активные")} bind:checked={active} />
</Drawer>