CSS Справочник API

Справочник CSS API охватывает классовый слой компонентов pantoken: компоненты, утилиты, глобальные правила и декларации, построенные на системе токенов.

Компоненты

Имя	Класс	Краткое описание
agent-shell	.instui-agent-shell	Контейнер поверхности для AI-агентов.
alert	.instui-alert	Встроенное сообщение с цветной индикаторной полосой статуса и маскированным символом статуса из общего набора иконок.
avatar	.instui-avatar	Аватар пользователя, показывающий инициалы или изображение, по умолчанию круглой формы.
badge	.instui-badge	Небольшая метка-счетчик или индикатор статуса, размещаемая в углу целевого элемента.
banner	.instui-banner	Закрываемая поверхность сообщения с иконкой для объявлений на уровне страницы или в контексте.
billboard	.instui-billboard	Большой блок пустого состояния или призыва к действию: значок или изображение героя, заголовок и сообщение.
breadcrumb	.instui-breadcrumb	Хлебные крошки с разделителями; последняя крошка — текущая страница.
breadcrumb.link	li	Крошка (InstUI Breadcrumb.Link), <li> в родительском <ol>; последняя из них — текущая страница.
button	.instui-button	Доступный элемент управления действием, стилизованный из палитры токенов; по умолчанию первичный.
byline	.instui-byline	Медиа-объект: ключевая иллюстрация рядом с заголовком и описанием.
calendar	.instui-calendar	Статичная месячная сетка с навигацией, заголовками дней недели и ячейками дней.
calendar.day	.day	Ячейка дня (InstUI Calendar.Day); -today, -selected и -outside-month обозначают её состояние.
card	.instui-card	Контейнер поверхности, принимающий произвольное содержимое.
checkbox	.instui-checkbox	Нативный чекбокс и его метка, или переключатель через -variant-toggle.
close-button	.instui-close-button	Прозрачная кнопка-иконка, рисующая свой собственный символ ×, в трёх размерах плюс вариант для цветного фона.
context-view	.instui-context-view	Приподнятый колл-аут с указателем (caret), позиционируемый с любой стороны; работает как нативный [popover].
drawer-layout	.instui-drawer-layout	Разделённый макет со сворачиваемой боковой панелью и основной прокручиваемой областью содержимого.
drawer-layout.content	.content	Основная панель содержимого, заполняющая оставшееся пространство рядом с выдвижной панелью.
drawer-layout.tray	.tray	Боковая панель рядом с основным содержимым, с опциональным оверлеем и модификаторами поверхности типа выдвижного лотка.
file-drop	.instui-file-drop	Зона перетаскивания файлов с состояниями наведения, принятия и отклонения.
form-field	.instui-form-field	Обёртка поля формы: метка, её элементы управления и встроенные, обязательные или только для чтения макеты.
form-field-group	.instui-form-field-group	Группа <fieldset> с легендой, колоночной или встроенной раскладкой и настраиваемыми отступами.
form-field-messages	.instui-form-field-messages	Подсказки поля и сообщения валидации — подсказка, ошибка, успех и только для экранного читалки — с пиктограммой при ошибке и успехе.
heading	.instui-heading	Типографика заголовков от -level-h1 до -level-h6.
img	.instui-img	Стилизованный <img> с модификаторами отображения, обрезки и эффектов, которые накладываются друг на друга.
in-place-edit	.instui-in-place-edit	Элемент с [contenteditable], который читается как текст до фокуса, затем показывает элементы ввода.
input-group	.instui-input-group	Фасад вокруг текстового поля с слотами иконок слева и справа.
link	.instui-link	Стилизованная гиперссылка с размерами, инверсным вариантом для тёмных фонов и встроенными или нестилизованными формами.
list	.instui-list	Список с интервалами между элементами, задаваемыми токенами.
list.item	.instui-list	Элемент списка (InstUI List.Item).
mask	.instui-mask	Наложение в потоке, которое заполняет позиционированного родителя и центрирует содержимое — например, индикатор загрузки над карточкой. Для модального окна предпочтительнее нативный <dialog> (его ::backdrop — это маска). Каждый из этих модификаторов также доступен глобально (отдельно или в цепочке с любым другим компонентом) — см. глобальную утилиту mask.
menu	.instui-menu	Выпадающая поверхность элементов, групп и разделителей.
menu.group	.group	Маркированная группа заголовка (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Запись меню (InstUI Menu.Item); добавьте -disabled, -highlighted или -active/[aria-checked].
menu.separator	.separator	Разделительная линия между элементами (InstUI Menu.Separator).
metric	.instui-metric	Маркированная статистика — большое значение над подписью.
modal	.instui-modal	Поверхность диалога (работает на нативном <dialog>); части: заголовок/тело/футер.
modal.body	.body	Область содержимого (InstUI Modal.Body); одиночный <img> занимает всю ширину.
modal.footer	.footer	Ряд действий (InstUI Modal.Footer).
modal.header	.header	Ряд заголовка (InstUI Modal.Header).
number-input	.instui-number-input	Фасад числового ввода со столбцом спиннера +/-.
pagination	.instui-pagination	Постраничная навигация: пронумерованные страницы, стрелки «первая», «предыдущая», «следующая» и «последняя», а также многоточие для пропусков.
pagination.page	.page	Ссылка или кнопка страницы (InstUI Pagination.Page); текущая страница несёт [aria-current].
pill	.instui-pill	Компактная метка статуса; добавьте ведущую пиктограмму с общей формой -icon-<name>.
popover	.instui-popover	Приподнятая поверхность для нативного [popover], позиционируемая с помощью CSS anchor positioning.
progress	.instui-progress	Индикатор прогресса с определённым значением: цветная шкала, размеры и опциональная метка значения.
progress-circle	.instui-progress-circle	Круговой индикатор прогресса, управляемый пользовательскими свойствами --value и --value-max.
radio	.instui-radio	Нативная радио-кнопка и её метка.
radio-input-group	.instui-radio-input-group	Одноэлементный радиоблок <fieldset>, простой или как связанный сегментированный переключатель.
range-input	.instui-range-input	Стилизованный ползунок диапазона с пузырьком значения и инверсной версией.
rating	.instui-rating	Рейтинговая шкала со звездами с заполненными и пустыми символами и необязательной числовой меткой.
side-nav-bar	.instui-side-nav-bar	Вертикальная навигационная панель из элементов «иконка над подписью», с минимизированным режимом только-иконок.
side-nav-bar.item	.item	Пункт навигации (InstUI SideNavBar.Item); -selected отмечает активный.
simple-select	.instui-simple-select	Стилизованный нативный <select> с указателем, соответствующий состояниям и размерам текстового поля.
spinner	.instui-spinner	Анимированное кольцо загрузки; задайте role="status" и aria-label.
table	.instui-table	Стилизованная таблица данных для th и td плюс необязательная подпись, с эффектом при наведении, фиксированными и сверстанными «стек-картами».
table.body	tbody	Группа строк данных таблицы (InstUI Table.Body).
table.cell	td	Ячейка данных (InstUI Table.Cell).
table.col-header	th	Ячейка заголовка столбца (InstUI Table.ColHeader); стиль по умолчанию th переопределяется table.row-header для th[scope="row"].
table.head	thead	Группа строк заголовка таблицы (InstUI Table.Head).
table.row	tr	Строка таблицы (InstUI Table.Row).
table.row-header	th[scope="row"]	Ячейка-заголовок строки (InstUI Table.RowHeader); оформляется токенами заголовка строки, а не заголовка столбца.
tabs	.instui-tabs	Набор вкладок: список вкладок, выбираемые вкладки и их панели.
tabs.panel	.panel	Панель содержимого для вкладки (InstUI Tabs.Panel).
tabs.tab	.tab	Одна кнопка вкладки (InstUI Tabs.Tab, настраивается через родительский список вкладок Tabs); -selected отмечает активную.
tag	.instui-tag	Встроенный чип для ключевого слова или фильтра.
text	.instui-text	Типографика основного текста с модификаторами размера, веса, цвета и стиля.
text-area	.instui-text-area	Стилизованный, изменяемый по размеру нативный <textarea> с теми же состояниями и размерами, что и текстовое поле.
text-input	.instui-text-input	Стилизованный нативный <input>, включая date, time и datetime-local, где браузер предоставляет выборщик, с состояниями валидации и размерами.
toggle-details	.instui-toggle-details	Стилизованный нативный <details> раскрывающийся элемент с вращающимся-chevron.
toggle-group	.instui-toggle-group	С границей раскрывающийся элемент на базе <details>: строка сводки с-chevron и сворачиваемое содержимое.
tooltip	.instui-tooltip	Всплывающая подсказка на CSS для hover и focus, позиционируемая с любой стороны.
tray	.instui-tray	Панель, закреплённая у края, выезжающая с любой стороны; нативный [popover] или <dialog>.
tree-browser	.instui-tree-browser	Дерево раскрывающихся элементов из вложенных коллекций и листовых элементов с вращающимися-chevron.
view	.instui-view	Примитив View: нейтральный контейнер с модификаторами ключ-значение для фона, рамки, радиуса, тени, дисплея, позиции, переполнения и курсора. Каждый из этих модификаторов также доступен глобально (без префикса или в цепочке на любом компоненте) — см. утилиты background/border/shadow/display/position/overflow/cursor.

Утилиты

Имя	Класс	Краткое описание
color	.--text-danger	Утилиты семантических цветов: .--bg-<name>, .--text-<name> (псевдоним .--color-<name>) и .--border-<name> для кураторской семантической палитры. У каждого также есть алиас-модификатор, присоединяемый к компоненту (например, -bg-danger на любом .instui-<component>).
cursor	.--cursor-pointer	cursor как компонуемый глобальный класс — .--cursor-<value> — применимый без префикса или в цепочке к любому компоненту (.instui-button.--cursor-pointer).
gap	.--gap-md	Утилиты flex/grid gap на шкале отступов, короткое (--gap-sm) или полное (--gap-small) написание. Применимо без префикса или в цепочке к любому компоненту (.instui-view.--gap-sm) — компоненты, которые уже задают собственный gap из специфичного токена компонента, могут получить его переопределение.
icon	.instui-icon	Система иконок: размеры .instui-icon плюс общий отрисовщик -icon-<name>, который маскирует глиф (в currentColor) перед любым элементом.
layout	.--display-flex	Утилиты отображения и выравнивания текста — .--display-<value> и .--text-align-<value> — как компонуемые глобальные классы, применимые без префикса или в цепочке к любому компоненту.
maskglobal	.--mask-overlay	Глобальная двойная копия оверлей-модификаторов компонента mask — --mask-overlay, --mask-fullscreen, --mask-blur — применимая без префикса или в цепочке к любому компоненту, без обёртки в элемент .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y как компонуемые глобальные классы — .--overflow-x-<value> / .--overflow-y-<value> — применимые без префикса или в цепочке к любому компоненту.
position	.--position-relative	position как компонуемый глобальный класс — .--position-<value> — применимый без префикса или в цепочке к любому компоненту (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Классы показа/скрытия по ширине окна просмотра или контейнера по тематической шкале точек останова.
screen-reader-content	.instui-screen-reader-content	Визуально скрывает содержимое, сохраняя его доступным для вспомогательных технологий (стандартный шаблон clip).
spacing	.--p-md	Утилиты отступов и полей — .--m<side>-<step> / .--margin-<side>-<step> и .--p<side>-<step> / .--padding-<side>-<step> по шкале отступов (стороны t/b/s/e/x/y либо отсутствуют, в коротком или полном варианте — например --mb-sm и --margin-bottom-small — одно и то же правило; margin также принимает auto). Можно использовать отдельно или цепочкой на любом компоненте (например class="instui-view --mb-sm").
stacking	.--stack-topmost	Утилиты глубины z-index — .--stack-<level> (deepest, below, above, topmost) — можно использовать отдельно или цепочкой на любом компоненте, чтобы слои упорядочивались предсказуемо, а не по вручную подобранным числам.
transition	.instui-transition.-transition-fade-entering	Классы состояния анимации для компонента Transition — .instui-transition и классы состояния (-transition-fade-entering, -transition-scale-exited и т.д.) — можно использовать отдельно или цепочкой на любом компоненте.
truncate	.--truncate	Усечение с многоточием с ограничением числа строк, управляемое через --lines — можно использовать отдельно или цепочкой на любом компоненте (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Контур для отладки компоновки: составной класс .-with-visual-debug применяется к любому элементу, чтобы обвести коробку и её непосредственных потомков, делая структуру макета видимой с первого взгляда.

Правила

Имя	Класс	Краткое описание
base	*	Глобальный сброс по выбору: box-sizing, поверхность страницы, базовый цвет текста и шрифт, color-scheme и значения по умолчанию для ссылок.
prose	:where(body)	Типографические значения по умолчанию для сырого HTML — заголовки, абзацы, списки, ссылки и код — применяются автоматически везде, где импортируется (по умолчанию :where(body)); передайте options.scope, чтобы нацелить другой корневой контейнер контента (например .vp-doc).

Plugins

Имя	Класс	Краткое описание
logos	.logos	Логотипы продуктов Instructure как CSS-имидж-токены: --instui-logo-<product>-<layout>-<mode> содержит data-URI SVG, поэтому логотип рендерится, например, через background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Утилитные классы по выбору для примитивной палитры: .instui-bg-/fg-/border-primitive-color-<name> задают цвет из примитивных цветовых токенов, а также утилиты font-family/font-weight для примитивных шрифтовых токенов. Выведены из семантических утилит, чтобы переопределения там оставались только семантическими.
visual-debug	.-with-visual-debug	Контур для отладки компоновки: составной класс .-with-visual-debug применяется к любому элементу, чтобы обвести коробку и её непосредственных потомков, делая структуру макета видимой с первого взгляда.

layout

Имя	Класс	Краткое описание
callout	div[class~="instui-callout"]	Встроенное информационное уведомление для короткого напоминания или заметки.
hero	div[class~="instui-hero"]	Широкая секция заголовка на всю ширину с заголовком, подзаголовком и опциональным фоновым изображением.
page-layout	div[class~="instui-page-layout"]	Стандартная трёхколоночная страница с шапкой, боковой панелью и основным контентом.
rubric-note	div[class~="instui-rubric-note"]	Структурированная заметка с рубрикатором и индикаторами оценки.
testimonial	div[class~="instui-testimonial"]	Отображение цитаты или отзыва с указанием автора и опциональным изображением.
two-column	div[class~="instui-two-column"]	Двухколоночная раскладка с левым и правым областями содержимого.
wrapper	body[class~="instui-display-flex"]	Строка оболочки приложения: боковая навигация, контейнер с заголовком и опциональная панель.