Add caps-lock warning feature to PasswordField

[TatuLund]

Describe your motivation

It would be nice to have this warning feature integrated to PasswordField with styling that fit in Lumo design system. This would be especially important with LoginForm where the access to actual PasswordField in Flow requires more JavaScript use to achieve the desired outcome.

Describe the solution you'd like

Show warning text when caps lock is activated in PasswordField instead of the helper text using Lumo warning text color.

Add property for the warning text, so that it can be customized for e.g. internationalization or set null for disabling the feature.

Describe alternatives you've considered

No response

Additional context

Workaround for LoginForm when using Flow

@Route(value = "password", layout = MainLayout.class)
public class PasswordView extends Div {

    String javaScript = """
            function isCapsLock(event) {
                return event.getModifierState && event.getModifierState( 'CapsLock' );
            };
            function setWarning(field, e) {
               if (isCapsLock(e)) {
                   console.log('Caps on');
                   field.helperText='Warning: Caps on';
                   field._helperNode.style.setProperty('color', 'var(--lumo-warning-text-color)');
               } else {
                   field.helperText=undefined;
               }
            };
            const field = this.getElementsByTagName('vaadin-password-field')[0];
            field.addEventListener('keydown', (e) => setWarning(field, e));
                    """;

    public PasswordView() {
        LoginForm form = new LoginForm();
        form.getElement().executeJs(javaScript);
        add(form);
    }
}