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	Бічна панель поряд із основним вмістом, з опційними накладеннями та модифікаторами виду лотка (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> з caret-елементом, що відповідає станам і розмірам текстового поля.
spinner	.instui-spinner	Анімоване кільце завантаження; додайте role="status" та aria-label.
table	.instui-table	Стилізована таблиця даних для th та td плюс необов’язковий підпис, з hover, фіксованим та stacked-card макетами.
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); стилізується з токенів row-header, а не column-header.
tabs	.instui-tabs	Набір вкладених панелей з вкладками: список вкладок, вибірні вкладки та їхні панелі.
tabs.panel	.panel	Контент-панель для вкладки (InstUI Tabs.Panel).
tabs.tab	.tab	Одна кнопка вкладки (InstUI Tabs.Tab, конфігурована через tab list батьківського 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> disclosure з обертовим шевроном.
toggle-group	.instui-toggle-group	Контурний disclosure на базі <details>: рядок-резюме з шевроном і згортуваний вміст.
tooltip	.instui-tooltip	Підказка (tooltip) з CSS hover та focus, що може розташовуватись з будь-якого боку.
tray	.instui-tray	Панель, прикріплена до краю, що висувається з будь-якого боку; нативний [popover] або <dialog>.
tree-browser	.instui-tree-browser	Дерево disclosure із вкладеними колекціями та листовими елементами, із обертовими шевронами.
view	.instui-view	Примітив View: нейтральний блок із модифікаторами ключ-значення для фону, рамки, радіуса, тіні, відображення, позиціонування, overflow та курсору. Кожен із цих модифікаторів доступний також глобально (сам по собі або в ланцюжку з будь-яким іншим компонентом) — див. утиліти 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 плюс спільний painter -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-"]	Класи показу/приховування за шириною вікна перегляду або контейнера по тематичній шкалі breakpoint-ів.
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"]	Шаблон app-shell у рядку: бічна навігація, контейнер із заголовком і опціональна панель.