SZ365 · Phase 0

دليل المكوّنات الحي

كل عنصر مرئي في الأنماط الأصلية (68 شاشة) يجب أن يُبنى من الرموز والمكوّنات هنا. إذا احتاجت شاشة إلى شيء غير موجود، يُضاف هنا أولًا — لا تُضاف ألوان أو مقاسات مخصّصة داخل صفحات الشاشات.

اصطلاح data-action

كل عنصر قابل للتنفيذ في أي شاشة يحمل data-action بصيغة فعل-اسم بأحرف صغيرة وشرطات، مطابقًا لعمل حقيقي من قسم «الإجراءات والتفاعلات» في الملخص. جذر كل شاشة يحمل data-screen بالمسار (route) كما ورد في الجرد.

• data-screen="/sellers/[slug]/products/[id]"على عنصر الجذر لكل صفحة شاشة
• data-action="add-to-cart", data-action="apply-coupon", data-action="confirm-charge" …فعل-اسم، بالإنجليزية دومًا
• data-state-root / data-state="loading|empty|error|success|no-permission|offline"لعرض كل حالة كقسم قابل للتبديل

الرموز

الألوان

عائلة علامة تجارية واحدة عبر التطبيقات الثلاثة: أخضر مزرق (Teal) للثقة والفعل الأساسي، وذهبي دافئ لعروض المتجر والتخفيضات فقط. الأخضر الزمردي محجوز حصرًا لحالة النجاح/التوفر.

الرموز الدلالية

الرموز

الطباعة

IBM Plex Sans Arabic أولًا مع IBM Plex Sans كرفيق لاتيني، وIBM Plex Mono للرموز. احتياطي بخطوط النظام عند فتح الملفات بلا اتصال.

font-family: var(--font-sans) · var(--font-mono)

English mirror

الرموز

المسافات، الانحناء، الظلال

شبكة 4px للمسافات.

أساسيات

الأيقونات

مجموعة SVG واحدة مُضمّنة في كل صفحة. سهام الاتجاه فقط تنعكس تلقائيًا مع RTL عبر icon--start / icon--end.

المجموعة الأولى: أيقونات اتجاهية — تنعكس دائمًا

معناها اتجاهي، وتُرسم متجهة نحو نهاية السطر ثم تحمل icon--start أو icon--end فتنعكس تلقائيًا في RTL.

المجموعة الثانية: أيقونات لا تنعكس أبدًا

عدسة بحث أو ساعة أو نجمة معكوسة هي العلامة الكلاسيكية على واجهة RTL رديئة — لا تضع icon--start / icon--end على أيٍّ منها.

مكوّنات

الأزرار

فعل أساسي واحد فقط لكل شاشة.

الأنواع

المقاسات

الحالات

مكوّنات

الشارات

نظام ألوان دلالي ثابت يُستخدم في كل مكان.

مثال: DRAFT / ACTIVE / OUT_OF_STOCK / ARCHIVED ← neutral / success / warning / danger.

قاعدة: الذهبي للشارات التحريرية، والتخفيض له badge--sale الأحمر الصلب — وليس badge--danger.

مكوّنات

عناصر النماذج

أبدًا حجم خط أقل من 16px لأي حقل إدخال.

خيارات، مفاتيح، عدّاد

رفع ملف

مكوّنات

البطاقات

مكوّنات

الجداول

النمط الأكثر تكرارًا عبر 68 شاشة.

مكوّنات

النوافذ المنبثقة

تُغلق بـ Esc أو النقر خارجها، وتُعيد التركيز للعنصر الذي فتحها.

نمط

نمط الإجراءات المدمِّرة — واحد فقط

كانت هناك أربع طرق مختلفة لتأكيد إجراء مدمِّر عبر الأنماط. هذا القسم يحسم الأمر: نافذة تأكيد واحدة بصياغة واحدة.

1. متى يلزم تأكيد

• irreversibleكلها تمرّ عبر نافذة تأكيد بلا استثناء.
• one-wayوكذلك ما لا يمكن سحبه بعد إرساله.
• reversibleالقابل للتراجع يبقى فوريًا، ولا يحمل btn--danger أبدًا.
• validate firstالتحقق يسبق فتح النافذة.

2. البنية — لا تخترع بنية ثانية

data-modal-open="id" · .modal-scrim · .modal--danger.modal--sm · role="alertdialog" · .btn--secondary[data-modal-close] · .btn--danger[data-action]

هذه البنية الوحيدة المسموح بها لأن prototype.js يمنحها حصر التركيز وEsc وقفل التمرير وإعادة التركيز.

3. قاعدة الصياغة

4. مضاد للمثال: الأحمر ليس لونًا للتصفية

الأحمر للأخطاء والإجراءات المدمِّرة فقط. مُبدِّل تصفية بلون خطر استخدام خاطئ للدلالة.

5. حالة التنفيذ

زر التأكيد وحده ينشغل (is-loading + aria-busy + disabled)، والإغلاق عبر SZ.closeModal فقط.

6. أين طُبِّق النمط

• delete-addressتسمّي النافذة العنوان بعينه.
• cancel-orderمتاح على حالة «جديد» فقط.
• submit-return-requestلا يُسحب بعد إرساله، فيمرّ بنفس النافذة.
• remove-lineبلا تأكيد عن عمد.

مكوّنات

التبويبات

لتقسيم الصفحات الطويلة إلى أقسام.

مكوّنات

التنبيهات والإشعارات

إشعار عابر

مكوّنات

حالات الشاشة

كل شاشة تُظهر حالاتها عبر هذا المُبدّل التلقائي.

مكوّنات

متفرقات

مسار التصفح

ترقيم الصفحات

تلميح

عنصر تحكم مقسّم

رقائق التصفية

شريط تقدّم

محدّد:

غير محدّد:

مخطط زمني للحالة

الصورة الرمزية وجرس الإشعارات

مكوّنات · التجارة

منطقة التجارة

كل ما يلي مُعرَّف في components.css أقسام 18–20 ومكتوب مرة واحدة. كل عيّنة هنا مُجمّعة من تلك الأصناف فقط، وتظهر بمقاسات عناصر التحكم الحقيقية للمتجر.

القواعد المُشفَّرة في هذه المكوّنات

عنصر يعرض ادّعاءً لا تستطيع العقود دعمه هو عيب، لا خيار تصميمي. القواعد أدناه مُشفَّرة في الأصناف نفسها.

• <bdi data-money-halalas>المال داخل bdi مجرّد بلا dir. الأرقام المجرّدة وحدها تأخذ dir=ltr.
• .product-card__ratingصفر تقييمات = لا شيء، مع بقاء ارتفاع الخانة محجوزًا.
• .price · .buy-box__compare-atالخانات المحجوزة تُبقي البطاقات على ارتفاع واحد.
• .product-cardلا زر «أضف للسلة» على بطاقة في المول — السلة لكل متجر، والإضافة من متجر ثانٍ تمسحها.
• .trust-rowلا وعد بتاريخ توصيل، ولا مدة إرجاع بالأيام من حقل نصّي حر.
• .price__compareالسعر المشطوب فقط عند تخفيض حقيقي بسعر مرجعي مُثبت.
• .shop-card · .badge--brandكل متجر في المول موثّق بحكم التعريف، وتجّار الجملة غائبون عنه هيكليًا.
• .cart-summary__noteالدفع عند الاستلام أو عند الاستلام من المتجر فقط — لا معالجة بطاقات.

مكوّنات · التجارة

بطاقة المنتج (الإصدار 2)

مكوّن واحد يُستخدم في كل أسطح المول، بترتيب أجزاء ثابت حتى تقصّ البطاقة العربية والإنجليزية عند النقاط نفسها.

.product-card · .product-card__media--empty · .badge--sale · .product-card__stock

الحالات الأربع، على ارتفاع واحد

بالترتيب: عادية · مخفّضة · بلا تقييمات (حالة الإطلاق) · غير متوفرة. أسعار البطاقات الأربع على خط واحد رغم اختلاف المحتوى.

البطاقة ليست وسمًا واحدًا: رابط الاسم يمتدّ فوق البطاقة، لأن الروابط المتداخلة ترميز غير صالح.

كثافة الشبكة: 2 / 3 / 4

مسارات صريحة لا auto-fill. الشبكة الحقيقية تختار عدد الأعمدة من عرض النافذة؛ العيّنات هنا مثبّتة للمراجعة فقط.

الهيكل العظمي بجانب البطاقة الحقيقية

نفس المقاسات تمامًا، فلا تقفز الشبكة عند وصول النتائج. أي تغيير في هندسة البطاقة يجب أن يُنسخ هنا.

مكوّنات · التجارة

كتلة السعر

ترتيب المصدر هو الميزة: السعر المستحق أولًا، ثم المشطوب، ثم النسبة — ولا يُعاد ترتيبها بـ order أبدًا.

.price · .price__current · .price__compare · .price__discount-badge · .price__save · .price__vat-note · .price--lg

• <bdi> no dirلا مبلغ يحمل dir — هذا هو الفرق بين الترتيبين بصريًا في العربية.
• <s> + .visually-hiddenالشطب وحده غير مُعلن، فيحمل كل سعر مشطوب تسمية مخفية.
• .price__discount-badge«-25%» أرقام مجرّدة فتأخذ جزيرة LTR — عكس السعر تمامًا.
• .price__saveصفحة المنتج فقط: خانة البطاقة تتّسع لسطر داعم واحد، وهو ملاحظة الضريبة.
• .price__vat-noteمتجر غير مسجَّل ضريبيًا لا يعرض أي صياغة ضريبية إطلاقًا.

مكوّنات · التجارة

النجوم والتوزيع

التقييم مقياس يمتلئ في اتجاه القراءة، والفرق بين نجمة ممتلئة وفارغة هو التعبئة لا اللون.

.rating--sm · .rating--lg · .rating__link · .rating-histogram

توزيع التقييمات

الأشرطة تنمو من حافة بداية السطر. النسخة التفاعلية وحدها تأخذ أرضية الهدف 44px.

مكوّنات · التجارة

المراجعات

المراجعات من المشترين الموثّقين فقط؛ التاجر يردّ ويبلّغ ولا يخفي ولا يحذف. هذا التباين هو الميزة نفسها.

.review-summary · .review-card · .review-card__reply · .review-invite · .star-input · .write-review-sheet

ملخّص التقييم

بطاقات المراجعة

• .review-card__body[dir]جسم المراجعة يتبع لغة المراجعة لا لغة الصفحة؛ الاسم والتاريخ والأزرار تبقى باتجاه الصفحة.
• .review-card__metaخانة محجوزة بارتفاع الشارة، وإلا بدأت كل بطاقة عند إزاحة مختلفة.
• .review-card__replyردّ التاجر مُزاح ومُشار إليه بشارة، وخطّه ليس بلون المتجر عمدًا.
• .review-cardلا زرّ إخفاء ولا زرّ حذف في هذا المكوّن — الغياب هو الميزة.

حالة الصفر: دعوة، لا قائمة فارغة

إدخال النجوم ولوح كتابة التقييم

مكوّنات · التجارة

التصفية والترتيب والتنقل

شريط تصفية دائم بدل نموذج مربّع، وكل عامل تصفية مطبَّق يصير رقاقة قابلة للإزالة.

.search-shell · .facet-rail · .facet-group · .facet-option · .filter-chips · .result-header · .sort-select

لا نتائج — طريق للأمام، لا طريق مسدود

مسار التنقل (بنية ol الجديدة)

توسعة للمسار الموجود: بنية nav/ol، وآخر فتات يُقصّ بنقاط، وaria-current على الحالي.

الترقيم

مكوّنات · التجارة

الألواح السفلية والشريط الثابت

اللوح السفلي يركب آلية النوافذ الموجودة: مصيدة تركيز واحدة فقط، وفوق عرض الجوال يصير نافذة وسطى عادية.

.modal-scrim--sheet · .bottom-sheet · .sheet-option · .sticky-cta

قلّص عرض النافذة تحت 768px قبل الفتح لرؤية شكل اللوح السفلي بدل النافذة الوسطى.

الشريط الثابت

• .guide-unfixالشريطان في الحقيقة مثبّتان بحافة الشاشة؛ أُلغي التثبيت هنا بقاعدة خاصة بالدليل فقط.
• .has-sticky-ctaالصفحة تأخذ الصنف المقابل، وإلا جلس آخر صفّ تحت الشريط إلى الأبد.
• --shop-accentالنسخة الملوّنة تظهر بلون المنصة لا المتجر: مسار الدفع سكك المنصة.

مكوّنات · التجارة

صفحة المنتج: المعرض وصندوق الشراء

عمودان، والعمود القصير هو الملتصق — وهذا وحده يحذف الربع الفارغ تحت صندوق الشراء.

.pdp-layout · .pdp-gallery · .buy-box · .variant-chips · .qty-stepper · .trust-row · .shop-attribution

• .variant-chip[aria-disabled]المتغيّر غير المتوفر يبقى معروضًا وقابلًا للتركيز — حذفه يطرد المتسوّق.
• .variant-chipsرقائق لا جدول: الجدول كان يفقد محاذاة أعمدته عند كل صفّ نافد.
• .qty-stepper__valueالكمية عدد مجرّد فتأخذ جزيرة LTR — عكس السعر فوقها مباشرة.
• .buy-box__compare-atخانة محجوزة، وإلا قفز زرّ الشراء تحت إبهام المستخدم عند تبديل المتغيّر.
• .trust-rowأربعة بنود مدعومة بحقول موجودة، ولا بند خامس عن التوصيل.
• --shop-accentلون المتجر مسموح له بستة مواضع فقط — وزرّ الدفع ليس منها.

حبّات التوافر وعدّاد الكمية

مكوّنات · التجارة

سطر السلة وشريط الملخّص

عمودان: الأسطر تأخذ مساحتها الحقيقية، والملخّص يبقى مثبّتًا في الرؤية طوال التمرير.

.cart-layout · .cart-line · .cart-line__error · .cart-summary

• .cart-lineمناطق شبكة لا صفّ مرن: إسقاط خلية لا يحرّك بقية الخلايا.
• .cart-line__errorعمدًا بلا حجز ارتفاع: السلة قائمة رأسية، وحجز خانة حمراء على كل سطر يرسم إيحاء خطأ زائفًا.
• .cart-summary__totalالإجمالي مجموع الأسطر فوقه حسابيًا — سطر توصيل يُعرض ولا يُضاف عيب موثّق.
• .cart-summary__ctaزرّ الدفع بلون المنصة دائمًا، ولا معالجة بطاقات في المنصة أصلًا.

مكوّنات · التجارة

كتل المتجر

المربّعات والبطاقات والأشرطة التي تبني واجهة المول ودليل المتاجر وصفحة المتجر.

.category-tile · .shop-card · .shop-header-band · .pre-footer-strip · .seller-legal-block

مربّعات الفئات

ثمانية تصنيفات من المستوى الأول كمربّعات 1:1 مظلّلة — مسار التصفّح الذي لا يخدمه شريط الرقاقات وحده.

بطاقات المتاجر

شريط رأس المتجر

شريط القيمة قبل التذييل

هوية البائع النظامية

رموز · التجارة

ثيمات المتاجر الثمانية

هذه القيم هي SHOP_THEME_HEX من العقود حرفيًا — لا تُحسَّن يدويًا، بل تُولَّد من العقد.

[data-shop-theme="TEAL"] · --shop-accent · --shop-accent-hover · --shop-accent-subtle · --shop-on-accent

• [data-shop-theme]يوضع على منطقة محتوى المتجر لا على الجذر.
• --shop-on-accentأبيض للثمانية جميعًا، وكلٌّ منها يتجاوز 4.5:1.
• .sf-header .sf-footer .sticky-ctaهذه الأسطح تُعيد ضبط اللون بنفسها، فلا يستطيع ثيم في غير موضعه طلاءها.

قاعدة صارمة

تضمين الأرقام باتجاه LTR

كل رقم أو سعر أو SKU أو رقم طلب يُغلَّف بـ <bdi dir="ltr"> — حتى في منتصف جملة عربية.

أساسيات

هياكل التطبيقات الثلاثة

اليوم ثلاثة تطبيقات منفصلة بلا هيكل مشترك؛ هنا هيكل واحد لكل تطبيق مبني على نفس الرموز مع تجميع منطقي بدل قائمة مسطّحة.

المتجر الإلكتروني — جوال أولًا

الميرشانت + نقطة البيع

الشريط الجانبي يُطوى إلى شريط أيقونات لتعظيم مساحة العمل في نقطة البيع.

الأدمن