Command Palette

The rows run RTL while command names arrive mixed: "فتح Pull Request جديد", or a label ending in PDF. Neutral characters touching the Latin run (colons, brackets, an ellipsis, a slash) join the Arabic text around them and move to the far end of the line. Wrap every label in <bdi>, which carries dir="auto" and unicode-bidi: isolate together and turns that label into a direction unit of its own that nothing outside can reorder. Do not settle for dir="auto" on the list container: the algorithm takes the direction from the first strong character inside the element, so every row inherits the direction of the first one.

The hint sits at the logical end of the row, which puts it on the left in Arabic: use margin-inline-start: auto inside the flex row, never margin-left: auto and never a float. The order of the keys inside the hint mirrors nothing, and the glyphs command, shift and option are all bidi class ON (other neutral) in Unicode, so in an Arabic context they take the paragraph direction, detach from the Latin letter after them, and render with the symbol to the right of the letter instead of the left. Put dir="ltr" on the key container, or wrap it in <bdi dir="ltr">. If each key is its own <kbd> in a flex row, the inline axis itself flips and shows K before the command glyph: the fix is direction: ltr on the container, not flex-direction: row-reverse.

Do not pin dir="rtl" on the command field. People in an Arabic palette type settings and PDF in Latin, and in a field locked to rtl the trailing dot, slash or bracket joins the Arabic paragraph and jumps to the opposite end of the field. Put dir="auto" on the input itself: HTML resolves an input direction from the first strong character of its value, and falls back to the parent element while the value is empty, so the Arabic placeholder stays on the right and the field turns ltr on the first Latin letter. A dir="auto" on the wrapper around the input does nothing at all, because that computation walks text content and never sees the value of an input.

The thin bar marking the active row stands at the logical start of that row: either a ::before pinned with inset-inline-start: 0, or border-inline-start-width: 2px on the row itself with a transparent colour on the others so the text does not shift as the highlight moves. Do not draw it with box-shadow: inset 2px 0, because shadow offsets are purely physical and CSS gives them no logical form, so the bar stays on the wrong side after the flip. The command icon follows the same logical start through flex order and never needs a margin-right.

Matching a press with event.key === "k" breaks for an Arabic user: event.key carries the character the layout produces, and the key printed K on a standard Arabic layout produces ن. event.code describes the physical position and stays "KeyK" whatever the layout, so bind to that, or accept both values. The other half is display: what you print in the hint has to match the letter printed on the key the user is pressing, so read the character from navigator.keyboard.getLayoutMap() where it exists and fall back to the Latin letter, instead of hard-coding it from the code. None of this is a direction problem: the same rule holds for Persian, Hebrew, and every non-QWERTY layout.