---
contractVersion: 1
title: Каталог интерактивных компонентов
description: Декларативный копируемый текст, глоссарий, раскрытие, вкладки, оверлеи, фильтрация, переключатели и ограниченная демонстрация.
language: ru
---

# Каталог интерактивных компонентов

**Вымышленный пример.** Все показатели, статусы, организации и решения на этой странице нужны только для
демонстрации движка отчётов; перед использованием замените их проверенными данными проекта.

Эта страница показывает поведение из пакета, полностью описанное директивами Markdown. Термин
:term[Пакет решения]{key="decision-packet"} хранит переиспользуемое определение рядом с объясняемой формулировкой.

:::glossary{key="decision-packet" term="Пакет решения" forms="пакеты решений, пакета решения"}
Компактный набор доказательств, ограничений и рекомендации, который может проверить другой агент.
:::

Объяснение :term[пакета решения]{key="decision-packet"} остаётся доступным в каждом месте, где встречается понятие.

::::::section{title="Копируемый смысл" id="copy" nav="Копирование" width="wide" tone="contrast" composition="stage" viewport="bounded" section-density="compact" type="display" surface="mesh" transition="stagger" choreography="cascade"}

:::copyable
Выполняйте развёртывание после завершения **двух проверок**.

Прочитайте [инструкцию по откату](https://example.com/runbook) и подтвердите
:term[пакет решения]{key="decision-packet"} перед передачей.
:::
::::::

::::::section{title="Последовательное раскрытие" id="detail" nav="Подробности" width="wide" tone="soft" composition="split" viewport="bounded" section-density="editorial" type="editorial" surface="grain" transition="reveal"}

:::disclosure{title="Почему исходник остаётся декларативным" open="true"}
Автор выбирает намерение и начальное состояние. Пакет предоставляет семантический HTML, поведение фокуса
и браузерную среду выполнения.
:::

::::tabs{title="Варианты поставки"}
:::tab{label="Один файл"}
Используйте вариант по умолчанию, когда страница должна передаваться одним самодостаточным HTML-артефактом.
:::
:::tab{label="Каталог"}
Используйте каталог, когда крупные локальные ресурсы должны остаться файлами с адресацией по содержимому.
:::
:::tab{label="Ревью"}
Откройте любой результат прямо через `file://` и проверьте одинаковые взаимодействия.
:::
::::

::::tabs{title="Представления независимого ревью"}
:::tab{label="Требования"}
Проверьте заявленное поведение и ограничения.
:::
:::tab{label="Артефакт"}
Проверьте созданную страницу в браузере.
:::
::::
::::::

::::::section{title="Сфокусированные оверлеи" id="overlays" nav="Оверлеи" width="wide" tone="plain" composition="mosaic" viewport="adaptive" section-density="compact" type="editorial" surface="grid" transition="stagger" choreography="cascade"}

:::modal{title="Контрольный список релиза" trigger="Открыть контрольный список релиза"}

- Замените примерное содержимое.
- Соберите выбранный результат: сборка проверит исходник перед записью.
- Откройте браузерный артефакт прямо с диска.
  :::

:::popover{title="Примечание о переносимости" trigger="Показать примечание о переносимости"}
После сборки странице не нужен локальный веб-сервер.
:::
::::::

::::::section{title="Поиск, раскрытие и демонстрация" id="controls" nav="Управление" width="wide" tone="accent" composition="stack" viewport="bounded" section-density="editorial" type="display" surface="glow" transition="reveal"}

:::filter{title="Фильтр возможностей компонентов" placeholder="Найти возможности"}

- Вкладки с клавиатурным управлением
- Нативное раскрытие
- Модальное окно с восстановлением фокуса
  - Вложенный клавиатурный маршрут
- Закрываемая всплывающая панель
- Клиентский фильтр списка
  :::

:::toggle{title="Необязательные доказательства" label="Показать доказательства проверки" default="off"}
Созданный артефакт открыт по локальному файловому URL на компьютерной и мобильной ширине.
:::

:::toggle{title="Изначально видимое примечание" label="Показать примечание для автора" default="on"}
Авторы не предоставляют JSX, CSS или браузерный JavaScript.
:::

:::demo{title="Оценить число редакций" start="2" step="1"}
Счётчик — одно намеренно ограниченное взаимодействие из пакета.
:::
::::::