CSS Αναφορά API

Η τεκμηρίωση του CSS API καλύπτει το στρώμα συστατικών βάσει κλάσεων του pantoken: components, utilities, global rules και declarations που βασίζονται στο σύστημα token.

Συστατικά

Όνομα	Κλάση	Περίληψη
agent-shell	.instui-agent-shell	Ένα κοντέινερ επιφάνειας για πράκτορες AI.
alert	.instui-alert	Ένα ενσωματωμένο μήνυμα με μπάρα χρώματος κατάστασης και ένα μάσκα-εικονίδιο κατάστασης από το κοινό σετ εικονιδίων.
avatar	.instui-avatar	Ένα avatar χρήστη που εμφανίζει αρχικά ή μια εικόνα, κυκλικό ως προεπιλογή.
badge	.instui-badge	Μια μικρή ένδειξη πλήθους ή κατάστασης τοποθετημένη πάνω σε μια γωνία του στόχου.
banner	.instui-banner	Μια μήνυμα επιφάνειας με εικονίδιο που μπορεί να απορριφθεί, για ανακοινώσεις σε επίπεδο σελίδας ή εντός πλαισίου.
billboard	.instui-billboard	Ένα μεγάλο μπλοκ empty-state ή call-to-action: ένα κύριο εικονίδιο ή εικόνα, μια επικεφαλίδα και ένα μήνυμα.
breadcrumb	.instui-breadcrumb	Μια διαδρομή breadcrumb με διαχωριστικά· το τελευταίο ψίχουλο είναι η τρέχουσα σελίδα.
breadcrumb.link	li	Ένα ψίχουλο (InstUI Breadcrumb.Link), ένα <li> μέσα στο <ol> του γονέα· το τελευταίο είναι η τρέχουσα σελίδα.
button	.instui-button	Έλεγχος ενέργειας προσβάσιμος, στιλιζαρισμένος από την παλέτα token· προεπιλογή είναι primary.
byline	.instui-byline	Ένα media object: μια κύρια φιγούρα δίπλα σε τίτλο και περιγραφή.
calendar	.instui-calendar	Ένα στατικό πλέγμα μηνός με πλοήγηση, κεφαλίδες ημερών εβδομάδας και κύτταρα ημερών.
calendar.day	.day	Ένα κύτταρο ημέρας (InstUI Calendar.Day); -today, -selected και -outside-month δηλώνουν την κατάσταση του.
card	.instui-card	Ένα κοντέινερ επιφάνειας που δέχεται αυθαίρετο περιεχόμενο.
checkbox	.instui-checkbox	Ένα εγγενές checkbox και η ετικέτα του, ή ένα switch μέσω -variant-toggle.
close-button	.instui-close-button	Ένα διαφανές κουμπί-εικονίδιο που σχεδιάζει το δικό του × εικονίδιο, σε τρία μεγέθη συν μια on-color παραλλαγή.
context-view	.instui-context-view	Μια ανυψωμένη κλήση προσοχής με caret, τοποθετήσιμη σε οποιαδήποτε πλευρά· λειτουργεί ως εγγενές [popover].
drawer-layout	.instui-drawer-layout	Ένα διαχωρισμένο layout με συρταρωτό πλαϊνό tray που κλείνει και ένα κύριο κύλινδρο περιεχομένου με κύλιση.
drawer-layout.content	.content	Ο κύριος πίνακας περιεχομένου που γεμίζει τον υπόλοιπο χώρο δίπλα στο tray.
drawer-layout.tray	.tray	Το πλαϊνό πάνελ δίπλα στο κύριο περιεχόμενο, με προαιρετικό overlay και τροποποιητές επιφάνειας τύπου tray.
file-drop	.instui-file-drop	Μια περιοχή απόθεσης αρχείων με κατάστασεις hover, accepted και rejected.
form-field	.instui-form-field	Ένας περιτυλιγτής πεδίου φόρμας: μια ετικέτα, τα στοιχεία ελέγχου της και inline, required ή readonly διατάξεις.
form-field-group	.instui-form-field-group	Μια ομάδα <fieldset> με legend, διάταξη σε στήλη ή inline και ρυθμιζόμενο spacing.
form-field-messages	.instui-form-field-messages	Βοήθεια πεδίου και μηνύματα επικύρωσης — hint, error, success και μόνο για screen-reader — με ένα glyph σε error και success.
heading	.instui-heading	Τυπογραφία επικεφαλίδων από -level-h1 έως -level-h6.
img	.instui-img	Μια στιλιζαρισμένη <img> με modifiers εμφάνισης, κοπής και εφέ που στοιβάζονται.
in-place-edit	.instui-in-place-edit	Ένα [contenteditable] που διαβάζεται ως κείμενο μέχρι να λάβει focus, οπότε εμφανίζει chrome εισόδου.
input-group	.instui-input-group	Μια πρόσοψη γύρω από ένα πεδίο κειμένου με θέσεις για εικονίδια πριν και μετά.
link	.instui-link	Ένας στιλιζαρισμένος υπερσύνδεσμος με μεγέθη, μια αντίστροφη παραλλαγή για σκούρα υπόβαθρα, και inline ή unstyled μορφές.
list	.instui-list	Μια λίστα με αντικείμενα που έχουν spacing καθορισμένο από tokens.
list.item	.instui-list	Ένα στοιχείο λίστας (InstUI List.Item).
mask	.instui-mask	Ένα overlay εντός ροής που γεμίζει τον τοποθετημένο γονέα του και κεντράρει το περιεχόμενό του — π.χ. ένας spinner πάνω σε κάρτα. Για modal, προτιμήστε ένα εγγενές <dialog> (ο ::backdrop του είναι η μάσκα). Κάθε ένας από αυτούς τους τροποποιητές είναι επίσης διαθέσιμος παγκοσμίως (γυμνός, ή συνδεδεμένος σε οποιοδήποτε άλλο component) — δείτε το mask global utility.
menu	.instui-menu	Μια επιφάνεια dropdown με αντικείμενα, ομάδες και διαχωριστικά.
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>); μέρη header/body/footer.
modal.body	.body	Η περιοχή περιεχομένου (InstUI Modal.Body); ένα μοναχικό <img> γίνεται full-bleed.
modal.footer	.footer	Η σειρά ενεργειών (InstUI Modal.Footer).
modal.header	.header	Η σειρά τίτλου (InstUI Modal.Header).
number-input	.instui-number-input	Μια πρόσοψη αριθμητικής εισαγωγής με μια στήλη +/- spinner.
pagination	.instui-pagination	Πλοήγηση σελίδων: αριθμημένες σελίδες, πρώτα, προηγούμενα, επόμενα και τελευταίοι βέλη, και αποσιωπητικά για κενά.
pagination.page	.page	Ένας σύνδεσμος σελίδας ή κουμπί (InstUI Pagination.Page); η τρέχουσα σελίδα φέρει [aria-current].
pill	.instui-pill	Μια συμπαγής ετικέτα κατάστασης· προσθέστε ένα προεξέχον glyph με τη κοινή μορφή -icon-<name>.
popover	.instui-popover	Μια ανυψωμένη επιφάνεια για ένα εγγενές [popover], τοποθετημένη με CSS anchor positioning.
progress	.instui-progress	Μια προσδιορισμένη γραμμή προόδου με έγχρωμο μετρητή, μεγέθη και προαιρετική ετικέτα τιμής.
progress-circle	.instui-progress-circle	Ένας κυκλικός δακτύλιος προόδου που καθοδηγείται από τις custom properties --value και --value-max.
radio	.instui-radio	Ένα εγγενές radio button και η ετικέτα του.
radio-input-group	.instui-radio-input-group	Μια single-select radio <fieldset>, απλή ή ως συνδεδεμένο segmented toggle.
range-input	.instui-range-input	Ένας στιλιζαρισμένος range slider με αντίστροφη φυσαλίδα τιμής.
rating	.instui-rating	Μια βαθμολογία με αστέρια με συμπληρωμένα και κενά γλυφικά και προαιρετική αριθμητική ετικέτα.
side-nav-bar	.instui-side-nav-bar	Κάθετος σιδηρόδρομος πλοήγησης με στοιχεία εικονίδια-πάνω-από-ετικέτα, με ελαχιστοποιημένη λειτουργία μόνο με εικονίδια.
side-nav-bar.item	.item	Μια εγγραφή πλοήγησης (InstUI SideNavBar.Item); -selected σημειώνει την ενεργή.
simple-select	.instui-simple-select	Ένα στιλιζαρισμένο native <select> με δείκτη (caret), ταιριάζοντας τις καταστάσεις και τα μεγέθη του πεδίου κειμένου.
spinner	.instui-spinner	Μια κινούμενη δακτυλιοειδής ένδειξη φόρτωσης· δώστε της role="status" και ένα aria-label.
table	.instui-table	Ένας στιλιζαρισμένος πίνακας δεδομένων για th και td συν προαιρετική λεζάντα, με hover, σταθερή και στοίβα-κάρτας διατάξεις.
table.body	tbody	Η ομάδα γραμμών δεδομένων του πίνακα (InstUI Table.Body).
table.cell	td	Ένα κελί δεδομένων (InstUI Table.Cell).
table.col-header	th	Ένα κελί κεφαλίδας στήλης (InstUI Table.ColHeader); το προεπιλεγμένο styling 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); στιλιζάρεται από τους tokens της κεφαλίδας γραμμής, όχι από εκείνους της κεφαλίδας στήλης.
tabs	.instui-tabs	Μια σετ καρτελών: μια λίστα καρτελών, επιλέξιμες καρτέλες και τα πάνελ τους.
tabs.panel	.panel	Το πάνελ περιεχομένου για μια καρτέλα (InstUI Tabs.Panel).
tabs.tab	.tab	Ένα μεμονωμένο κουμπί καρτέλας (InstUI Tabs.Tab, διαμορφωμένο μέσω της λίστας καρτελών του γονικού Tabs); -selected σημειώνει την ενεργή.
tag	.instui-tag	Ένα inline chip για μια λέξη-κλειδί ή φίλτρο.
text	.instui-text	Τυπογραφία για σώμα κειμένου με τροποποιητές μεγέθους, βάρους, χρώματος και στυλ.
text-area	.instui-text-area	Ένα στιλιζαρισμένο, προσαρμόσιμο native <textarea> με τις ίδιες καταστάσεις και μεγέθη όπως το πεδίο κειμένου.
text-input	.instui-text-input	Ένα στιλιζαρισμένο native <input> — συμπεριλαμβανομένων date, time και datetime-local, όπου ο περιηγητής παρέχει τον επιλέκτη — με καταστάσεις επικύρωσης και μεγέθη.
toggle-details	.instui-toggle-details	Ένα στιλιζαρισμένο native <details> disclosure με περιστρεφόμενη κεφαλή (chevron).
toggle-group	.instui-toggle-group	Μια disclosure με περίγραμμα βασισμένη σε <details>: μια σύνοψη σειράς με chevron και συρρικνούμενο περιεχόμενο.
tooltip	.instui-tooltip	Μια CSS tooltip φυσαλίδα για hover και focus, τοποθετήσιμη σε οποιοδήποτε πλευρό.
tray	.instui-tray	Ένα πάνελ καρφωμένο στην άκρη που σύρεται από οποιαδήποτε πλευρά· ένα native [popover] ή <dialog>.
tree-browser	.instui-tree-browser	Ένα δέντρο disclosure με εμφωλευμένες συλλογές και φύλλα αντικειμένων, με περιστρεφόμενα chevrons.
view	.instui-view	Το primitive View: ένα ουδέτερο πλαίσιο με τροποποιητές κλειδί-τιμή για φόντο, περίγραμμα, ακτίνα, σκιά, εμφάνιση, θέση, overflow και δείκτη (cursor). Κάθε ένας από αυτούς τους τροποποιητές είναι επίσης διαθέσιμος παγκοσμίως (μόνος ή αλυσιδωτός πάνω σε οποιοδήποτε άλλο component) — δείτε τις βοηθητικές background/border/shadow/display/position/overflow/cursor.

Βοηθητικά

Όνομα	Κλάση	Περίληψη
color	.--text-danger	Βοηθητικά χρώματος με σημασιολογία: .--bg-<name>, .--text-<name> (υποκείμενο ως .--color-<name>), και .--border-<name> για την επιμελημένη σημασιολογική παλέτα. Κάθε ένα από αυτά έχει επίσης ένα alias τροποποιητή προσαρτημένο στο component (π.χ. -bg-danger σε οποιοδήποτε .instui-<component>).
cursor	.--cursor-pointer	cursor ως συνθετική, παγκόσμια κλάση — .--cursor-<value> — χρησιμοποιήσιμη μόνη ή αλυσιδωτή σε οποιοδήποτε component (.instui-button.--cursor-pointer).
gap	.--gap-md	Βοηθητικά flex/grid gap στην κλίμακα spacing, σύντομη (--gap-sm) ή μακρά (--gap-small) ορθογραφία. Χρησιμοποιήσιμα μόνα ή αλυσιδωτά σε οποιοδήποτε component (.instui-view.--gap-sm) — components που ήδη ορίζουν το δικό τους gap από ειδικό token component μπορεί να το έχουν παρακαμφθεί.
icon	.instui-icon	Το σύστημα εικονιδίων: .instui-icon μεγέθη συν τον κοινό -icon-<name> painter που μάσκαρε ένα γλυφικό (σε currentColor) πριν από οποιοδήποτε στοιχείο.
layout	.--display-flex	Βοηθητικά εμφάνισης και στοίχισης κειμένου — .--display-<value> και .--text-align-<value> — ως συνθετικές, παγκόσμιες κλάσεις, χρησιμοποιήσιμες μόνες ή αλυσιδωτές σε οποιοδήποτε component.
maskglobal	.--mask-overlay	Μια παγκόσμια, διπλή αντιγραφή των overlay τροποποιητών του component mask — --mask-overlay, --mask-fullscreen, --mask-blur — χρησιμοποιήσιμη μόνη ή αλυσιδωτή σε οποιοδήποτε component, χωρίς να τυλίγεται σε στοιχείο .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y ως συνθετικές, παγκόσμιες κλάσεις — .--overflow-x-<value> / .--overflow-y-<value> — χρησιμοποιήσιμες μόνες ή αλυσιδωτές σε οποιοδήποτε component.
position	.--position-relative	position ως συνθετική, παγκόσμια κλάση — .--position-<value> — χρησιμοποιήσιμη μόνη ή αλυσιδωτή σε οποιοδήποτε component (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Κλάσεις εμφάνισης/απόκρυψης ανά πλάτος viewport ή container σε μια θεματισμένη κλίμακα breakpoints.
screen-reader-content	.instui-screen-reader-content	Οπτικά αποκρύπτει περιεχόμενο ενώ το κρατά διαθέσιμο για βοηθητική τεχνολογία (το πρότυπο clip pattern).
spacing	.--p-md	Βοηθητικές κλάσεις για margin και padding — .--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). Μπορεί να χρησιμοποιηθεί μεμονωμένα ή αλυσιδωτά σε οποιοδήποτε component (για παράδειγμα class="instui-view --mb-sm").
stacking	.--stack-topmost	Βοηθητικές κλάσεις βάθους z-index — .--stack-<level> (deepest, below, above, topmost) — χρησιμοποιήσιμες μεμονωμένα ή αλυσιδωτά σε οποιοδήποτε component, ώστε τα στρώματα να στοιβάζονται προβλέψιμα αντί για με χειροποίητους αριθμούς.
transition	.instui-transition.-transition-fade-entering	Κλάσεις κατάστασης animation για το component Transition — .instui-transition και κλάσεις κατάστασης (-transition-fade-entering, -transition-scale-exited, κ.λπ.) — χρησιμοποιήσιμες μεμονωμένα ή αλυσιδωτά σε οποιοδήποτε component.
truncate	.--truncate	Αποκοπή με ελλειψή και έλεγχο αναδίπλωσης γραμμών μέσω --lines — χρησιμοποιήσιμη μεμονωμένα ή αλυσιδωτά σε οποιοδήποτε component (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Ένα outline για debugging layout: εφαρμόστε συσσωρευτικά .-with-visual-debug σε οποιοδήποτε στοιχείο για να περιγράψετε το πλαίσιο και τα άμεσα παιδιά του, ώστε η δομή του layout να γίνεται ορατή με μια ματιά.

Κανόνες

Όνομα	Κλάση	Περίληψη
base	*	Προαιρετικό global reset: box-sizing, η επιφάνεια της σελίδας, βασικό χρώμα κειμένου και γραμματοσειρά, color-scheme, και οι προεπιλογές για links.
prose	:where(body)	Τυπογραφικές προεπιλογές για ακατέργαστο HTML — επικεφαλίδες, παράγραφοι, λίστες, σύνδεσμοι και code — εφαρμόζονται αυτόματα όπου εισάγεται (προεπιλογή :where(body)); δώστε options.scope για να στοχεύσετε άλλη ρίζα περιεχομένου (π.χ. .vp-doc).

Plugins

Όνομα	Κλάση	Περίληψη
logos	.logos	Λογότυπα προϊόντων Instructure ως CSS image tokens: --instui-logo-<product>-<layout>-<mode> περιέχει ένα data-URI SVG, οπότε ένα λογότυπο σχεδιάζεται μέσω π.χ. background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Προαιρετικές utility κλάσεις για την ακατέργαστη primitive παλέτα: .instui-bg-/fg-/border-primitive-color-<name> χρωματίζουν από τα primitive colour tokens, συν font-family/font-weight utilities για τα primitive font tokens. Διατηρούνται εκτός των semantic utilities ώστε οι παρακάμψεις εκεί να παραμένουν μόνο σημασιολογικές.
visual-debug	.-with-visual-debug	Ένα outline για debugging layout: εφαρμόστε συσσωρευτικά .-with-visual-debug σε οποιοδήποτε στοιχείο για να περιγράψετε το πλαίσιο και τα άμεσα παιδιά του, ώστε η δομή του layout να γίνεται ορατή με μια ματιά.

layout

Όνομα	Κλάση	Περίληψη
callout	div[class~="instui-callout"]	Σύντομη inline ειδοποίηση πληροφοριών για υπενθύμιση ή σημείωση.
hero	div[class~="instui-hero"]	Ενότητα κεφαλίδας πλήρους πλάτους με τίτλο, υπότιτλο και προαιρετική εικόνα φόντου.
page-layout	div[class~="instui-page-layout"]	Τυπική σελίδα με τρεις στήλες: κεφαλίδα, sidebar και κύριο περιεχόμενο.
rubric-note	div[class~="instui-rubric-note"]	Δομημένη σημείωση με κατηγορίες ρουμπρίκ και δείκτες βαθμολόγησης.
testimonial	div[class~="instui-testimonial"]	Προβολή quote ή μαρτυρίας με αναφορά πηγής και προαιρετική εικόνα.
two-column	div[class~="instui-two-column"]	Διάταξη δύο στηλών με αριστερή και δεξιά περιοχή περιεχομένου.
wrapper	body[class~="instui-display-flex"]	App-shell σειρά: πλευρική πλοήγηση, container με κεφαλίδα, και προαιρετικό panel.