RTL: right-align number next to the flag/dial-code button (pure-CSS layout)

[johnnyshields]

Summary

Builds on the logical-properties RTL work (rtl-logical-properties, PR jackocnr#2181) with an opinionated RTL layout for TableCheck: the phone number is right-aligned so it sits next to the country button, and the number, the separate dial code and the flag read as one group hugging the flag — e.g. 51 234 5678 +966 🇸🇦 — inside a full-width field.

[            51 234 5678  +966  ⌄ 🇸🇦 ]      (RTL)

This is a TableCheck-specific layout preference, kept as a separate PR so jackocnr#2181 stays the minimal, upstreamable logical-properties fix.

No direction detection in JS · one dial-code position · pure-CSS layout

• ui.ts — no getComputedStyle/direction checks. The separate dial code keeps one position (inside the country button, the upstream default) that serves both LTR and RTL.
• Layout is pure CSS, scoped to :dir(rtl): right-align the number and put the flag-clearance on the input's physical inline-end.
• The one JS touch is a measurement, not layout/direction logic. Browsers resolve a tel input's own direction as LTR even inside an RTL page, so ui.ts's existing flag-clearance padding-inline-start lands on the physical LEFT — the wrong side when the country button is on the right. ui.ts now also publishes that already-measured button width as the --iti-country-clearance custom property; the :dir(rtl) rule neutralises the left padding and re-applies the clearance on the right. The direction/side decision is 100% in CSS — JS only reports a width (exactly as upstream already does for padding-inline-start).

The :dir(rtl) scope is keyed off the wrapper's directionality (a plain <div>, whose :dir resolves reliably), so it doesn't depend on the <input>'s own (LTR) :dir.

Scoped to RTL — LTR is byte-for-byte unchanged

All CSS is under :dir(rtl); the JS change only sets a custom property (LTR keeps using the same inline padding-inline-start it always did). Concretely: only the RTL visual snapshot changes — the other 8 snapshots are pixel-identical, and the field keeps the consumer's width with the dropdown aligned under it.

Testing

• Visual snapshots regenerated in the pinned Docker/linux env; verified the RTL result (51 234 5678 +966 🇸🇦 in a full-width field, no overlap, a space before the dial code, dropdown aligned) and that the 8 non-RTL snapshots are unchanged.
• Full node unit suite green (508 passing); typecheck clean; no test changes needed.

Base

Targets rtl-logical-properties so the diff is just this RTL layout on top of the logical-properties conversion.