Packaged subflows show up as sf:undefined in the pallette

I have some subflows that I want to share with other projects and therefore, I tried to package them as a module. I followed the documentation about subflow modules in the "Creating Nodes" guide. I was able to package one of my subflows and install the module. The subflow also works as expected. However, it shows up as "sf:undefined" in the palette with a default color and icon. Node-RED seems to ignore the settings in the subflow json. How can I give it a proper name, color, icon and category? How can I package more than one subflow in the same module?

For testing, I've created a trivial subflow that simply sets the payload to "foo".

foo.json

[
    {
        "id": "f0880b6cfc44474e",
        "type": "subflow",
        "name": "foo",
        "info": "",
        "category": "",
        "in": [
            {
                "x": 40,
                "y": 80,
                "wires": [
                    {
                        "id": "b2442e2050f229ce"
                    }
                ]
            }
        ],
        "out": [
            {
                "x": 360,
                "y": 80,
                "wires": [
                    {
                        "id": "b2442e2050f229ce",
                        "port": 0
                    }
                ]
            }
        ],
        "env": [],
        "meta": {
            "module": "foo",
            "type": "foo",
            "version": "0.0.1",
            "author": "Oliver Treichel <oliver.treichel@bayer.com>",
            "desc": "Description",
            "keywords": "foo"
        },
        "color": "#DDAA99"
    },
    {
        "id": "b2442e2050f229ce",
        "type": "change",
        "z": "f0880b6cfc44474e",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "foo",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 200,
        "y": 80,
        "wires": [
            []
        ]
    }
]

This subflow gets registered via flow.js

const fs = require("fs");
const path = require("path");

module.exports = function(RED) {
    const subflowFile = path.join(__dirname,"foo.json");
    const subflowContents = fs.readFileSync(subflowFile);
    const subflowJSON = JSON.parse(subflowContents);
    RED.nodes.registerSubflow(subflowJSON);
}

The module package.json looks like this:

{
  "name": "foo",
  "version": "0.0.1",
  "description": "Test",
  "keywords": [
    "foo"
  ],
  "author": "Oliver Treichel <oliver.treichel@gmx.de>",
  "license": "UNLICENSED",
  "node-red": {
    "nodes": {
      "foo": "foo.js"
    }
  }
}

I've also created a foo.html as for "normal" modules, but this didn't work either.

<script type="text/javascript">
    RED.nodes.registerType('foo',{
        category: 'misc',
        color: '#a6bbcf',
        defaults: {
            name: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "file.png",
        label: function() {
            return this.name||"foo";
        }
    });
</script>

<script type="text/html" data-template-name="foo">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/html" data-help-name="foo">
    <p>A simple node that adds foo to the message</p>
</script>