id: mobile-phone-input
category: mobile
difficulty: obvious
prompt: |
  Design ONLY a phone-number input field for an international
  signup screen. The field has a "Phone number" label above (with
  a red asterisk because it's required), then a single 44px-tall
  row container with rounded corners and a thin slate border. The
  row content from left to right:
    - a country selector area showing a small US flag (🇺🇸), the
      dial code "+1", and a chevron-down indicator
    - a thin vertical divider
    - the digits input area showing the placeholder text
      "(555) 555-5555" in muted slate
  Do NOT render a dropdown menu, surrounding form, or other
  inputs — just the one phone-number row.
expected:
  must_contain_roles:
    - phone-input-field
    - phone-input-row
    - phone-input-country
    - phone-input-code
    - phone-input-chevron
    - phone-input-divider
    - phone-input-digits-text
expected_tool_if_any: add_phone_input_v0
