البرومبتات · جدول بفرز يحترم النوع

جدول بفرز يحترم النوع

الأرقام تُقارن عدديًّا والعربية بترتيبها، لا نصًّا في الحالتين

الأداة

الإطار

الوضع

اللغة

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

← جدول بتحديد وإجراءات جماعيةرأس وعمود ثابتان →

# Type-aware Sortable Table

**Role:** You are an Arabic-first UI designer and front-end engineer. Read the whole
specification before writing a single line, then follow it literally. If two requirements
conflict, favour usability over visual effect.

**Goal:** Type-aware Sortable Table — Numbers compare numerically and Arabic by its own collation — never as plain text

**Why this component matters:** Sort by the column’s real type: a lexical sort puts “10” before “9”, and comparing Arabic with a default collator ignores letter order. Declare the type per column and pick the comparator from it.

**Direction:** Genuine RTL — not a mirrored Latin layout. Use logical properties
(`margin-inline-start`, `padding-inline`, `inset-inline-start`, `text-align: start`),
never physical ones (`margin-left`, `left`). The layout must flip with `dir` on its own,
with no duplicated rules.

**Typography:** Cairo for Arabic, IBM Plex Sans for Latin. Arabic line-height must be
`0.18` higher than the Latin equivalent — dots, hamzas and maddas need more vertical room.
Arabic font-size runs `1.06×` the Latin size at the same optical weight.

**Numerals:** Western digits in both languages (`1,234.50`). Only the currency changes:
`ر.س` **after** the number in Arabic, `$` **before** it in English. Jordanian dinar
uses **three** decimal places, not two.

**Colors:** Dark mode — background `#0D142B` · surfaces `#211F54` · borders `#545C91` · text `#918FC2`.
Accent `#ADA9E8` must never exceed 8% of the screen area.

**Language:** Bilingual — every string carries both Arabic and English, and the layout
flips with `dir` automatically.

**States:** `default` · `hover` · `focus` · `active` · `disabled` · `loading` · `error`.
Do not design the resting state alone.

**Accessibility:** Contrast ratio at least `4.5:1`, complete keyboard navigation,
visible focus rings, and honour `prefers-reduced-motion`.

**Output:** Clean HTML and CSS in two separate files. No frameworks, no libraries,
no external dependencies.