Все компоненты

Изучите компоненты Lyra UI (308). Отбирайте по семейству, ищите по названию, пробуйте интерактивные примеры или открывайте примеры из документации.

Беседы и чаты

Рабочая область агента — Адаптивный контейнер интерфейса ИИ, объединяющий переписку, поле ввода сообщения и необязательные панели с данными о запуске, инструментах, поиске, подтверждениях и контексте.
Визуализация голоса — Показывает активность голоса на canvas в состояниях агента: ожидание, прослушивание, размышление и речь.
Выбор ветви — Управляемая навигация «‹ n / m ›» по повторно созданным или отредактированным вариантам одного сообщения чата.
Поле ввода сообщения — Поле ввода сообщения чата с автоматическим изменением высоты и встроенными кнопками отправки и остановки.
Сообщение чата — Контейнер сообщения с оформлением по роли, аватаром, значками и нижней строкой состояния.
Область переписки — Прокручиваемый контейнер переписки с автоматическим переходом к новым сообщениям, кнопкой перехода вниз и разделителем непрочитанного.
Контрольная точка — Встроенная точка восстановления переписки с действиями подтверждения и возврата к более раннему состоянию.
Блок кода — Показывает блок кода с загружаемой по мере необходимости подсветкой синтаксиса и кнопкой копирования.
Базовый блок кода — Показывает блок кода с минимальными зависимостями и подсветкой только по карте грамматик, предоставленной при сборке.
Элемент диалога — Выбираемая строка истории чата, показывающая заголовок сессии, предварительный просмотр и временную метку.
Показатели генерации — Показывает время, число токенов и скорость во время потокового ответа ИИ.
Разделитель передачи управления — Помечает в переписке передачу управления от одного агента другому.
Markdown — Безопасно отображает Markdown как HTML с таблицами GFM, кодом и ссылками.
Базовый Markdown — Отображает Markdown, подсвечивая блоки кода только с помощью карты грамматик, предоставленной при сборке.
Действия с сообщением — Панель действий для каждого сообщения чата: копирование, повторная генерация, редактирование и обратная связь.
Отзыв о сообщении — Оценка ответа ассистента «нравится» или «не нравится» с необязательными причиной и комментарием.
Выбор модели — Выбор поставщика и модели из фиксированного каталога либо с вводом собственного названия.
Панель настроек модели — Пара выбора модели и ползунка температуры для настройки агента.
Кнопка разговора — Управляет полным циклом работы микрофона: запросом разрешения, записью и остановкой. Поддерживает удержание кнопки или переключение.
Состояние потока — Показывает этап потокового соединения и обнаруживает зависание с учётом контрольных сигналов.
Потоковый текст — Постепенно показывает потоковый ответ ассистента, объединяя быстрые обновления токенов.
Базовый потоковый текст — Лёгкий компонент потокового текста, который в режиме Markdown подсвечивает блоки кода только по карте грамматик, предоставленной при сборке.
Подсказки для ответа — Прокручиваемый ряд начальных или последующих подсказок, передающий выбранный текст приложению.
Список бесед — Боковая панель с группировкой и поиском бесед и действиями закрепления, архивирования, удаления и переименования.
Лента расшифровки — Показывает живую расшифровку голосового сеанса, заменяет предварительный текст окончательным и автоматически прокручивает вниз.
Индикатор набора текста — Визуальный индикатор присутствия, показывающий, что ассистент составляет ответ.
Показатели использования — Компактная сводка токенов, стоимости и задержки сообщения или сеанса с подробностями во всплывающей подсказке.
Выбор голоса — Выбирает голос синтеза речи из предоставленного списка со встроенным прослушиванием и обработкой устаревших значений.
Отображение виджетов — Отображает потоковое дерево виджетов JSON, предоставленное агентом, через реестр разрешённых типов компонентов.
Части сообщения — Отображает упорядоченные части сообщения ИИ: текст, рассуждения, инструменты, цитаты, вложения и медиа.
Поле ввода запроса — Объединяет ввод запроса с вложениями, выбором модели и голоса, источниками поиска, упоминаниями, командами и очередью реплик.
Очередь запросов — Управляет очередью последующих запросов, которые можно редактировать, менять местами, удалять или отправлять сразу.
Сеанс реального времени — Независимая от поставщика панель голосового сеанса с управлением соединением, активностью, расшифровкой, записью, отключением звука и прерыванием.
Панель выделения — Показывает действия «спросить», «цитировать», «взять в кавычки» и «копировать» возле выделенного текста, сохраняя его привязку к документу.

Инструменты агентов и наблюдаемость

Лента активности — Добавляет действия агента по мере поступления и после завершения сворачивает их в сводку выполненных шагов.
Панель оценки агента — Сводка управляемой оценки с карточками показателей, графиком тренда и историей состояния каждого запуска.
Вопрос агента — Собирает структурированный ответ на вопрос агента или сервера MCP с действиями принятия, отказа и отмены.
Фоновые запуски — Показывает задания агентов, которыми управляет приложение: ожидающие, выполняемые и завершённые, с запросами открытия или отмены.
Индикатор бюджета — Показывает предоставленное значение использования относительно лимита, в том числе когда данные недоступны или лимит превышен.
Проверка изменений — Показывает изменения файлов, предоставленные приложением, и запрашивает решение сохранить или отклонить каждый фрагмент.
Управление коннекторами — Показывает состояние подключения и запрашивает подключение, отключение или повторную попытку для коннекторов, которыми управляет приложение.
Запрос разрешения — Показывает запрос разрешения с заданной областью действия и передаёт приложению решение пользователя разрешить или отказать.
Правила разрешений — Показывает правила разрешений, заданные приложением, и запрашивает изменение решения: разрешить, спрашивать или отказать.
Запуск агента — Основная панель одного запуска агента со статусом, прошедшим временем, текущим шагом и стоимостью, а также действиями отмены и повтора.
Трассировка агента — Иерархический просмотр трассировки агента или LLM с фильтрами по типам сегментов и быстрыми переходами между этапами передачи управления.
Очередь согласования — Очередь ожидающих вызовов инструментов с управлением с клавиатуры. Каждый вызов можно проверить, разрешить или отклонить в общем диалоговом окне.
Панель артефакта — Показывает созданный агентом артефакт с переключением предпросмотра и кода, навигацией по версиям и действиями копирования и скачивания.
Окно браузера — Показывает имитацию браузера агента с потоком снимков экрана, URL только для чтения и управлением передачей контроля.
Карточка коммита — Краткая сводка коммита со статистикой изменений и списком изменённых файлов со ссылками на сравнение.
Панель сравнения — Сравнивает два результата рядом с голосованием за лучший для оценки моделей в формате арены.
Панель подтверждения — Встроенная немодальная панель для принятия или отклонения одного действия агента прямо в переписке.
Просмотр контекста — Показывает сегменты контекста вызова модели с приблизительным числом токенов, цитатами, отметками редактирования и кнопками копирования и экспорта.
Набор для оценки — Список примеров оценки с фильтрами, тегами и действиями добавления, удаления, импорта и экспорта.
Результат оценки — Панель оценки по критериям и ручной проверки для сравнения запусков одного примера.
Запуск оценки — Показывает ход пакетной оценки в реальном времени: общий прогресс и раскрываемые сведения по каждому примеру, включая обоснование и трассировки инструментов.
Сводка политик — Список решений по правилам безопасности, разрешениям, конфиденциальности и политикам инструментов только для чтения с пояснениями «разрешено», «запрещено» или «требует проверки».
Временная диаграмма трассировки — Показывает сегменты трассировки агента как горизонтальные полосы на общей временной шкале с цветом по состоянию.
Трассировка стека — Разбирает трассировки стека JavaScript, TypeScript, браузера и Python на активные кадры с возможностью свернуть внутренние кадры.
Список задач — Обновляемый раскрываемый план агента со статусом каждого шага и вложенными подзадачами.
Терминал — Консоль ANSI только для чтения с потоковым выводом агента или инструмента, поиском и автоматическим удержанием нижней части в поле зрения.
Результаты тестов — Сводка успешных и неуспешных тестов со счётчиками по состояниям, фильтрами и автоматически раскрываемыми подробностями ошибок.
Панель рассуждений — Раскрываемая панель рассуждений агента ИИ в реальном времени или после завершения проверки.
Подтверждение вызова инструмента — Диалог для проверки, разрешения, отклонения или изменения предложенного вызова инструмента до выполнения.
Блок вызова инструмента — Раскрываемый блок одного вызова инструмента агента с аргументами, ошибкой и результатом.
Метка вызова инструмента — Компактная встроенная метка с названием, состоянием и длительностью одного вызова инструмента агента.
Форма параметров инструмента — Создаёт редактируемую форму из плоской JSON Schema инструмента для настройки аргументов вызова.
Результат инструмента — Модальное окно со статусом вызова инструмента, длительностью и полным результатом.
Просмотр результата инструмента — Показывает результат вызова инструмента с помощью зарегистрированного средства отображения или, если его нет, в формате JSON.
Выбор инструмента — Диалог с поиском и группировкой по категориям для выбора доступных инструментов агента.
Лента вызовов инструментов — Хронологический список вызовов инструментов агента с числом повторных попыток, ручным подтверждением и скрытием конфиденциальных полей.
Дерево трассировки — Раскрываемая иерархия трассировки агента или LLM с длительностью и необязательными столбцами токенов и стоимости.
Карточка результата — Карточка с рамкой, придающая пользовательскому отображению результата вид небольшой карточки.
Поле результата — Компактная строка «подпись — значение» для карточек результатов инструмента и плотных списков метаданных.
Приложение MCP — Запускает ресурс приложения MCP в изолированной среде и передаёт запросы к приложению как типизированные события.
Студия запросов — Независимая от поставщика рабочая область для редактирования, предпросмотра, версий, сохранения и запуска структурированных запросов.
Просмотр схемы JSON — Показывает дерево JSON Schema с возможностью выбора, ограничениями, обязательными полями, ветвями композиции и ошибками проверки.
Панель подагентов — Показывает управляемую иерархию запусков подагентов со статусом, задачей, моделью, прогрессом и действиями управления жизненным циклом.

Поиск и графы знаний

Карточка сообщества — Сводная карточка сообщества графа знаний с метками участников и переходом к подробностям.
Просмотр эмбеддингов — Доступная двумерная диаграмма координат эмбеддингов, предоставленных приложением, с необязательной раскраской кластеров и выбором точек.
Карточка сущности — Карточка сущности графа знаний со значком типа, свойствами, числом связей и действием для фокусировки на ней в графе.
Упоминание сущности — Встроенное упоминание сущности в тексте агента со всплывающим предпросмотром при наведении или фокусе.
Досье сущности — Подробная карточка сущности с заголовком, показателем уверенности и вкладками связей, подтверждающих фрагментов и происхождения данных.
Граф — Показывает связи между узлами в виде силовой диаграммы, которую можно перемещать и масштабировать.
Легенда графа — Легенда типов узлов связанного графа, которая также служит фильтром видимости.
Очередь загрузки документов — Управляемый список документов в конвейере загрузки с этапами, прогрессом, счётчиками и запросами повторной попытки или отмены.
База знаний — Список источников базы знаний для поиска со статусом синхронизации, состоянием индексации, разрешениями и действиями управления для каждой строки.
Управление базой знаний — Панель со вкладками, объединяющая источники базы знаний и очередь загрузки документов и передающая действия управления приложению.
Просмотр графа знаний — Интерфейс для изучения графа знаний с отображением графа, поиском сущностей, фильтрами типов, раскрытием соседних узлов и поиском путей.
Интеллект-карта — Радиальное раскрываемое дерево тем для просмотра иерархии и перехода к подробностям темы.
Список соседних узлов — Список связей одной сущности с действиями перехода и раскрытия в графе для каждой строки.
Палитра узлов — Библиотека узлов с поиском и категориями для перетаскивания или размещения узлов на полотне процесса.
Цепочка пути — Компактная прокручиваемая цепочка «узел — связь — узел», отображающая путь рассуждения GraphRAG.
Просмотр фрагментов — Ранжированный список найденных фрагментов RAG с индикаторами релевантности и ссылками на места в просмотрщике документов.
Значок цитаты — Встроенный маркер цитаты [n] с предпросмотром при наведении и цветом по уверенности или результату проверки.
Сводка подтверждений — Показывает оценку подтверждения утверждений: число свидетельств, охват цитатами, степень уверенности, предупреждения и ссылки на доказательства.
Панель памяти — Показывает рабочую память агента для краткосрочного контекста и долговременных сведений, а также действия с проверкой уверенности и подтверждения.
Панель происхождения данных — Показывает основания ответа в раскрываемой структуре сущностей, связей, сообществ и фрагментов.
Ответ RAG — Показывает ответ на основе предоставленных источников с безопасным Markdown, значками цитат, оценкой подтверждённости и раскрываемым предпросмотром источников.
Ход исследования — Показывает предоставленные приложением этапы исследования, число источников и общий прогресс.
Результаты поиска — Ранжированный список найденных фрагментов с устранением дублей, группировкой по источникам, выбором и компактным или подробным режимом просмотра.
Поиск информации — Поле запроса для поиска или RAG с фильтрами и областями поиска, выбором векторного, текстового или гибридного режима и отображением состояния.
Трассировка поиска — Лента этапов поискового конвейера с раскрываемыми сведениями о переформулировании запроса, построении эмбеддингов, поиске, повторном ранжировании и фильтрации.
Карточка источника — Показывает запись цитаты с названием источника, номером страницы, выдержкой и раскрываемым полным текстом.
Список источников — Раскрываемая панель, объединяющая карточки источников сообщения чата под одним заголовком.
Выбор источников — Дерево флажков для ограничения источников следующего ответа с трёхсостоянием папок, выбором всех и поиском.
Подтверждения утверждений — Проверяет сгенерированные утверждения по цитатам, показывая наличие подтверждения, уверенность и доказательства.
Панель оценки RAG — Показывает метрики качества RAG, тренды, срезы оценки и историю запусков по результатам, рассчитанным приложением.
Сравнение поиска — Сравнивает рядом ранжированные результаты поиска и повторного ранжирования с анализом пересечений и оценок.

Формы и поля ввода

Кнопка — Кнопка действия со стилями на основе дизайн-токенов, вариантами тона и размера и состоянием загрузки.
Флажок — Логический элемент формы с отмеченным, неотмеченным и неопределённым состояниями.
Группа флажков — Группирует связанные флажки в одно поле выбора с валидацией, привязанное к форме.
Редактор кода — Многострочное поле редактирования кода без зависимостей с необязательной колонкой номеров строк.
Выбор цвета — Нативное поле выбора цвета, связанное с формой, с подписью, подсказкой и сообщениями об ошибках проверки.
Комбинированное поле — Выбор одного или нескольких значений с фильтрацией: текстовое поле и выпадающий список вариантов.
Поле даты — Поле даты со всплывающим календарём и значением в формате ISO-8601.
Выбор даты — Встроенный календарь с сеткой месяца для выбора даты или диапазона дат.
Выбор эмодзи — Поле выбора эмодзи с поиском и управлением с клавиатуры, связанное с формой.
Кнопка со значком — Компактная доступная кнопка действия, содержащая только значок.
Поле ввода — Однострочное текстовое поле с необязательными подписью, подсказкой и сообщениями об ошибках проверки.
Выбор страны — Выбирает коды стран и территорий с переведёнными названиями, флагами и необязательным поиском.
Выбор валюты — Выбирает коды валют с переведёнными названиями, символами и необязательным поиском.
Выбор часового пояса — Выбирает идентификаторы часовых поясов из упорядоченного списка с необязательным поиском.
Выбор единицы — Выбирает единицы измерения с переведёнными названиями, символами и необязательным поиском.
Выбор локали — Выпадающий список для переключения текущей локали из закрытого набора, предоставленного реестром локалей библиотеки.
Числовое поле — Поле ввода числа с минимальным и максимальным значением, шагом и нативной проверкой ограничений.
Элемент выбора — Выбираемый элемент, который передаёт значение, метку, данные для группировки и статус в комбобокс.
Поле телефона — Поле номера телефона с учётом страны и значением формы в каноническом формате E.164.
Радиокнопка — Элемент управления для выбора одного варианта из группы, связанный с формой.
Группа радиокнопок — Группа радиокнопок с подписью и управлением с клавиатуры для выбора одного варианта.
Форма оценки по критериям — Настраиваемая форма оценки с критериями, категориями и комментариями, позволяющая отправить результат и перейти к следующему элементу очереди.
Список выбора — Выпадающий список для выбора одного значения из фиксированного набора.
Signature pad — Accessible form control for drawing a signature with pointer or keyboard input.
Ползунок — Управление числовым диапазоном, например температурой LLM или громкостью.
Выбор образца цвета — Выбор одного цвета из небольшого фиксированного набора образцов со встроенной семантикой группы радиокнопок.
Переключатель — Связанный с формой двоичный переключатель с нативной семантикой включения и выключения.
Текстовая область — Многострочное поле обычного текста с автоматическим увеличением высоты, проверкой и оформлением элемента формы.
Поле ввода времени — Сегментированное поле времени с учётом локали и всплывающим выбором значений по столбцам. Для нативного браузерного выбора времени используйте lr-native-time-input.
Диапазон времени — Ползунок с двумя бегунками для выбора начала и конца интервала на числовой шкале.
Кнопка-переключатель — Кнопка с двумя состояниями, которая сама включает и выключает параметр с семантикой aria-pressed.
Группа кнопок-переключателей — Объединяет кнопки-переключатели в одну остановку клавиатурного фокуса с множественным выбором или выбором одного варианта с возможностью сброса.
Нативное поле времени — Браузерное поле выбора времени с подписью, подсказкой и сообщениями об ошибках Lyra, когда нативный выбор предпочтительнее сегментированного lr-time-input.
Поле одноразового кода — Сегментированное поле для одноразового проверочного кода со встроенным автозаполнением из SMS.
Кнопка выбора — Элемент одиночного выбора в виде кнопки, а не круга; обычно объединяется с lr-radio-group в сегментированный переключатель.
Поле ввода меток — Связанное с формой поле для списка удаляемых меток, например тегов или получателей.

Отображение данных

Конструктор запросов к графу — Редактор типизированных запросов связей или путей в графе, связанный с формой, с исходными сущностями, фильтрами типов, ограничениями длины пути и сохранёнными запросами.
Календарь — Адаптивный календарь месяца с маркерами событий и просмотром расписания, доступным с клавиатуры.
Индикатор контекста — Сегментированный индикатор в виде полосы или кольца для бюджета токенов или контекстного окна.
Библиотека документов — Каталог документов с поиском и фильтрами, версиями, тегами, владельцами, актуальностью, сортировкой и массовым выбором.
Список переменных окружения — Скрытый список переменных окружения и секретов в виде пар «ключ — значение» с раскрытием и копированием отдельных строк.
Дерево файлов — Готовый файловый проводник на основе компонента дерева со значками состояния git и отложенной загрузкой папок.
Полотно процесса — Полотно с перемещением и масштабированием для построения и запуска визуальных процессов в виде направленных ациклических графов.
Управление процессом — Группа кнопок масштабирования, подгонки и блокировки для связанного полотна процесса.
Мини-карта процесса — Обзорная карта в углу с перетаскиваемым прямоугольником области просмотра для связанного полотна процесса.
Узел процесса — Карточка узла процесса с заголовком, цветовым обозначением статуса и точками соединения на полотне процесса.
Состояние выполнения процесса — Накладывает индикаторы состояния выполнения на полотно процесса и показывает компактную сводку этапов.
Воронка — Показывает отсев на этапах в виде столбцов, нормализованных к первому этапу.
Измеритель — Отображает одно значение в виде радиального, кольцевого или линейного индикатора.
Тепловая карта — Отображает матрицу или календарную сетку значений как тепловую карту на canvas с учётом изменения размера.
Постраничная навигация — Управляемая навигация по страницам с полем перехода к номеру страницы и сводкой диапазона элементов.
Конструктор условий — Конструктор структурированных запросов к табличным данным с условиями «поле — оператор — значение» и объединением через И или ИЛИ.
Полоса последовательности — Компактная полоса для каждого элемента, показывающая последовательность категориальных состояний цветными ячейками и необязательной отметкой.
Миниграфик — Строит компактный встроенный SVG-график тренда: линейный, с заливкой или столбчатый.
Показатель — Показывает один ключевой показатель с единицей измерения, отметкой тренда, дополнительными строками и необязательным миниграфиком.
Таблица — Представление данных в виде таблицы с сортируемыми заголовками, возможностью выбора, фильтрации и пагинацией.
Лента времени — Связанная последовательность прошлых событий для журналов аудита, истории агентов и списков изменений.
Элемент временной шкалы — Одна строка события для временной шкалы с цветным маркером, заголовком, временной меткой и описанием.
Дерево — Разворачиваемая/сворачиваемая иерархия для навигации по графам, документам или файловым деревьям.
Элемент дерева — Рекурсивно отображает один узел дерева и его дочерние элементы.
Облако слов — Показывает облако слов в SVG без зависимостей, изменяя размер каждого слова в зависимости от его веса.
Сетка данных — Виртуализированная сетка для больших или серверных наборов данных со встроенной сортировкой, фильтрацией, группировкой, пагинацией и выбором.

Диаграммы

Гистограмма (столбчатая) — Сравнение значений по категориям с помощью вертикальных или горизонтальных столбцов.
Диаграмма «ящик с усами» — Показывает распределение по заранее рассчитанному набору из пяти статистических показателей.
Пузырьковая диаграмма — Показывает три измерения каждой точки с помощью координат X и Y и радиуса пузырька.
Диаграмма — Основная обёртка Chart.js для линейных, столбчатых, круговых и других диаграмм.
Кольцевая диаграмма — Показывает пропорции частей к целому в виде сегментов кольца.
Гистограмма распределения — Объединяет числовые значения в интервалы одинаковой ширины, чтобы показать распределение.
Линейный график — Отслеживает тенденции по непрерывной оси с помощью одной или нескольких соединённых серий.
Лёгкая диаграмма — Линейная или столбчатая диаграмма на чистом SVG без зависимостей от Chart.js.
Круговая диаграмма — Показывает долю каждой категории от целого в виде секторов круга.
Полярная диаграмма — Полярная диаграмма, отображающая каждую категорию в виде сектора, масштабированного по значению.
Радарная диаграмма — Сравнивает несколько показателей одного ряда данных на радиальной сетке.
Диаграмма рассеяния — Показывает пары исходных координат X и Y на линейных осях.

Разметка и навигация

Аккордеон — Координирует группу раскрывающихся панелей, с возможностью открытия нескольких панелей одновременно.
Элемент аккордеона — Сворачиваемая раскрывающаяся панель, предназначенная для встраивания в группу аккордеона.
Панель навигации приложения — Адаптивная панель навигации: полный вид, только значки или наложение на мобильном экране.
Группа панели навигации — Раздел с заголовком для группировки пунктов панели навигации, который при необходимости можно свернуть.
Пункт панели навигации — Пункт панели навигации приложения со значком и подписью; в свёрнутом состоянии остаётся только значок.
Навигационная цепочка — Адаптивная цепочка, показывающая положение пользователя в иерархии страницы.
Элемент навигационной цепочки — Одна ссылка или подпись текущей страницы в навигационной цепочке.
Группа кнопок — Группирует связанные кнопки действий в один адаптивный, подписанный кластер.
Карточка — Контейнер контента с границей, включающий слоты для заголовка, медиа, подвала и действий.
Карусель — Доступная карусель с одним слайдом, поддерживающая навигацию с клавиатуры, индикаторы, зацикливание и автовоспроизведение.
Элемент карусели — Необязательная семантическая обёртка слайда, которая единообразно оформляет дочерний элемент карусели.
Палитра команд — Поисковое меню команд приложения с навигацией с клавиатуры и сочетаниями клавиш.
Группа элементов управления — Собирает разные поля формы и кнопки действий в одну адаптивную строку с выравниванием по центру.
Сетка панели показателей — Адаптивная сетка виджетов с управлением с клавиатуры, которая размещает элементы и отправляет запросы на перемещение, изменение размера и обработку пересечений.
Подробности — Доступная раскрываемая панель, которая показывает содержимое под заголовком.
Боковая панель — Изменяемая по размеру, сворачиваемая панель, прикреплённая к одному краю существующего макета.
Панель подробностей — Управляемая навигация от диаграммы или таблицы к связанным доказательствам, документам, сущностям или запускам агентов с навигационной цепочкой.
Элемент выпадающего списка — Псевдоним, совместимый с Web Awesome, для одной строки действия внутри выпадающего меню.
Панель фильтров — Строка фильтров панели показателей из полей Lyra и удаляемых меток с состояниями сброса и загрузки.
Меню — Семантическое меню действий с перемещаемым фокусом и вложенными подменю.
Элемент меню — Одна строка действия для меню, с необязательной иконкой, флажком или стилем удаления.
Элемент для изменения порядка — Одна строка внутри списка для изменения порядка, объединяющая кнопки «поднять вверх»/«опустить вниз» с произвольным содержимым в слотах.
Список с возможностью изменения порядка — Универсальный список строк, элементы которого можно переупорядочить с помощью кнопок для каждой строки или сочетания клавиш Ctrl/Cmd+Стрелка.
Заголовок меню — Добавляет неинтерактивный заголовок раздела для группировки связанных элементов внутри списка меню.
Панель меню — Горизонтальная панель меню приложения с выпадающими меню по заголовкам и полной навигацией с клавиатуры.
Элемент панели меню — Заголовок верхнего уровня панели меню, который открывает вложенное меню или выполняет действие по умолчанию.
Навигационное меню — Навигация в шапке сайта, состоящая из ссылок и выпадающих панелей, которая сворачивается за меню-переключателем при нехватке места.
Элемент навигационного меню — Одна запись в навигационном меню: ссылка на страницу или кнопка раскрытия, открывающая выпадающую панель.
Страница — Семантический контейнер приложения, в котором навигация переключается между боковой колонкой и модальной выдвижной панелью в зависимости от доступной ширины.
Адаптивная панель — Показывает содержимое в потоке страницы на широком экране и как выдвижную панель поверх страницы на узком.
Прокручиваемый контейнер — Адаптивная область прокрутки с необязательными кнопками «назад» и «вперёд» для рядов карточек и вкладок.
Сегментированный переключатель — Ряд кнопок для быстрого выбора одного из нескольких вариантов.
Разделение на панели — Делит панель показателей на части с изменяемым перетаскиванием размером и необязательным сворачиванием при нехватке места.
Разделённая панель — Делит содержимое на две области с одним перетаскиваемым разделителем — простой вариант многопанельного lr-multi-split.
Пошаговый процесс — Проводит пользователя через последовательность шагов с состоянием каждого шага и возможностью перейти к нему нажатием.
Группа вкладок — Показывает одну панель в light DOM за раз с полноценным управлением вкладками с клавиатуры.
Вкладка — Совместимый с Web Awesome и Shoelace элемент вкладки, связанный с панелью внутри группы через атрибуты panel и name.
Панель вкладки — Совместимая с Web Awesome и Shoelace панель, связанная с вкладкой внутри группы через атрибуты name и panel.
Виртуальный список — Отображает только видимые строки очень большой прокручиваемой коллекции.
Виджет — Панель с заголовком и необязательными кнопками сворачивания и разворачивания на весь экран.

Наложения и обратная связь

Область уведомлений — Размещает несколько кратких уведомлений в углу экрана.
Уведомление — Отдельное закрываемое уведомление с цветовым обозначением важности, необязательной иконкой и таймером автоматического закрытия.
Метка — Небольшая метка тега, фильтра или области действия с возможностью удаления или переключения.
Группа меток — Группа меток с необязательным индикатором переполнения «+N» при превышении заданного числа.
Оповещение — Закрываемое сообщение с необязательным таймером автоматического скрытия и передачей в общую область кратких уведомлений.
Значок — Компактная метка состояния для обозначения статуса, количества или категорий в тексте.
Информационный блок — Встроенный закрываемый блок для сообщений о состоянии, предупреждений и ошибок.
Контекстное меню — Открывает меню действий при нажатии правой кнопки мыши, долгом касании или сочетании Shift+F10 на любой области.
Диалоговое окно — Модальное окно с удержанием фокуса для подтверждений, форм и других задач, требующих внимания.
Выдвижная панель — Выдвигает модальную панель с любого края области просмотра для фильтров или контекстных элементов управления.
Выпадающее меню — Всплывающее меню действий, привязанное к предоставленному приложением элементу открытия.
Пустое состояние — Показывает отсутствие данных с иконкой, сообщением и необязательными действиями.
Сочетание клавиш — Показывает сочетание клавиш с учётом платформы в виде обозначений клавиш.
Всплывающая панель — Плавающая панель с закрытием по нажатию вне её для контекстного содержимого и элементов управления.
Позиционируемая панель — Базовый компонент, который выравнивает плавающую панель относительно опорного элемента; использует тот же механизм, что popover и tooltip.
Полоса прогресса — Горизонтальный индикатор определённого или неопределённого прогресса с необязательным значением.
Кольцевой индикатор прогресса — Круговой индикатор определённого или неопределённого прогресса с подписью в центре.
Оценка звёздами — Оценка с клавиатуры звёздами с частичным заполнением для дробных значений.
Заглушка загрузки — Анимированный заполнитель, который имитирует содержимое во время загрузки.
Индикатор загрузки — Анимированный индикатор неопределённого прогресса фоновой задачи.
Тег — Семантический вариант значка для обозначения ключевого слова или категории.
Подсказка — Всплывающая подсказка при наведении или фокусе, описывающая элемент, предоставленный приложением.

Просмотр документов и файлов

Просмотр архива — Показывает имена и сжатые размеры файлов в ZIP-архиве, не извлекая содержимое.
Просмотр календаря — Разбирает файл календаря .ics и показывает события с описанием, временем и местом.
Просмотр контактов — Загружает документ vCard и показывает доступную карточку для каждого контакта.
Просмотрщик CSV — Получает CSV-файл и отображает его строки в виртуализированной, прокручиваемой таблице.
Просмотр набора данных — Загружает текстовые данные с разделителями и показывает их как типизированную доступную таблицу.
Сравнение документов — Сравнивает две версии документа во встроенном или полноэкранном режиме, совмещая текстовые различия с предпросмотром документов.
Предпросмотр документа — Встроенный предпросмотр документа или вложения по MIME-типу с возможностью скачать файл, если просмотр недоступен.
Просмотр документа — Показывает документ в диалоговом окне с подключаемым средством отображения по MIME-типу.
Просмотр DOCX — Преобразует файл DOCX в очищенный семантический HTML с помощью mammoth.
Просмотр электронной книги — Отображает EPUB с навигацией по главам через необязательную зависимость epub.js.
Просмотр электронной почты — Разбирает и показывает письмо .eml с заголовками, очищенным содержимым и вложениями.
Просмотр GeoJSON — Загружает, проверяет и показывает объекты GeoJSON на карте.
Слой выделения — Наложение, которое рисует активируемые прямоугольники выделения поверх позиционированного содержимого документа.
Просмотр HTML — Загружает HTML по URL и безопасно показывает его после очистки.
Вставка HTML — Загружает фрагмент HTML и вставляет его в light DOM страницы после очистки.
Просмотр блокнота — Показывает Jupyter Notebook только для чтения с Markdown, кодом и расширенными результатами ячеек.
Панель страниц — Виртуализированная вертикальная лента миниатюр для перемещения по страницам документа.
Просмотр PDF — Загружает и показывает страницы PDF с масштабированием, номерами страниц и выделяемым текстовым слоем.
Просмотр PPTX — Просмотр презентации PowerPoint PPTX с доступным в браузере уровнем точности.
Просмотр электронных таблиц — Загружает и показывает книги .xlsx и старые .xls с вкладками листов и виртуализированными строками.
Просмотр SVG — Загружает по URL и безопасно показывает встроенный очищенный SVG-документ.
Просмотрщик XML — Сворачиваемое, копируемое древовидное представление для инспекции XML-документов.

Медиа и файлы

Метка вложения — Компактная метка файла, прикреплённого к сообщению, с состоянием загрузки, прогрессом и повторной попыткой.
Аватар — Небольшой маркер идентификации, отображающий иконку, изображение или инициалы в качестве запасного варианта для человека или сущности.
Анимированное изображение — Воспроизводит GIF, APNG или WebP с кнопками запуска и паузы и учётом настройки уменьшения анимации.
Анимация — Анимирует дочерний элемент слота с помощью готовых наборов или пользовательских ключевых кадров.
Кнопка вложения — Компактная кнопка прикрепления файла, открывающая выбор файла или меню возможностей в поле ввода сообщения.
Аудио- и видеоплеер — Плеер аудио и видео с синхронизированной расшифровкой, звуковой волной и настройкой скорости воспроизведения.
Группа аватаров — Показывает перекрывающиеся аватары компактным рядом и объединяет лишние в значок «+N».
Зона загрузки файлов — Превращает любую область в цель перетаскивания файлов без собственного диалога выбора.
Иконка файла — Локализованный значок типа файла, определяемый по MIME-типу или имени файла.
Выбор файла — Область для выбора файла нажатием или перетаскиванием, которая передаёт выбранные файлы приложению.
Флаг — Показывает флаг страны или языка в настраиваемой рамке, которая при необходимости может быть круглой.
Сравнение изображений — Ползунок с управлением с клавиатуры для сравнения изображений «до» и «после».
Просмотр изображений — Просмотр растровых изображений с перемещением и масштабированием, выделением областей и необязательными аннотациями.
Полноэкранный просмотр — Модальный просмотр изображений во весь экран с переходом назад и вперёд и масштабированием.
Карта — Обёртка MapLibre GL для карты с декларативной легендой, картограммами и маркерами.
Медиа-карточка — Встроенный предварительный просмотр изображения, видео или вложения файла внутри сообщения в чате.
Перемещение и масштабирование — Позволяет перемещать и масштабировать содержимое слота или одно изображение в пределах заданного масштаба.
Воспроизведение последовательности — Кнопки воспроизведения и паузы, которые с фиксированным интервалом перемещают индекс в заданном диапазоне.
QR-код — Кодирует любое значение в сканируемый символ QR-кода, отрисованный на холсте.
Видео — Встроенный видеоплеер с пользовательскими элементами управления, выбором субтитров и предварительным просмотром миниатюр.
Плейлист видео — Воспроизводит последовательность видео в навигируемом плейлисте, автоматически переходя к следующему по завершении текущего.
Масштабируемый фрейм — Предпросмотр в изолированном iframe с фиксированными ступенями масштаба. Для просмотра содержимого слота или изображения служит lr-pan-zoom.

Вспомогательные компоненты

Наблюдатель пересечений — Передаёт нативные записи о пересечении, когда содержимое слота входит в область просмотра или выходит из неё.
Наблюдатель изменений — Отслеживает изменения дочерних DOM-элементов и атрибутов в слотах и передаёт нативные записи изменений.
Наблюдатель размера — Отслеживает размер вложенных элементов и отправляет типизированные события его изменения без видимого оформления.
Кнопка копирования — Кнопка со значком, которая копирует текст в буфер обмена и подтверждает действие галочкой.
Просмотр различий — Показывает настоящее построчное сравнение двух строк с цветовым выделением в формате unified diff.
Разделитель — Семантический разделитель с настраиваемой темой для горизонтального или вертикального разделения содержимого.
Кнопка экспорта — Скачивает данные таблицы как CSV или JSON напрямую либо через меню выбора формата.
Форматирование байтов — Форматирует размер в байтах с учётом локали и настройкой основания единиц и точности.
Форматирование даты — Форматирование даты и времени с учетом локали с использованием Intl.DateTimeFormat.
Форматирование числа — Форматирование чисел, валюты и компактное форматирование с учетом локали с использованием Intl.NumberFormat.
Иконка — Отображает чёткие встроенные SVG-глифы из набора именованных путей без зависимостей.
Просмотр JSON — Раскрываемое дерево для изучения и копирования любых данных JSON.
Ввод известной даты — Поле даты из отдельных ввода дня, месяца и года для даты, которую пользователь уже знает.
Область объявлений — Визуально скрытая область ARIA, которая упорядочивает объявления для программ чтения с экрана.
Список упоминаний — Автодополнение упоминаний и команд с косой чертой, привязанное к положению курсора в поле ввода.
Состояние обновления — Показывает обратный отсчёт до следующего запланированного обновления с кнопками паузы и возобновления.
Случайное содержимое — Показывает дочерние элементы случайно или по порядку для вариантов текста A/B и отзывов.
Относительное время — Показывает относительную временную отметку с учётом локали и самостоятельно обновляет её.
Обучающий тур — Пошаговое интерактивное знакомство с продуктом.
Визуально скрыто — Скрывает контент визуально, сохраняя его доступным для программ чтения с экрана, и делает его видимым при получении фокуса.