Common list detail — 375 px, English · עברית · العربية
The read-only detail of frame 2 at a phone width, mirrored for right-to-left languages. Same components, same hooks; only direction, language and layout density change.
en · ltr · 375
Priority
| Label | Code | Status |
|---|---|---|
| Low | LOW | active |
| Normal | NORMAL | active |
| High | HIGH | active |
| Urgent | URGENT | active |
| Critical (legacy) | CRITICAL | archived |
he · rtl · 375
עדיפות
| תווית | קוד | סטטוס |
|---|---|---|
| נמוכה | LOW | פעיל |
| רגילה | NORMAL | פעיל |
| גבוהה | HIGH | פעיל |
| דחופה | URGENT | פעיל |
| קריטית (ישן) | CRITICAL | בארכיון |
ar · rtl · 375
الأولوية
| التسمية | الرمز | الحالة |
|---|---|---|
| منخفضة | LOW | نشط |
| عادية | NORMAL | نشط |
| عالية | HIGH | نشط |
| عاجلة | URGENT | نشط |
| حرجة (قديمة) | CRITICAL | مؤرشف |
Rules the implementation must keep
- Direction comes from the locale (
he,ar→dir="rtl"on the package root), never from a per-component prop. Layout uses logical properties only (inline-start/end,text-align: start), so nothing is re-specified for RTL. - Keys, codes, ids and API paths are LTR islands —
dir="ltr"+ bidi isolation — so the punctuation and numbers around priority never jump to the wrong side of Hebrew or Arabic text. Item codes are never translated. - Labels come from the service in the requested locale (
locale=he|ar); the frame's Hebrew/Arabic labels stand in for the list's own translations. UI chrome strings come from the package's i18n catalog. - At ≤ 40em (≈ 640 CSS px) the shell's side navigation collapses to the menu button, the item-id column is dropped, the primary action
becomes full-width and sits above the notice, and touch targets are at least the DS
--touch-target(44 px) tall. - The common-list badge glyph (◎) and the fork glyph (⑂) are not directional and are not mirrored; chevrons and back-arrows are.
Test hooks: [data-frame='11-rtl-mobile-detail'] · [data-panel='common-detail-mobile'] · [data-device='375'] · [data-locale='he'][data-dir='rtl'] · [data-locale='ar'][data-dir='rtl'] · [data-locale='en'][data-dir='ltr'] · [data-badge='common'] · [data-editable='false'] · [data-readonly-notice='platform'] · [data-action='fork-to-edit'] · [data-rules='rtl-mobile']
Playwright drives the real detail at { viewport: 375×812, locale: he-IL | ar } and asserts document.dir === 'rtl', no horizontal scroll, and that the
Fork CTA's box is inside the viewport.
Tokens only — no raw hex, spacing or type outside tokens.css / frame.css.