TODO
    * error handling & styling
    * link to form error handling
    * password show text 👁️ & clear button
    * slice propagation to owner DCE
    * tokens as in https://material-web.dev/components/text-field/#filled-text-field-tokens
        or by css in https://material.angular.io/components/input/overview
    * outlined variation
    * docs w/ how to use

cem-input is text input component from <custom-element> Material suite based on the Material Design specification, text fields in particular.

Other implementations: Material Web(Lit), Angular Material

Attributes

leading, label, trailing, supporting attributes define the text when slot with same name is omitted.
leading, trailing attributes defines the cem-icon source.
label attribute defines the label text.

Slots

leading placeholder for leading icon
label placeholder for label text
trailing placeholder for trailing icon
supporting placeholder for supporting text
warn warning text,

warn slot content would overlap the supporting slot when not empty. Default slot implementation is sensitive to validationMessage property.

Error handling and styling Something small enough to escape casual notice.
leading slot inserted before input, trailing slot injected after
trailing and other slots can become functional

Those slots can be used for error or hint UI; persistent or triggered by hover/focus.
cem-autocomplete uses trailing slot for menu with suggestions.

Click in input field to see the focus leading icon changed to

Native Form validation is supported. See also custom-element form handling
required attribute would trigger the system message if the field is empty.
Press Next button to see the browser error popup.
warn attribute and slot is used for warning message
supporting attribute and slot is used for supplementary message, hidden when warn is not empty

Underlying implementation uses HTML input. All its attributes are supported.