CSS API-Referenz

Die CSS-API-Referenz behandelt pantoken's klassenbasierte Komponentenebene: Komponenten, Utilities, globale Regeln und Deklarationen, die auf dem Token-System aufbauen.

Komponenten

Name	Klasse	Zusammenfassung
agent-shell	.instui-agent-shell	Ein Oberflächen-Container für KI-Agenten.
alert	.instui-alert	Eine Inline-Nachricht mit einer Statusfarbleiste und einem maskierten Statusglyph aus dem gemeinsamen Icon-Set.
avatar	.instui-avatar	Ein Benutzeravatar, der Initialen oder ein Bild zeigt, standardmäßig rund.
badge	.instui-badge	Ein kleines Zähl- oder Statuspunkt, das über einer Ecke des Ziels platziert wird.
banner	.instui-banner	Eine ausblendbare, mit Icon versehene Nachrichtenfläche für Seiten- oder kontextbezogene Ankündigungen.
billboard	.instui-billboard	Ein großer Empty-State- oder Call-to-Action-Block: ein Hero-Icon oder Bild, eine Überschrift und eine Nachricht.
breadcrumb	.instui-breadcrumb	Eine Breadcrumb-Spur mit Trennzeichen; das letzte Breadcrumb ist die aktuelle Seite.
breadcrumb.link	li	Ein Breadcrumb (InstUI Breadcrumb.Link), ein <li> im <ol> des übergeordneten Elements; das letzte ist die aktuelle Seite.
button	.instui-button	Ein zugängliches Aktionssteuerelement, das aus der Token-Palette gestylt ist; standardmäßig primär.
byline	.instui-byline	Ein Media-Objekt: eine Hero-Figur neben einem Titel und einer Beschreibung.
calendar	.instui-calendar	Ein statisches Monatsgitter mit Navigation, Wochentagsköpfen und Tageszellen.
calendar.day	.day	Eine Tageszelle (InstUI Calendar.Day); -today, -selected und -outside-month kennzeichnen ihren Zustand.
card	.instui-card	Ein Oberflächen-Container, der beliebigen Inhalt annimmt.
checkbox	.instui-checkbox	Eine native Checkbox und ihr Label oder ein Switch über -variant-toggle.
close-button	.instui-close-button	Eine transparente Icon-Schaltfläche, die ihr eigenes ×-Glyph zeichnet, in drei Größen plus einer On-Color-Variante.
context-view	.instui-context-view	Ein erhobener Callout mit Karet, an jeder Seite positionierbar; funktioniert als native [popover].
drawer-layout	.instui-drawer-layout	Ein geteiltes Layout mit einer einklappbaren Seitenablage und einem primären, scrollbaren Inhaltsbereich.
drawer-layout.content	.content	Der primäre Inhaltsbereich, der den verbleibenden Platz neben der Ablage ausfüllt.
drawer-layout.tray	.tray	Das Seitenpanel neben dem Hauptinhalt, mit optionalen Overlay- und tray-ähnlichen Oberflächenmodifikatoren.
file-drop	.instui-file-drop	Eine Datei-Dropzone mit Hover-, akzeptierten und abgelehnten Zuständen.
form-field	.instui-form-field	Ein Form-Feld-Wrapper: ein Label, seine Controls und Inline-, required- oder readonly-Layouts.
form-field-group	.instui-form-field-group	Eine <fieldset>-Gruppe mit Legende, einer Spalten- oder Inline-Anordnung und konfigurierbarem Abstand.
form-field-messages	.instui-form-field-messages	Feldhilfe- und Validierungsnachrichten — Hinweis, Fehler, Erfolg und nur für Screenreader — mit einem Glyph bei Fehler und Erfolg.
heading	.instui-heading	Heading-Typografie von -level-h1 bis -level-h6.
img	.instui-img	Ein gestyltes <img> mit Display-, Crop- und Effekt-Modifiern, die übereinander gestapelt werden.
in-place-edit	.instui-in-place-edit	Ein [contenteditable], das bis zum Fokus als Text gelesen wird und dann Eingabe-Chrome anzeigt.
input-group	.instui-input-group	Eine Fassade um ein Texteingabefeld mit Slots für führende und nachgestellte Icons.
link	.instui-link	Ein gestylter Hyperlink mit Größen, einer inversen Variante für dunkle Hintergründe und inline- oder ungestylten Formen.
list	.instui-list	Eine Liste mit tokengesteuertem Abstand zwischen den Elementen.
list.item	.instui-list	Ein Listenelement (InstUI List.Item).
mask	.instui-mask	Ein inline-Overlay, das sein positioniertes Elternteil ausfüllt und seinen Inhalt zentriert — z. B. ein Spinner über einer Karte. Für ein Modal ist ein natives <dialog> vorzuziehen (dessen ::backdrop die Maske ist). Jeder dieser Modifikatoren ist auch global verfügbar (nackt oder an jede andere Komponente angehängt) — siehe die mask Global-Utility.
menu	.instui-menu	Eine Dropdown-Oberfläche mit Elementen, Gruppen und Trennlinien.
menu.group	.group	Eine beschriftete Gruppenüberschrift (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Ein Menüeintrag (InstUI Menu.Item); füge -disabled, -highlighted oder -active/[aria-checked] hinzu.
menu.separator	.separator	Eine Trennregel zwischen Elementen (InstUI Menu.Separator).
metric	.instui-metric	Eine beschriftete Statistik — ein großer Wert über einer Bildunterschrift.
modal	.instui-modal	Eine Dialogfläche (funktioniert auf einem nativen <dialog>); Header-/Body-/Footer-Teile.
modal.body	.body	Der Inhaltsbereich (InstUI Modal.Body); ein einzelnes <img> geht full-bleed.
modal.footer	.footer	Die Aktionszeile (InstUI Modal.Footer).
modal.header	.header	Die Titelzeile (InstUI Modal.Header).
number-input	.instui-number-input	Eine Zahlen-Eingabefassade mit einer +/- Spinner-Spalte.
pagination	.instui-pagination	Seitennavigation: nummerierte Seiten, erste, vorherige, nächste und letzte Pfeile sowie ein Auslassungszeichen für Lücken.
pagination.page	.page	Ein Seitenlink oder -button (InstUI Pagination.Page); die aktuelle Seite trägt [aria-current].
pill	.instui-pill	Ein kompakter Status-Label; füge ein führendes Glyph mit der gemeinsamen -icon-<name>-Form hinzu.
popover	.instui-popover	Eine erhöhte Oberfläche für ein natives [popover], positioniert mit CSS Anchor Positioning.
progress	.instui-progress	Eine determinate Fortschrittsleiste mit farbigem Messgerät, Größen und optionaler Wertermittlung.
progress-circle	.instui-progress-circle	Ein kreisförmiger Fortschrittsring, gesteuert durch --value und --value-max Custom Properties.
radio	.instui-radio	Ein nativer Radio-Button und sein Label.
radio-input-group	.instui-radio-input-group	Ein Single-Select-Radio <fieldset>, schlicht oder als verbundenes segmentiertes Toggle.
range-input	.instui-range-input	Ein gestylter Range-Slider mit einer invertierten Wertblase.
rating	.instui-rating	Eine Sternebwertung mit gefüllten und leeren Glyphen und einem optionalen numerischen Label.
side-nav-bar	.instui-side-nav-bar	Eine vertikale Navigationsschiene aus Symbol-über-Label-Elementen mit einem minimierten Nur-Symbole-Modus.
side-nav-bar.item	.item	Ein Navigationseintrag (InstUI SideNavBar.Item); -selected kennzeichnet den aktiven.
simple-select	.instui-simple-select	Ein gestyltes natives <select> mit Caret, das die Zustände und Größen des Texteingabefelds widerspiegelt.
spinner	.instui-spinner	Ein animierter Lade-Ring; geben Sie role="status" und ein aria-label an.
table	.instui-table	Eine gestylte Datentabelle für th und td plus eine optionale Beschriftung, mit Hover-, Fixed- und Stacked-Card-Layouts.
table.body	tbody	Die Datenzeilengruppe der Tabelle (InstUI Table.Body).
table.cell	td	Eine Datenzelle (InstUI Table.Cell).
table.col-header	th	Eine Spaltenkopfzelle (InstUI Table.ColHeader); das Standard-th-Styling, überschrieben durch table.row-header für th[scope="row"].
table.head	thead	Die Kopfzeilengruppe der Tabelle (InstUI Table.Head).
table.row	tr	Eine Tabellenzeile (InstUI Table.Row).
table.row-header	th[scope="row"]	Eine Zeilenkopfzelle (InstUI Table.RowHeader); gestylt anhand der Row-Header-Tokens, nicht der Column-Header-Tokens.
tabs	.instui-tabs	Ein Register-Panel-Set: eine Tab-Liste, auswählbare Tabs und deren Panels.
tabs.panel	.panel	Das Inhalts-Panel für einen Tab (InstUI Tabs.Panel).
tabs.tab	.tab	Ein einzelner Tab-Button (InstUI Tabs.Tab, konfiguriert über die Tab-Liste des Eltern-Tabs); -selected kennzeichnet den aktiven.
tag	.instui-tag	Ein Inline-Chip für ein Schlüsselwort oder einen Filter.
text	.instui-text	Fließtext-Typografie mit Größen-, Gewicht-, Farb- und Stil-Modifiers.
text-area	.instui-text-area	Ein gestyltes, größenverstellbares natives <textarea> mit denselben Zuständen und Größen wie das Texteingabefeld.
text-input	.instui-text-input	Ein gestyltes natives <input> — inklusive date, time und datetime-local, wobei der Browser den Picker stellt — mit Validierungszuständen und Größen.
toggle-details	.instui-toggle-details	Ein gestyltes natives <details> Disclosure mit rotierender Chevron.
toggle-group	.instui-toggle-group	Ein umrandetes Disclosure, aufgebaut auf <details>: eine Chevron-Zusammenfassungszeile und einklappbarer Inhalt.
tooltip	.instui-tooltip	Ein CSS-Hover- und Fokus-Tooltip-Bubble, positionierbar an jeder Seite.
tray	.instui-tray	Ein kanten-angeheftetes Panel, das von jeder Seite hereinschiebt; ein natives [popover] oder <dialog>.
tree-browser	.instui-tree-browser	Ein Disclosure-Baum aus verschachtelten Sammlungen und Blatt-Elementen mit rotierenden Chevrons.
view	.instui-view	Das View-Primitiv: eine neutrale Box mit Key-Value-Modifikatoren für Hintergrund, Rahmen, Radius, Schatten, Display, Position, Overflow und Cursor. Jeder dieser Modifikatoren ist auch global verfügbar (allein oder an jedes andere Komponenten-Element angehängt) — siehe die background/border/shadow/display/position/overflow/cursor Utilities.

Dienstprogramme

Name	Klasse	Zusammenfassung
color	.--text-danger	Semantische Farb-Utilities: .--bg-<name>, .--text-<name> (alias als .--color-<name>) und .--border-<name> für die kuratierte semantische Palette. Jede davon hat außerdem einen komponenten-gebundenen Alias-Modifier (z. B. -bg-danger auf jeder .instui-<component>).
cursor	.--cursor-pointer	cursor als komponierbare, globale Klasse — .--cursor-<value> — nutzbar allein oder angehängt an jede Komponente (.instui-button.--cursor-pointer).
gap	.--gap-md	Flex/Grid-gap-Utilities auf der Spacing-Skala, kurz (--gap-sm) oder lang (--gap-small) geschrieben. Nutzbar allein oder angehängt an jede Komponente (.instui-view.--gap-sm) — Komponenten, die bereits ihr eigenes gap aus einem komponentenspezifischen Token setzen, können dieses überschreiben.
icon	.instui-icon	Das Icon-System: .instui-icon-Größen plus der gemeinsame -icon-<name> Painter, der ein Glyphen-Maskierung (in currentColor) vor jedem Element anwendet.
layout	.--display-flex	Display- und Text-Align-Utilities — .--display-<value> und .--text-align-<value> — als komponierbare, globale Klassen, nutzbar allein oder angehängt an jede Komponente.
maskglobal	.--mask-overlay	Eine globale, doppelte Kopie der Overlay-Modifier der mask-Komponente — --mask-overlay, --mask-fullscreen, --mask-blur — nutzbar allein oder angehängt an jede Komponente, ohne sie in ein .instui-mask-Element zu wickeln.
overflow	.--overflow-x-hidden	overflow-x/overflow-y als komponierbare, globale Klassen — .--overflow-x-<value> / .--overflow-y-<value> — nutzbar allein oder angehängt an jede Komponente.
position	.--position-relative	position als komponierbare, globale Klasse — .--position-<value> — nutzbar allein oder angehängt an jede Komponente (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Show/Hide-Klassen für Viewport- oder Container-Breiten über eine thematisierte Breakpoint-Skala.
screen-reader-content	.instui-screen-reader-content	Inhalte visuell verbergen, dabei aber für Hilfstechnologien verfügbar halten (das Standard-Clip-Muster).
spacing	.--p-md	Margin- und Padding-Hilfsklassen — .--m<side>-<step> / .--margin-<side>-<step> und .--p<side>-<step> / .--padding-<side>-<step> auf der Abstands-Skala (Seiten t/b/s/e/x/y oder keine, kurz- oder ausgeschrieben — zum Beispiel sind --mb-sm und --margin-bottom-small dieselbe Regel; margin akzeptiert außerdem auto). Nutzbar alleine oder an jede Komponente angehängt (zum Beispiel class="instui-view --mb-sm").
stacking	.--stack-topmost	z-index Tiefen-Hilfsklassen — .--stack-<level> (deepest, below, above, topmost) — nutzbar alleine oder an jede Komponente angehängt, sodass Ebenen vorhersehbar gestapelt werden statt mit manuell getunten Zahlen.
transition	.instui-transition.-transition-fade-entering	Animations-Zustandsklassen für die Transition-Komponente — .instui-transition und Zustandsklassen (-transition-fade-entering, -transition-scale-exited, etc.) — nutzbar alleine oder an jede Komponente angehängt.
truncate	.--truncate	Ellipsis-Trunkierung mit Zeilenbegrenzung gesteuert durch --lines — nutzbar alleine oder an jede Komponente angehängt (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Eine Layout-Debug-Umrandung: .-with-visual-debug als zusammengesetzte Klasse auf jedes Element anwenden, um die Box und ihre unmittelbaren Kinder zu umranden, sodass die Struktur eines Layouts auf einen Blick sichtbar ist.

Regeln

Name	Klasse	Zusammenfassung
base	*	Der optional aktivierbare globale Reset: box-sizing, die Seitenfläche, Grundtextfarbe und Schriftart, color-scheme sowie Link-Standards.
prose	:where(body)	Typografische Standards für rohes HTML — Überschriften, Absätze, Listen, Links und Code — werden automatisch überall angewendet, wo es importiert wird (Standard :where(body)); übergebe options.scope, um eine andere Inhaltswurzel zu targetieren (z. B. .vp-doc).

Plugins

Name	Klasse	Zusammenfassung
logos	.logos	Instructure-Produktlogos als CSS-Bildtokens: --instui-logo-<product>-<layout>-<mode> enthält eine data-URI SVG, sodass ein Logo z. B. über background-image: var(--instui-logo-canvas-horizontal-color) gerendert wird.
primitives	.instui-bg-primitive-color-white	Opt-in Hilfsklassen für die rohe Primitive-Palette: .instui-bg-/fg-/border-primitive-color-<name> setzen eine Farbe aus den primitiven Farb-Tokens, plus font-family/font-weight Hilfen für die primitiven Font-Tokens. Aus den semantischen Hilfen herausgehalten, damit Überschreibungen dort rein semantisch bleiben.
visual-debug	.-with-visual-debug	Eine Layout-Debug-Umrandung: .-with-visual-debug als zusammengesetzte Klasse auf jedes Element anwenden, um die Box und ihre unmittelbaren Kinder zu umranden, sodass die Struktur eines Layouts auf einen Blick sichtbar ist.

layout

Name	Klasse	Zusammenfassung
callout	div[class~="instui-callout"]	Inline-Informationshinweis für eine kurze Erinnerung oder Notiz.
hero	div[class~="instui-hero"]	Vollbreite Kopfbereichssektion mit Titel, Untertitel und optionalem Hintergrundbild.
page-layout	div[class~="instui-page-layout"]	Standard-Layout mit drei Spalten: Kopf, Seitenleiste und Hauptinhalt.
rubric-note	div[class~="instui-rubric-note"]	Strukturierte Notiz mit Bewertungsrubriken und Bewertungshinweisen.
testimonial	div[class~="instui-testimonial"]	Zitat- oder Testimonial-Anzeige mit Attribution und optionaler Bildgebung.
two-column	div[class~="instui-two-column"]	Zweispaltiges Layout mit linken und rechten Inhaltsbereichen.
wrapper	body[class~="instui-display-flex"]	App-Shell-Reihe: Seiten-Navigation, Container mit Kopfbereich und optionales Panel.