Estoy trabajando con Material Desing para Web desde las CDNs propias de Google.
En su página recomiendan usar 1 hoja de estilos, 1 archivo de scripts y opcional la hoja de estilos de los íconos:
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Hasta ahí todo bien, pero luego cuando trato de implementar un simple input de texto, no funciona como debería.
Esto es lo que tengo
<head>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
<i class="material-icons mdc-text-field__icon">visibility_off</i>
<input type="password" class="mdc-text-field__input">
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label class="mdc-floating-label">Ingresa tu contraseña</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</body>
Pueden notar que el error es que la contraseña se superpone al label cuando el label debería ajustarse en la parte superior, tal cual como sucede en la página de material.io donde pueden ver el mismo código funcionando sin problema.
Mi duda es:
¿Me falta alguna librería adicional para que funcionen estas animaciones?
Muchas gracias.