<form id="login"> 
  <fieldset id="signin__example"> 
    <legend>Sign In</legend>
    <div class="username"> 
      <label for="input__username">Username</label>
      <input id="input__username" name="username" type="text" required autocomplete="username" placeholder="mcgyver" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$">
    </div>
    <div class="password">
      <label for="input__password">Password</label>
      <input id="input__password" type="password" autocomplete="current-password" required placeholder="········" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" title="Uppercase, lowercase and a number are required">
    </div>
    <footer>
      <menu>
        <button>Login</button>
      </menu>
    </footer>
  </fieldset>
</form>

@import "https://unpkg.com/open-props" layer(support.design-system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(support.demo);
@import "https://unpkg.com/open-props/buttons.min.css" layer(support.demo);
@import "https://codepen.io/argyleink/pen/RwxJKQa/2256560bf93a131b58b5774e840d51f0.css" layer(support.demo);

/* 
  enable auto keyword interpolation  
  https://developer.chrome.com/docs/css-ui/animate-to-height-auto
*/
:root {
  interpolate-size: allow-keywords;
}

/* enable transitions on password input container */
.password {
  transition: 
    height .3s var(--ease-3),
    opacity .3s var(--ease-3);
}

/* reveal password when username is valid */
.username:not(:has(:user-valid)) + .password {
  height: 0;
  opacity: 0;
  overflow: clip;
}











@layer support.demo {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  } 
  
  fieldset {
    display: block;
    
    > .password {
      margin-block: var(--size-3);
    }
  }
}