[v2/3] New feature: Better UX, Mark Optional inputs

We've create a code to improve UX in forms, for optional/required inputs. It's based on the criteria that the user get more focus when he/she has optionals input marked than the required ones.
I hope it could be added to next releases!

Ex:

Add this css:

			.opcional {
				color: #999;
				font-size: 11px;
				position: absolute;
				top:  10px; right: 4px;
			}
			.item-content.item-input.item-input-with-value .opcional {
			  
			    display: none;
			}

			input[type="text"].input-with-value, 
			input[type="search"].input-with-value  {
			    padding-right: 30px;
			} 

			.item-input-wrap.item-input-opcional input[type="text"].input-with-value {
			    padding-right: 80px;
			}
			
			.focus-state .opcional,
			.not-empty-state .opcional { display: none }

And this code on pageInit:

              $('.page.page-next .item-input-wrap').each(function()
              {
                  if ( !$(this).find('input, textarea, select').attr('required') )
                  {
                      if ($$(this).find('input, textarea, select').length > 0) {
                          if (!$$(this).find('input, textarea, select').hasClass("readonly")) $(this).append('<span class="opcional">Opcional</span>');
                      }

                  }
              });

No source files or tests are named. Start by locating the form and input component implementation and its existing required-field handling, then compare the proposed CSS and pageInit behavior with the framework's conventions. Done means optional inputs are visibly marked, the marker disappears when appropriate, and required or readonly inputs are unaffected.