root
1.4 KiB
1.4 KiB
| 1 | Screen | Callout | Region | Rule |
|---|---|---|---|---|
| 2 | desktop-en-light | 1 | Sticky header | Desktop nav appears only at >=1120px; orange reserved for demo. |
| 3 | desktop-en-light | 2 | Hero copy | Single h1; primary demo before tour in reading order. |
| 4 | desktop-en-light | 3 | Product preview | Illustrative status must remain visible internally and approved before launch. |
| 5 | tablet-fr-light | 1 | Medium navigation | Drawer mode remains below 1120px; avoid squeezed desktop controls. |
| 6 | tablet-fr-light | 2 | French expansion | Text blocks grow vertically; no fixed card heights or truncation. |
| 7 | mobile-ar-dark | 1 | Document RTL | Root dir=rtl; content aligns start and order follows Arabic reading. |
| 8 | mobile-ar-dark | 2 | Compact CTAs | Buttons remain 44px minimum and may stack/content-wrap. |
| 9 | mobile-drawer-ar-dark | 1 | Inline-start drawer | Drawer opens from right in RTL. |
| 10 | mobile-drawer-ar-dark | 2 | Focus boundary | Background inert; focus starts at close and loops inside. |
| 11 | demo-dialog-en-light | 1 | Dialog heading | Programmatic name comes from visible heading. |
| 12 | demo-dialog-en-light | 2 | Form labels | Visible labels stay present; required state is announced, not only asterisk. |
| 13 | demo-dialog-en-light | 3 | Submission area | Persistent errors and submit remain reachable with virtual keyboard. |
| 14 | tour-dialog-fr-dark | 1 | Progress | Localized step count announced politely. |
| 15 | tour-dialog-fr-dark | 2 | Step focus | Step heading/article receives focus after navigation. |
| 16 | tour-dialog-fr-dark | 3 | Actions | Back/Next meaning stays explicit; layout follows direction. |