CSS مرجع واجهة برمجة التطبيقات

تغطي مرجعية واجهة برمجة تطبيقات CSS طبقة المكوّنات القائمة على الفئات في pantoken: المكونات، الأدوات المساعدة، القواعد العالمية، والإعلانات المبنية على نظام الرموز.

المكونات

اسم	فئة	ملخص
agent-shell	.instui-agent-shell	حاوية سطحية لوكلاء الذكاء الاصطناعي.
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	منبّه مرتفع مع سهم، قابل للتموضع على أي جانب؛ يعمل كـ [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.
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> مع سهم دوّار.
toggle-group	.instui-toggle-group	كشف محدّد الحد مبني على <details>: صف ملخّص بسهم ومحتوى قابل للطي.
tooltip	.instui-tooltip	فقاعة تلميح تظهر عند التمرير والتركيز باستخدام CSS، يمكن وضعها على أي جانب.
tray	.instui-tray	لوحة مثبتة على الحافة تنزلق من أي جانب؛ عنصر أصلي [popover] أو <dialog>.
tree-browser	.instui-tree-browser	شجرة كشف تتضمن مجموعات متداخلة وعناصر ورقية، مع أسهم دوّارة.
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	أدوات 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	يخفي المحتوى بصرياً مع إبقائه متاحاً لتقنيات المساعدة (نمط القص القياسي).
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 نفس القاعدة؛ كما يقبل الهامش 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> ببيانات 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"]	قالب صف الصَدَفة للتطبيق: شريط تنقّل جانبي، حاوية مع رأس، ولوحة اختيارية.